DEV Community

Nihar Raote
Nihar Raote

Posted on • Edited on • Originally published at niharraoteblog.netlify.app

1

How many lines would it take to animate a button? GSAP makes it easy

In this article, I implement a simple button animation with GSAP and use the Composition API introduced in Vue 3.x. If you are not familiar with the Composition API, you can refer to the resources linked at the end of the article.

What is GSAP?

GSAP (GreenSock Animation Platform) is a JavaScript animation library that allows developers to create powerful animations with few lines of code. With this library, you get more precise control over your animations, which makes it easier to create complex animations. The GSAP library is small in size, easy to use, and works consistently across browsers with under-the-hood calculations.

Simple button animation

I have created a simple form and used GSAP to run an animation when the submit button is clicked. For this, I used the Composition API and ref from Vue. The animation itself takes only two lines of code:

Simple button animation code

Here's the codepen; you can tweak around to make some cool form animations as well:

Resources

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️