Custom animation is not “make it bounce.” It’s visual storytelling with timing — hierarchy, attention, and emotion — under a performance budget.
At ShubhKarma Tech, we use GSAP when CSS transitions aren’t enough: multi-step timelines, scroll-scrubbed chapters, coordinated text/image reveals, and branded motion systems that still pass Core Web Vitals.
This guide is how to design custom GSAP animations that feel expensive — without turning the site into a 40fps slideshow.
1) Decide the job of the motion
Every animation should do one of these:
1) **Orient** the user (where am I / what matters?)
2) **Explain** a product or process
3) **Reward** an action (micro-feedback)
4) **Brand** the experience (signature feel)
If motion exists only because “competitors have scroll animations,” delete it.
2) Design motion before you write tweens
Storyboard first:
What is on screen at scroll progress 0%, 40%, 70%, 100%?
What moves, what stays, what fades?
What is the one thing the eye should follow?
Then translate that into GSAP timelines. Skipping the storyboard is how you get random fades with no narrative.
3) The GSAP patterns that look “premium”
A) Staggered reveals with shared easing
Headlines, supporting lines, and cards entering with a controlled stagger read as intentional. Keep distances small (12–28px) and durations short (0.45–0.9s). Big travel distances feel outdated.
B) ScrollTrigger scrubbed chapters
For long landing pages, scrubbing a timeline to scroll position creates that editorial, “directed” feel. Use pinning sparingly — pin one section that deserves theater, not every block.
C) Split text — carefully
Character/word splits look premium when used on one hero line. Using them on every heading becomes noise and hurts readability.
D) Parallax with restraint
Parallax sells depth. Too much parallax sells motion sickness. Cap offsets and disable on reduced-motion / low-end devices.
4) Architecture rules (especially with Next.js / React)
Production rules we enforce:
1) **Create timelines once**, kill them on unmount / route change
2) Register ScrollTrigger once; don’t re-register in loops
3) Prefer animating `transform` and `opacity` (compositor-friendly)
4) Avoid animating layout properties (`top`, `height`, `padding`) on large elements
5) Batch DOM reads/writes; don’t measure layout inside scroll handlers manually when ScrollTrigger already can
In React/Next.js, put animation setup in client components and clean up with `ctx.revert()` (GSAP context) so App Router navigations don’t leak triggers.
5) Performance budget for motion sites
A premium feel dies if interaction delay is high.
Ship this checklist:
Animate fewer elements (8 well-timed pieces > 40 random ones)
Lazy-init heavy sections when near viewport
Compress images; don’t animate 2MB PNGs
Pause infinite loops when offscreen
Respect `prefers-reduced-motion: reduce` with an instant, readable state
Test on a mid-range Android phone — not only on a MacBook Pro
If LCP is a huge animated hero image competing with fonts and JS, rethink the hero.
6) Micro-interactions that raise perceived quality
Custom doesn’t always mean scroll theater. Small GSAP touches often convert better:
Button press with tiny scale + shadow settle
Nav underline that morphs with intent
Form field focus that gently highlights the active step
Success states that confirm “we got your message”
These are cheap, accessible, and brand-defining when consistent.
7) Build a tiny motion system (so the site feels coherent)
Define tokens:
**Duration:** xs / sm / md / lg
**Ease:** primary product ease + one expressive ease for heroes
**Stagger:** 0.05–0.12s
**Distance:** 16 / 24 / 32px
When every page invents new easing curves, the brand feels accidental.
8) Accessibility is part of craft
Premium teams ship:
Reduced-motion fallbacks
No essential information only in animation
Keyboard-accessible controls if motion can be paused
Contrast-safe text during overlays / reveals
If users can’t read the headline while it’s animating in, the animation failed.
9) A simple production workflow we use
1) Static layout + copy first (SEO and conversion)
2) Mark “motion moments” on the wireframe (max 3–5 per long page)
3) Implement base reveals
4) Add one signature section (scrubbed story or branded hero)
5) QA performance + reduced motion
6) Only then polish offsets and eases
Polish last. Structure first.
Common GSAP fails (steal this audit list)
ScrollTrigger created repeatedly on resize without cleanup
Multiple pins fighting each other
Animating the whole page opacity on load (feels slow, hurts LCP perception)
Heavy blur/filter animations on large surfaces
No mobile variant (desktop pin distances on a phone = broken UX)
Bottom line
Custom GSAP animation feels premium when it’s directed, consistent, and budgeted. It feels cheap when it’s loud, everywhere, and late.
If you want motion that supports brand and conversion — not just a Dribbble loop embedded in production — that’s the standard we build to at ShubhKarma Tech.
Want a motion pass on your site?
Send your URL to shubhkarmatech.com/contact. We’ll suggest 3 high-impact GSAP moments and what to delete.
ShubhKarma Tech — Custom web animation & Next.js development in Dehradun.