Why do these very simple animations run so slowly?

Design help Animations & Interactions
1

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: https://www.loom.com/share/2597ba00e7b64ea69601d06ff5d8187a

Here is my site Read-Only: https://preview.webflow.com/preview/iaotp?utm_medium=preview_link&utm_source=designer&utm_content=iaotp&preview=e0b01c69216ad637cb5aa7f8afee5b66&workflow=preview

Any insight/advice would be very much appreciated.

2

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

image
image482Ă—1240 60.6 KB

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
3

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.

4

@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
5

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
6

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: https://www.loom.com/share/a0dc44199668443bb0c54f1d68ca35b2

7

@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
8

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.

9

No one just wants to admit that Webflow interactions are really glitchy and it’s not about specs. Even Wordpress manages to render the easing better as clunky as it is…as soon as I add a little bit more than linear easing, it is jerky. And even linear often glitches. If I code custom css animation, this never happens.
Seems that Webflow abandoned the interations development, there has been almost no change to it apart from tweaking the elements on the panel.

Also on my 15 inch MacBook Pro almost anytime that I try to make transform interaction the y or z axis or width and height is outside of the reach of my screen and it doesn’t let me scroll down. So I have to set zooming to 80% to get there.

This is 100%
100-percent

This is 80% zoom out and the height appears

80-percent
80-percent303Ă—706 33.5 KB

Also when switching between the different breakpoints Webflow looses the element you have selected and you need to scroll. Very annoying when you need to compare the breakpoints

It is a total pain in the *** as much as I LOVE Webflow, I just don’t understand why these crucial things are not working…and then they go into Devlink development, while the BASIC things are still glitching. To this day there is still no mobile editor available…doesn’t make ANY sense.

1 Like