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

[yeonhwan]

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;

 

[GSAP Helper]

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