Jump to content
Search Community

GSAP ScrollTrigger pin position is jumping on iOS due to its address bar

yeonhwan test
Moderator Tag

Recommended Posts

Hello GSAP community!

I am quite new to GSAP and  here to get some help!

I was using on GSAP for scroll animation on my web page and  I met weird behavior with scrollTrigger on iOS environment.

I tried to pin an element inside of a scrollable container and it worked smoothly in desktop and Chrome.

But when I open the page using Safari on my iOS device, the pin position is broke and jumps around depending on browser's address bar appearance.

You can see it's behavior on the video I recorded.

Where I found this behavior for the first time is in much different code base, but it is still happening while I tried to reproduce it with minimal code example.

 

 

Basic scrollTrigger settings with Vite, React, Tailwind

 

Any advice to remove this behavior or any walk arounds  for this situation? 

Thanks!

 

This is the all I wrote for the example page the video shows

 

import "./App.css";
import { useEffect } from "react";
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";

 

function App() {
  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);

 

   const SC = ScrollTrigger.create({
       trigger: ".container",
       start: "top top",
       end: "bottom top",
      scrub: true,
      pin: ".pin",
      markers: true,
   });

 

   return () => {
       SC.kill();
    };
  }, []);
 
return (
   <div>
        <div className="w-full h-dvh bg-green-500"></div>
        <div className="container w-full h-[200dvh] bg-yellow-500">
              <h1 className="pin text-4xl font-extrabold bg-blue-400">PIN ME</h1>
        </div>
   </div>
  );
}

 

export default App;
 
Link to comment
Share on other sites

Without a minimal demo, it's very difficult to troubleshoot. A few quick suggestions: 

  1. Make sure you're using the latest version of GSAP/ScrollTrigger. I bet you've got an old version that doesn't have ScrollTrigger.config({ ignoreMobileResize: true }) as the default. 
  2. For easier cleanup, use the useGSAP() hook in React. Please read https://gsap.com/react 

Here's a starter Stackblitz you can fork. 

 

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. 

Link to comment
Share on other sites

  • 6 months later...
On 4/7/2024 at 2:41 PM, yeonhwan said:

 

Hello GSAP community!

I am quite new to GSAP and  here to get some help!

I was using on GSAP for scroll animation on my web page and  I met weird behavior with scrollTrigger on iOS environment.

I tried to pin an element inside of a scrollable container and it worked smoothly in desktop and Chrome.

But when I open the page using Safari on my iOS device, the pin position is broke and jumps around depending on browser's address bar appearance.

You can see it's behavior on the video I recorded.

Where I found this behavior for the first time is in much different code base, but it is still happening while I tried to reproduce it with minimal code example.

 

 

Basic scrollTrigger settings with Vite, React, Tailwind

 

Any advice to remove this behavior or any walk arounds  for this situation? 

Thanks!

 

This is the all I wrote for the example page the video shows

 

import "./App.css";
import { useEffect } from "react";
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";

 

function App() {
  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);

 

   const SC = ScrollTrigger.create({
       trigger: ".container",
       start: "top top",
       end: "bottom top",
      scrub: true,
      pin: ".pin",
      markers: true,
   });

 

   return () => {
       SC.kill();
    };
  }, []);
 
return (
   <div>
        <div className="w-full h-dvh bg-green-500"></div>
        <div className="container w-full h-[200dvh] bg-yellow-500">
              <h1 className="pin text-4xl font-extrabold bg-blue-400">PIN ME</h1>
        </div>
   </div>
  );
}

 

export default App;
 

I dont know , the css is important as js. So i think could be the height value of each section. Try to use vh instead of dvh. Probably the dynamic height generates this jump.

Link to comment
Share on other sites

Hi @Nightshift,

 

The issue is that when the browser's address bar shows/hides it triggers a refresh method which can lead to unexpected behaviours or making the calculations made by ScrollTrigger wrong because of the new height of the document.

 

We have two approaches to this:

  1. Use normalizeScroll()
    https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()
  2. Use the ignoreMobileResize config option on ScrollTrigger:
    https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.config()#details

If you keep having issues please include a minimal demo (emphasis on minimal) that clearly illustrates the problem you're having.

 

Hopefully this helps

Happy Tweening!

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