Animations loading slow on Safari (Mobile) only, WHY?

[GSAP Ted]

Hey All, new to the GSAP library and loving it!

 

I tried looking into the question but cannot seem to find other reasons except for a possible CPU issue with the browser type? Safari desktop works great, I use a iPhone 12 Mini (see GIF). They are not supposed to be that slow and stuttery for a lack of a better term. Anyone ever come across the issue and could recommend anything from your experience?

 

I'll post the code I have below.

 

 

const homeController = new ScrollMagic.Controller()

const liTL = gsap.timeline();
liTL.fromTo(
  "nav a",
  {
    color: "#fff"
  },
  {
    color: "rgba(0,0,0,1)",
    duration: 1,
  },
);

let liScene= new ScrollMagic.Scene({
  triggerElement: "header",
  triggerHook: 1,
  reverse: true,
  offset: (document.querySelector("nav").offsetHeight) + 500,
  duration: 0,
})

.setTween(liTL)
// .addIndicators()
.addTo(homeController);

const navTL = gsap.timeline();
navTL.fromTo(
  "nav",
  {
    backgroundColor: "rgba(0,0,0,0)"
  },
  {
    backgroundColor: "#fff",
    duration: 1,

  }
);

let navScene= new ScrollMagic.Scene({
  triggerElement: "header",
  triggerHook: 1,
  reverse: true,
  offset: (document.querySelector("nav").offsetHeight) + 510,
  duration: 0,
})

.setTween(navTL)
// .addIndicators()
.addTo(homeController);

let headertl = gsap.timeline()
headertl.fromTo('nav', {
	y: -200,
	autoAlpha: 0,
},
{
	y: 0,
	autoAlpha: 1,
	duration: 2,
	delay: .1
	}
)
headertl.fromTo('header', {
	// y: -200,
	autoAlpha: 0,
},
{
	// y: 0,
	autoAlpha: 1,
	duration: 2,
	delay: .4
	},
);

 

[GreenSock]

Welcome to the forums, @GSAP Ted. It's pretty tough to diagnose without seeing things in context (a minimal demo will significantly increase your chances of getting an answer in these forums), and we don't support ScrollMagic which isn't a GreenSock product. I'd strongly recommend switching to ScrollTrigger.

 

I wonder if maybe you've got filters applied (like blur or drop-shadow) which can be very CPU-intensive for the browser to render. That's totally unrelated to GSAP. 

 

If you still need some help, feel free to post a minimal demo with a GSAP-specific question and we'd be happy to help. 

[BrianCross]

I find if I am going to have issues with any browser, iOS Safari will be the one. I'll craft an animation and it works flawlessly in Chrome and Firefox, but exhibits weird behaviour in Safari. I haven't tried desktop Safari since I run Linux, but iOS Safari is the worst. 

[GreenSock]

Indeed, I've heard people say that Safari is the new IE

 

But GSAP animations should work the same in any browser (aside from occasional performance differences due to browser optimization or lack thereof). 

[BrianCross]

@GreenSock I'll post another thread with an animation that doesn't work properly in iOS Safari but works perfectly in other browsers. Maybe you guys can figure it out. 😀

[GSAP Ted]

On 4/10/2021 at 3:20 PM, GreenSock said:

Welcome to the forums, @GSAP Ted. It's pretty tough to diagnose without seeing things in context (a minimal demo will significantly increase your chances of getting an answer in these forums), and we don't support ScrollMagic which isn't a GreenSock product. I'd strongly recommend switching to ScrollTrigger.

 

I wonder if maybe you've got filters applied (like blur or drop-shadow) which can be very CPU-intensive for the browser to render. That's totally unrelated to GSAP. 

 

If you still need some help, feel free to post a minimal demo with a GSAP-specific question and we'd be happy to help. 

Thanks @GreenSock I really appreciate your input, i'll continue to further look into it. I look forward to looking more into the forum here, really awesome stuff!

[GSAP Ted]

On 4/12/2021 at 1:20 PM, BrianCross said:

I find if I am going to have issues with any browser, iOS Safari will be the one. I'll craft an animation and it works flawlessly in Chrome and Firefox, but exhibits weird behaviour in Safari. I haven't tried desktop Safari since I run Linux, but iOS Safari is the worst. 

Thanks for the input @BrianCross even today I was adding in some CSS transitions and keyframes and I had to find a thread on Apple just to implement a particular wording to the code just for it to work on iOS Safari. Safari in general can be a headache.