GSAP Animations & Motion Components

Motion Column

A looping card column where background, data and type travel at three different speeds and a phrase pins in frame while its card keeps moving.

HorizonX · Carousel

Pixel Drift

A word assembled out of flying pixels that the cursor carves a void through.

HorizonX · Pointer Physics

A conversion-focused SaaS landing page for intelligent pipeline management.

HorizonX · Code

Motion Row

A rigid stepped marquee: every card travels exactly one pitch sideways per cycle, offset slot by slot so the row shears as it steps.

HorizonX · Carousel

Motion Ticker

A continuous vertical marquee: the whole column travels as one rigid body at a constant speed, wrapping off-screen so the run never seams.

HorizonX · Carousel

Bold sparkling-soda landing with giant display type, GSAP scroll choreography and a flavor-driven product system.

HorizonX · Code

Apex Roadster

A cinematic automotive landing page engineered around motion, restraint, and electric performance.

HorizonX · Code

A cinematic identity hero where light, water and editorial typography move as one signal.

HorizonX · Code

An interactive robotics landing page built around precision, motion and assembly.

HorizonX · Code

SaaS landing page where every scroll animation is scrubbed and bidirectional — scroll back up and the reveal cleanly un-plays.

HorizonX · Code

A cinematic structural atlas that assembles the Eiffel Tower from 36 engineered macro groups.

HorizonX · Vibe coding

A shared-studio landing for independent minds — bold lime type, dark charcoal, and membership that flexes with the work.

HorizonX · Code

A cinematic 3D building-energy command center with predictive AI controls, floor-level insights, and live operational metrics.

HorizonX · Vibe coding

Interactive 3D clinical facility simulator for monitoring wards, people, cameras, lighting, climate, and room capacity.

HorizonX · Vibe coding

A cinematic monolith hero where identity, motion and editorial type resolve into one atmospheric brand system.

HorizonX · Code

Velmont

Cinematic editorial landing for a haute horlogerie atelier — watchmaking as couture-grade scroll experience.

HorizonX · Code

High-energy fitness & recovery club landing with pinned card-fan choreography, scroll-scrubbed marquees and directional GSAP reveals.

HorizonX · Code

Scroll-choreographed landing for a small-batch coffee roastery — warm-industrial editorial on matte black.

HorizonX · Code

NOVARA Creative Studio

A cinematic studio portfolio shaped by bold type, dark editorial imagery, and scroll-led motion.

HorizonX · Code

Velmora

A refined creative studio landing page with editorial composition, immersive motion, and a conversion-ready portfolio flow.

HorizonX · Code

Gallery Shuffle

A shuffled card field that rises and rotates into an editorial gallery on scroll.

HorizonX · Scroll

Entrance Orbit

An image deck that flies in, flips face-up and settles into a continuously rotating orbit.

HorizonX · Loading

Gallery Rise

A scroll-scrubbed gallery whose images rise from below into an editorial field.

HorizonX · Scroll

Grid Deck

A 3D grid of cards dealt as a rotating deck that dives through perspective.

HorizonX · Scroll

Trail Exiting

A pointer trail like Classic, but every card exits upward on a random drift.

HorizonX · Pointer Physics

Entrance Bloom

A compact image stack blooms from the centre and unwinds into a slow orbital composition.

HorizonX · Loading

Gallery Depth

A dimensional image field that resolves from deep perspective as the viewer scrolls.

HorizonX · Scroll

Gallery Zoom

A scroll-scrubbed gallery grid whose tiles scale and skew through a 3D zoom runway.

HorizonX · Scroll

Trail Classic

The baseline pointer trail: cards are dealt as the cursor travels and fade out under themselves.

HorizonX · Pointer Physics

Entrance Sweep

Images charge in from opposite edges before closing into a mirrored rotating ring.

HorizonX · Loading

Gallery Fan

A scroll-driven gallery that fans portrait cards and copy cards out of a centered stack.

HorizonX · Scroll

Gallery Orbit

A scroll-scrubbed gallery whose tiles travel through orbital depth into a clean image grid.

HorizonX · Scroll

Gallery Reveal

A scroll-scrubbed gallery whose images and copy cards surface progressively as the page reveals them.

HorizonX · Scroll

Grid Split

A 3D grid that splits into columns and tilts through perspective as it scrubs.

HorizonX · Scroll

Trail Innerscape

A pointer trail whose frame pops from nothing while each card resolves into focus.

HorizonX · Pointer Physics

Trail Perspective

A pointer-driven image trail that deals cards through Z-depth, tilt and brightness.

HorizonX · 3D & Perspective

Gallery Stack

A scroll-driven gallery that stacks its images into a layered deck and fans them apart as you scroll.

HorizonX · Scroll

Grid Dive

A 3D grid that dives into depth and returns on a scroll-driven loop.

HorizonX · 3D & Perspective

Grid Sweep

A 3D grid that sweeps its cells across the viewport through a scroll runway.

HorizonX · 3D & Perspective

Grid Tunnel

