Jump to content
GreenSock

milhouse

How to properly check for and kill() specific ScrollTrigger instances on resize?

Recommended Posts

Hi there, I’ve just started using the ScrollTrigger plugin, which is SO awesome - thank you for all the work put into this. I’m worried I’m over complicating things, especially in regards to making my ScrollTrigger instances responsive.
 

Basically I have 2 ScrollTrigger instances for desktop (anything above 800px) and 1 tween with a ScrollTrigger instance for mobile (anything below 800px). I want the 2 desktop ScrollTrigger instances to only run on desktop and the mobile tween with ScrollTrigger to only run on mobile.
 

Everything works great on initial load for both desktop and mobile, but if resizing the viewport, everything goes a bit whacky/breaks (things go out of place/overflow, and I can’t tell if the instances are duplicating or if just the markers are being repeated). As well, my desktop ScrollTrigger instances won’t run if resizing from mobile and my mobile tween with ScrollTrigger won’t run if resizing from desktop.
 

I’ve been wracking my brain, searching high and low in the docs and forums trying different things for 3 days now, but I’m not quite getting it. Any help would be incredibly appreciated.
 

Thank you so much.

See the Pen yLeMqxg by milhouz (@milhouz) on CodePen

Link to comment
Share on other sites

I'm working on a fix for this, @milhouse. Please stand by. 

  • Like 3
Link to comment
Share on other sites

Hey @milhouse. We're working on a new feature for ScrollTrigger that makes this sort of thing easier. Check this out and please let us know what you think and if you find anything that seems like a bug:

See the Pen JjGJRew?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

Hey @ZachSaucier I noticed this is part of an unreleased version of Gsap (3.3.5). This feature is exactly what I'm chasing at the moment also, just wanted to find out roughly how long you would anticipate before this version is released into the wild? :)

 

Thanks!
Elliott.

Link to comment
Share on other sites

Yes indeed, it's unreleased/experimental right now. We're sanding off the rough edges and hope to release it within the next week or two. Feel free to kick the tires and let us know if it works well for you. 

  • Like 1
Link to comment
Share on other sites

Hey @GreenSock, Hey @ZachSaucier,
Thank you so much for your quick replies. This looks awesome and works flawlessly from what I’ve tested. Is this feature still set to launch in the next week or so? Would love to implement it in the current project I was having trouble with regarding the resizing. 


Thanks again for this! Can’t wait to implement it! 😀

  • Like 1
Link to comment
Share on other sites

@milhouse You're welcome to use the beta file in your project. We're working on getting some other features more tested before we can get the release out.

  • Thanks 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.
×