Horizontal ScrollTrigger animations

[artvera]

Hello,

 

I'm looking to replicate the following effect:

- When you arrive at the section, the scroll switches to horizontal mode (that's done).
- And most importantly, when each card passes the horizontal center of the section, it is given the class ".active".

Overall, I'd like to know how to add triggers in a horizontal mode.

 

Thank you in advance for your help, and I'm here to provide more details if needed.

 

See the Pen GRzJrOa by artvera (@artvera) on CodePen

[mvaneijgen]

Hi @artvera

 

Thanks for the great demo! All you had to do is set up a ScrollTrigger for each `.cardsSolutions` with a `containerAnimation`!

 

Check it out, the ScrollTrigger trigger is set to each card and the `containerAnimation` to your `animation`, the timeline could be better with the start and end markers and it will toggle a class at the moment, but you could of course also create an animation for it. Hope it helps and happy tweening! 

 

See the Pen poGJeEp?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

See the docs for more info about `containerAnimation` https://gsap.com/docs/v3/Plugins/ScrollTrigger and the demo below

 

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

 

[artvera]

Hi @mvaneijgen,

 

I'm impressed by the speed and relevance of your response, thank you very much!

[mvaneijgen]

You got me on my morning route with coffee ☕️ in hand browsing the forum! Demo was great, so it took me all of 10 minutes finding the solution! Glad it solved your issue and happy tweening!