Skip to content
Swift

Hover & Transition Templates · v1.0.0

Unfold

A preview card expands into the full article, image and text together.

Rated 4.8 out of 5 based on 52 reviews.810 sold1 variationUpdated September 20, 2026
01 / 04Click to enlarge
Screenshots of the Unfold template: A preview card expands into the full article, image and text together.
Page transitionEditorialSplit textParcel

Overview

Unfold handles the transition every content site gets wrong: the move from a grid of previews into a single piece. The selected card's image travels into position while its heading splits and re-forms as the article title, and the body arrives behind it.

There is no white flash and no second page load. The reader's eye stays on the thing they chose.

Best for: Editorial sites and journals where the jump from index to article should not be a page load.

What makes it different

1

Shared-element transition

The preview image becomes the article image - one element, animated, not two cross-faded.

2

Title re-formation

Heading characters split and re-settle into the article title rather than swapping.

3

Magnetic cursor

Interactive elements pull the cursor slightly, signalling what is clickable.

4

Prebuilt dist

Runs immediately; build from source only if you are changing the bundle.

In the box

  • Preview grid with full content views
  • GSAP 3.15 + Splitting.js + imagesLoaded
  • Self-hosted Archivo and Bodoni Moda
  • Prebuilt dist included

Built with

  • GSAP 3.15
  • Splitting.js
  • imagesLoaded
  • Parcel

Questions about Unfold

Can I wire it to real routes?

Yes. Most buyers keep the transition and swap the content source for a fetch or a framework route.

Does it need a build step?

A prebuilt dist is included. Building from source needs npm and Parcel.

Still unsure? Email us - or read how to choose a template.

Related

You might also consider

Cleaver template - Headlines that slice apart and reassemble as you scroll.60% off

Cleaver

$40$16

Headlines that slice apart and reassemble as you scroll.

TypographyRated 4.9 out of 5 from 87 reviews.
Aperture template - Clip-path slices peel back under the cursor.70% off

Aperture

$33$10

Clip-path slices peel back under the cursor.

InteractionRated 4.5 out of 5 from 118 reviews.
Kinetic template - Fifteen scroll-driven typography effects in one page.50% off

Kinetic

$44$22

Fifteen scroll-driven typography effects in one page.

TypographyRated 4.8 out of 5 from 112 reviews.