Six new effects are now available in the library, bringing the catalog to 30. Two of them are firsts: the draggable card stack is our first effect built on GSAP’s Draggable and InertiaPlugin, and the SVG blob morph is our first to use MorphSVGPlugin. Both plugins have been free on the public CDN since GSAP 3.13, so there’s nothing extra to license or install.

Here’s what’s new.

Draggable card stack

A swipeable card deck. Drag the top card and let go: a hard flick or a drag past the threshold throws it off-screen and recycles it to the back of the pile, while a gentle release springs it back with an elastic snap. The cards behind scale up in real time as the top card leaves.

Key features:

  • Momentum-aware dismissal using InertiaPlugin velocity tracking
  • Infinite recycling, so the deck never runs out
  • Prev/next buttons that drive the same animations for keyboard users, with card position announced to screen readers
  • Stack depth, offsets, and flick thresholds all configurable via data attributes

The markup is plain HTML; the deck takes care of itself:

<div class="card-stack" data-max-visible="4" data-velocity="700">
  <article class="stack-card" data-title="First card">...</article>
  <article class="stack-card" data-title="Second card">...</article>
</div>

Try it out →

SVG blob morph

Organic blob shapes that morph between states with MorphSVGPlugin. Each blob doubles as a clipPath masking an image, so photos live inside drifting, hand-drawn shapes. On hover or focus the blob settles into a calm circle; move away and it goes back to wandering.

Key features:

  • Ambient morph loop with a per-card phase offset, so a row of blobs never looks cloned
  • Hover and keyboard focus morph with synchronized image zoom
  • Four hand-tuned blob shapes included, with a documented path for adding your own
  • Touch-friendly: first tap morphs, second tap follows the link

Try it out →

Horizontal scroll section

The classic pinned horizontal gallery. The section locks to the viewport while vertical scrolling translates a track of panels sideways, then releases cleanly at the end. Panels can be any mix of widths because the travel distance is measured from the track’s real scroll width.

Key features:

  • Optional snap-to-panel with measured snap points that survive resizes
  • Per-element parallax via containerAnimation ScrollTriggers
  • Scrub-linked progress bar
  • Reduced motion stacks the panels vertically instead

Try it out →

SVG line draw on scroll

Line-art SVGs that draw themselves as they scroll into view, stroke by stroke, with staggered timing across multiple paths.

Key features:

  • Works on paths, lines, polygons, circles, and rects, with lengths auto-measured
  • Scrubbed or play-once trigger modes
  • Staggered multi-path sequencing with consistent pen speed across strokes

Try it out →

Hover image trail

A trail of images that follows the cursor across a section, spawning and fading as you move. A staple of portfolio and editorial sites.

Key features:

  • Distance-threshold spawning with velocity-aware tilt and drift in the direction of travel
  • Fixed element pool with round-robin reuse, so the DOM never grows unbounded
  • Keyboard focus reveals each row’s image statically, mirroring hover

Try it out →

Count-up stats

Numbers that count up from zero when they scroll into view. A beginner-friendly effect for stats bars, pricing pages, and annual reports.

Key features:

  • Locale-aware number formatting with separators, prefixes, and suffixes
  • Staggered timing across a row of stats
  • Counts respect reduced motion by rendering final values immediately

Try it out →

What’s next

A full tutorial on building a horizontal scroll section from scratch is coming later this month, and more card and cursor effects are in the pipeline.

All six effects are included in the All-Access Bundle: every current and future effect, unlimited commercial projects, one payment.