← Back to Lesson

🖱️ GSAP Interactive Animations

Mouse, hover, drag, and scroll interactions

1. Mouse Follow Animation

Smooth cursor following using GSAP quickTo for performance.

Move your mouse around this area

let mouse = { x: 0, y: 0 };
let cursor = { x: 0, y: 0 };

window.addEventListener('mousemove', (e) => {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
});

// Smooth follow with GSAP quickTo
const xTo = gsap.quickTo('.cursor', 'x', {
  duration: 0.6,
  ease: 'power3'
});
const yTo = gsap.quickTo('.cursor', 'y', {
  duration: 0.6,
  ease: 'power3'
});

gsap.ticker.add(() => {
  xTo(mouse.x);
  yTo(mouse.y);
});

2. Hover Effects

Interactive button animations on hover. 

const buttons = gsap.utils.toArray('.btn');

buttons.forEach((btn) => {
  const icon = btn.querySelector('.icon');

  btn.addEventListener('mouseenter', () => {
    gsap.to(icon, {
      x: 5,
      rotation: 15,
      duration: 0.3,
      ease: 'back.out(2)'
    });
    gsap.to(btn, {
      scale: 1.05,
      duration: 0.3,
      ease: 'power2.out'
    });
  });

  btn.addEventListener('mouseleave', () => {
    gsap.to(icon, {
      x: 0,
      rotation: 0,
      duration: 0.3,
      ease: 'power2.out'
    });
    gsap.to(btn, {
      scale: 1,
      duration: 0.3,
      ease: 'power2.out'
    });
  });
});

3. Card Hover Effects

Advanced card interactions with 3D transforms.

Hover Me

const card = document.querySelector('#hoverCard');

card.addEventListener('mouseenter', () => {
  gsap.to(card, {
    scale: 1.1,
    rotationY: 5,
    rotationX: 5,
    boxShadow: '0 20px 40px rgba(59, 130, 246, 0.4)',
    duration: 0.3,
    ease: 'power2.out'
  });
});

card.addEventListener('mousemove', (e) => {
  const rect = card.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const centerX = rect.width / 2;
  const centerY = rect.height / 2;
  const rotateX = (y - centerY) / 10;
  const rotateY = (centerX - x) / 10;

  gsap.to(card, {
    rotationX: rotateX,
    rotationY: rotateY,
    duration: 0.3,
    ease: 'power2.out'
  });
});

card.addEventListener('mouseleave', () => {
  gsap.to(card, {
    scale: 1,
    rotationX: 0,
    rotationY: 0,
    boxShadow: '0 4px 15px rgba(59, 130, 246, 0.2)',
    duration: 0.3,
    ease: 'power2.out'
  });
});

4. Draggable Elements

Note: Draggable plugin requires Club GreenSock membership. This demo shows the concept with vanilla GSAP.

Drag Me
// With Draggable plugin (Club GreenSock)
gsap.registerPlugin(Draggable);

Draggable.create('.box', {
  type: 'x,y',
  bounds: '.container',
  inertia: true,
  onDrag: function() {
    console.log(this.x, this.y);
  }
});

// Vanilla GSAP approach (simplified)
let isDragging = false;
let startX, startY, initialX, initialY;

element.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX;
  startY = e.clientY;
  // Get current position
});

document.addEventListener('mousemove', (e) => {
  if (isDragging) {
    const dx = e.clientX - startX;
    const dy = e.clientY - startY;
    gsap.to(element, {
      x: initialX + dx,
      y: initialY + dy,
      duration: 0.1,
      ease: 'none'
    });
  }
});
💡 Key Concepts: