DEV Community

Cover image for Framer AI button animation
Eduard Constantin
Eduard Constantin

Posted on

1

Framer AI button animation

This week I've seen a few people trying to replicate this button hover animation created by Edoardo Mercati.

I challenged myself to create the animation but using framer motion, a popular animation library for React. In addition, I added a few props to be able to change the color and the text of the button. This way, I can customize the animation to suit different themes and purposes.

I learned a lot from this challenge and I’m pretty happy with the final result.

You can find the code for this project on GitHub, feel free to contribute:
https://github.com/eduardconstantin/react-motion-components

And I also set up a website on Vercel:
https://react-motion-components.vercel.app

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more