Flickering animations on Safari Mobile - any ideas?!

[hexciaLondon]

Hi guys, I'm slowly getting to grips with GSAP and the million ways it can be useful. 

 

I'm about 3% of the way there haha. 

 

I'm playing around using it on a potential new landing page, and I had the idea that I wanted to fade in SVG animations as I scroll down (or up) a page. SVGs as background images won't work as once you display them by fading in a DIV you can't restart the animation as you hide the DIV then re-display it. To get around this I've used inline SVGs. Hiding then showing these as you scroll around allow the SVGS to revert to the initial animation state. 

 

So far, hiding and showing the DIVs using scrollTrigger seemed to work well. I thought I'd nailed it, was working fine on Chrome and Safari on my laptop.

 

https://www.justot.co.uk/gsap-stutter.php

 

However, when I started testing it on my phone (Safari iPhone 15 Pro) the animations would flicker in and out. 

 

Fiddling with it, it seems it's usually as the scrolling speed slows and I interact with the screen, aka start to scroll again. I'm wondering if this is something do do with the touchscreen, and maybe it's calling scrollTrigger too often as it has a little freak out?

 

I've recorded it happening on my phone: https://www.justot.co.uk/src/Stutter.mp4

 

Could it be because I'm looping through an array of Divs and adding the scrollTrigger to each div with the same class name, it's getting confused? Or if this is a touchscreen scrolling issue, do I need to add some kind of microsecond delay to firing the scrollTrigger so it stops it from happening unless there's a significant scroll to fire it? Sorry, I think I'm describing that badly, but some kind of buffer so if scrollTrigger activates it can't be unactivated for a short time period to stop the flickering?

 

Or, have I done something really basic and stupid in calling the scrollTrigger with the start and ends which is making scrollTrigger freak out?!

 

Any help would be greatly appreciated. Really keep to understand more about how GSAP works. Thanks for any advice. 

 

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

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. ✅

[Rodrigo]

Hi,

 

Besides echoing the need for a minimal demo, one thing that I could suggest is to try ScrollTrigger's normalizeScroll method:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

Besides that there is not a lot we can do with a video and a live site.

 

Happy Tweening!