Get started with MotionFlow

Installation & setup

MotionFlow is a lightweight, framework-agnostic motion library designed for modern UI animation. Include it once, and MotionFlow automatically brings scroll animations, parallax, text effects, counters, and tickers to life using simple HTML attributes — no JavaScript setup required.

# Manual download

Download the prebuilt MotionFlow files and include them directly in your project.

This method is ideal for WordPress themes,static HTML websites, or any environment where you don’t use a JavaScript build step.

Download MotionFlow

Below is a minimal HTML example showing how to include MotionFlow manually. Once included, MotionFlow automatically scans the page and activates animations, parallax, text effects, counters, and tickers using HTML attributes.

No manual initialization is required.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>MotionFlow Starter</title>

  <!-- MotionFlow CSS -->
  <link rel="stylesheet" href="motionflow.min.css" />
</head>
<body>

  <!-- Your content -->
  <h1 data-mf-animation="fade-up">Hello MotionFlow</h1>

  <!-- MotionFlow JavaScript -->
  <script src="motionflow.min.js"></script>
</body>
</html>

# Use via CDN

The fastest way to get started with MotionFlow. Ideal for static websites, landing pages, prototypes, and CMS-based projects.

MotionFlow auto-initializes on page load — no configuration required.

CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@slicemypage/motionflow@latest/dist/motionflow.min.css">

JavaScript

<script src="https://cdn.jsdelivr.net/npm/@slicemypage/motionflow@latest/dist/motionflow.min.js"></script>

Tip: Load the CSS inside <head> and place the JavaScript just before </body>.

# Install via npm or yarn

Recommended for projects using modern JavaScript tooling such as Vite, Webpack, or other bundlers.

MotionFlow remains attribute-driven even when bundled.

npm

npm install @slicemypage/motionflow

yarn

yarn add @slicemypage/motionflow

Note: When included in the browser, MotionFlow auto-initializes — no manual setup required.

# Basic usage example

MotionFlow works by reading HTML data-mf-* attributes and automatically applying motion behavior when the page loads.

To use MotionFlow, simply add the appropriate attributes to your HTML elements. MotionFlow detects these attributes and activates the corresponding feature — no JavaScript setup required.

<!-- Scroll animation -->
<div data-mf-animation="fade-up">
  Scroll animation
</div>

<!-- Parallax -->
<div data-mf-parallax>
  Parallax movement
</div>

<!-- Text effect -->
<div data-mf-text-type="loop">
  <span>fast</span>
  <span>smooth</span>
  <span>lightweight</span>
</div>

<!-- Counter -->
<div data-mf-count-to="80"></div>

<!-- Ticker -->
<div data-mf-ticker>
  <span>fast</span>
  <span>smooth</span>
  <span>lightweight</span>
</div>

Each feature supports additional attributes for fine-grained control. Refer to the individual plugin documentation pages for full options and advanced usage.

# Global configuration (optional)

MotionFlow is attribute-first and works out of the box without any JavaScript configuration.

Global configuration is only required when you want to define shared default values for your site instead of repeating the same attributes on multiple elements.

Any value defined globally can still be overridden per element using data-mf-* attributes.

MotionFlow.init({

  // Scroll animations
  animation: {
    duration: 600,
    distance: 100,
    once: false
  },

  // Parallax
  parallax: {
    speed: 1
  },

  // Text Effects
  text: {
    loop: {
      animation: "fade-up",          
    }
  },

  // Counters
  count: {
    duration: 1200
  },

  // Tickers
  ticker: {
    speed: 80
  }

});

This is a basic example showing how global defaults are defined. Each plugin supports additional configuration options.

For the complete list of available options, lifecycle methods, and advanced behavior, refer to the individual plugin documentation pages.