Jakebogan Posted March 11, 2021 Share Posted March 11, 2021 Hello again, So, I made this very simple codepen as an example as to what I'm having issues with. In my real project I am using Vue 3. However, in this codepen example I'm just using simple html and css. The question I would like to know is, is there a way to use scrollTrigger animation on elements that are inside a element that has an overflow scroll? So, bare with me for a moment, imagine that the entire box is covering the full width and height of the viewport and it's scrollable. And the child is a div inside this box at the bottom, is there a way that I can get scrollTrigger to animate that child element? This is what I've been trying to do in my Vue 3 project, however it only has been working when using the body scroll but not elements that are scrollable with overflow auto or scroll. I hope that makes sense. link: See the Pen KKNbJye by Wisemen221 (@Wisemen221) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 11, 2021 Share Posted March 11, 2021 Hey Jake. This is exactly what the scroller property is for: See the Pen xxRmMzx by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Jakebogan Posted March 12, 2021 Author Share Posted March 12, 2021 Yeah so I'm able to change the element inside the parent element, it's just I can get it to animate, it's like no matter what I do as soon as the browser loads it has automatically did whatever I declared inside the gsap function Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 12, 2021 Share Posted March 12, 2021 Can you please create a minimal demo of the issue? The CodePen that I included above works fine from what I can tell. Link to comment Share on other sites More sharing options...
tailbreezy Posted March 12, 2021 Share Posted March 12, 2021 I think the animation runs immediately because it uses the wrong trigger and start/end. Try adding those. <div class="box"> <div class="anim_me" style="padding-bottom: 10rem">For the love of pie, Please animate me using scroll Trigger!</div> </div> gsap.to(".anim_me", { scrollTrigger: { scroller: ".box", trigger:'.anim_me', start:'top bottom', end:'bottom bottom', toggleActions:'play reverse none none' }, x: 200, color: "red", duration: 2 }); Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 12, 2021 Share Posted March 12, 2021 34 minutes ago, tailbreezy said: I think the animation runs immediately because it uses the wrong trigger and start/end. Like I said, the demo I included works great for me. Are you saying that the animation runs immediately with the values that I have used? i.e. if you load the demo, wait 5 seconds, then scroll down the animation is done already? Link to comment Share on other sites More sharing options...
tailbreezy Posted March 12, 2021 Share Posted March 12, 2021 1 minute ago, ZachSaucier said: Are you saying that it runs immediately with the values that I have used? Indeed. The moment you scroll even a hint inside the new scroller, the animation runs. Try adding those to debug. x: 500, duration: 5 Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted March 12, 2021 Solution Share Posted March 12, 2021 7 minutes ago, tailbreezy said: The moment you scroll even a hint inside the new scroller, the animation runs. Ah, that's what you mean. That's because I forgot to add the trigger: trigger: ".anim_me". The start/end values are fine. Link to comment Share on other sites More sharing options...
Jakebogan Posted March 12, 2021 Author Share Posted March 12, 2021 Yep that was it for me, I didn't have everything written correctly. Thanks for the help guys! 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