Entrance Animation — Playground

✦

Fade In Up

Animate.css entrance

plays on load — hit ↻ Replay, or tweak the options

Speed preset

Custom duration (s) 0

0 = use preset

Delay (s) 0

Repeat count 1

ignored when looping

Loop forever

Replay on scroll

Easing

Sample option — updates as you tweak

'animation' => [
    'effect' => 'animate__fadeInUp',
    'animate__fadeInUp' => [
        'group_animation_basic' => [ 'speed_preset' => '' ],
        'group_animation_advanced' => [ 'delay' => 0, 'custom_duration' => 0, 'repeat_count' => 1, 'loop_forever' => 'no', 'replay_on_scroll' => 'no', 'easing' => '' ],
    ],
],

Pick an effect above and tweak it. This runs the real Animate.css v4.1.1 library the plugin ships, applied exactly as the runtime does — the element sits hidden (sc-anim-pending) until it enters view, then gets animate__animated animate__<effect> plus the speed / repeat / loop classes and the --animate-* custom properties. On a real page the entrance plays once when the element scrolls into view; here it's looped so you can watch it — hit ↻ Replay to run it again. The Sample option updates as you tweak.

Where it lives

Entrance Animation is core — open any Section, Column or element → Animations tab → Entrance Animation. It needs nothing switched on, and it honours reduce motion (the effect is skipped and content shows normally).

How the option is stored

Entrance Animation is a multi-picker whose picker is the effect; each effect keeps its own speed and advanced tweaks in a nested group:

'animation' => [
    'effect' => 'animate__fadeInUp',
    'animate__fadeInUp' => [
        'group_animation_basic'    => [ 'speed_preset' => '' ],
        'group_animation_advanced' => [
            'delay' => 0, 'custom_duration' => 0, 'repeat_count' => 1,
            'loop_forever' => 'no', 'replay_on_scroll' => 'no', 'easing' => '',
        ],
    ],
],

← Back to Entrance Animation

Fade In Up

How the option is stored​

How the option is stored