jnhltmn Posted August 26, 2020 Share Posted August 26, 2020 Hey fellow GreenSockers! I'm trying to make a homepage slider using ScrollTrigger for the first time. In a practical way I'm nearly there, but my code has a lot of repetition, so that can't be good. #designercode Besides that, when you scroll fast the text is stacking up and is becoming a bit of a mess. What the best approach to fix this? Could someone please review (and perhaps optimise a bit) my code? Thank you in advance! Jan See the Pen QWNppzX by jnhltmn (@jnhltmn) on CodePen Link to comment Share on other sites More sharing options...
Richard1604 Posted August 26, 2020 Share Posted August 26, 2020 Hi Jan I had a recent ScrollTrigger thread and if you take a look at it then ZachS came up with some js which puts this kind of animation in a loop. I think you might find it helpful. 1 Link to comment Share on other sites More sharing options...
jnhltmn Posted August 26, 2020 Author Share Posted August 26, 2020 Thanks Richard! I will look in to that one! I found out you can prevent a lot of repetition with scrolltrigger and gsap defaults. So my code is a bit cleaner now! See the Pen rNeyQQP by jnhltmn (@jnhltmn) on CodePen 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 26, 2020 Share Posted August 26, 2020 Hey jnhltmn. This is definitely a time when you should use loops. I highly recommend my article on animating efficiently. Since you want to connect elements that are in two different containers then you should use the indexes or use a data attribute to delineate which elements should be paired. An issue with your current approach is that if a user scrolls quickly the effect breaks, showing multiple texts at once. This is because the tweens conflict. You could fix this by either restructuring your timeline so that each only affects one element, using a single timeline and scrubbing through it on scroll, or doing more proper checking of whether or not previous animations are finished before running a new animation. I'd probably do something like the below demo. There's obviously still room for improvement, especially regarding the start/end with respect to the thumb heights and perhaps also the timing of the callbacks to limit overlap. See the Pen rNeyRgR?editors=0010 by GreenSock (@GreenSock) on CodePen 1 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