Jump to content
Search Community

ScrollTrigger: Stop animation function

MD81 test
Moderator Tag

Recommended Posts

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

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

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 :) 

  • Like 1
Link to comment
Share on other sites

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

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.
  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...