Forum Discussion
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:
- If I try to play the tl timeline, with the first two boxes, nothing happens.
- If I try to play the tl1 and/or tl2 timelines separately, is jumps around or start tweening near the end of the timeline.
- If I try to play the tl timeline after playing tl1 and tl2, it works fine.
- 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.
You better start a new post on this John, as it is not related to the Storyline timeline but is pure GSAP javascript in Storyline.
First setup working nicely.
https://360.articulate.com/review/content/dc244455-16be-4f38-8337-be7854d5b8bf/review
Any of the 3 timelines act when clicked...and keep looping. Issue however still is that if you click again the behaviour gets erratic. Obvious... you should kill the tween first..or disable the button... al doable.
As all the actions are now on the buttons...none of the 3 timelines has knowledge of the other ones... thats because of the local scope of Storyline triggers. Gonna fix that by getting the functions of from the buttons and into the main html...then i can call them at will.