[AirPods canvas animation timeline]

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!

[AirPods canvas animation timeline]

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: 

[AirPods canvas animation timeline]

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.

 

 

[AirPods canvas animation timeline]

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

[Showing and hiding multiple videos]

Hi all,

 

Been banging my head against this for a while, so I thought it was time to ask some help to you fine folks!

 

Basically, I'm looking for a way to completely hide and show multiple video's.

 

Video 2 should only be shown once video 1 is done. In addition, video 1 should also be completely gone once it's over.

 

I've tried adding display: "none" and display: "block' to the fromTo, but it also runs only once. 

 

What would be the best way to go about this?

Thanks in advance!

[Just got started, confused about the layered pinning]

Hi all,

I'm just getting started with ScrollTrigger (and GSAP), so I'm sorry for the noob question.
 

As you can see in the Codepen I've created a section underneath all the panels (.test), but for some reason it sits underneath all the gsap panels.

I've set this new element as an endTrigger and the end is at the top of this element, yet it just gets overlayed. 
 

Any idea what I'm doing wrong?

 

Thanks in advance!

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