I have a bit of a performance problem with my portfolio site and I can’t find what’s causing it. Here’s the thing: I have set a parallax interaction in the first hero section which is triggered by the element called “100vh-animation-trigger” both on desktop and a second version (because of different elements used) on mobile. Now, on mobile everything is fine and the animation runs smoothly, but on desktop it feels kinda sluggish.
In fact the whole site takes up significantly more cpu on desktop, if the browser is set to a size which reflects desktop dimensions. But when I resize the browser window so the site changes to the tablet version cpu usage is fine and all runs smoothly. This is especially noticeable in safari on mac.
Maybe someone can point me to where I can optimize and fix a thing or two. Thanks in advance.
Here is my public share link: https://preview.webflow.com/preview/miju?utm_source=miju&preview=1f0f9190a01a204b45b1b46bd17d8f9b
Live site link is here: miju.webflow.io
EDIT: I fixed the problem. The culprit was a div block with a repeating page interaction (little scroll hint animation). As I scrolled the hero section the div should slowly fade to 0% opacity. Somehow this scroll interaction caused a massive cpu spike which — off cause — didn’t happen in mobile layout, because there was no scroll hint. Anyway… the problem is now solved and the topic can be closed. Thanks.