archimedo Posted November 5, 2020 Share Posted November 5, 2020 Hi everyone, I've been having some troubles trying to use scrolltrigger effect inside a scrollable div. I would like to animate the two pictures at the bottom of text when, while scrolling, the bottom of their cointainer div hit the bottom of the viewport. Unfortunately the code I wrote doesn't seem to work, I was wondering if that's because I am scrolling inside a div rather than the body but I couldn't find out yet. Can you help me understand what I'm doing wrong? Thank you! See the Pen dyXjEPq by archemede (@archemede) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 6, 2020 Share Posted November 6, 2020 Hey archimedo. A few issues: ScrollTrigger inside of vars should be scrollTrigger. When you want to use a different element as the scroller you need to specify that inside of the ScrollTrigger vars. In your case the .box element is the scroller. You misspelled .images-container as .image-container in your CSS. I might also recommend using GSAP's defaults, depending on your actual tweens. Altogether: See the Pen JjKBqqz?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
archimedo Posted November 6, 2020 Author Share Posted November 6, 2020 Thank you so much for your help!! Link to comment Share on other sites More sharing options...
archimedo Posted November 6, 2020 Author Share Posted November 6, 2020 is there a way to reverse the animation when scrolling up again? Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 7, 2020 Share Posted November 7, 2020 15 hours ago, archimedo said: is there a way to reverse the animation when scrolling up again? Sure. That's what toggleActions are for. Maybe toggleActions: "play none none reverse" is what you want? 1 Link to comment Share on other sites More sharing options...
archimedo Posted November 7, 2020 Author Share Posted November 7, 2020 Thank you 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