Motion System Docs

Downloads

Use the buttons below to access the latest source files directly from this repository.

Download motion.css Download motion.scss Download motion.js

Install

Add the compiled stylesheet and motion script to your layout so the utilities are available across all pages.

CSS Include

Loads the motion utility classes and transition styles.

<link rel="stylesheet" href="css/main.css">

JavaScript Include

Handles viewport detection and adds the visible state when elements enter the screen.

<script src="js/motion.js"></script>

How It Works

Apply motion plus an effect class like motion-up. When the element becomes visible, the script adds is-visible automatically.

Quick Start

Use the base class plus one effect class. Add optional control classes like delay, speed, or repeat when needed.

<div class="motion motion-up">Basic Reveal</div>
            <div class="motion motion-left motion-delay-2">Delayed Reveal</div>
          <div class="motion motion-scale motion-slow">Slow Scale</div>

motion = base trigger, second class = effect, extra classes = controls.

Effects

Choose one effect class, then combine it with optional controls.

Directional Reveal

Fade in while entering from a direction. Available options: motion-up, motion-down, motion-left, motion-right.

<div class="motion motion-up">Up</div>
          <div class="motion motion-left">Left</div>

Scale

Element fades in with a subtle zoom effect.

<div class="motion motion-scale">Content</div>

Blur Reveal

Starts slightly blurred, then becomes sharp and visible.

<div class="motion motion-blur">Content</div>

Mask Reveal

Reveals content using a clipping effect from hidden to visible.

<div class="motion ">Content</div>

Controls

Use these classes to control timing and replay behavior.

<div class="motion motion-up motion-fast">Fast</div>
            <div class="motion motion-up motion-slow">Slow</div>
            <div class="motion motion-up motion-delay-3">Delayed</div>
          <div class="motion motion-up motion-repeat">Repeat</div>

Delay utilities available: motion-delay-1 to motion-delay-6.

Parallax

Adds subtle scroll-based movement to create depth. Best used on inner images or decorative layers.

<img class="motion-parallax" data-speed="0.06" src="img/team.jpg" alt="">

            <div class="motion ">
            <img class="motion-parallax" data-speed="0.05" src="img/team.jpg" alt="">
          </div>

Suggested speeds: 0.03 subtle, 0.06 balanced, 0.10 stronger.

Note: Parallax is automatically disabled on mobile devices for smoother performance.

Stagger Group

Place motion-stagger on the parent container. Child items animate one after another automatically.

<div class="motion-stagger">
            <div class="motion motion-up">Item 1</div>
            <div class="motion motion-up">Item 2</div>
            <div class="motion motion-up">Item 3</div>
          </div>

Best Practices

Use motion on important elements only.
Use stagger for groups of 3 to 8 items.
Prefer subtle movement over flashy effects.
Keep page-specific choreography outside the core system.