yeonhwan

KakaoTalk_Video_2024-04-07-21-26-01.mp4 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;