Animations

GSAP animation presets and demos

All GSAP plugins are now free! ScrollTrigger, DrawSVG, MorphSVG, SplitText, and more are available without licensing restrictions.

Scroll Smoother

New1 component

Buttery-smooth scrolling with parallax effects

Logo Reveals

7 presets

DrawSVG stroke reveals, fade-ins, and morph effects

Micro-Interactions

5 presets

Button presses, card hovers, and feedback animations

Scroll Effects

3 presets

ScrollTrigger parallax, pins, and reveals

Logo Animation Presets

Stroke Reveal

Line drawing effect that reveals the logo stroke by stroke

1.2s

power2.inOut

Fade In

Simple opacity fade from 0 to 1

0.4s

sine.inOut

Scale In

Logo scales up from 0 to full size

0.6s

elastic.out(1, 0.5)

Slide Up

Logo slides up from below while fading in

0.6s

power2.out

Stagger In

Child elements animate in sequence

0.4s

power2.out

Pulse

Subtle scale pulse for hover states

0.2s

sine.inOut

Glow

Adds a glowing effect on hover

0.4s

sine.inOut

Usage

Logo Intro Animation

import { useGSAP } from '@gsap/react';
import gsap from 'gsap';
import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin';
import { createLogoIntroTimeline } from '@/lib/gsap-animations';

gsap.registerPlugin(DrawSVGPlugin);

function AnimatedLogo() {
  const containerRef = useRef(null);
  
  useGSAP(() => {
    const tl = createLogoIntroTimeline(gsap, containerRef.current, {
      strokeReveal: true,
      fillFade: true,
    });
    tl.play();
  }, { scope: containerRef });
  
  return (
    <div ref={containerRef}>
      <svg data-gsap-root>
        <path data-gsap="stroke" d="..." />
        <path data-gsap="primary" d="..." />
      </svg>
    </div>
  );
}