Examples

All examples are interactive and can be viewed directly. Each example is referenced in the corresponding API documentation with full code explanations.

Core Animation Examples

Basic Animations

• Move, Rotate & Scale - Basic transform animations | Referenced in Tween API
• Fade In - Opacity transitions | Referenced in Tween API
• Hover Scale Button - Interactive hover effect | Referenced in Tween Triggers

Easing Examples

All easing examples are referenced in the Easing API documentation.

Easing Functions

• Easing Visualizer - Interactive easing curve comparison tool
• Easing Curve Comparison - Side-by-side easing comparisons
• Standard Easings - Linear, ease, ease-in, ease-out, ease-in-out
• Back Easing - Overshoot effect demonstrations
• Bounce Easing - Bouncing ball physics
• Elastic Easing - Spring-like elastic motion
• Spring Easing - Physics-based spring animations
• Custom Bezier - Custom cubic-bezier curves

Easing in Action

• Button Click - Button press with back.out easing
• Modal Open - Modal entrance with spring easing

Timeline Examples

Referenced in Timeline API and Timeline Advanced.

Basic Timeline

• Basic Timeline - Sequential animation timing
• Timeline Overlap - Overlapping animations with offset timing
• Timeline Stagger - Staggered element animations
• Loading Sequence - Multi-step loading animation
• Sequential Fade In - Chained fade-in effects

Timeline Control

• Timeline Playback - Play, pause, reverse, restart controls
• Timeline Scrubber - Interactive timeline scrubbing
• Timeline TimeScale - Speed control (slow motion / fast forward)
• Timeline Yoyo - Reversing animations on repeat
• Scrubber Control - Advanced scrubbing interface

Animation Control Examples

Referenced in Tween Advanced.

Playback Control

• Playback Control - Complete playback API demonstration
• Pause on Hover - Interactive pause/resume on hover
• Reverse Animation - Direction reversal controls
• Progress Bar - Visual animation progress indicator

Repeat & Loop

• Repeat Animation - Loop animations with repeat count
• Yoyo Animation - Back-and-forth yoyo effect
• Infinite Pulse - Continuous pulsing animation

Callback Examples

Referenced in Tween API callbacks section.

• All Callbacks - onStart, onUpdate, onComplete demonstrations
• onStart Callback - Animation start event
• onComplete Callback - Animation completion event

Trigger Examples

Referenced in Tween Triggers.

• Trigger on Click - Click-activated animations
• Trigger on Hover - Hover enter/leave animations
• Trigger on Visible - Viewport intersection triggers
• Fade In Visible - Fade in when scrolled into view
• Click Burst Effect - Particle burst on click

Scroll Examples

Referenced in Scroll API documentation.

• Scroll Parallax - Multi-layer parallax scrolling
• Scroll Progress Bar - Scroll position indicator
• Zoom on Scroll - Scale elements based on scroll

Advanced Concepts

• Relative Values - Relative value animations (+=, -=) | Referenced in Tween Advanced

Canvas Examples

Referenced in TrimPath API documentation.

TrimPath

• TrimPath Draw On - Animate path stroke drawing with start/end values
• TrimPath Sequential - Sequential vs Parallel mode for multiple paths

Path Animation Examples

Referenced in Path Animation documentation.

PathResource

• PathResource Basics - Create and sample paths with progress slider
• Closest Point - Interactive closest point finder with mouse tracking
• Path Slicing - Visualize path slicing with adjustable range

Path Sampling

• Sampling Visualizer - Visualize baked points, samples, and tangent vectors

TrimPath (SVG)

• TrimPath Effects - Draw on, draw off, reveal from center/ends
• TrimPath Spinner - Loading spinner variations with offset animation
• TrimPath Signature - Signature drawing animation with progress tracking
• TrimPath Stagger - Staggered path animations with different modes

PathFollow

• PathFollow Basic - Element following a path with forward/reverse
• PathFollow Rocket - Auto-rotate demonstration with rocket emoji
• PathFollow Manual - Slider-controlled progress with offset
• PathFollow Orbit - Planetary orbit animation with speed control

Fmtion Format Examples

Referenced in Fmtion Format documentation.

The .fmtion format is a unified animation file format that combines DOM animations, Canvas 2D, Lottie, and Three.js 3D content in a single declarative JSON structure.

Loading & Basics

• Load Basic - Basic FasterMotion.load() usage with inline fmtion data | Referenced in Loading API

Parameters & Interaction

• Parameters & Listeners - Bool parameters with mouseenter/mouseleave listeners | Referenced in Parameters
• Scroll Bindings - Scroll-driven parameters with progress bar, parallax, and fade effects | Referenced in Parameters

Text Animation Examples

Referenced in Text Animation documentation.

TextSplitter

Split existing DOM text into animatable characters, words, lines, or sentences.

