How To Create A Spring Effect With CSS

How to animate these wiggly elements that look so natural with CSS? This article is the answer!

Lately I’ve stumbled upon a video by Frederik von Sperling where he shows how to create a spring effect with Framer.

I’ll be able to write the next article because you read this on my blog on Medium. Thanks!

I enourage you to follow Frederik on social media because he’s making some really great tutorials.

Frederik is available on multiple social media platforms.

Framer Motion is a React library for animations.

The effect Frederik is showing in his tutorial is a rounded rectangle that rotates and zooms in on a hover.

What caught my attention is if it’s possible to do with CSS. Because CSS is standardized, while Framer Motion isn’t and it’s largely a CSS overlay. It means things written in CSS will work as they are, while things written in Framer have to be maintained as well as the dependency to the library.

Also, like with any overlay, these tend to make some things easier, some things the same but a little bit different and some harder or impossible.

Subscribe!