WP Manifestindependent plugin directory
manifest / editor / animate-support

Animate.css Block Support

Adds scroll-triggered Animate.css animations to any block via a custom block support.

by theaminulai · github.com/theaminulai/animate-support

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/theaminulai/animate-support/archive/refs/heads/main.zip
Readme github.com/theaminulai/animate-support ↗

Animate Support adds scroll-triggered Animate.css animations to supported WordPress blocks.

Features

  • Adds animation controls to supported core blocks in the block editor.
  • Lets you choose an animation and optional speed.
  • Stores animation data in block markup for front-end playback.
  • Triggers animations when blocks enter the viewport.
  • Respects prefers-reduced-motion on the front end.

Supported Blocks

The plugin enables animation support for these core blocks:

  • Paragraph
  • Heading
  • Image
  • Group
  • Cover
  • Columns
  • Column
  • Buttons
  • Button
  • Quote
  • Separator
  • Media Text

Requirements

  • WordPress 6.2 or later
  • PHP 8.0 or later recommended
  • Node.js and npm for local development or rebuilding assets

Installation

  1. Copy the animate-support folder into wp-content/plugins/.
  2. Activate the plugin in the WordPress admin.
  3. Make sure the built assets exist in the build/ folder.

Usage

  1. Edit a supported block in the block editor.
  2. Open the block settings panel under Styles.
  3. Choose an animation.
  4. Optionally choose an animation speed.
  5. Save the post or page.

On the front end, the plugin loads Animate.css and uses an IntersectionObserver to trigger the animation when the block becomes visible.

Development

Install dependencies:

npm install

Build the editor and frontend bundles:

npm run build

Run the development build watcher:

npm run start

Notes

  • Animate.css is loaded from the CDN at version 4.1.1.
  • The plugin uses a data-animate-name attribute to identify the animation class.
  • The front end adds animate__animated when the block enters the viewport.

License

GPL-3.0-or-later