AnimationLibrariesIUsetoBringWebExperiencestoLife

Animation Libraries I Use to Bring Web Experiences to Life

Animation is one of the most important parts of how I design and build for the web. I do not see motion as decoration. I use it to guide attention, improve flow, create hierarchy, and make interfaces feel more immersive.

As a creative frontend developer, I enjoy building websites that feel responsive and alive. Some projects need subtle hover feedback, while others need scroll-based storytelling, smooth transitions, or layered motion systems. That is why I use different tools depending on the kind of experience I want to create.

In this post, I am sharing some of the animation libraries I use most often in my work and why each of them plays an important role in my workflow.

Framer Motion

Framer Motion is one of my favorite tools for adding elegant motion to React interfaces. I use it for entrance animations, hover effects, page transitions, layout animations, and interactive UI components.

What I like most about Framer Motion is how naturally it fits into React. Instead of thinking of animation as something separate, I can build it directly into the component structure. That makes it especially useful for portfolio sections, animated cards, and polished transitions that make a website feel intentional.

Example: simple fade-up reveal

"use client";

import { motion } from "framer-motion";

export default function FadeUpCard() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 40 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, amount: 0.3 }}
      transition={{ duration: 0.7, ease: "easeOut" }}
      className="rounded-2xl border border-white/10 p-6"
    >
      <h3 className="text-xl font-semibold">Framer Motion</h3>
      <p className="mt-2 text-sm text-neutral-300">
        Smooth and modern animation for React interfaces.
      </p>
    </motion.div>
  );
}

This kind of animation is great for sections that should appear smoothly as the user scrolls through the page.

GSAP

When I need more control, I use GSAP. It is one of the most powerful animation libraries for the web, especially for more advanced sequences. I use it for text reveals, scroll-triggered effects, pinned sections, timelines, and immersive storytelling.

GSAP gives me precise control over timing and choreography. That makes it perfect for projects where movement needs to feel cinematic or highly intentional.

Example: basic GSAP entrance animation

"use client";

import { useEffect, useRef } from "react";
import gsap from "gsap";

export default function GsapIntro() {
  const boxRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!boxRef.current) return;

    gsap.fromTo(
      boxRef.current,
      { opacity: 0, y: 60 },
      { opacity: 1, y: 0, duration: 1, ease: "power3.out" }
    );
  }, []);

  return (
    <div
      ref={boxRef}
      className="rounded-2xl border border-white/10 p-6"
    >
      <h3 className="text-xl font-semibold">GSAP</h3>
      <p className="mt-2 text-sm text-neutral-300">
        Powerful timeline-based animation for advanced interactions.
      </p>
    </div>
  );
}

Example: GSAP with ScrollTrigger

"use client";

import { useEffect, useRef } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

export default function ScrollRevealSection() {
  const sectionRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!sectionRef.current) return;

    gsap.fromTo(
      sectionRef.current,
      { opacity: 0, y: 80 },
      {
        opacity: 1,
        y: 0,
        duration: 1,
        ease: "power3.out",
        scrollTrigger: {
          trigger: sectionRef.current,
          start: "top 80%",
          toggleActions: "play none none reverse",
        },
      }
    );
  }, []);

  return (
    <section
      ref={sectionRef}
      className="min-h-[60vh] rounded-2xl border border-white/10 p-8"
    >
      <h2 className="text-2xl font-bold">Scroll-based storytelling</h2>
      <p className="mt-3 text-neutral-300">
        GSAP helps create more immersive transitions and layered movement.
      </p>
    </section>
  );
}

For me, this is where the web starts to feel less like a static page and more like an experience.

Lenis

Lenis is a library I use when I want to create a smoother scrolling experience. It changes the overall feel of a website in a subtle but meaningful way. Smooth scrolling can make motion-heavy interfaces feel more refined, more premium, and more cohesive.

I especially like using Lenis when I am combining scroll behavior with GSAP or other reveal-based animations.

Example: Lenis setup in React

"use client";

import { useEffect } from "react";
import Lenis from "@studio-freight/lenis";

export default function LenisProvider() {
  useEffect(() => {
    const lenis = new Lenis({
      duration: 1.2,
      smoothWheel: true,
    });

    function raf(time: number) {
      lenis.raf(time);
      requestAnimationFrame(raf);
    }

    requestAnimationFrame(raf);

    return () => {
      lenis.destroy();
    };
  }, []);

  return null;
}

I usually place this component near the top of my app layout so the smooth scroll behavior is applied globally.

React + Intersection Observer

Not every animation needs a heavy library. Sometimes the cleanest solution is just revealing content when it enters the viewport. For simple fade-ins, staggered lists, or section reveals, Intersection Observer is lightweight and very effective.

Example: custom in-view reveal component

"use client";

import { useEffect, useRef, useState } from "react";

export default function InViewReveal() {
  const ref = useRef<HTMLDivElement>(null);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    if (!ref.current) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setVisible(true);
        }
      },
      { threshold: 0.25 }
    );

    observer.observe(ref.current);

    return () => observer.disconnect();
  }, []);

  return (
    <div
      ref={ref}
      className={`transition-all duration-700 ${
        visible ? "translate-y-0 opacity-100" : "translate-y-10 opacity-0"
      }`}
    >
      <h3 className="text-xl font-semibold">Intersection Observer</h3>
      <p className="mt-2 text-sm text-neutral-300">
        A lightweight way to reveal sections as they enter the viewport.
      </p>
    </div>
  );
}

This approach is useful when I want clean interaction without adding too much complexity.

CSS and SCSS for micro-interactions

I also rely a lot on CSS and SCSS for smaller motion details. Hover states, button transitions, blur effects, scaling, and underline animations often do not need a full JavaScript library. Using CSS for these moments keeps things fast and simple.

Example: button hover effect

.animated-button {
  display: inline-block;
  padding: 0.9rem 1.4rem;
  border-radius: 999px;
  background: white;
  color: black;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.animated-button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.15);
}

These small details may seem minor, but together they shape how polished an interface feels.

How I choose the right animation tool

I do not choose animation libraries based on popularity alone. I choose them based on the type of interaction I want to create.

If I want something component-based and clean inside React, I use Framer Motion.

If I need advanced timelines and scroll choreography, I use GSAP.

If I want smoother page movement, I use Lenis.

If I need a simple reveal effect, I may use Intersection Observer or even just CSS.

That balance matters to me. Good motion should support the design, not overwhelm it.

Why animation matters in my work

Animation is where design and development come together most clearly for me. It allows me to think not just about how a website looks, but how it behaves and how it feels.

I enjoy creating interfaces that respond to the user, guide them through content, and make the experience more memorable. Whether I am building a personal portfolio, an experimental landing page, or a storytelling section, motion helps me add rhythm, clarity, and personality.

These libraries are not just technical tools in my workflow. They are part of how I shape digital experiences.

The web feels most exciting to me when it is interactive, expressive, and thoughtfully designed. That is why animation continues to be such an important part of my process. Libraries like Framer Motion, GSAP, Lenis, and lightweight React patterns help me create interfaces that feel more alive and intentional.

As I keep exploring creative development, I am always looking for new ways to use motion not just to impress, but to improve the overall user experience.