jhob101 Posted March 18, 2022 Share Posted March 18, 2022 I've created a ScrollTrigger to animate in lots of elements on the page as they become visible. What I'd like to do is be able to combine that with offset so that each group that appears on screen, they will animate in with a slight delay each. At the moment they all appear at once, which is to be expected as each has its own timeline. My thinking is that I'd need to somehow get all the elements that become visible at (roughly) the same time onto the same timeline so that can then use offset. But I can't think how that's possible, and I'm sure there must be a simpler solution. Is there a way to achieve this? See the Pen ExoKVML by jhob101 (@jhob101) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted March 18, 2022 Share Posted March 18, 2022 Sounds like you're looking for the .batch() method. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch() Happy tweening. 5 Link to comment Share on other sites More sharing options...
jhob101 Posted March 18, 2022 Author Share Posted March 18, 2022 That sounds like exactly the thing! I'll check it out, cheers. Link to comment Share on other sites More sharing options...
jhob101 Posted March 18, 2022 Author Share Posted March 18, 2022 I've modified the pen and have this working, save for one bug: If you scroll back up and scroll back down they animate back into visibility, but it looks odd because they're already visible. Is there a way of disabling the animation once they're visible so that it doesn't play again? Link to comment Share on other sites More sharing options...
PointC Posted March 18, 2022 Share Posted March 18, 2022 You can set once:true. See the Pen 110fff468e71081132768c9ce6a2d8dc by PointC (@PointC) on CodePen Happy scrolling. 5 Link to comment Share on other sites More sharing options...
jhob101 Posted March 18, 2022 Author Share Posted March 18, 2022 Amazing! Thanks so much for your help, very much appreciated. 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