AndreasBP Posted January 23 Share Posted January 23 Hello. Im currently trying to create a horizontal scroll animation on my text, its working half, but i want it to start with the first letter, and then work its way to the last. But i cant seem to get it right. Any tips? See the Pen BabdRwM by Andreas12131354 (@Andreas12131354) on CodePen Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted January 23 Solution Share Posted January 23 I had to move somethings around to get things to line up. Instead of using the horizontal xPercent I've used x and moving the total width of all slides (there was an extra slide with just the number "3" in it I have removed that from the HTML). I've set the end trigger to the bottom of the viewport, instead of the default top. I highly recommend turning on markers so you can see what ScrollTrigger is doing. I've wrapped your ScrollTrigger in to a timeline, so it will be easier to see what is ScrollTrigger and what is the animation, this way we also give it a name (tl) and we can use it as the containerAnimation for the letters I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! See the Pen OJqjmKK?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen Link to comment Share on other sites More sharing options...
AndreasBP Posted January 23 Author Share Posted January 23 God damn. I will definitely read it through. Thanks a lot for the help! Link to comment Share on other sites More sharing options...
AndreasBP Posted January 23 Author Share Posted January 23 I didnt even know, there was something in scrolltrigger called Horizontal. Thanks for letting me know. Link to comment Share on other sites More sharing options...
mvaneijgen Posted January 23 Share Posted January 23 It sounds boring, but reading the documentation is highly recommended. You'll be surprised how much is already thought up for you! https://gsap.com/docs/v3/Plugins/ScrollTrigger/ Glad you're issue is solved happy tweening! 3 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