Data Attributes

Attribute Overview

data-mos

Type: PresetName
Default: fade (when the attribute is present but empty)

Any preset animation key (e.g. fade-up, zoom-in).

Need something else? Define custom keyframes with MOS.registerKeyframes, or entire animations with MOS.registerAnimation and use it in your presets.

data-mos-offset

Type: number (px)
Default: value from offset passed to MOS.init or 120

Additional distance (in pixels) before the element is considered in view.

data-mos-duration

Type: number (ms, or seconds when the global timeUnits is "s")
Default: value from duration global or 400

Animation duration.

data-mos-delay

Type: number (ms, or seconds when the global timeUnits is "s")
Default: value from delay global or 0

Delay before the element animates in. As in AOS, there is no delay when it animates out.

data-mos-distance

Type: number (px)
Default: value from distance global or 100

Travel distance for directional presets like fade-up.

data-mos-easing

Type: string
Default: value from easing global or ‘ease’

Supports any of these predefined keywords:

• linear, ease
• ease-in, ease-out, ease-in-out
• circ-in, circ-out, circ-in-out
• back-in, back-out, back-in-out, anticipate
• ease-in-back, ease-out-back, ease-in-out-back
• ease-in-sine, ease-out-sine, ease-in-out-sine
• ease-in-quad, ease-out-quad, ease-in-out-quad
• ease-in-cubic, ease-out-cubic, ease-in-out-cubic
• ease-in-quart, ease-out-quart, ease-in-out-quart

You can also pass a custom cubic-bezier string in any of the following formats:

• cubic-bezier(x1, y1, x2, y2)
• [x1,y1,x2,y2] or x1,y1,x2,y2

Need something else? Define a custom easing preset with MOS.registerEasing and use it in your presets.

data-mos-once

Type: boolean
Default: value from once global or false

Animate only once: after the element has animated in, it is not reversed or replayed when you scroll back past it. The bare attribute (or any value other than "false") means true.

data-mos-mirror

Type: boolean
Default: value from mirror global or false

Play when scrolling up as well as down (requires once: false). The bare attribute (or any value other than "false") means true.

data-mos-anchor

Type: CSSSelector
Default: —

Use the position of a different element to decide when to trigger; the animation still runs on the target.

data-mos-anchor-placement

Type: placement keyword
Default: value from anchorPlacement global or top-bottom

One of the nine combinations below:

top-top, top-center, top-bottom, center-top, center-center, center-bottom, bottom-top, bottom-center, bottom-bottom.

Use these to describe which part of the anchor meets which part of the target when deciding the trigger point.

data-mos-id

Type: string

Identifier used for element-specific events: an element with data-mos-id="hero" dispatches mos:in:hero and mos:out:hero in addition to the general mos:in / mos:out.

Element vs Global precedence

Values resolve in the following order (highest first):

1. Element-level data-mos-*
2. Options passed to MOS.init()
3. Library defaults

This allows for broad theming with surgical per-element tweaks.