Ashewer Posted August 12, 2022 Share Posted August 12, 2022 I feel like I am on the right path, but getting stuck on something. I've looked through the ScrollTrigger docs and just can't figure out what exactly the issue is. I have the slides (divs that are stacked - position: absolute). And I want to reveal the divs as the user scrolls down. In theory I have it completed in the demo, but the scroll is too short. I also was trying to do the more correct way using forEach, but couldn't get that to work (commented out). If anyone can point me in the right direction that would be great. See the Pen RwMYjMY by Ashewer (@Ashewer) on CodePen 1 Link to comment Share on other sites More sharing options...
Solution Cassie Posted August 12, 2022 Solution Share Posted August 12, 2022 Hey there! You're on the right track. You need enough space to scroll - I've added a bit of height to your demo Now that there's more space to scroll you'll need to pin that element so it stays stationary as the animation plays - you have pinspacing already so I assume you've tried pinning? PinSpacing doesn't do anything unless the element is pinned You'll need to define a trigger Element- right now you've got the start trigger values "top top" as the trigger - that's invalid. Define an end point that is far enough down the page for your animation to feel right - I used a set px value See the Pen xxWaBNP?editors=0010 by GreenSock (@GreenSock) on CodePen 1 1 Link to comment Share on other sites More sharing options...
Ashewer Posted August 13, 2022 Author Share Posted August 13, 2022 Thanks. I didn't fully understand how the end point applied in this circumstance, that was very helpful! 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