Strange behavior in the timeline

Hello there, Stefano!

Thanks for sharing that GIF, it's super helpful to see what's going on! I'm having trouble recreating the shape to group switch in a new Storyline 360 file (here's a quick video of the test).

What Storyline update are you running? You can find this detail by clicking on the Help tab, then About Storyline. Also, do you notice a change when importing the slides into a fresh project file?

I'm eager to find the culprit!

Hi Katie, 

sorry for the late reply; I'm running the latest update; 

This was just a demo I was working on (which I haven't completed and will not) not a real project, was just testing an idea;  I just thought it was a bit weird and wanted to point it out;

checking today the file again and don't see it happening;

I've attached it here if you want to play around with it...

thanks,

ciao.

Hi Stefano,

Thanks for sharing the file! I tested it a couple of times and wasn't able to replicate what you were initially seeing!

Hopefully it doesn't come back, but if it does, let us know and we'll do some further digging into this quirky behavior!

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.

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...