Poor animation performance on Safari – any tricks?

Design help Animations & Interactions
1

Hi all,

I am struggling to improve animation performance on safari for this page.

Not just the front page (which contains a rather large lottie element – but also pages with only text above the fold).

It’s particularly the load in that has been tricky as hell. I have tried multiple things. Native GSAP and custom code. Initialliy I was aiming for text-split loading in, but that was performing even worse.

It seems the problem is a bottleneck at the page load, as there seems to be many native JS scripts that need to load. The CPU strain is through the roof.

Perhaps a plugin like barba.js could handle the load in animation better…

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hello @Gabdzi , As per the description of the problem you specified, you need to apply some practices to solve the issue.

  • Lazy load heavy modules with dynamic imports- Try to apply lazy loading with dynamic imports. Below is the coded solution for that -
// Only load the heavy module when needed
           button.addEventListener('click', async () => {
           const { heavyFunction } = await import('./heavyModule.js');
           heavyFunction();
           });
  • Throttle expensive functions like scroll, resize-
function throttle(fn, delay) {
            let last = 0;
            return (...args) => {
                const now = Date.now();
                    if (now - last >= delay) {
                         last = now;
                         fn(...args);
                           }
                        };
                    }

window.addEventListener('scroll', throttle(() => {
console.log('Throttled scroll event');
 }, 200));

Alternatively, if you are too frustrated with this, I recommend trying Website Speedy- a webflow app which is best optimizes the site and enhances the performance by handling JS, CSS, and other core web vitals.

(Disclaimer: We are part of the developing team and are always there to help you. If you have any query, ask without any hesitation.)

3

Thanks for your reply @Website_Speedy,

I tried the app solution, but unfortunately it did not have the desired effect.
I still have to test out the throttle function.

For now disabling the script with the load-in animation is the best option – as that increases performance drastically.

I’m just curious how other pages (not webflow though) can manage to get silky smooth load-in animation on safari…

4

Safari (and really in most browsers), multiple <vi-deo> elements with loading=“eager” can absolutely hurt performance, and Safari can be especially sensitive to this.

5

Sometimes only script installation do not works and hence website speedy has the 4th step i.e., Expert Optimization Did you tried that? If not, please check it with the same to get this setup correctly without dropping any animation effect on your website.

6

Thanks for all the input – I’ll keep an eye on the <vi-deo> elements.
However the CPU spike and FPS drop also occurred on some of the pages without any <vi-deo>
elements…

@Website_Speedy Expert Optimization – I did not. Is that having a consultant looking into it?

Seems that applying:
will-change: transform;
transform: translateZ(0);
(and in some cases contain: layout paint style;)
to the elements that are involved in the load in animation, helped somewhat.

The quest continues :slight_smile:

7

@Gabdzi Thank you for the insights.

Expert optimization is the process to enhancing the speed and performance of the website with making tweaks on the script based on the scope for improvement.

Please move ahead towards the last 4th step to get your website optimized at it’s very optimum level.