A 3D grid runway that tunnels through perspective as the page scrolls.

HorizonX · 3D & Perspective

Trail Flow Follow

An image trail that follows the pointer with soft physics and leaves drifting copies of its last frames.

HorizonX · Pointer Physics

Trail Spintrail

A pointer trail that spins each image through an unwind angle as it follows the cursor.

HorizonX · Pointer Physics

Motion Focus

A stepped editorial carousel that enlarges the active image while the deck advances one spatial role at a time.

HorizonX · Carousel

Motion Poster

A continuous horizontal poster marquee with precise spacing, edge fades and flat-speed motion.

HorizonX · Carousel

Motion Stack

A stepped vertical carousel where each artwork settles at center before the next measured transition.

HorizonX · Carousel

Motion Relay

A measured horizontal card relay with full-deck transitions, precise holds and a seamless wrap.

HorizonX · Carousel

Motion Tempo

A horizontal card tempo with a single card in frame, each stepping aside on a fixed beat as the next arrives.

HorizonX · Carousel

Motion Dolly

A vertical card dolly where the deck steps up one slot at a time while the camera pushes in, so each image grows as it rises into frame.

HorizonX · Carousel

Motion Cadence

A vertical card cadence that steps one frame at a time, holding each image at centre before the next takes its place.

HorizonX · Carousel

Scroll Drift

A column that scrolls itself and tumbles its cards through 3D as they pass, looping forever without a seam.

HorizonX · 3D & Perspective

Scroll Snap

The same self-scrolling column with a harder hinge: each card flips past the centre and snaps back to face you.

HorizonX · 3D & Perspective

Scroll Flare

A stack read as three cards at once: the previous plate hinges away above, the centre sits flat and lit, the next arrives from below.

HorizonX · 3D & Perspective

Scroll Veil

Cards turn edge-on as they travel and blur with the speed of the column, so the stack reads as depth of field rather than motion.

HorizonX · 3D & Perspective

Scroll Hold

Each card rushes in, holds still at the centre long enough to be read, then falls away into depth.

HorizonX · 3D & Perspective

Motion Fling

The cursor throws shards of artwork along its own vector; they land on the floor and are gone.

HorizonX · Pointer Physics

Motion Trail

The cursor leaves a trail of artwork behind it, each card tilted into the direction of travel.

HorizonX · Pointer Physics

Motion Facet

The cursor shatters the deck into facets, cut by one of six patterns.

HorizonX · Pointer Physics

Liquid Reveal

The cursor paints a second photograph over the first, and the trail dries out behind it.

HorizonX · Pointer Physics

Hover Curtain

The mask slides in from the left while the image slides in from the right, so the frame reads as a curtain rather than a stretch.

HorizonX · Pointer Physics

Hover Diagonal

The mask and the image cross on both axes at once.

HorizonX · Pointer Physics

Hover Swing

The frame swings up from below its own bottom edge while the image counter-rotates and settles out of a 2x zoom.

HorizonX · Pointer Physics

Hover Bloom

The frame unfolds out of nothing and the image untwists inside it.

HorizonX · Pointer Physics

Hover Placard

A solid panel unfolds first and the image lands on top of it a beat later, so the reveal has something to arrive onto.

HorizonX · Pointer Physics

Hover Wipe

A panel wipes across from the right, wipes back out to the left, and hands the exposed strip over to the image.

HorizonX · Pointer Physics

Type Reveal

An image frame that opens inside a line of type as the block crosses the viewport, so the picture reads as a word rather than as a figure beside one.

HorizonX · Scroll

ORBE Eyewear Atelier

Minimal editorial landing for an independent eyewear atelier: full-viewport hero slider, scroll-lit statement, pinned capabilities and asymmetric work grid.

HorizonX · Code

Scroll-driven landing page for a prefabricated timber housing brand, built with Vite and GSAP.

HorizonX · Code

KYAK Adventure Fuel

A bold, motion-led storefront for energy-dense trail snacks.

HorizonX · Code

NEUNWERK

An interactive 911 hero where sixty years of design unfold under the cursor.

HorizonX · Vibe coding

Pelto

A kinetic cycling coaching landing page built for endurance brands.

HorizonX · Code

Public Transport Manager

A cinematic real-time command center for fleet, route, passenger, and service operations.

HorizonX · Vibe coding

GSAP Scroll Motion Lab

Configurable GSAP + ScrollTrigger lab — tune section, text, and scroll behaviors live without rewriting HTML/CSS.

HorizonX · Vibe coding

Bruma Roasters Editorial Coffee Landing

A warm editorial coffee-club landing shaped by craft, origin, and tactile motion.

HorizonX · Code

Editorial landing for a fine-fragrance house — where scent becomes portable memory.

HorizonX · Code

AUVRA Audio Landing

A cinematic product landing page for precision audio instruments.

HorizonX · Code

Editorial architecture-studio landing with directional GSAP motion, smooth Lenis scrolling and a cinematic photo-cycling hero.

HorizonX · Code