• Split Characters - Split text into individual characters for staggered animation | Referenced in TextSplitter API
• Split Words - Word-by-word animation with 3D rotation effect | Referenced in TextSplitter API
• Split Lines - Line-by-line reveal animation | Referenced in TextSplitter API
• Split Sentences - Sentence-by-sentence animation | Referenced in TextSplitter API
• Nested Split - Characters nested inside words (chars,words) | Referenced in TextSplitter API
• Stagger Animation - Different stagger directions (start, end, center, edges, random) | Referenced in TextSplitter API
• Emoji Support - Full Unicode and emoji handling with Intl.Segmenter | Referenced in TextSplitter API

Text Animation (Canvas)

Canvas-based per-character text animation with 12+ presets and stagger effects.

• Text Animation Basic - Basic canvas text animation with fadeUp preset | Referenced in Text Animation API
• Text Animation Presets - All 12+ animation presets: typewriter, fadeUp, scaleUp, rotateIn, elasticIn, etc. | Referenced in Text Animation API
• Text Animation Words - Word-by-word animation using splitType: 'words' | Referenced in Text Animation API
• Text Animation Stagger - Stagger directions: start, end, center, edges, random | Referenced in Text Animation API
• Text Animation Styled - Custom colors, strokes, and multi-color effects | Referenced in Text Animation API
• Text Animation Custom - Custom animations with opacity, rotation, scale, and more | Referenced in Text Animation API

Text Effects (Scroll-based)

Advanced scroll-driven text effects for creating dynamic typography animations.

• Warp Effects - Sine, wave, arc, and spiral text warping | Referenced in TextEffects API
• Morph Transform - Transform state morphing with staggered timing | Referenced in TextEffects API
• Scramble Reveal - Text scramble effect with custom character sets | Referenced in TextEffects API
• Glitch Effect - Digital glitch distortion with chromatic aberration | Referenced in TextEffects API
• 3D Flip - Perspective flip animations on X, Y, or both axes | Referenced in TextEffects API
• Rainbow Colors - Animated rainbow hue cycling effect | Referenced in TextEffects API
• TypeVariable - Variable-speed typing effect with acceleration curves | Referenced in TextEffects API
• Text Along Path - Characters following SVG path curves | Referenced in TextEffects API

TextPath (SVG Text Around Elements)

Create scrolling text that flows around elements along SVG paths with infinite scroll.

• TextPath - Circle and oval text paths | Referenced in TextPath API
• TextPath Circle - Circular text path with speed control | Referenced in TextPath API
• TextPath Oval - Elliptical text path with speed control | Referenced in TextPath API
• TextPath Rectangle - Rounded rectangle text path | Referenced in TextPath API

How Examples Work

Viewing Examples

Click any example link above to view the interactive demo. Each example:

• Runs in a standalone HTML page
• Includes full source code
• Works with the latest FasterMotion version
• Is optimized for performance

Finding in Documentation

Each example is embedded in the relevant API documentation using the playground component:

<CodePlayground example="/examples/v1/move-rotate-scale.html" title="Try it">
// Example code here
</CodePlayground>

Example Structure

All examples follow this pattern:

<!DOCTYPE html>
<html>
<head>
  <script src="https://static.fasterhq.com/js/faster-motion/0.4.4/faster-motion.0.4.4.umd.js"></script>
</head>
<body>
  <!-- Demo content -->
  <script>
    FasterMotion.dom({
      // Animation configuration
    });
  </script>
</body>
</html>

Using Examples

To use an example in your project:

1. View the source: Open the example and view page source
2. Copy the code: Copy the FasterMotion configuration
3. Adapt to your needs: Modify targets and properties
4. Reference the docs: Check the linked API page for details

Example Categories

Core Animation (3 examples)

Basic tween animations, transforms, fades, and movement

Easing (10 examples)

All easing functions with visual comparisons and real-world usage

Timeline (10 examples)

Sequencing, overlapping, and controlling complex animations

Triggers (5 examples)

Interactive triggers - click, hover, scroll visibility

Callbacks (3 examples)

Event handlers for animation lifecycle

Scroll (3 examples)

Scroll-based animations and parallax effects

Advanced (1 example)

Advanced techniques like relative values

Canvas (2 examples)

Canvas-specific animations including TrimPath effects

Path Animation (12 examples)

Path-based animations including PathResource, TrimPath (SVG), and PathFollow

Fmtion Format (3 examples)

Unified animation file format with parameters, scroll bindings, and listeners

Text Animation (8 examples)

DOM-based text splitting with TextSplitter for character, word, line, and sentence animations

Canvas Text Animation (6 examples)

Canvas-based per-character animation with TextAnimator, 12+ presets, and stagger effects

Text Effects (8 examples)

Scroll-driven text effects including warp, morph, scramble, glitch, 3D flip, rainbow, and path animations

TextPath (4 examples)

SVG text paths that flow around elements with infinite scroll animation

Contributing

Found a bug in an example? Want to add a new one?

1. Examples are in /public/examples/v1/*.html
2. Referenced in /content/docs/v1/api/**/*.mdx
3. Submit a PR with your fix or new example

Next Steps

• API Reference - Complete API documentation
• Quick Start - Get started in 5 minutes
• Core Concepts - Understand the fundamentals