Stacked cards from ScrollTrigger to Observer

[matteoUribb]

Hello, I have this scroll-triggered animation created with React JS Typescript, it works just fine. I want to change the animations to be triggered by the scrolling wheel using Observer. How could I achieve this? 

 

 

Hope you guys can help me out,
Thank you!

See the Pen OJroKvo by mateouribe (@mateouribe) on CodePen

[mvaneijgen]

Hi @matteoUribb welcome to the forum!

 

What have you tried already? Personally I would first rewrite your animation to a timeline, so that it works without ScrollTrigger and is just an animation. Here is an example of a similar looking effect, but with a timeline

 

See the Pen OJryLqp by mvaneijgen (@mvaneijgen) on CodePen

 

With a timeline you can easily .tweenTo() a specific point on the timeline, so with the Observer plugin you can do tl.tweenTo(5) to tween to the 5 second mark on the timeline on for example scroll up. You will of course have to find the points to which you want to animate to and increase and decrease that on the interactions you want to track. 

 

Hope it helps and happy tweening!