Streaming live at 10am (PST)

Interaction Performance tips/Audit?

Is there a resource to understand best practices when it comes to applying interactions? I appreciate that there are no limitations in the number or complexity of interactions I can apply, but it would be great to understand where potential inflection points are with performance. (I’m a kid in a candy store, and some adult supervision would help at times.) I know there’s techniques to stagger animations, and I know to avoid some more computationally expensive effects… but I’m basically operating in the dark when it comes to over-all site performance.

In developing my own site right now, I have horrendous FPS on simple fade in/out of text and images on scroll. I’ve been continually cutting back the amount of animations and complexity of animations without any discernible difference– it’s still bad with only opacity animations. I’ve run Lighthouse in Chrome without any major red flags either… so this is the source of my frustrations. I know I’m not asking a lot of Chrome + my MacBook Pro, but there has to be something I don’t know I don’t know.

This is less about my site specifically and more about general info/resources when it comes to applying interactions specifically in WebFlow.

Any additional info would be greatly appreciated. Thanks.

1 Like