Jump to content
Search Community

Small hesitation at start of animation

jasonduquain test
Moderator Tag

Recommended Posts

I have attempted to recreate an ad I found online. The animation is pretty close to it but I need to tweak some timings and change out the images, especially the maltese falcon thing. But I needed a quick free transparent image as a placeholder.

 

I am not sure if anyone can help as this is more of a performance issue. Also it may be difficult to recreate butI have tested on 2 different connections and it also happens locally.

 

I think the best way to describe it using a short video screenshot I took:

 

https://res.cloudinary.com/jduquain/video/upload/v1580740725/videos/perf.mp4

 

Right at the 2800ms mark you can see the triangle and the statue come in a bit then they are stuck for 200 or so milliseconds before moving again. And the animation is set to start right after page load. I have spent a good bit of time trying to figure it out but have no idea. I have gotten better with the performance panel in devtools but I just don't see anyting obvious.

 

Please know that I completely understand if nobody can help with this. This may have nothing to do with GSAP and also is not a functionality issue so no worries if not.

 

But if anyone sees anything obvious based on the code or has any suggestions please let me know. 

 

 

 

 

 

 

See the Pen BayXOPg by JasonDuquain (@JasonDuquain) on CodePen

Link to comment
Share on other sites

Hey Jason.

 

It looks like like a performance issue that only occurs with lower end devices. You should try and figure out where that "Recalculating style" purple part with the red at the top right is coming from. My guess is that it's from animating the left property. I recommend that you don't animate the left property but instead only use transforms (translates). I think you'd be interested to know about GSAP's xPercent property. xPercent: -50 is equivalent to transform: translateX(-50%) as well as x: '-50%'. You could also try forcing 3D animation to put it on the GPU force3D: true on the tween(s) that are causing the issue.

 

Another potential source is animating of the element with the clip-path. If that's the cause, using transparent PNGs or something similar could help.

Link to comment
Share on other sites

You also don't need to keep creating the same custom ease over and over again. Just create it once. However, I don't think that will fix the problem you are seeing.

 

If I delay calling init by a second, that totem thingy doesn't even move in. There is something else going on in your demo, but I don't know what.

 

See the Pen 68be956824c1815bb73a545d34884170 by osublake (@osublake) on CodePen

 

 

  • Like 1
Link to comment
Share on other sites

Thank you both.

 

Regardless of if any of that fixes it I know I am using some poor coding practices (not DRY, using left/position insead of transforms) that need fixing.

 

Let me update a few things based on both of your suggestions and also dig a bit more into the flame chart in dev tools..

Link to comment
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.
×
×
  • Create New...