Animation Libraries Are Bloated

The Animation Tax

Every modern web application needs animation. Page transitions, micro-interactions, scroll-triggered reveals, hover effects, loading states, layout shifts — animation is not decoration, it is communication. It tells users what happened, what is happening, and what will happen next.

Yet the animation ecosystem has somehow become one of the most expensive and bloated corners of frontend development:

Library	Bundle Size	Cost	Limitation
GSAP	~27KB core + plugins	$150/yr commercial	Commercial license required for paid products
Framer Motion	~32KB	Free	React-only, heavy runtime
React Spring	~18KB	Free	React-only, complex API
Motion One	~3.8KB	Free	Limited API surface, no spring physics
Anime.js	~17KB	Free	No scroll, no gestures, no layout animations
forge/animate	Part of HBForge	Free	Full-featured, framework-agnostic

GSAP is the industry standard, and for good reason — it is incredibly capable. But the moment you ship a commercial product, you need a license. For an indie developer or a startup, $150/year might seem minor. But it adds up across projects, and the licensing terms are complex enough that many teams are unknowingly in violation.

Framer Motion is the default for React applications, and it is excellent within its constraints. But 32KB of JavaScript just for animations is significant, and it only works with React. If you use a different framework (or no framework), you are out of luck.

What forge/animate Provides

forge/animate is approximately 3,500 lines of code. It is framework-agnostic (works with forge/client, React, Vue, Svelte, or vanilla JavaScript). It is free for any use, commercial or otherwise. And it covers the same feature surface as GSAP + Framer Motion combined:

Spring Physics

Easing curves are mathematical functions that feel synthetic. Spring physics simulate real-world mass and tension, producing animations that feel natural and alive. forge/animate includes a full spring physics engine:

import { Tween, spring } from 'hbforge/animate';

// Spring animation — feels like a real physical object
new Tween(element, {
  x: 200,
  scale: 1.1,
  ease: spring({ stiffness: 300, damping: 20, mass: 1 }),
});

// Presets for common spring types
new Tween(element, {
  y: 0,
  ease: spring.bouncy,    // high stiffness, low damping
});

new Tween(element, {
  opacity: 1,
  ease: spring.gentle,    // low stiffness, high damping
});
    

The spring solver runs per-frame, computing the exact position based on physical simulation. Interrupting a spring mid-animation seamlessly transitions to the new target — no jarring stops or restarts. This is identical to how Framer Motion's springs work, but without the React dependency or the 32KB bundle.

Scroll-Linked Animations

Scroll-driven animations are everywhere: parallax hero sections, progress indicators, reveal-on-scroll effects, sticky element transitions. Most animation libraries either do not support scroll linking or require a separate plugin.

import { scrollTween, inView } from 'hbforge/animate';

// Progress-linked: element transforms as user scrolls
scrollTween(element, {
  scrollStart: 'top bottom',    // when top of element hits bottom of viewport
  scrollEnd: 'bottom top',      // when bottom of element hits top of viewport
  properties: {
    opacity: [0, 1],
    y: [60, 0],
    scale: [0.95, 1],
  },
});

// Trigger-based: fire animation when element enters viewport
inView(element, () => {
  new Tween(element, {
    opacity: 1,
    y: 0,
    duration: 0.6,
    ease: 'easeOutCubic',
  });
}, { threshold: 0.2 });
    

Scroll-linked animations use IntersectionObserver and requestAnimationFrame for butter-smooth 60fps performance. No scroll event listeners. No layout thrashing. No jank.

Gesture System

Interactive animations that respond to user input — drag, swipe, pinch, hover — are the hallmark of polished interfaces. GSAP requires the Draggable plugin ($$$). Framer Motion has gesture support but only in React. Most other libraries have no gesture support at all.

import { gesture } from 'hbforge/animate';

// Draggable with spring-back
gesture(card, {
  drag: {
    axis: 'x',
    bounds: { left: -200, right: 200 },
    onDrag(state) {
      card.style.transform = `translateX(${state.x}px) rotate(${state.x * 0.1}deg)`;
    },
    onRelease(state) {
      if (Math.abs(state.x) > 100) {
        // Swiped far enough — dismiss
        dismissCard(state.x > 0 ? 'right' : 'left');
      } else {
        // Spring back to center
        new Tween(card, { x: 0, rotation: 0, ease: spring.bouncy });
      }
    },
  },
});
    

