Solving GSAP ScrollTrigger Challenges in Safari
By Max Chechel
Have you ever faced challenges while working with GSAP's ScrollTrigger in Safari, especially in layouts dense with images? You're not alone. In this post, we'll dive into a common issue and provide a straightforward solution to enhance your scroll-based web animations.
Understanding the Issue
This problem frequently occurs in Safari when your layout includes numerous images, and you're attempting to implement ScrollTrigger at the bottom of the page. What happens often is that ScrollTrigger activates earlier than expected. Why? The culprit is image loading times.
When your webpage is initially loaded, the DOM doesn't wait for all images to load. As you scroll and images start loading, they occupy space, causing a layout shift. This means the layout becomes taller than it was when the ScrollTrigger instance was initially set up, leading to premature triggering.
The solution
Fortunately, there's a simple fix: the CSS aspect-ratio property. This handy property lets you define an element's desired width-to-height ratio. By setting an aspect ratio for your images, you ensure that they occupy a predetermined space in the layout, regardless of whether they have loaded. This approach prevents any unexpected resizing (shrinking or growing) of images during load time.
This simple CSS ensures that each image takes up the correct amount of space even before it fully loads, thereby preventing layout shifts and ensuring that ScrollTrigger behaves as expected.
Hope this will help you to avoid issues with ScrollTrigger in Safari!
Let's Connect
Have any questions, ideas, or opportunities you'd like to discuss? I'm just an email away. Feel free to reach out to me for any inquiries or collaborations. I look forward to hearing from you!
Navigation Menu
Search code, repositories, users, issues, pull requests..., provide feedback.
We read every piece of feedback, and take your input very seriously.
Saved searches
Use saved searches to filter your results more quickly.
To see all available qualifiers, see our documentation .
- Notifications You must be signed in to change notification settings
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Draggable on IOS Safari Mobile working just once #296
soypaduano commented Jan 22, 2019 • edited Loading
jackdoyle commented Jan 23, 2019
Sorry, something went wrong.
soypaduano commented Jan 30, 2019
No branches or pull requests
Why scrollTrigger is not working?
Hey if you are using GSAP to do animation on a scroll, you will need to include scrollTrigger plugin’s script additionally after the GSAP’s script. Here is the scrollTrigger script CDN .You can also check this link – https://greensock.com/docs/v3/Installation?checked=core,scrollTrigger#CDN
After you have included the script you will also need to register the plugin for use in your codes. Example:
After you have registered you can use the plugin. Example:
You must be logged in to post a comment.
If Safari isn't loading websites or quits on your iPhone, iPad, or iPod touch
If you can't load a website or webpage, or Safari quits unexpectedly, follow these steps.
Connect to a different network
Try to load a website, like www.apple.com , using cellular data. If you don't have cellular data, connect to a different Wi-Fi network , then load the website.
If you're using a VPN (Virtual Private Network), check your VPN settings . If you have a VPN turned on, some apps or websites might block content from loading.
Restart your device
Turn off your device and turn it on again.
Restart your iPhone
Restart your iPad
Restart your iPod touch
Clear website data
You can clear website data occasionally to improve Safari performance.
Go to Settings > Safari.
Tap Clear History and Website Data.
Tap Clear History to confirm.
Turn on JavaScript
Turn on JavaScript if it's not already on.
Go to Settings > Safari > Advanced.
Turn on JavaScript.
Get more help
If the issue continues and only affects a certain website or webpage, check if you have Private Relay turned on. You can temporarily turn off Private Relay in iCloud Settings . If Safari still doesn't load websites and you tried all of these steps, contact the website developer for more help.
Explore Apple Support Community
Find what’s been asked and answered by Apple customers.
Contact Apple Support
Need more help? Save time by starting your support request online and we'll connect you to an expert.
Recently I am constantly getting logged off from iOS Safari
I access the Dope from 3 sources usually-- my work PC (usually Firefox) when I am working, and my iPad and iPhone (Safari) when I’m not.
Recently I started noticing that I’m always getting spontaneously logged off when I access the SDMB on Safari. I often will open several topics at a time in new tabs, but even opening a new tab kicks me off.
I assume a recent iOS update is not playing nice with whatever mechanism the SDMB or Discourse uses to track logged-in users. It never happens on my PC, and I switched to Chrome on my iPad and it also never happens, so not a huge deal since there’s a simple workaround. So I was just curious whether it’s been happening to any other iOS users, and if there is any solution or fix for iOS Safari.
I moved this from ATMB to Site Feedback as it is likely a Discourse related bug tied to Safari or iOS.
Hopefully some other iOS users report in.
I did find this, but not an exact fit.
One data point:
I frequently surf the SDMB on an iPhone SE 2020 running iOS 17.4.1. No issues whatsoever staying logged in.
What browser are you using? As I mentioned, it only happens to me on the Safari browser. Both on an iPhone 15 running iOS 17.4.1 and an iPad (6th generation) running iPadOS 16.2.
I forgot to specify - I am using Safari also.
Hmm. I had assumed that it was an iOS update thing since it suddenly started happening constantly on both my iPad and iPhone on Safari. Weird.
Oh well. Chrome on the iOS, as I said, works fine. Also, in a previous update months ago, Safari switched from a ‘single-finger tap and hold’ to open a new browser tab to a two-finger tap, which I found very annoying since many links are too small to easily two-finger tap. Chrome still does the ‘single-finger tap and hold’ for new tab. I’m having to retrain myself- I still keep doing the ‘two-finger’ method.
I am trying to wean myself off from Google products, though. Anybody got a rec for a good iOS browser that is neither Safari nor Chrome?
Interesting – the single finger tap-&-hold still works for me to open a new tab from a link. I just verified that my phone is, indeed, running 17.4.1.
I had always thought iOS version = Safari version – that there was no versioning of Safari separate from versioning the iOS. Maybe that’s not true anymore? Kind of grasping at straws.
Some other brainstorms:
Do you have Safari set in some kind automatic cache-clearing mode?
Do you surf frequently in Private mode in Safari?
Never tried this, but: Maybe while surfing the SDMB in Safari’s “ordinary” mode, if you tap-&-hold an SDMB link into a Private mode tab, maybe it breaks the log-in somehow?
Huh. Stranger and stranger.
As for your brainstorms, I don’t think I’m doing any of those things, unless some default mode changed or somehow got changed. But food for thought. I’ll have to look into this further when I have a little more time. Thanks for the feedback.
The architecture of our respective iPhones is very different, even as they run the same iOS version.
My phone is basically a modernized iPhone 6, while yours is a 15. Mine still has Touch ID via a Home button. Your phone has no home button – the equivalent to Touch ID is Face ID (which you may or may not have set up).
I bring that up so that you can parse the image below into what your phone may display in Safari’s Settings. Do you have an option to “ Require Face ID to Unlock Private Browsing ”? And if so, is it off (grayed out)?
Yes, my settings are the same as yours.
Data point, I run Edge on iPadOS 17.5 and I have had the logged out issue on and off for months.
I have an iPhone 13 Pro Max. I run iOS 17.5.1 and I use Safari to browse the forum. I don’t remember ever being forcibly logged out of the site and it certainly isn’t happening now.
I have an Xr using ios 17.5.1 I don’t have the logging off problem, but duckduckgo has become weird and unreliable as a search engine on safari.
@solost , are you still experiencing this problem?
Related Topics
Safari not working on iPhone? An Apple iCloud Private Relay outage could be to blame
A pple has confirmed that its iCloud Private Relay service is experiencing an ongoing outage affecting some users, confirming the service may be slow or even unavailable as a result.
The company's System Status support page says that the issue has been ongoing overnight, and as of Friday morning is still not fixed. Apple confirmed "Some users are affected," and stated, "This service may be slow or unavailable."
You might not know about iCloud Private Relay or what it does, but if you've woken up this morning and found your iPhone's Safari browser isn't working properly this could be the cause. Multiple reports on social media indicate people are having problems with iPhone Safari becoming stuck when they type in a search request or website.
iPhone Safari slowdown
iCloud Private Relay is a feature found in Apple's iCloud Plus subscription service and is designed to make browsing the web more private. It takes information used to identify your internet activity, such as DNS records and your IP address, and hides it all so that "no single party" can see both who you are and what sites you're visiting."
The information for each is sent through two separate, secure internet relays.
"Your IP address is visible to your network provider and to the first relay, which is operated by Apple. Your DNS records are encrypted, so neither party can see the address of the website you’re trying to visit," Apple explains. Likewise, a second relay generates a temporary IP address, decrypts the name of the website you're trying to visit, and then connects you to the site. It's all part of Apple's ongoing push to make Safari a very private browser on its best iPhones , iPads, and Macs. Sadly right now, it's not working. We'll keep you posted as to any updates.
More from iMore
- iCloud Plus: Everything you need to know!
- Custom email domains are now available in beta in iCloud+
- Apple announces iCloud+ to bring more privacy features to the web
IMAGES
COMMENTS
GSAP animations don't work when the user is on Safari 11.1 or lower. Did anyone experience similar issues? I could reproduce it in Browserstack. No problems whatsoever on Safari 14.1 or any other browser. ... Gsap animations not working on Safari 11.1. By EricWasTaken
Hello, i have this animation done on GSAP. I used motionpathplugin for this animation. Problem is this animation is working perfectly in chrome but not working on safari or iphone 11. Does any one have any idea why this is happening. Please help. Below is the link to the website. https://solaris-...
Hello GSAP community, I'm encountering an issue where multiple GSAP animations are not functioning as expected on Safari, while they work perfectly fine on Chrome and Firefox. I've tested the animations on Safari and noticed that they fail to run or display unexpected behavior. Here is a simplifi...
Good morning, you can console.log(sWidth, 'sWidth') under your variables declaration and see that your variable don't return the same value in different browsers.
This should work, and it does in Firefox and Chrome, it's smooth. The blur value goes from 0 to 100px as the users scroll and at the same time, the overlay opacity also goes from 0 to 1. Sadly, Safari is buggy. I tried a few CSS things to enable hardware acceleration for CSS animations.
Solving GSAP ScrollTrigger Challenges in Safari. By Max Chechel. GSAP / Web animations / Have you ever faced challenges while working with GSAP's ScrollTrigger in Safari, especially in layouts dense with images? You're not alone. In this post, we'll dive into a common issue and provide a straightforward solution to enhance your scroll-based web ...
Browser: Safari; Expected Behavior. Smooth animations on device. Actual Behavior. Animation of AOS not work. But some case still work: Animations by @Keyframes; Animations by GSAP; Steps to Reproduce the Problem. Access to homepage to see the; Detailed Description. This bug not happen for all devices, so please watch the video for more details.
works on 0.16.2 does not works on 0.16.2 onwards. Hello, We use the draggable of GSAP for dragging blocks into a scene: the thing is that it works perfectly the first time, but, the second time we try, it doesn't work and it doesn't show any errors on console.
In chrome everything works fine but in safari the image is not visible when transitioning into the lightbox. On my live site the image then is visible after the Flip animation which is not the case in the codepen. I think this isnt directly related to GSAP and more likely because of the clip-path implementation from safari.
On my site in safari, however, the profile cards still spin - but half of the profile disappears (as does the 'or your money back', sub heading interestingly) before loading the next profile. I have literally no idea what is causing this, and I'm 90% sure at one point it was working fine on safari, so I'm not sure if I changed something ...
Why scrollTrigger is not working? Hey if you are using GSAP to do animation on a scroll, you will need to include scrollTrigger plugin's script additionally after the GSAP's script. After you have included the script you will also need to register the plugin for use in your codes. Example:
Connect to a different network. Try to load a website, like www.apple.com, using cellular data. If you don't have cellular data, connect to a different Wi-Fi network, then load the website. If you're using a VPN (Virtual Private Network), check your VPN settings. If you have a VPN turned on, some apps or websites might block content from loading.
Everything goes fine until I view the page using IPhone safari (with latest iOS 8). The rotation effect was gone and the animated element (group of img) are just "jump out" to the screen. I also used the mobile chrome to check it, and it's OK. and seems only mobile safari not working. Did I missed something? any idea is welcomed, thanks in advance.
I access the Dope from 3 sources usually-- my work PC (usually Firefox) when I am working, and my iPad and iPhone (Safari) when I'm not. Recently I started noticing that I'm always getting spontaneously logged off when I access the SDMB on Safari. I often will open several topics at a time in new tabs, but even opening a new tab kicks me off. I assume a recent iOS update is not playing ...
Hi I'm hoping for some help with this Draggable carousel I've created. I made a simplified Codepen to show the basic build of the section. I'm still fairly new to GSAP and especially the Draggable plugin so any help here would be greatly appreciated. The issue I'm coming across is that the carous...
iPhone Safari slowdown. iCloud Private Relay is a feature found in Apple's iCloud Plus subscription service and is designed to make browsing the web more private. It takes information used to ...
1. I solved this issue. this is because the gsap.from() method is changing the value of its initial state, after loading. when we try to reload the page the animation is working. It is because of the change in initial state. useLayoutEffect() provides us with a cleanup function that we can use to kill animations.
Then, I resized the window and my ScrollTrigger animations that were in view, they started working. In short, animations trigger on resize, but not on page load. I've implemented update() and also tried refresh(), but no luck. Demo (fiddle showing issue here also):
Hi, I've just discovered gsap and I am trying to do simple animation but my ScrollTrigger is not working on iOS(Brave, Safari) Animation should be below black buttons. I've also tried to search for similar problems on goggle but didn't find anything helpful. Video. GitHub repo My project: React + Vite I've installed gsap: npm i gsap
Hi there! I see you're using React - Proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE. Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc).