yeonhwan Posted April 7 Share Posted April 7 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; Link to comment Share on other sites More sharing options...
GSAP Helper Posted April 8 Share Posted April 8 Without a minimal demo, it's very difficult to troubleshoot. A few quick suggestions: 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. 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 More sharing options...
Nightshift Posted October 11 Share Posted October 11 facing this same issue @yeonhwan, were you able to get a solution for this? Link to comment Share on other sites More sharing options...
AntonioNB4 Posted October 11 Share Posted October 11 On 4/7/2024 at 2:41 PM, yeonhwan said: KakaoTalk_Video_2024-04-07-21-26-01.mp4 652.05 kB · 0 downloads 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 More sharing options...
Rodrigo Posted October 11 Share Posted October 11 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: Use normalizeScroll() https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll() 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now