Strange behavior in the timeline

Hi, I'm developing an website and I'm trying to separate a big animation into smaller timelines, but I'm getting a strange behavior when using tl.add().
I recreated it on Codepen in a simpler manner than in my website.
On Codepen I have 3 boxes, each with it's own TimelineLite instance, and then I have the variable tl, and I added the first 2 timelines in it.
What happens is:

1. If I try to play the tl timeline, with the first two boxes, nothing happens.
2. If I try to play the tl1 and/or tl2 timelines separately, is jumps around or start tweening near the end of the timeline.
3. If I try to play the tl timeline after playing tl1 and tl2, it works fine.
4. you should also check this discussion: https://community.articulate.com/articles/storyline-360-working-with-france-triggers

The third box wasn't added to the tl timeline to use as reference of an animation playing without problems if not added to another timeline.