You change the hidden boolean prop to kick-off an animation, typically as a result of a click on the block's contents. If hidden changes to true, the block will perform a disintegrating animation. If hidden changes to false, it will reverse and reintegrate the original content.
Props
Property
Type
Default
Description
hidden
boolean
false
Whether block should be hidden or visible. Changing this prop starts an animation.
animationOff
string
''
'show' or 'hide' or 'both'
color
string
'#000'
Particle color. Should match the block content's background color
duration
number
1000
Animation duration in milliseconds.
easing
string, array
'easeInOutCubic'
Animation easing.
type
string
circle
'circle' or 'rectangle' or 'triangle'
drawStyle
string
fill
'fill' or 'stroke'
direction
string
'left'
'left' or 'right' or 'top' or 'bottom'
canvasPadding
number
150
Amount of extra padding to add to the canvas since the animation will overflow the content's bounds
size
number
func
random(4)
speed
number
func
random(4)
particlesAmountCoefficient
number
3
Increases or decreases the relative number of particles
oscillationCoefficient
number
20
Increases or decreases the relative curvature of particles