How to Carry forward an animation from one timeline to another?

[Sajidul Islam]

Hi,

 

I've been struggling to make an animation and I couldn't find a way to do this.

 

As per my demo, Lets say I have 4 different section and timeline. An elements should start animating from the first timeline and it will continue from the second timeline and so on.

 

In my demo it's bit jumpy and Its not smooth at all.  (Please see the comment's inside the code for more details)

 

I tried to do it with addPause and it didn't work as expected.

 

 

Any help would be highly appreciated.

 

 

Many Thanks,

Sajidul

See the Pen JjxxvRX by sajidulislam0 (@sajidulislam0) on CodePen

[mvaneijgen]

I would span the whole ScrollTrigger over all the sections and use one timeline to control everything 

 

See the Pen wvNNXpv?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Or again use one timeline and have each ScrollTrigger tween to the next label on the timeline, this is a lot more involved and you'll need to do some custom logic on what to do when the visitor scrolls back (tween to previous label) and what do to when someone scrolls past everything really fast. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

Hope it helps and happy tweening! 

 

See the Pen wvNNxwW?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Sajidul Islam]

Hi @mvaneijgen,

 

This is exactly what I was looking for. Just one thing, Could you please help to add the code to pause the element for specific time? Lets say I want to pause the element  for 2 sec after finishing the Opacity 0.4 and before starting the next timeline?

 

[mvaneijgen]

Just add and empty tween to the timeline where you want the delay to happen for the amount of time you want tl.add(() => {}, "+=2");

 

See the Pen wvNNxwW?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen