Animations

A list of all prepared animations variables that you can use.

Animations are all provided by Animista.

To use these animations you need to go to Streamlabs/StreamElements set the ‘Alert Animation’ for entry to ‘none’ and for exit to anything (you wont see it anyway). And most important is that the ‘Alert Duration’ to ‘12s’

Here are Animations variables that can be instantly used without any setup:

Entry Animations

--scale-in-center
--scale-in-top
--scale-in-tr
--scale-in-right
--scale-in-br
--scale-in-bottom
--scale-in-bl
--scale-in-left
--scale-in-tl
--scale-in-hor-center
--scale-in-hor-left
--scale-in-hor-right
--scale-in-ver-center
--scale-in-ver-top
--scale-in-ver-bottom
--slide-in-top
--slide-in-right
--slide-in-bottom
--slide-in-left
--slide-in-blurred-top
--slide-in-blurred-right
--slide-in-blurred-bottom
--slide-in-blurred-left
--bounce-in-top
--bounce-in-right
--bounce-in-bottom
--bounce-in-left
--bounce-in-fwd
--bounce-in-bck
--flicker-in-1
--flicker-in-2
--fade-in

Exit Animations

--scale-out-center
--scale-out-top
--scale-out-tr
--scale-out-right
--scale-out-br
--scale-out-bottom
--scale-out-bl
--scale-out-left
--scale-out-tl
--scale-out-horizontal
--scale-out-hor-left
--scale-out-hor-right
--scale-out-vertical
--scale-out-ver-top
--scale-out-ver-bottom
--slide-out-top
--slide-out-right
--slide-out-bottom
--slide-out-left
--slide-out-blurred-top
--slide-out-blurred-right
--slide-out-blurred-bottom
--slide-out-blurred-left
--fade-out
--fade-out-top
--fade-out-right
--fade-out-bottom
--fade-out-left
--puff-out-center

Attention Animations

--vibrate-1
--vibrate-2
--vibrate-3
--jello-horizontal
--jello-vertical
--heartbeat
--pulsate-bck
--pulsate-fwd

Text Animations

--text-focus-in
--text-focus-out
--blur-out-expand
--blur-out-contract

PreviousCSS-Variables NextStandard Presets

Last updated 2 years ago

Was this helpful?