jo85 Posted March 28 Share Posted March 28 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 Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 28 Share Posted March 28 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 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now