Parallax Animation

# Getting started

Enable parallax movement on any element using the data-mf-parallax attribute. The element moves continuously in response to scrolling, creating a natural depth effect.

No initialization required. No configuration required. No JavaScript required.

# Parallax attributes

MotionFlow parallax is attribute-driven. All single-element parallax behavior can be controlled directly from HTML using data-mf-parallax-* attributes.

# Parallax speed

Control how fast an element moves relative to scroll using data-mf-parallax-speed.

Parallax speed defines how strongly an element reacts to scroll. It applies to individual elements and works as a multiplier, not a pixel value.

Positive values move elements in the scroll direction, negative values move them in the opposite direction, and a value of 0 disables parallax entirely.

# Responsive parallax speed

MotionFlow allows you to define different parallax speeds for desktop, tablet, and mobile devices.

This helps fine-tune motion intensity across screen sizes and avoid excessive movement on smaller devices.

## Breakpoints

Breakpoints define when MotionFlow switches between desktop, tablet, and mobile parallax values.

These thresholds are evaluated on resize and determine which speed value is applied.

MotionFlow.init({
  parallax: {
    breakpoints: {
      mobile: 768,   // ≤ 768px → mobile settings
      tablet: 1024   // ≤ 1024px → tablet settings
    }
  }
});

# Parallax stagger

Create layered depth effects across multiple elements using data-mf-parallax-stagger.

Each direct child is automatically assigned its own parallax speed, creating a natural depth progression while scrolling.

# Stagger speed

Stagger speed defines the parallax speed of the first child inside a stagger group.

Each subsequent child increases or decreases its speed based on the stagger step value.

## Default stagger speed

By default, the stagger speed is set to 0. This means the first child will not move unless you explicitly define a stagger speed or apply a non-zero stagger step.

## Global stagger speed configuration

You can define the default first-child stagger speed globally using MotionFlow configuration.

## Per-stagger speed configuration

You can define the first-child stagger speed directly on a stagger container using HTML attributes.

Fallback behavior (attributes): If a device-specific stagger speed attribute is not provided, MotionFlow falls back to the next available value — tablet falls back to desktop, and mobile falls back to tablet or desktop.

## Relationship between stagger speed and step

Stagger speed defines the starting point (first child), while the stagger step defines how quickly depth increases or decreases across the group.

If the step is set to 0, all children will move at the same speed as the first child.

# Stagger step

The stagger step controls how much the parallax speed changes between consecutive children inside a stagger group.

Each child receives its own calculated speed using the formula:

childSpeed = baseSpeed + (step × index)

Stagger step can be configured globally, per stagger group, and per device.

## Default step values

MotionFlow applies different default step values based on device size to ensure smooth and natural depth across screen sizes.

## Global stagger step configuration

You can override the default stagger step values globally using MotionFlow configuration.

## Per-stagger step configuration

You can define step values directly on a stagger container using HTML attributes.

Fallback behavior (attributes): If a device-specific stagger step attribute is not provided, MotionFlow falls back to the next available value — tablet falls back to desktop, and mobile falls back to tablet or desktop.

## Positive vs negative step

The sign of the step value controls whether depth becomes stronger or weaker across the stagger group.

# Parallax stagger direction

Control where depth begins within a stagger group using data-mf-parallax-stagger-direction.

Direction controls the order in which calculated speeds are assigned to child elements — it does not change how the speed values themselves are calculated.

## Direction values

# Ignore specific children in stagger

Use data-mf-parallax-stagger-ignore to exclude specific children inside a stagger group from receiving parallax movement.

This attribute only applies to elements that are direct children of adata-mf-parallax-stagger container.

# Parallax lifecycle

Parallax works automatically in most cases. When elements are shown, hidden, resized, or added dynamically, you may need manual control.

# Global configuration (optional)

MotionFlow parallax works out of the box with zero JavaScript configuration. By default, all parallax behavior is controlled using HTML attributes.

Global configuration is only required if you want to override default values or define shared settings (including stagger parallax).

Individual elements can always override global values using data-mf-parallax-* and data-mf-parallax-stagger-* attributes.