Koyash
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Koyash
-
-
I just updated to 3.11 and for me it's completely fixed on all browser apps (iPhone 13 pro max).
-
2
-
-
10 minutes ago, GreenSock said:
Like Cassie said earlier, ALL browsers in iOS use Safari - it's forced by Apple. The other browsers are just wrappers around Safari's core renderer. 😕
Learned something new! But how does this explain me not getting the jitter on the Chrome app? I'm so perplexed by this...
-
2 hours ago, GreenSock said:
glaring iOS Safari bugs (and reported them to the Safari team but they have been largely silent)
Actually it's not only Safari.
1 hour ago, neilcline said:jittering of a pinned element while using ScrollSmoother in Chrome, as well as Safari, on my iPhone XS Max
On 7/28/2022 at 11:48 AM, call007 said:same problem with IPad Pro (12.9-inch) (5th generation) (iOS 15.6).
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.
-
23 minutes ago, Mendieta said:
if i remove ScrollSmoother on iOS all my scrolltriggers work almost perfectly
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:
49 minutes ago, Mendieta said:ScrollSmoother.create({ smooth: 1.2, effects: true, ignoreMobileResize: true, normalizeScroll: true, });
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.
-
1 hour ago, GreenSock said:
@Koyash can you please confirm that this still has problems even after you clear your cache?:
https://cdpn.io/pen/debug/poLyVKR?cb=1
I can't reproduce any problem on my iPhone or iPad.
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.
-
11 hours ago, GreenSock said:
Hi @Koyash. That's definitely a TypeScript question, not a GSAP one. Sorry, I'm not much of a TypeScript guy. You may need to ask in a more TypeScript-focused community; we really try to keep these forums focused on GSAP-specific questions. We'd love to hear back from you if you find a solution, though.
My guess is that it's some kind of configuration issue on your end where you need to point your compiler/linter to the GSAP TypeScript definitions which are in the "types" directory from the NPM/github repository (and the gsap-bonus.tgz file of your bonus zip).
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", }, }, ],
-
3
-
-
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 -
12 minutes ago, Cassie said:
Thanks for checking - what phone are you using?
Iphone 13 pro max with variable refresh rate ON.
-
1
-
-
57 minutes ago, Cassie said:
Ah, good to know thanks.
Can you check this link for me and let me know if the jitter is still there?
https://cdpn.io/pen/debug/poLyVKR
Your recording is in an iframe (codepen) which is possibly the issue.Yep still jitters and occasionally skips to the end instantaneously, can't show a video anymore as I've reached the upload limit.
-
23 hours ago, Cassie said:
Ah ok! I think this is an occasion where normalizeScroll will come in handy.
normalizeScroll is basically our best effort at getting around some tricky IOS browser bugs.
with normalizeScroll - https://cdpn.io/pen/debug/poLyVKR
without - https://cdpn.io/pen/debug/KKozoEK?authentication_hash=DqADdGQpjneA
Let me know whether that helps?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.
-
1
-
-
33 minutes ago, Cassie said:
What version of GSAP are you using Koyash - and do you have a minimal demo?
Hey @Cassie,
Thank you for the swift reply. I've created a minimal demo as requested.See the Pen KKozoEK by Koyash (@Koyash) on CodePen
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. -
On 5/5/2022 at 9:44 PM, Milk0 said:
I can confirm that. Without ScrollSmoother it goes well. Tested on Safari and Chrome
It also work well for me without the normalizeScroll too
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.
iOS Mobile problem - ScrollSmoother + pin large section glitching
in GSAP
Posted
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 😅.