How do I use GSAP for animation?

How do I use GSAP for animation?

GSAP, or GreenSock Animation Platform, is a powerful JavaScript library for creating high-performance animations. What specific animation are you looking to create?

I want to animate a button on hover.

You can use GSAP's to() method to animate the button. For example:

gsap.to('.my-button', { duration: 0.5, scale: 1.1 });
``` This will scale the button up when hovered.

How do I reverse the animation when the mouse leaves?

You can use the onMouseLeave event to reverse the animation. Here's an example:

const button = document.querySelector('.my-button');
button.addEventListener('mouseenter', () => {
  gsap.to(button, { duration: 0.5, scale: 1.1 });
});
button.addEventListener('mouseleave', () => {
  gsap.to(button, { duration: 0.5, scale: 1 });
});

Can I add a color change to the animation?

Absolutely! You can animate multiple properties at once. Here's how:

gsap.to('.my-button', { duration: 0.5, scale: 1.1, backgroundColor: '#ff0000' });
``` This will change the button's color to red while scaling it.