Quick Start

Get started with FasterMotion in 5 minutes. This guide will walk you through creating your first animation using the declarative FasterMotion.dom() API.

Your First Animation

Create a simple animation that moves an element:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="box"></div>

  <script type="module">
    import { FasterMotion } from 'https://static.fasterhq.com/js/faster-motion/0.4.4/faster-motion.0.4.4.umd.js';

    FasterMotion.dom({
      target: '.box',
      to: {
        x: 200,
        rotation: 360
      },
      duration: 1000,
      ease: 'spring.bouncy'
    });
  </script>
</body>
</html>

Basic DOM Animation

The FasterMotion.dom() method is the core API for creating DOM animations with a declarative configuration object:

import { FasterMotion } from 'faster-motion';

// Animate to target values
FasterMotion.dom({
  target: '.element',
  to: {
    x: 100,
    y: 50,
    opacity: 0.5
  },
  duration: 1000,
  ease: 'ease-out'
});

Configuration Object

target

The element(s) to animate - can be a CSS selector or HTMLElement.

// CSS selector
FasterMotion.dom({
  target: '#box',
  to: { x: 100 }
});

// Direct element reference
const el = document.querySelector('#box');
FasterMotion.dom({
  target: el,
  to: { x: 100 }
});

to

Target property values to animate to.

FasterMotion.dom({
  target: '#box',
  to: {
    x: 200,           // translateX (pixels)
    y: 100,           // translateY (pixels)
    rotation: 360,    // rotate (degrees)
    scale: 1.5,       // uniform scale
    opacity: 1        // opacity
  }
});

from

Starting property values (animates from these to the to values or current values).

// Fade in from invisible
FasterMotion.dom({
  target: '#box',
  from: { opacity: 0, y: 50 },
  to: { opacity: 1, y: 0 },
  duration: 800
});

Common Properties

Transform Properties

FasterMotion.dom({
  target: '.element',
  to: {
    x: 100,              // translateX
    y: 50,               // translateY
    rotation: 360,       // rotate (degrees)
    scale: 1.5,          // uniform scale
    scaleX: 2,           // horizontal scale
    scaleY: 0.5          // vertical scale
  },
  duration: 1000
});

Visual Properties

FasterMotion.dom({
  target: '.element',
  to: {
    opacity: 0,
    backgroundColor: '#ff0000',
    color: '#ffffff'
  },
  duration: 1000
});

Timeline Animations

Sequence multiple animations using the timeline type:

import { FasterMotion } from 'faster-motion';

const tl = FasterMotion.dom({
  type: 'timeline',
  paused: true,
  items: [
    {
      target: '.title',
      to: { opacity: 1, y: 0 },
      duration: 500,
      at: 0
    },
    {
      target: '.subtitle',
      to: { opacity: 1 },
      duration: 500,
      at: 250  // Start 250ms after timeline begins
    },
    {
      target: '.button',
      to: { scale: 1 },
      duration: 300,
      at: 500
    }
  ]
});

// Control the timeline
tl.play();
tl.pause();
tl.reverse();

Scroll Animations

Trigger animations based on scroll position:

FasterMotion.dom({
  target: '.hero',
  to: { opacity: 1, y: 0 },
  scroll: {
    trigger: '.hero',
    start: 'top 80%',    // Animation starts when element top hits 80% of viewport
    end: 'bottom 20%'    // Animation completes when element bottom hits 20% of viewport
  }
});

Easing Functions

Control animation timing with easing:

// Standard easings
FasterMotion.dom({
  target: '.element',
  to: { x: 100 },
  ease: 'ease-out',
  duration: 1000
});

// Cubic
FasterMotion.dom({
  target: '.element',
  to: { x: 100 },
  ease: 'cubic.inOut',
  duration: 1000
});

// Back (overshoot)
FasterMotion.dom({
  target: '.element',
  to: { x: 100 },
  ease: 'back.out',
  duration: 1000
});

// Elastic (bounce)
FasterMotion.dom({
  target: '.element',
  to: { x: 100 },
  ease: 'elastic.out',
  duration: 1000
});

// Spring (physics-based)
FasterMotion.dom({
  target: '.element',
  to: { x: 100 },
  ease: 'spring.bouncy',
  duration: 1000
});

Callbacks

Execute code at animation milestones:

FasterMotion.dom({
  target: '.element',
  to: { x: 100 },
  duration: 1000,

  onStart: () => {
    console.log('Animation started');
  },

  onUpdate: (progress) => {
    console.log('Progress:', progress); // 0 to 1
  },

  onComplete: () => {
    console.log('Animation completed');
  }
});

Controlling Animations

The FasterMotion.dom() method returns an Animation instance with control methods:

// Create animation (starts by default)
const animation = FasterMotion.dom({
  target: '.element',
  to: { x: 100 },
  duration: 1000,
  paused: true  // Start paused
});

// Control methods
animation.play();           // Start/resume
animation.pause();          // Pause
animation.reverse();        // Reverse direction
animation.restart();        // Start from beginning
animation.seek(500);        // Jump to 500ms
animation.timeScale(2);     // Double speed
animation.kill();           // Destroy animation

Common Patterns

Fade In on Load

FasterMotion.dom({
  target: '.element',
  from: { opacity: 0, y: 50 },
  to: { opacity: 1, y: 0 },
  duration: 800,
  ease: 'ease-out'
});

Stagger Multiple Elements

const items = document.querySelectorAll('.item');

items.forEach((item, i) => {
  FasterMotion.dom({
    target: item,
    to: { opacity: 1, y: 0 },
    from: { opacity: 0, y: 30 },
    duration: 600,
    delay: i * 100,  // Stagger by 100ms
    ease: 'ease-out'
  });
});

Infinite Loop with Timeline

FasterMotion.dom({
  type: 'timeline',
  repeat: -1,
  yoyo: true,
  items: [
    { target: '.element', to: { scale: 1.2 }, duration: 1000, at: 0 },
    { target: '.element', to: { scale: 1 }, duration: 1000, at: 1000 }
  ]
});

Trigger Modes

FasterMotion supports three trigger modes for advanced interactions:

onClick

Trigger animation on click:

FasterMotion.dom({
  target: '#box',
  to: { x: 200, rotation: 180 },
  duration: 800,
  trigger: {
    target: '#box',
    mode: 'onClick'
  }
});

onHover

Trigger on mouse enter/leave:

FasterMotion.dom({
  target: '#box',
  to: { scale: 1.2 },
  from: { scale: 1 },
  duration: 400,
  trigger: {
    target: '#box',
    mode: 'onHover',
    toggle: true  // Reverse on mouse leave
  }
});

onScroll

Trigger when element enters viewport:

FasterMotion.dom({
  target: '.box',
  to: { opacity: 1, y: 0 },
  from: { opacity: 0, y: 50 },
  trigger: {
    mode: 'onScroll',
    scrollTarget: '.box'
  }
});

Next Steps

Now that you understand the basics, explore:

Core Concepts - Deep dive into fundamentals
API Reference - Complete API documentation
Examples - Real-world examples and demos
Guides - In-depth tutorials

Quick Start

On this page