MD81 Posted September 25, 2020 Share Posted September 25, 2020 Dear GSAP friends, i am just calling a Slider function (nextItem) in ScrollTrigger’s “onEnter”. Perfect! But how can i reset (inital state) or pause that function “onLeave”? Please see the provided Codepen Thanks a lot in advance!!! See the Pen VwaRYWQ by mdillgen (@mdillgen) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 25, 2020 Share Posted September 25, 2020 Hey DM81. There's serious logical issues with your code: every time that you enter the ScrollTrigger a new nextItem function call will happen which will in turn repeat itself infinitely and keep playing the slide change more and more often. That's not good. What's your end goal? Why do you have a ScrollTrigger here at all since you're already looping the slides on page load? Link to comment Share on other sites More sharing options...
MD81 Posted September 25, 2020 Author Share Posted September 25, 2020 Hey @ZachSaucier, the end goal is to stop the slider from playing when it has been scrolled out of view! Because of its large images, there are some performance issues further down in my current projects website. So I will just stop playing the slider when I scroll to the main section further down the page. Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 25, 2020 Share Posted September 25, 2020 Think about how to do that logically: if you keep the infinitely looping animation that you're creating at the start then you need to be able to control that loop with the ScrollTrigger. How do you do that? First you need to save the tween (.delayedCall) to a variable. Then inside of the ScrollTrigger callbacks you affect that variable. I'd probably create it so that the ScrollTrigger is the only thing that creates and kills the delayed calls. Do you think you can modify your pen to fix the issue based on that info? If you're not able to get it working I'm happy to help out but I don't want to just do it all for you since you learn it a lot better if you do it yourself 1 Link to comment Share on other sites More sharing options...
MD81 Posted September 25, 2020 Author Share Posted September 25, 2020 Thanks @ZachSaucier I will try hard 🙂 Link to comment Share on other sites More sharing options...
MD81 Posted September 25, 2020 Author Share Posted September 25, 2020 31 minutes ago, ZachSaucier said: Think about how to do that logically: if you keep the infinitely looping animation that you're creating at the start then you need to be able to control that loop with the ScrollTrigger. How do you do that? First you need to save the tween (.delayedCall) to a variable. Then inside of the ScrollTrigger callbacks you affect that variable. I'd probably create it so that the ScrollTrigger is the only thing that creates and kills the delayed calls. Do you think you can modify your pen to fix the issue based on that info? If you're not able to get it working I'm happy to help out but I don't want to just do it all for you since you learn it a lot better if you do it yourself Hello @ZachSaucier Sorryyyy!!! Unfortunately I can’t get it The slider plays once but onEnter and onLeave are not respected Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 25, 2020 Share Posted September 25, 2020 No need to be sorry! Look in the console: it tells you that slides is not defined. This is because your variable is scoped to that function so you can't access it outside of that function. To fix that create a variable outside of your function and save the .delayedCall to that variable. Here's how I'd set it up: See the Pen jOqJbRd?editors=0010 by GreenSock (@GreenSock) on CodePen Side notes: Please use the "fork" button when making new versions of your pen so that context is retained in these forums Use xPercent instead of x: "100%". See the most common GSAP mistakes for more info. Include the duration inside of the vars parameter because that lets you use GSAP's defaults functionality. 1 Link to comment Share on other sites More sharing options...
MD81 Posted September 25, 2020 Author Share Posted September 25, 2020 Thanks a lot @ZachSaucier, that’s genius!!! Also thanks a lot for your tips/side notes. Here’s the final pen See the Pen MWyxKYg by mdillgen (@mdillgen) on CodePen 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