Gsap Not working on mobile with scroll trigger

[shinobi8894]

Hello Everyone 

My Gsap working correctly with scroll trigger on desktop however not working correctly on mobile

As you can see in video, on mobile scroll trigger not work well and I think the issue have relationship with start and end

Any idea to fix it ?

I attached demo link 

Desktop  : https://streamable.com/bg7m8s
Mobile : https://streamable.com/jvksfn

My Code Snippet

export const fadeInUp = (

  element: HTMLElement,

  isScroll: boolean,

  delay?: number

) => {

  const fromOptions = {

    opacity: 0,

    y: 50,

  };

 

  const toOptions = {

    opacity: 1,

    y: 0,

    delay: delay,

    duration: 1,

  };

 

  if (isScroll) {

    const scrollToOptions = {

      ...toOptions,

      scrollTrigger: {

        trigger: element,

        toggleActions: "play none none reverse",

        start: "top 60%", // Adjust the start value for mobile

        end: "top center",

        markers : true

 

      },

    };

    return gsap.fromTo(element, fromOptions, scrollToOptions);

  }

 

  return gsap.fromTo(element, fromOptions, toOptions);

};

Thank you

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

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

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

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

[shinobi8894]

Hi, Thank you for your reply @GSAP Helper
So I made example on codepen, please check and let me know

See the Pen ExBWrmp by Tadashi-Amano (@Tadashi-Amano) on CodePen.

 

As you can see on here, on mobile, last element doesn't load with scroll trigger.
It only occurs on only card section so elements which under of card section can't load on my project.
Thank you 

 

[mvaneijgen]

Hi @shinobi8894 welcome to the forum!

 

35 minutes ago, shinobi8894 said:

As you can see on here, on mobile, last element doesn't load with scroll trigger.

That is correct, there isn't enough space to scroll all the way down to have your last item trigger. There are a few options you can do there to fix this issue. You can modify the last ScrollTrigger to have different start and end values, you can clamp() the values see video below or use gsap.matchMedia() to create different styles of animations for different screen sizes https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/

 

 

Below your forked pen with clamp() enabled, probably you only want it on the last one, but with Javascript you can easily check if it is the last one.

 

See the Pen xxoqMyB?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen.

 

 

40 minutes ago, shinobi8894 said:

It only occurs on only card section so elements which under of card section can't load on my project.

This is not true, if there was more scroll space it would just load the items, the issue is that there isn't enough room to scroll, so the last item doesn't animate, this is visually indicated with the markers. 

 

Side note: as you can see in your forked example I've changed your animation from y to x, this is because you're animating your trigger elements, which you should never do! And thus it breaks the example if you move the element on the y-axis, because ScrollTrigger uses the trigger points for its logic, but then you move them, so as a suggestion I would wrap each card in an element called .trigger and use that as the trigger element and keep animating the class .card. 

 

Hope it helps and happy tweening! 

 

[shinobi8894]

Hi @mvaneijgen
Thank you for your help.
However I'm getting issues even I tried with matchMedia and clamb.
I created github repository to find issue and could you check the project and let me know what is issue ?
It's only landing page so not complex.

https://github.com/shinobi8894/gsap-landing-issue

The main problem is casino section which have cards.

Hope your help.

Thank you

[mvaneijgen]

Sorry we don't have the time and resources to provide free general consulting. As you can see in my demo with clamp() the last item works perfectly, so there might be something else in your code base that is causing an issue. I would then start disabling large chunks of your code to see if the issue goes a way and when it does start enabling small chunks one by one until the issue is back, that is the best way to find the culprit.  But as far as we can see in the minimal demo clamp() on the last element solves the issue, so I don't know what to tell you 🤷

[shinobi8894]

Hi @mvaneijgen
Thank you for your help.

However I want animation via y axis, and seems like that is not work with your solution.

There is no solution for it ?

Thank you

[mvaneijgen]

There is please read the following from my previous reply

9 hours ago, mvaneijgen said:

Side note: as you can see in your forked example I've changed your animation from y to x, this is because you're animating your trigger elements, which you should never do! And thus it breaks the example if you move the element on the y-axis, because ScrollTrigger uses the trigger points for its logic, but then you move them, so as a suggestion I would wrap each card in an element called .trigger and use that as the trigger element and keep animating the class .card. 

 

[shinobi8894]

@mvaneijgenHi
If so, could you make example with y axios on codepen, I think I got misunderstand your explain.

Thank you for your advance help

 

[mvaneijgen]

I'm not sure what is is you do not understand? You should not animate your .trigger element, ScrollTrigger uses that element for its calculations if you thus move that element the calculations will move with it, so this is going to cause miscalculations. So what you do is wrap your elements in an extra element and use that as the trigger and keep moving the .card. 

 

Now you'll only nee dot put a clamp on the last one or change your ScrollTrigger if the screen sizes changes check out gsap.matchMedia() for that https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/ 

 

Hope it helps and happy tweening! 

 

See the Pen mdZwWXL?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen.