Element Animations

data-foldpage-animate

Per-Effect Modes

Effect

Tilt

Tracks the cursor — tilts toward the pointer in screen space (or the device's own gyro/accelerometer tilt on mobile). Negative amplitude pulls toward the pointer; positive pushes away. Fix-z prevents unwanted Z roll.

data-foldpage-animate="tilt" data-foldpage-animate-amplitude="-0.35" data-foldpage-animate-fix-z="0"

tilt interactive cursor

Effect

Sway (Z axis)

Pendulum rotation around the Z axis — the element swings left and right as if hanging from a pivot point above its center.

data-foldpage-animate="sway" data-foldpage-animate-axis="z" data-foldpage-animate-amplitude="0.9" data-foldpage-animate-speed="0.7"

sway pendulum swing

Effect

Sway (X axis, default)

Nodding rotation around the X axis by default — the element tips forward and back like a card leaning toward and away from the viewer in depth. Add data-foldpage-animate-axis="y" for a left/right shimmy instead.

data-foldpage-animate="sway" data-foldpage-animate-amplitude="0.9" data-foldpage-animate-speed="0.6"

sway nod depth

Effect

Float

Vertical bob along the Y axis — the element drifts gently up and down like a buoy on calm water. Amplitude controls the travel distance.

data-foldpage-animate="float" data-foldpage-animate-amplitude="1" data-foldpage-animate-speed="0.75"

float bob drift

Effect

Breathe

Uniform scale oscillation from the element center — the element breathes in and out. Amplitude controls how much it swells on each cycle.

data-foldpage-animate="breathe" data-foldpage-animate-amplitude="1" data-foldpage-animate-speed="1"

breathe scale

Effect

Pulse

Sinusoidal movement along an axis — defaults to Z (toward/away from the viewer). Set data-foldpage-animate-axis="y" for an up/down hover (identical to float), or "x" for side-to-side.

data-foldpage-animate="pulse" data-foldpage-animate-amplitude="0.9" data-foldpage-animate-speed="0.6"

pulse move depth

Effect

Rotate

Continuous angular rotation at constant velocity. The axis attribute selects x, y, or z. Speed controls degrees per second relative to the base rate.

data-foldpage-animate="rotate" data-foldpage-animate-axis="y" data-foldpage-animate-speed="0.25"

rotate spin continuous

Composing Multiple Effects

Composed

Float + Sway

Vertical drift combined with pendulum swing produces a natural weightless buoy motion — both effects share the same speed and amplitude. (axis="z" only affects sway here — float always hard-locks its own axis.)

data-foldpage-animate="float, sway" data-foldpage-animate-axis="z"

float sway composed

Composed

Float + Breathe

A drifting bob layered with rhythmic scale breathing. The simultaneous cycles create an organic, living quality to the element.

data-foldpage-animate="float, breathe"

float breathe composed

Composed

Sway + Tilt

A steady sinusoidal nod layered with interactive pointer/gyro tracking — the element rocks rhythmically on its own while also leaning toward the cursor (or the device's own tilt on mobile).

data-foldpage-animate="sway, tilt"

sway tilt composed

Composed

Tilt + Breathe

Interactive cursor/gyro tracking combined with a slow breathing pulse. The element follows the pointer while also expanding and contracting on its own.

data-foldpage-animate="tilt, breathe" data-foldpage-animate-fix-z="0"

tilt breathe composed

Speed

Speed 0.25

Slow

Very gradual drift. Suitable for ambient background elements or hero sections where motion should be barely perceptible.

data-foldpage-animate-speed="0.25"

slow

Speed 1

Default

The baseline cadence. All effects ship with their own natural rate and amplitude defaults tuned for comfortable viewing.

data-foldpage-animate-speed="1"

default

Speed 3.5

Fast

Compressed cycle time creates rapid, energetic movement. Best paired with low amplitude to avoid dizzying motion.

data-foldpage-animate-speed="3.5"

fast

Amplitude

Amplitude 0.1

Barely There

A whisper of motion — imperceptible unless the viewer watches closely. Adds life without distracting from the content.

data-foldpage-animate-amplitude="0.1"

subtle

Amplitude 0.5

Default

The neutral midpoint — assertive enough to read clearly in 3D but gentle enough not to overwhelm the page hierarchy.

data-foldpage-animate-amplitude="0.5"

default

Amplitude 1.4

Exaggerated

Wide swing for dramatic emphasis. Works well for isolated hero elements or decorative cards where motion is a primary feature.

data-foldpage-animate-amplitude="1.4"

dramatic

Phase & Stagger

Phase 0

Start at Origin

Default phase — the animation begins at the sine-cycle origin and immediately moves upward. All elements with phase 0 are perfectly synchronised.

data-foldpage-animate-phase="0"

phase sync

Phase π

Inverted Start

Half-cycle offset — starts from the trough instead of the origin, rising immediately. When paired with a phase-0 sibling, the two elements move in opposite directions.

data-foldpage-animate-phase="3.14"

phase stagger

Phase — random

Random Phase

A random start phase is chosen on each page load, then slowly drifts to new random targets over time. Identical elements never move in lockstep.

data-foldpage-animate-phase="random"

phase random drift

Phase π/2

Quarter Offset

A 90° offset places the start at the float arc peak — useful when composing effects so the motion peaks feel staggered across elements on the page.

data-foldpage-animate-phase="1.57"

phase stagger

Axis Locks

fix-z="0"

Lock Roll

Clamps Z rotation to 0°, preventing unwanted roll while tilt is active. Essential when you want clean X/Y tilt without the card twisting on its own axis.

data-foldpage-animate-fix-z="0"

fix-z lock roll

fix-x="0" fix-y="0"

Pure Z Swing

Locking X and Y to 0° while sway (axis="z") runs isolates the pendulum to a perfectly flat plane — the element swings without any depth tilt bleeding in from floating-point composition.

data-foldpage-animate-axis="z" data-foldpage-animate-fix-x="0" data-foldpage-animate-fix-y="0"

fix-x fix-y isolate

fix-pos-z="40"

Pin Z Depth

Locks the element at 40 CSS px forward in Z world space throughout the animation cycle, so a floating card always maintains a constant depth offset from the page plane.

data-foldpage-animate-fix-pos-z="40"

fix-pos-z depth z-offset

fix-y="15"

Constant Y Lean

Holds Y rotation at a fixed 15° while tilt continues to drive X. Useful for cards that should always face slightly to one side regardless of pointer position.

data-foldpage-animate-fix-y="15"

fix-y lean bias

Quick Reference

All Attributes

data-foldpage-animate

Comma-separated list of one or more effects to apply simultaneously. Core modes: rotate, sway, pulse, breathe, tilt. Shorthands: float (pulse on y).

animate animate-speed animate-amplitude animate-axis animate-phase animate-fix-x animate-fix-y animate-fix-z animate-fix-pos-x animate-fix-pos-y animate-fix-pos-z