Animate

Available as: Web ComponentShortcodeOxygen Element

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

<spx-animate duration="1" opacity="0" viewport stagger="0.05"> <p>Hi!</p> <p>Hi!</p> <p>Hi!</p> <p>Hi!</p> <p>Hi!</p> <p>Hi!</p> </spx-animate>

Hi!

Hi!

Hi!

Hi!

Hi!

Hi!

Properties

clip-path

Type: string

Clip-path value the animation starts from.

delay

Type: number

Delay before animation starts.

display

Type: stringDefault: 'block'CSS variable: --spx-animate-display

Component display property.

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: '*'

The target element that should be animated inside the component.

viewport

Type: boolean

Starts animation when target is in the viewport.

viewport-margin-bottom

Type: stringCSS variable: --spx-animate-viewport-margin-bottom

Adjust the root margin of the animation start.

viewport-margin-left

Type: stringCSS variable: --spx-animate-viewport-margin-left

Adjust the root margin of the animation start.

viewport-margin-right

Type: stringCSS variable: --spx-animate-viewport-margin-right

Adjust the root margin of the animation start.

viewport-margin-top

Type: stringCSS variable: --spx-animate-viewport-margin-top

Adjust the root margin of the animation start.

x

Type: any

X position the animation starts from.

y

Type: any

Y position the animation starts from.

yoyo

Type: boolean

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

Events

spxAnimateDidLoad

Fires after component has loaded.

Methods

play

Plays animation.

reload

Reload component.

restart

Restarts animation.