Installation

FasterMotion can be installed via NPM or loaded from a CDN.

NPM Installation

Install FasterMotion using your preferred package manager:

npm install faster-motion

yarn add faster-motion

pnpm add faster-motion

Import in Your Project

import { FasterMotion } from 'faster-motion';

// Create a DOM animation
FasterMotion.dom({
  target: '.element',
  to: { x: 100 },
  duration: 1000
});

TypeScript Support

FasterMotion is written in TypeScript and includes full type definitions.

import { FasterMotion, Animation, DomConfig } from 'faster-motion';

const animation: Animation = FasterMotion.dom({
  target: '.element',
  to: { x: 100 },
  duration: 1000
});

CDN Installation

For quick prototyping or simple projects, use the CDN:

Latest Version

<script src="https://static.fasterhq.com/js/faster-motion/0.4.4/faster-motion.0.4.4.umd.js"></script>

Usage with CDN

<!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>
  <div class="box"></div>

  <script>
    // FasterMotion is available globally
    FasterMotion.dom({
      target: '.box',
      to: { x: 200 },
      duration: 1000,
      ease: 'ease-out'
    });
  </script>
</body>
</html>

Module Formats

FasterMotion is distributed in multiple formats:

Format	File	Use Case
ESM	`faster-motion.esm.js`	Modern bundlers (Vite, Webpack 5+)
UMD	`faster-motion.min.js`	CDN, legacy environments
CJS	`faster-motion.cjs.js`	Node.js, older bundlers

Browser Support

FasterMotion supports all modern browsers:

Chrome/Edge 90+
Firefox 88+
Safari 14+
Opera 76+

For older browser support, include polyfills for:

Promise
Object.assign
Array.from
requestAnimationFrame

Next Steps

Now that you have FasterMotion installed, continue to:

Quick Start - Create your first animation
Core Concepts - Learn the fundamentals
API Reference - Explore the complete API

Installation

On this page