Scrolltigger "Slider" hint

[jo85]

hello dear community,

i have seen this scroll triggered slider element on this website: https://pave.ai/, attached as a screenshot:

i know i can't expect anyone here to give me the exact code, but maybe you have some hints / keywords on how i could approach building this element. 

for example, how do i achieve the text change? thanks for any advice. best regards from berlin

[mvaneijgen]

For the text I would use SplitText https://gsap.com/docs/v3/Plugins/SplitText/ and then stagger each the letters 

 

Keep in mind all ScrollTrigger is doing is animating your animation on scroll, so just build the animation and don't worry about ScrollTrigger at all. I've written a guide how to create card stacking effects and the logic can be applied here  1 on 1, you just have more elements that stack, so before doing anything you first want to lay everything out with CSS. See the post below and a demo from the post that animates a clipPath, which is also part of the animation 

 

 

I would suggest just start building in Codepen and first do all the CSS, then try to animate some things and only when you're done start thinking about ScrollTrigger. Pro tip in between fork your work, so you have versions on which you can fall back. When you get stuck post back here with a demo and one particular question and some one here will be sure to point you in the right direction. Hope it helps and happy tweening! 

 

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