The Problem with Web Animation

Web animation has a reputation problem. For years, digital agencies have treated motion as a cosmetic stunt — hijacking user scroll bars, throwing arbitrary elements across the screen, and forcing visitors to wait through long preloader animations.

When animation calls attention to itself rather than serving the content, it ceases to be craft and becomes friction.

At Pothipath Studio, we developed a motion doctrine called "The Page Turns." Its core rule is simple: Motion must perform, never decorate. Every animation on the screen must feel like turning a physical page — purposeful, tactile, and immediately responsive.

The Modern Motion Stack: Lenis + GSAP

To achieve buttery, tactile movement without breaking native browser accessibility, we pair Lenis (inertial smooth scrolling) with GSAP ScrollTrigger (timeline-based spatial animations).

The secret to a flawless integration is synchronizing their animation loops into a single source of truth:

// Single requestAnimationFrame ticker synchronization
import Lenis from 'lenis';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

// 1. Initialize Lenis with gentle damping
const lenis = new Lenis({
  lerp: 0.1,
  smoothWheel: true
});

// 2. Feed Lenis scroll updates directly into ScrollTrigger
lenis.on('scroll', ScrollTrigger.update);

// 3. Drive Lenis through GSAP's single rAF ticker
gsap.ticker.add((time) => {
  lenis.raf(time * 1000);
});

// 4. Disable lag smoothing to eliminate sync drift
gsap.ticker.lagSmoothing(0);

Three Rules for Editorial Motion

1. Choreograph Entrances, Don't Scatter Them

On initial page load, avoid animating dozens of separate elements independently. Group elements into a single cohesive narrative:

  • The wordmark settles in with a gentle upward drift.
  • The hero headline reveals cleanly via a vertical clip-path (clip-path: inset(100% 0 0 0) to inset(0% 0 0 0)).
  • The saffron page in our logo executes one subtle 15° turn — and then rests.

2. Staggered "Leaf-Turn" Card Reveals

As the user scrolls, portfolio and service cards shouldn't just pop onto the screen. By applying a subtle 3D transform (rotateX: 4deg to 0deg paired with an opacity fade), cards enter the viewport with the tactile weight of a turning page.

3. Respect User Intent (Accessibility First)

Motion should never be forced on users who prefer stillness. We strictly respect the prefers-reduced-motion media query at both the CSS and JavaScript layers:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Conclusion

Great motion design is like great bookbinding: you don't consciously think about the stitch work while reading, but you feel the quality in your hands with every page you turn.