AirPods canvas animation timeline

[eravulgaris]

Hi all,

I'm wondering why my timeline isn't behaving like a normal timeline in this example. As in: the h1 title animates immediately and doesn't wait for the previous animation to finish.

 

I'm also wondering if it would be possible to animate a second canvas after all this and if that would be advisable (performance wise).

 

Thanks in advance!

See the Pen gOKxaKe by jvlvl-z (@jvlvl-z) on CodePen

[Rodrigo]

Hi,

 

It seems that the issue is that the H1 tag is inside the section you are pinning, so it's being scrolled up as ScrollTrigger scrubs your animation.

 

Maybe this is what you're trying to do:

See the Pen NWzvdNY by GreenSock (@GreenSock) on CodePen

 

Hopefully that helps. Let us know if you have more questions.

 

Happy Tweening!

[eravulgaris]

18 hours ago, Rodrigo said:

Hi,

 

It seems that the issue is that the H1 tag is inside the section you are pinning, so it's being scrolled up as ScrollTrigger scrubs your animation.

 

Maybe this is what you're trying to do:

 

 

 

Hopefully that helps. Let us know if you have more questions.

 

Happy Tweening!

Hi Rodrigo,

Thanks for your answer!

 

Sorry, maybe my question wasn't clear enough, but as you can see, the airpods animation is still going on when the red title animation (y: -500) is starting. 

I meant that the AirPods animation should be completely finished before the title animation runs.

 

 

[mvaneijgen]

Your overall timeline has a scrub: true, this makes it animate on the users scroll position, but you overwrite this scrub (TIL you can overwrite ScrollTrigger properties within a tween!? Edit: No you can't!) within the frame animation and set it to 0.5, this makes it lag behind 0.5 seconds, which will result in it still playing when the next animation is already in view. 

 

You could do a few things to resolve this: 

• Set the scrub the same for all animations on the timeline. 
• Have a delay of 0.5 on the next animation either with the position parameter or a delay: 0.5 on the tween 

 

Hope it helps and happy tweening! 

[eravulgaris]

32 minutes ago, mvaneijgen said:

Your overall timeline has a scrub: true, this makes it animate on the users scroll position, but you overwrite this scrub (TIL you can overwrite ScrollTrigger properties within a tween!?) within the frame animation and set it to 0.5, this makes it lag behind 0.5 seconds, which will result in it still playing when the next animation is already in view. 

 

You could do a few things to resolve this: 

• Set the scrub the same for all animations on the timeline. 
• Have a delay of 0.5 on the next animation either with the position parameter or a delay: 0.5 on the tween 

 

Hope it helps and happy tweening! 

Hi,

I've adjusted the scrub to true and the issue persists. I've added a second title in green to more easily show the issue. As you can see the red title animation immediately starts playing, with the red title animating once the previous animation is done (and this is correct behavior).

 

However, the AirPods animation seems to be stretched over this whole timeline.

 

Edit: Codepen has been adjusted: 

Edited November 16, 2022 by eravulgaris

[mvaneijgen]

42 minutes ago, mvaneijgen said:

(TIL you can overwrite ScrollTrigger properties within a tween!?)

Ha!, well this is not the case, by defining an extra ScrollTrigger object within a tween you'll define a second ScrollTrigger that has nothing to do with your timeline and will just overwrite what you'll try to do within the ScrollTrigger in your timeline. 

 

So don't do that! 

 

Removing the ScrollTrigger in your tween will fix your issue. 

 

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

[eravulgaris]

2 minutes ago, mvaneijgen said:

Ha!, well this is not the case, by defining an extra ScrollTrigger object within a tween you'll define a second ScrollTrigger that has nothing to do with your timeline and will just overwrite what you'll try to do within the ScrollTrigger in your timeline. 

 

So don't do that! 

 

Removing the ScrollTrigger in your tween will fix your issue. 

 

 

 

 

Aha! Thank you for all your help!

[GreenSock]

Circling back to share a little helper function that might make this easier for folks to implement: 

See the Pen VwgevYW?editors=0010 by GreenSock (@GreenSock) on CodePen