Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
JimmyK

GSAP animation very laggy in Safari.

Recommended Posts

Hey guys. I just launched my new website. All my vanilla JS animations are super smooth. And my GSAP animation is smooth in every other browser like Firefox, and Chrome.

But in Safari it is super laggy, like instead of being smooth is clips 4 times, so it increases 25% each time.
None of my other elements does this, so I do not think that this is a general problem on the site. And the animation is like super subtle so I can't see why it would cause such a lag.
I am new to GSAP. I put a codepen URL, I haven't pasted the whole styling in, but I pasted all the GSAP js in so you can get a sense of what I have done.

 

 

 

UPDATE: I found a solution, it was a Lottie animation who were interfering with the animation, thanks for the help!

See the Pen zYrgNxO by JimmyK12345 (@JimmyK12345) on CodePen

Share this post


Link to post
Share on other sites

Hey Jimmy. Width and height are not very performant elements to animate. I highly recommend avoiding doing so whenever possible. 

 

It's pretty hard for us to help besides that given the lack of code. Please recreate the issue more fully if you'd like help debugging :) 

Share this post


Link to post
Share on other sites

Hey there, thanks for replying!
Here is a link to the live page, so you can see. -- -- 


As you can see it works as it should in all browsers on mobile version, and all browsers but Safari in desktop version.

Share this post


Link to post
Share on other sites

Thanks but can you try to just include the relevant parts? That way we have to look through a lot less irrelevant stuff:

 

Share this post


Link to post
Share on other sites
9 hours ago, ZachSaucier said:

Thanks but can you try to just include the relevant parts? That way we have to look through a lot less irrelevant stuff:

 


Hey there. I created a new pen with only the relevant parts. This is basically all there is to the animation. If there is any alternative way of creating such animation I'd love to know. 
What is weird is that it works flawless on mobile Safari, but is super laggy on desktop Safari. It does not lag in the codepen, but you can see on the live site if you browse through safari how it is lagging a lot. (Literally like 100px per second) 


UPDATE: I found a solution, it was a Lottie animation who were interfering with the animation, thanks for the help!

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×