Why do these very simple animations run so slowly?

I made a page with two extremely simple animations above the fold that run extremely slowly: https://iaotp.webflow.io/.

I also made a recording of this on Loom: Loom | Free Screen & Video Recording Software

Here is my site Read-Only: Webflow - IAOTP

Any insight/advice would be very much appreciated.

@Chuck_Braman - it’s purely based on the timing settings for the animation, for instance:

This animation starts 2 seconds after page load, then has a 2 second delay and then takes 2 seconds to run. So a total of 6 seconds after page load before it’s completed, could that out as your page loads, it’s a pretty long time.

1 Like

Thank you, @sam-g

I think I didn’t express my question clearly. The problem isn’t the timing, but that the animated items are jerky. That’s what I meant by slowly. They are somehow straining the processor; I don’t understand how or why, as the animation is minimal and simple.

@Chuck_Braman - my guess would be an issue with your computer - try a restart or another device. It animates smoothly on my end on both Chrome and Safari.

1 Like

Tested on my pc with Chrome/FF/Edge browsers - Animation runs Smothlly on my end.

When testing on DevTools >> performance - with throttling x4 CPU slowdown,
there is a major lagging when the animation starts.

If you want to get better performance, for low-level device users, I would do some testing with throttling.
The first thing I would try is to fire the animation when “page finishes loading” (not starts loading).
Also, try putting a big delay before animations start just to see if that’s where the problem lays.

1 Like

Thank you, @sam-g, @11149,

@sam-g, I have a pretty decent computer, a 16 inch MacBook Pro with 32 gigs of ram, it wouldn’t seem likely it would be underpowered for this.

@11149, changing to “page finishes loading” helped a bit. Adding a delay before the start didn’t have any effect.

It’s improved, but still stutters a bit: Loom | Free Screen & Video Recording Software

@Chuck_Braman That is strange. Your specs are better than mine.
The only thing I can think of to explain it is something to do with Mac/Safari environment.
(although testing in my IPad via Safari runs smoothly).

There is definitely an improvement after moving it to “page finishes…”.
Now, it runs smoothly on my end even when testing with x4 times CPU slowdown (unlike before)
When I up the slowdown to x6 I can see the stutters like in your recording.

Things I would try to see if there is an improvement: (can’t test this on my end with read-only)

  1. Adding will-change (in an attempt to force GPU)
    just add this as custom code:
<style>
.navbar {
will-change: transform;
}
</style>
  1. animating an Absolute positioned element ( try adding an absolute positioned container inside “Navbar” and put “logo” & “nav link…” in it. style this container with 100% width and navbar with some height, just to view it properly for testing). now target this absolute container in the animation, not the navbar.

  2. optimized logo. I would first try to remove the image itself to see if there is an improvement. if so, I would optimize it (A. resize the image: logo width defined as 80px and image is 264x226. B. better format - save as jpeg, not png if the background is always white. maybe even in webp)

Hope it will help.

1 Like

Hi @11149,

Thank you so much for your time and attention to this.

I tried all three of your suggestions, but no change.

All I can think is that maybe I need to try it on another Mac when I have the opportunity and see if the issue is still present.