Welcome to GSAP!

GreenSock Animation Platform (aka GSAP) makes animation on websites very simple and smooth.

Basic Animations

Try hovering over the box below (the code for this box is down below):

const box = document.querySelector(".box");
box.addEventListener("mouseenter", () => {
    gsap.to(box, { rotation: 360, scale: 1.2, duration: 1 });
});
box.addEventListener("mouseleave", () => {
    gsap.to(box, { rotation: 0, scale: 1, duration: 1 });
});

Scrolling Animations

Use the ScrollTrigger plugin (with the code below) to create something that fades in when you scroll down. You may have to refresh to see it in action:

gsap.from(".card", {
    scrollTrigger: ".card",
    y: 100,
    opacity: 0
});