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!)
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?
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?
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
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
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.
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?
