Jump to content
Search Community

Understanding how the ScrollTrigger start/end work

Moz test
Moderator Tag

Recommended Posts

Hi, I've only recently found GS but I'm having a lot of fun seeing what I can do with it.

 

I'm having an issue on my website, seemingly specific to mobile devices where my code isn't running at the start and end of where I thought it should be.

 

$('.animate-on-scroll').each(function(index, element) {
      let animateClass = ScrollTrigger.create({
        trigger: element,
        start: "top bottom-=1",
        end: "bottom top+=1",
        once: false,
        onEnter: () => {
          $(element).addClass('animation-trigger');
        },
        onLeaveBack: () => {
          $(element).removeClass('animation-trigger');
        }
      });
  });

What I am trying to do is to apply the class 'animation-trigger' to each item that already has a class of 'animate-on-scroll' when it enters the screen (going downwards) and only removes it after going past it upwards, effectively meaning that the animation will be reset and re-triggered if you go back up past it. 

 

This seems to work as I expect it to on desktop displays, however, I am having mixed effects on mobile devices/screen sizes, it seems as though certain elements are able to get most of the way into the page before the class gets added, am I misunderstanding how the 'start' and 'end' properties work? 

 

In the picture below you can see that one of my items is half way into the page and it still doesn't have the class yet

 

ClassNotApplying.png.cd374839fc34c44c184e60eec36d2a94.png

 

Any help would be great

 

Thanks

Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

Hi @Moz and welcome to the GreenSock forums!

 

Based on your description the only thing I can think of is using normalizeScroll in your ScrollTrigger setup:

ScrollTrigger.normalizeScroll(true);

Just call that at the start of your project or your top level entry file. That should prevent the browser's address bar from hidding/showing as you scroll which could be the cause of the issue you're having.

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

Happy Tweening!

Link to comment
Share on other sites

Hi both,

 

Thanks for the response, I'll try the 'normalizeScroll' to see if that's what is causing it.

 

Normally I'd try to setup a codepen to demonstrate exactly what's going wrong, but it seems to only be happening on mobile view (all other breakpoints in the CSS don't seem to have any problems) so I can only assume it's something very specific to exactly what I have setup right now, rather than something I might be able to replicate on codepen quite so easily.

 

But thank you for the response, if I'm still having troubles I'll see if I can replicate my issue somewhere else to further debug

 

Kind regards

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