Wypo Logo Header@2x
Documentations / Gutenberg Animations

Gutenberg Animations

The Gutenberg Animations plugin lets you add animations to all Gutenberg blocks. You can animate each block with predefined animations, and modify the animation delay and duration.

Requirements

  • WordPress : Version 5.9 or higher
  • PHP : Version 7.0 or higher

Installation

To install the plugin, please refer to the “Installing a plugin” documentation.

Example

Example

Fading

Fade in
Fade in left
Fade in right
Fade in top
Fade in bottom
Fade in left big
Fade in right big
Fade in top big
Fade in bottom big
Fade in top left
Fade in top right
Fade in bottom left
Fade in bottom right

Zoom

Zoom in
Zoom in Down
Zoom in Left
Zoom in Right
Zoom in Up

Bounce

Bounce in
Bounce in Down
Bounce in Left
Bounce in Right
Bounce in Up

Rotate

Rotate in
Rotate in down left
Rotate in down right
Rotate in up left
Rotate in up right

Attention seekers

Bounce
Flash
Pulse
Rubber band
Shake X
Shake Y
Head shake
Swing
Tada
Wobble
Jello
Heart beat

Special

Jack in the box
Roll in
Light speed in right
Light speed in left

Personalization

Blocks

By default, animations are available on all blocks, but you can exclude blocks by entering the following PHP code in your theme's functions.php file:

PHP

Default values

Default groups

PHP

Default animations

PHP

Default delays

PHP

Default speed

PHP

Add an animation

To add a new animation, you need to add it to the block settings and add the associated CSS.

Add the animation to the Gutenberg editor

To add the animation to the Gutenberg editor, you can use the following PHP code by pasting it into your child theme's functions.php file.

PHP

Add the style associated with the new animation

In the style.css file of your child theme, you can add the associated CSS code. Here's an example:

CSS

Delete an animation

To delete an animation, you can use the following example code in the functions.php file of your child theme:

PHP

Add a delay

To add a new delay, you need to add this delay in the block settings and add the associated CSS.

Add the delay to the Gutenberg editor

To add the delay to the Gutenberg editor, you can use the following PHP code by pasting it into your child theme's functions.php file.

PHP

Add the style associated with the new delay

In the style.css file of your child theme, you can add the associated CSS code. Here's an example:

CSS

Delete a delay

To remove a delay, you can use the following example code in the functions.php file of your child theme:

PHP

Add a speed

To add a new speed, you need to add this delay in the block settings and add the associated CSS.

Add speed to the Gutenberg editor

To add speed to the Gutenberg editor, you can use the following PHP code by pasting it into your child theme's functions.php file.

PHP

Add the style associated with the new speed

In the style.css file of your child theme, you can add the associated CSS code. Here's an example:

CSS

Delete a speed

To delete a speed, you can use the following example code in the functions.php file of your child theme:

PHP
  • Requirements
  • Installation
  • Example
    • Fading
    • Zoom
    • Bounce
    • Rotate
    • Attention seekers
    • Special
  • Personalization
    • Blocks
    • Default values
      • Default groups
      • Default animations
      • Default delays
      • Default speed
    • Add an animation
      • Add the animation to the Gutenberg editor
      • Add the style associated with the new animation
    • Delete an animation
    • Add a delay
      • Add the delay to the Gutenberg editor
      • Add the style associated with the new delay
    • Delete a delay
    • Add a speed
      • Add speed to the Gutenberg editor
      • Add the style associated with the new speed
    • Delete a speed