The gesture system handles pointer events, touch events, and mouse events uniformly. Velocity tracking, direction detection, and bounds enforcement are built-in. You get Tinder-style swipe cards in 15 lines of code.

Text Splitting and Staggered Reveals

One of the most visually striking animation techniques is splitting text into individual characters or words and animating them with staggered timing. GSAP's SplitText plugin is commercial-only. Most other libraries do not offer this at all.

import { splitText, stagger, Tween } from 'hbforge/animate';

// Split heading into characters
const chars = splitText(heading, { type: 'chars' });

// Animate each character with stagger
stagger(chars, {
  opacity: [0, 1],
  y: [20, 0],
  duration: 0.4,
  stagger: 0.03,          // 30ms between each character
  ease: 'easeOutCubic',
});

// Or split into words for a different effect
const words = splitText(paragraph, { type: 'words' });

stagger(words, {
  opacity: [0, 1],
  y: [12, 0],
  duration: 0.35,
  stagger: 0.05,
  ease: spring.gentle,
});
    

Motion Paths

Animating elements along SVG paths is essential for creative animations — orbital diagrams, flowing data visualizations, game-like interfaces. GSAP's MotionPathPlugin is part of the premium tier.

import { motionPath } from 'hbforge/animate';

motionPath(satellite, {
  path: 'M 0,0 C 100,-50 200,50 300,0',
  duration: 3,
  repeat: Infinity,
  ease: 'linear',
  autoRotate: true,  // element rotates to follow path tangent
});
    

Timeline Orchestration

Complex animations involve multiple elements animating in sequence or in parallel, with precise timing relationships. forge/animate provides a timeline API for orchestrating multi-step animations:

import { Timeline } from 'hbforge/animate';

const tl = new Timeline();

tl
  .add(overlay, { opacity: [0, 1], duration: 0.3 })
  .add(modal, { scale: [0.9, 1], opacity: [0, 1], ease: spring.bouncy }, '-0.1')
  .add(title, { y: [20, 0], opacity: [0, 1], duration: 0.4 }, '-0.15')
  .add(content, { y: [20, 0], opacity: [0, 1], duration: 0.4 }, '-0.1');

// Play, reverse, seek, pause — full playback control
tl.play();

// Reverse on close
closeBtn.addEventListener('click', () => tl.reverse());
    

The offset parameter ('-0.1') creates overlapping animations that feel fluid and connected. This is identical to GSAP's timeline concept but without the commercial license requirement.

Performance: Where It Matters

Animation performance is not about how fast your animation library initializes. It is about maintaining 60fps (or 120fps on ProMotion displays) while animating. forge/animate achieves this through several techniques:

GPU-accelerated properties only: By default, animations target transform and opacity, which are composited on the GPU. Animating width, height, or top triggers layout recalculation — forge/animate warns you if you accidentally target layout-triggering properties.
Batched RAF: All active animations share a single requestAnimationFrame loop. 50 concurrent animations use one RAF callback, not 50.
Automatic will-change: forge/animate sets will-change before animations start and removes it after they finish, giving the browser optimization hints without the memory cost of permanent will-change.
Reduced motion respect: If the user has prefers-reduced-motion enabled, animations automatically complete instantly. No manual checks required.

~3,500 Lines vs 32,000+ Lines

Framer Motion's source code is over 32,000 lines. GSAP's core plus commonly-used plugins exceed 40,000 lines. forge/animate accomplishes the same feature surface in approximately 3,500 lines.

This is not because we cut corners. It is because we built forge/animate in 2025/2026, when the Web Animations API, IntersectionObserver, ResizeObserver, and CSS custom properties are universally available. We do not carry polyfills for IE11. We do not implement our own event system. We do not work around React's rendering model. We use the platform.

"The best animation library is the one that uses the platform instead of fighting it."

Free. Forever.

forge/animate is part of HBForge. It is free for personal use, commercial use, SaaS products, client work, or anything else. No license tiers. No "contact sales for enterprise pricing." No per-seat fees. The source code is auditable and the API is stable.

If you are currently paying for GSAP, or importing 32KB of Framer Motion for a few fade-ins, consider whether ~3,500 lines of purpose-built animation code might be all you need.

Animate Without the Tax

Spring physics, scroll-linked animations, gestures, text splitting, motion paths, and timeline orchestration. Free. Lightweight. Framework-agnostic.

Read the Docs Request Early Access

HBForge is currently available exclusively for enterprise clients. Opening to the Developer Community on June 25, 2026. Contact kr@hyperbridge.in for early access.