invrt Posted January 14, 2022 Share Posted January 14, 2022 Hey guys, I've been trying to get something really basic going, but been struggling for a couple hours. I have my pinned section: .test-section. My pinned section has a bunch of children that I would like to animate as you scroll. At the moment it seems like I can only see the first child within the pinned section. Preferably, I would like to this dynamically. So for each div.content inside .test-section, animates. From my codepen you can see that it's only animating the first div and I'm not sure how to get the rest to show up. Any ideas? See the Pen WNZPQzv by codenameorange (@codenameorange) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted January 14, 2022 Share Posted January 14, 2022 Hi invrt, You are nesting ScrollTriggers inside your timeline which is a big mistake. You should only have 1 ScrollTrigger per timeline. gsap.timeline({ scrollTrigger: { ... } }) Outside of that, I'm not exactly sure what you are going for here as your other content sections are not even visible because of your CSS, so animating y 100 is not going to do much. Have you check out or ScrollTrigger demos page? Perhaps there is something similar to what you are trying to achieve on there. https://greensock.com/st-demos/ There are also a bunch of demos listed on the ScrollTrigger docs. And we have some ScrollTrigger collections on CodePen. ScrollTrigger How-To Pens - a Collection by GreenSock on CodePen ScrollTrigger Showcase - a Collection by GreenSock on CodePen Link to comment Share on other sites More sharing options...
invrt Posted January 14, 2022 Author Share Posted January 14, 2022 Hi Blake, This one here is like 90% of the solution I guess? See the Pen 6a2480c123d88dc391faba0ea5cc590f by akapowl (@akapowl) on CodePen Though, I don't really want to use bodyScrollbar stuff, or the picture on the side. Just want the words with opacity animated. Link to comment Share on other sites More sharing options...
Solution OSUblake Posted January 14, 2022 Solution Share Posted January 14, 2022 So like this? See the Pen GRMzoOo by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
invrt Posted January 14, 2022 Author Share Posted January 14, 2022 Lifesaver. Thanks so much. 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