Multiple non-scrubbed animation steps inside a scrolltrigger timeline

[Adel]

Hi!

I would like to create a timeline animation that has three stages and that is pinned.

I would like the transitions between the stages to happen without scrubbing, but not all transitions should happen right after the other, each subsequent transition would be triggered by further scrolling.

 

My goal would be implementing something very similar to what is showcased below (Fifth section of the page):

https://ooono.dk/products/ooono-codriver-no1 

 

Could you please advice me on what approach I should take?

Thank you for your help

[mvaneijgen]

The best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first, create a timeline that does this animation. I like to add paused to an animation with an empty tween like so tl.add(() => {}, "+=1") this does nothing for 1 second and when you're happy with you animation hook it up to ScrollTrigger. 

 

You could browse the ScrollTrigger codepen collection to see if anyone has already made something like this, but in theory the animation is really simple. Just try your hand at a minimal demo and when you're suck post back here.

 

https://codepen.io/collection/DkvGzg

 

[Adel]

Hey mvaneijgen than you for your answer! 

 

I already have the animation - the part that is missing is the "hooking it up to scrolltrigger".

I created a demo with a very simple animation that has 2 stages. As you can see the entire animation happens at once.

 

See the Pen PoegJQN by adelkov (@adelkov) on CodePen

 

I would like the box to transition to yellow when the trigger (blue) area hits the top of the page. 

The blue area should be pinned.

When this transition is finished I would like to be able to scroll further (trigger area still pinned) and have the box transition to green.

When this is finished playing the pinning should be released.

 

[mvaneijgen]

Ok, we love to see minimal demos, this makes it so much easier to help! What I would do is something like this. I've added labels to your animation, these are points where certain animations are done and with the ScrollTrigger snap property you can snap to these points in the timeline, so by scrolling just a little bit it will snap to the next label. There are a lot more options in the snap property like the duration of the snap and easing type, this all can be found in the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

I've also add some empty tweens to your timeline this means nothing is happening for that duration of the timeline, this makes it so that the boxes stationary when scrolling through that part.

 

And at last I've set scrub: true in your ScrollTrigger settings, this will make it so that the animation is controlled by the amount the user has scrolled.

 

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

 

Happy tweening!

[Adel]

Snapping - how elegant.  Exactly what I was looking for!

Thank you so much 🥰