Koyash

WOW! You're right. I was also able to reproduce this issue with low power mode on (iOS 16.1). Turning low power mode off immediately fixes it so I wouldn't worry too much about this. Good find though! @GreenSock We've returned once again ?.

I just updated to 3.11 and for me it's completely fixed on all browser apps (iPhone 13 pro max).

Learned something new! But how does this explain me not getting the jitter on the Chrome app? I'm so perplexed by this...

Actually it's not only Safari. I also experience this on Firefox but not Chrome like @neilcline mentioned. I've tested this on multiple iPhones ranging from 7 to 13 pro max and @call007 also reported this issue on iPads. So I think this is something bigger than just a Safari bug i.e. the way iOS/iPadOS devices interact with different web browsers. In my case Safari itself is the worst offender of them all. It's rare to trigger the jitter on Firefox.

That's the whole issue. ScrollSmoother breaks all ScrollTrigger animations on iOS, without ScrollSmoother it just works. I've tried a lot of things just like you and cannot find a solution except dropping ScrollSmoother all together. As for the solution you suggested: It's already being used in the CodePen demo together with v 3.11.0 and did nothing to resolve it (for me), thanks for the suggestion but I think in this case it's out of our control.

@GreenSock sorry for the late response it's been a busy week, but to answer your question. Yes, even after clearing cache and then going to the url you supplied (https://cdpn.io/pen/debug/poLyVKR) it continues to happen. I've tried on iPhone 7/x/11/13 and all have the same issue so I really don't know why you aren't able to reproduce this.

Yes I am, and by clearing cache I'm assuming this is the correct way. settings -> safari -> clear history and website data. Then going to this link https://cdpn.io/pen/debug/poLyVKR . I'm on iOS 15.6 all default safari settings except my search bar is at the top. Again in this particular CodePen it happens mostly when drag scrolling.

Yep, complete oversight on my end my apologies. But you definitely pointed me in the right direction. For anyone in the future struggling with this issue, if this doesn't fix the issue inside your tsconfig.json: { "compilerOptions": { ... }, "files": [ "node_modules/gsap/types/index.d.ts" ] } Try adding this to your tsconfig.json. { "compilerOptions": { "declaration": true } } If that doesn't resolve it you may be getting eslint errors and not actually TypeScript errors. To resolve undef errors from eslint add this to your .eslintrc.js file. This won't have a negative impact as TS checks for this already. official explanation overrides: [ { files: [ "*.ts", "*.vue", //or your relevant framework file extensions ], rules: { "no-undef": "off", }, }, ],

I'm currently converting my Vue 2 projects into Vue 3 + TypeScript and I'm running into an issue with TypeScript types for GSAP. I'm quite new to TypeScript but after some research I think this should be the correct way of using a GSAP Timeline with TypeScript? But this gives me the following, 'GSAPTimeline' is not defined no-undef. <script setup lang="ts"> import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); let gsapTimeline: GSAPTimeline; const someFunc = (): void => { gsapTimeline = gsap.timeline({ scrollTrigger: { trigger: "#some-container", pin: ".pin", start: "top top", endTrigger: ".end-trigger", end: "top bottom", // markers: true, scrub: 1, invalidateOnRefresh: true, anticipatePin: 1, }, }); }; someFunc(); </script> What am I missing? GSAP version 3.10.4

Iphone 13 pro max with variable refresh rate ON.

Yep still jitters and occasionally skips to the end instantaneously, can't show a video anymore as I've reached the upload limit.

Enabling normalizeScroll makes everything jitter on iphone without having ScrollTriggers on top of it, that's why I had it disabled. I tried your demo but it's still affected by the jitter. Sadly I cannot upload a longer video. RPReplay_Final1657316473_1.mp4

Hey @Cassie, Thank you for the swift reply. I've created a minimal demo as requested. https://codepen.io/Koyash/pen/KKozoEK It works fine on most devices but the moment you try this on an iPhone it breaks. As for which version currently I am on the latest (3.10.4). Apologies for the video quality, I had to lower the resolution quite a bit to upload it. test.mp4

Also having this exact issue, works perfectly fine on other devices or if I don't use ScrollSmoother and ScrollTrigger together. Below is my configuration for ScrollSmoother and ScrollTrigger. this.smoother = ScrollSmoother.create({ smooth: 0.5, effects: true, normalizeScroll: false, //disabling this makes ScrollSmoother not bug out on Iphone ignoreMobileResize: true, }); this.gsapTimeline = gsap.timeline({ scrollTrigger: { trigger: "#about-container", pin: ".pin", start: "top top", endTrigger: ".intro", end: "top bottom", // markers: true, scrub: 1, anticipatePin: 1, invalidateOnRefresh: true, immediateRender: false, }, });

Sorry if I'm not completely understanding the question but what you could also do is give your <body> a class and use gsap.timeline() as such: gsap.timeline() .to(".body", { overflow: "hidden" }) .to(".someSelector", 1, { rotate: 360, delay: 0.5 } .to(".body", { overflow: "" }); Again I'm not sure if this is "best practice" but this does work for me at least.