Bad performance scroll animation on chrome

Hi guys!

I have recently started to design and develop a personal portfolio site in WebFlow. I had some ideas for a cool hero-section and it’s coming along quite as intended.

But, the hero section seems to have really bad performance on Chrome on my MacBook specifically. It runs OK on Safari and runs smoothly on Chrome and Firefox on a PC. The “globe” is supposed to move down behind the front landscape as you start scrolling.

Do you guys experience performance issues on viewing this site? (Currently only optimized for desktop!)

Live link:

Read only link:

A couple of things to keep in mind: The site has a custom cursor and I use css blend-mix-mode on a video layer get the flaming effect around the globe. Might it be GPU related?

Do you have your display resolution set to scaled to get more space?

Hello dram! Thanks for your response!

The resolution on my macbook is set to default, the zoom on Chrome is set to 100%.
Do you experience laggy scrolling animation viewing the site?

Yes, the performance is quite bad but I thought it may be because of the scaling (this is something that happens with scaled displays on macos and chrome).

Could be blending mode that hinders fps. Btw you can use embed component and insert that style you have in the page settings to preview changes right inside designer without publishing.

Also you could try reducing smoothing of “while scrolling in view” interaction from 50 to 0 so there are no pauses (it can work but not 100% certainly). It has something to do with trackpad as well - you could see that things are smooth when you use keyboard arrows to scroll. Do you have a mouse to check it out with it?

Thanks again for the response dram!

I figured it out. The problem was the background video (flames around the globe) that was set to a css specific blend-mix-mode to get rid of the black background. Apparently that was really made a big impact on the performance of the site. I guess I have to figure out an another way to make the video background transparent :slight_smile:

Thanks again!

Yeah, blending modes should be used sparingly and I can imagine how performance intense the blended video is! But tbh I feel the issue could be mac specific - slower graphic processors and such

1 Like

You might be right there. I had no performance issues on my PC, not even on my xperia phone.

1 Like

I also have some suspicions about webflow implementation of “while scrolling in view” and chrome on mac - it never worked as smooth as I wanted it to :sweat_smile:

I’d suggest redoing the entire animation in after effects and exporting it with bodymovin as an jpg-sequence. That way you can put it in as a lottie animation and potentially making a different version for mobile view port.

With this way you just have to load in the jpg’s and don’t need all the effects. :man_shrugging:t2:

Hello Robin!

Thanks for your suggestions, I might give it a try! Part of the problem with jpeg is that it does not support transparency. Maybe png-sequence would be a better fit?

Anyways, great suggestion, thank you!