Words Carousel Animation

[NGrdanjski]

Hi everyone!

 

I need some help.

I want to recreate the words-carousel section like on the site: https://c2montreal.com/

It's a section with three titles Learn, Experience, Connect.

 

Section is full screen and on scroll have SplitText in some like roller/carousel effect.

 

Here is my CodPen (scroll): 

 

Thank you very much everyone.

 

See the Pen XJXwyOq by NGrdanjski (@NGrdanjski) on CodePen.

[mvaneijgen]

I think  your animation is already solid. I would just remove all the ScrollTrigger logic and first make it look good with just an animation and then hook it up to ScrollTrigger, you than also probably find that you can create this with just one ScrollTrigger.

 

The best thing to do when working 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 and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  
  
Most of the ScrollTrigger effects you see are just moving things on the y-axis instead of scrolling them, then hooking that animation to ScrollTrigger will give the illusion of scrolling, but they are really just animating! Getting to grips with this knowledge will make it so much easier to create all kinds of effects, I've written a whole post about it, check it out:

 

Hope it helps and happy tweening! 

 

[Rodrigo]

Hi,

 

Definitely check this tutorial and video by @Carl

https://www.snorkl.tv/greensock-staggers-with-seamless-loops/

 

This demo uses a different approach but it seems to do exactly what you're looking for:

See the Pen LYwNOBZ by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!