Here are a few tips and tricks I’ve picked up over the years that will help you create interesting and performant animations & transitions for your next project. Tip #1 – Some properties are more taxing than others The most common cause of laggy animations on the web comes down to this. Generally, most properties […]
Category Archives: CSS
Animated laptop from website
Just redesigned the landing page for haakon.underbakke.net. Here’s a self-contained component that only needs styled-components (and material icons cdn, if you want the same icons) installed to work, if you want to use it for yourself. The laptop also turns white (to contrast darker backgrounds) on @media (prefers-color-scheme: dark). https://codesandbox.io/s/laptop-animation-d70o1
Material design – Ripple button component (react)
I love the onClick-ripple effect that material design buttons offer. I decided to make my own button-component that inhabits this effect by default, but is also flexible beyond that feature. Here’s the result: I went for react-jss for styling the component as to make it as self-contained as possible. If you don’t want to use […]