Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ZenithLai

ScrollTrigger.matchMedia how to kill all function

Recommended Posts

Hi,

 

I'm newbie for GSAP.

When mobile size I'm trying to remove all ScrollTrigger. I already read all about .kill() document but I have no idea how to start.

Here is what I write in my website.

 

ScrollTrigger.matchMedia({
    

  // mobile
  "(max-width: 768px)": function() {
      tl.scrollTrigger.kill();
      pinner.scrollTrigger.kill();
      
  },
});     

 

Do you guys have any idea on how i should write on the code part ?

Appreciate if you can advice. Thanks

See the Pen VwPGPYv by zenithlai (@zenithlai) on CodePen

Link to comment
Share on other sites

I assume you meant to do something like this?: 

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

  • Put all your ScrollTrigger-related code inside a matchMedia (for desktop in your case) so that it rolls it back when the matchMedia doesn't match anymore.
  • use the .saveStyles() feature to record initial inline styles so they can be reverted
  • Don't use lose gsap.set() calls in your matchMedia function - those won't get rolled back unless they're in an animation that's connected to a ScrollTrigger. So I just put the .set() calls at the start of the "tl" timeline. 
  • Like 1
Link to comment
Share on other sites

Hi,

 

Here is my latest code update:

See the Pen VwPGPYv by zenithlai (@zenithlai) on CodePen

 

What's is the reason that I want to break all scrolltrigger, is because when mobile view user unable view all content in the screen, so i propose to break all the scrolltrigger to become default scrolling.

 

I have try your way, but still fail to do, did I do anything wrong? Please advise. Thanks.

 

Link to comment
Share on other sites

Hi @ZenithLai!

If I resize to mobile in your pen, the scrolltrigger animation doesn't play, and the elements are all positioned as they would be without JS.

Did you manage to fix the issue? If not could you maybe explain what you're expecting to see?
 

 

Link to comment
Share on other sites

Hi!

 

I still unable to fix it.

What I expect is when mobile view, the two section( section 2 & 3 ) is separate.

Here is what i expect in mobile view

Untitled-1.jpg.10634ebd43a3be125cf5d3e7ee8b733d.jpg

 

In mobile view I have to separate is because I concern that my content fit into mobile screen view, so that I let user to continue scroll down.

( *Sorry, my english not very good, hope u understand)

Thanks.

 

Link to comment
Share on other sites

Ok - so in this fork of your pen I've taken out all the JavaScript 

See the Pen 198d32a17d2efd00ecc634e46e59f3db by cassie-codes (@cassie-codes) on CodePen



You can see that the mobile flow isn't laid out how you want. This isn't a JS issue - this needs to be solved by laying it out properly from the beginning, then when your mobile view is sorted, layout your desktop view and then add the scroll animations. 

Hope this helps.

  • Like 1
Link to comment
Share on other sites

Why u delete all JS script? then how about in desktop view?

Link to comment
Share on other sites

I deleted all the JS to show you that your layout issue isn't caused by JS or GSAP.

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