Animations

Add entrance animations to elements using data attributes.

Basic Usage

JSON

{
  "type": "Headline/V1",
  "attrs": {
    "data-skip-animation-settings": "false",
    "data-animation-time": 1200,
    "data-animation-delay": 600,
    "data-animation-trigger": "load",
    "data-animation-type": "glide-in",
    "data-animation-timing-function": "ease-out",
    "data-animation-once": true,
    "data-animation-loop": false
  },
  "params": {
    "--data-animation-direction": "right"
  }
}

Animation Attributes

Attribute	Type	Description
`data-skip-animation-settings`	string	Set to `"false"` to enable animation panel
`data-animation-time`	number	Duration in milliseconds (e.g., 1200)
`data-animation-delay`	number	Delay before animation starts (ms)
`data-animation-trigger`	string	`load` or `scroll`
`data-animation-type`	string	Animation effect name
`data-animation-timing-function`	string	CSS timing function
`data-animation-once`	boolean	Play only once (true/false)
`data-animation-loop`	boolean	Loop animation (true/false)
`data-animation-direction`	string	`normal`, `reverse`, `alternate`

Animation Types

Type	Description
`glide-in`	Slide in from direction
`float-in`	Float in from direction
`puff-in`	Puff/scale in effect
`wooble`	Wobble animation
`fade-in`	Simple fade in

Timing Functions

Value	Description
`linear`	Constant speed
`ease`	Slow start and end
`ease-in`	Slow start
`ease-out`	Slow end
`ease-in-out`	Slow start and end

Directional Animations

For animations that come from a direction, set the direction in params:

JSON

{
  "attrs": {
    "data-animation-type": "glide-in"
  },
  "params": {
    "--data-animation-direction": "right"
  }
}

Direction values: left, right, top, bottom

Examples

Scroll-triggered Animation

JSON

{
  "attrs": {
    "data-skip-animation-settings": "false",
    "data-animation-time": 1000,
    "data-animation-delay": 0,
    "data-animation-trigger": "scroll",
    "data-animation-type": "puff-in",
    "data-animation-timing-function": "ease-out",
    "data-animation-once": true
  }
}

Looping Button Animation

JSON

{
  "type": "Button/V1",
  "attrs": {
    "data-skip-animation-settings": "false",
    "data-animation-time": 1200,
    "data-animation-delay": 600,
    "data-animation-trigger": "scroll",
    "data-animation-type": "wooble",
    "data-animation-timing-function": "ease-in-out",
    "data-animation-loop": true
  }
}