JimmyK Posted July 31, 2020 Posted July 31, 2020 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.
ZachSaucier Posted July 31, 2020 Posted July 31, 2020 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
JimmyK Posted July 31, 2020 Author Posted July 31, 2020 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.
ZachSaucier Posted August 1, 2020 Posted August 1, 2020 Thanks but can you try to just include the relevant parts? That way we have to look through a lot less irrelevant stuff:
JimmyK Posted August 1, 2020 Author Posted August 1, 2020 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! 1
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now