grow. Posted July 11, 2022 Share Posted July 11, 2022 Hi! So I'm trying to get the .stagger-text class (which moves each word in a sentence upwards on-load) to happen when each isolated item with the class .stagger-text is visible on the screen, I've tried using a forEach loop to apply the ScrollTrigger but that seems to entirely break it (so I clearly did it wrong!) I'm also trying to delay the speed at which the items scroll, which is clearly simple enough... if I were creating a vertically scrolling site. As you can see they scroll down vertically as opposed to horizontally. I feel like these issues are somewhat linked because the site is 'artificially' horizontally scrolling they are all inline and being triggered at the top of the page, which is technically the whole thing, if that makes sense? Hope someone can help! Thanks in advance, Ben Elwood See the Pen zYWvdvj by benjaminelwoods (@benjaminelwoods) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted July 12, 2022 Solution Share Posted July 12, 2022 Thanks for the minimal demo, @growmybusiness. I assume you wanted something like this?: See the Pen poLbmrr?editors=0010 by GreenSock (@GreenSock) on CodePen You need to use the containerAnimation feature and loop through things to create separate ScrollTriggers because things come into the viewport at different places. I hope that helps. 1 1 Link to comment Share on other sites More sharing options...
grow. Posted July 12, 2022 Author Share Posted July 12, 2022 Thank you! Works a charm. Is there any way you'd be able to show me how I'd make this work vertically for mobile? As in if I have to disabled/enable this functionality for resizing to Tablet/Mobile but keeping the ScrollSmoother and text stagger functionality, or should I make another forum post for this? Thanks again, Ben Link to comment Share on other sites More sharing options...
Cassie Posted July 12, 2022 Share Posted July 12, 2022 Hey there! ScrollTrigger.matchmedia() is likely what you're after here.https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia() Why don't you take a look at the docs and give it a shot - if you need help pop back and we'll give you a nudge in the right direction. ☺️ 1 1 Link to comment Share on other sites More sharing options...
grow. Posted July 12, 2022 Author Share Posted July 12, 2022 9 hours ago, Cassie said: Hey there! ScrollTrigger.matchmedia() is likely what you're after here.https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia() Why don't you take a look at the docs and give it a shot - if you need help pop back and we'll give you a nudge in the right direction. ☺️ Perfect! Thank you so much 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