Animate

Available as: Web ComponentShortcodeOxygen Element

Wrapper around GSAP that allows for staggered and scroll-based animation.

<spx-animate duration="2" ease="power4.inOut" viewport y="100" target="spx-tailwind" auto-alpha="0"> <spx-tailwind style="display: block; visibility: hidden;"> <div class="w-full flex justiy-center"> <div class="rounded-xl w-44 h-44 bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 flex items-center justify-center"> <p class="text-white text-center text-4xl uppercase font-semibold">Hello</p> </div> </div> </spx-tailwind> </spx-animate>

Hello

<spx-animate duration="1" opacity="1" viewport stagger="0.25" auto-alpha="0" target="spx-tailwind"> {% for item in 'This is a staggered animation'|split(' ') %} <spx-tailwind style="display: block; visibility: hidden;"> <p class="text-3xl font-semibold text-center bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-blue-500">{{ item }}</p> </spx-tailwind> {% endfor %} </spx-animate>

This

is

a

staggered

animation

Properties

auto-alpha

Type: number

Same as opacity but sets visibility to 'hidden' after hitting 0.

clip-path

Type: string

Clip-path value the animation starts from.

delay

Type: numberDefault: 0

Delay before animation starts.

duration

Type: numberDefault: 1

Animation duration.

ease

Type: stringDefault: power1.out

Ease being used. Accepts all common GSAP options.

filter

Type: string

Filter value the animation starts from.

once

Type: boolean

Determines if animation should only play once. (if viewport is true)

opacity

Type: number

Opacity level the animation starts from.

repeat

Type: number

Repeats the animation. -1 to repeat indefinitely.

repeat-delay

Type: number

Time to wait between repetitions.

reverse

Type: boolean

Reverses the animation.

stagger

Type: numberDefault: 0.15

Amount of time elements should be staggered by.

target

Type: stringDefault: *

Target element. Can take any querySelector value. (id, class, tag etc.)

viewport

Type: boolean

Starts animation when target is in the viewport.

viewport-root-margin

Type: stringDefault: 0px

Scroll intersection observer root margin.

viewport-threshold

Type: numberDefault: 0

Scroll intersection observer threshold.

x

Type: anyDefault: 0

X position the animation starts from.

y

Type: anyDefault: 0

Y position the animation starts from.

yoyo

Type: boolean

Causes the animation to go back and forth, alternating backward and forward on each repeat.

Slots

inner

Slot (between HTML tag).

Events

spxAnimateDidLoad

Fires after component has loaded.

Methods

play

Plays animation.

restart

Restarts animation.