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.
Can you share your codepen and /or your storyline ? Then somenone might help... as is the info is a bit sparse.
As im trying to recreate something like this with the sparse information you shared...for now i notice a few things you might have missed.
Scope...all Storyline triggers have a local scope, so you have to watch for that... check my posts on GSAP to find more info on that.
Variables in Storyline are always strings. So you have to watch that too.tl.add in GSAP accepts tweens. So an already created or new tween...either another timeline or gsap.to part.
All the basics you mentioned above do work in my sample. Do share a sample for better help.
Im quite sure now the main issue in your setup is scope.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.So now this works basically...
https://360.articulate.com/review/content/ae613764-215a-471d-b914-c1f6fc31c6b3/review
Created the GSAP timeline on start of the slide. Just a empty tl. Passed that as variable to Storyline and read it in on the addbuttons. Then add the new timeline you want to add to it...and it works fine.
Might need some finetuning on pausing the master timeline at start...as now it is running and when adding a timeline...it starts a bit weird... but the basic principle works... main issue is scope.
Actually this gives me the idea to create editable small animations for our University where on live Storyline animations teachers can customize it by adding timelines...
