https://github.com/dkress59/wp-gutenberg-animate

A WordPress Plugin for Gutenberg integration of Animate.css.
https://github.com/dkress59/wp-gutenberg-animate

animate animate-css animatecss css css3 css3-animations gutenberg gutenberg-blocks gutenberg-compatible gutenberg-plugin wordpress wordpress-development wordpress-plugin

Last synced: about 2 months ago
JSON representation

A WordPress Plugin for Gutenberg integration of Animate.css.

• Host: GitHub
• URL: https://github.com/dkress59/wp-gutenberg-animate
• Owner: dkress59
• Created: 2020-05-18T08:21:25.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2021-03-13T17:44:31.000Z (about 4 years ago)
• Last Synced: 2025-01-29T20:54:58.254Z (4 months ago)
• Topics: animate, animate-css, animatecss, css, css3, css3-animations, gutenberg, gutenberg-blocks, gutenberg-compatible, gutenberg-plugin, wordpress, wordpress-development, wordpress-plugin
• Language: JavaScript
• Homepage: https://wordpress.org/plugins/animate-wp-blocks/
• Size: 707 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Animate WP Blocks

Add animation controls to each and every Gutenberg Block! Runs on [Animate.css](https://animate.style/) v4. Check out

the plugin on [WordPress](https://wordpress.org/plugins/animate-wp-blocks/)!

## Description

Install the plugin and choose from a hundred animations for any of your Blocks. It's that easy!

Now also includes settings for scroll-conditioned animations.

## Installation

You can simply install this plugin to your WordPress installation and you are ready to go!

1. Install the plugin through the WordPress plugins admin screen, or upload the plugin files to

   the `/wp-content/plugins/animate-wp-blocks` directory.

2. Activate the plugin through the 'Plugins' screen in WordPress

## Frequently Asked Questions

Are there additional requirements to this Plugin?

: No, this plugin ships packaged with Animate.css v4. You can use Animate.css anywhere on your WordPress site

out-of-the-box, but the plugin loads an additional script for the Gutenberg Block integration.

Will this work anywhere on my WordPress site?

: With this plugin you can take full advantage of Animate.css anywhere on your site. The Animation Controls are

available everywhere, where the Gutenberg Block Editor is used (e.g. any page or post).

Which particular blocks will this work with?

: Animations Controls are instantly available on **any block** upon plugin activation, including third-party and custom

blocks! _Check out details on how to limit animation controls to certain blocks in

the [source code](https://github.com/dkress59/wp-gutenberg-animate) on GitHub._

## Screenshots

![screenshot-1](https://github.com/dkress59/wp-gutenberg-animate/raw/master/assets/screenshot-1.png)

_The plugin provides any block with four new animation controls:

Type, Repetitions, Duration and Delay._

![screenshot-1](https://github.com/dkress59/wp-gutenberg-animate/raw/master/assets/screenshot-2.png)

_Animate.css comes with almost a hundred animation types!_

![screenshot-1](https://github.com/dkress59/wp-gutenberg-animate/raw/master/assets/screenshot-3.png)

_You can add animations to virtually any Gutenberg Block._

## Changelog

### 2.0.2

#### Scroll Detection

- Adds new scroll detection animation controls

- Adds plugin settings page for explanations and global/default settings

### 2.0.1

#### Public Release

- Uses WordPress NPM dependencies

- Pre-packages dependencies on build

### 2.0.0

#### Animate.css v4

- refactored fur public release

- switch from Animate.css v3 to v4