Animate Any
Integrates the animate.css library to apply CSS animations to any element on your Drupal site through an administrative interface.
animate_any
Install
composer require 'drupal/animate_any:^3.1'
composer require 'drupal/animate_any:8.x-1.6'
Overview
Animate Any is a Drupal module that brings the power of the popular animate.css library to your website without requiring any coding knowledge. It provides a user-friendly administrative interface where site builders can apply over 60 different CSS animations to any DOM element on their site.
The module works by allowing administrators to specify parent elements (using CSS class or ID selectors) and then define child sections within those parents that should receive animations. Each animation can be triggered by various events including page load, scroll into viewport, click, hover, and other mouse interactions.
Animation configurations are stored in a database table and can be exported to Drupal's configuration management system, making it easy to deploy animation settings across different environments (development, staging, production).
Features
- Apply CSS animations to any DOM element using class or ID selectors without writing code
- Over 60 animation effects including bounce, fade, flip, rotate, zoom, slide, and specialty animations
- Multiple trigger event options: page load, scroll into viewport, click, hover, mouse enter/leave, mouse up/down, and mouse move
- Live preview of animations in the admin form when selecting animation types
- Hierarchical animation structure with parent elements containing multiple animated child sections
- AJAX-powered dynamic form for adding and removing animation rows without page reload
- Export animation settings from database to Drupal active configuration for version control and deployment
- Import animation settings from active configuration back to database for multi-environment sync
- Automatic viewport detection for scroll-triggered animations to ensure animations play when elements become visible
- Animation classes automatically removed after 1 second for repeatable event-triggered animations
Use Cases
Animate hero section on page load
Add a fade-in animation to your homepage hero section. Set the parent element to 'body.front' or your homepage body class, add child identifier '.hero-section', select 'On page load' event, and choose 'Fade In' animation. The hero content will gracefully fade in when visitors land on your homepage.
Reveal content sections on scroll
Create engaging scroll animations for content sections. Use '#main-content' as parent, add identifiers like '.content-block', select 'On page scroll' event, and choose animations like 'Slide In Up' or 'Fade In Up'. As users scroll down the page, each content block animates into view when it enters the viewport.
Interactive button hover effects
Add attention-grabbing hover effects to call-to-action buttons. Set parent to '.cta-wrapper' or similar container, add '.cta-button' as identifier, select 'Hover' event, and choose 'Pulse' or 'Rubber Band' animation. Buttons will animate when users hover over them, encouraging clicks.
Click-triggered feedback animations
Provide visual feedback when users click elements. For a like button, use parent selector containing the button, add the button's identifier, select 'Click' event, and choose 'Bounce' or 'Tada' animation. The element animates on click, providing satisfying user feedback.
Deploy animations across environments
Configure animations on development, then use Export to save to active configuration. Use Drupal's Configuration Synchronization to export to files. On staging/production, import the configuration files and use the Import tab to populate the database. All animations are now consistent across environments.
Animate navigation menu items
Add subtle animations to navigation elements. Use the navigation container as parent, add menu item identifiers, select 'Mouse Enter' event, and choose a subtle animation like 'Swing' or 'Shake'. Menu items animate when users hover over them, adding polish to the navigation experience.
Tips
- Always clear all caches after installing the module and the animate.css library
- Use specific parent selectors to limit where animations apply - broad selectors like 'body' may cause unintended animations
- For scroll animations, ensure target elements are below the fold so users see the animation trigger
- The live preview in the admin form shows animations on the 'ANIMATE ANY' heading - use this to preview before saving
- Identifiers with the same parent element are automatically merged into a single database row for organization
- Event-triggered animations (click, hover, etc.) automatically reset after 1 second, allowing repeated animations
- Use the Export/Import feature when moving sites between environments to maintain animation consistency
- The module warns you if the animate.css library is missing - check /libraries/animate_any/animate.css exists
Technical Details
Admin Pages 6
/admin/config/animate_any
Main configuration page for adding new CSS animations to website elements. This page allows you to define a parent element and add multiple child sections with their animations and trigger events.
/admin/config/animate_any/list
Displays a paginated table of all configured animations with their parent elements and child identifiers. Provides edit and delete operations for each animation configuration.
/admin/config/animate_any/edit/{element}
Edit form for modifying existing animation configurations. Pre-populated with current values for parent element and all child section animations.
/admin/config/animate_any/delete/{id}
Confirmation page for permanently deleting an animation configuration from both the database and active configuration.
/admin/config/animate_any/import
Imports animation settings from Drupal's active configuration into the database table. Useful for deploying configurations from version control or syncing from another environment.
/admin/config/animate_any/export
Exports animation settings from the database to Drupal's active configuration. After export, use Configuration Synchronization to export to your sync directory for version control.
Permissions 1
Hooks 1
hook_page_attachments
Attaches the animate_any/animate library and passes animation configuration data as JSON to JavaScript on every page.
Troubleshooting 5
Download animate.css from https://github.com/daneden/animate.css and place the animate.css file in /libraries/animate_any/animate.css. The full path should be DRUPAL_ROOT/libraries/animate_any/animate.css.
Clear all caches first. Verify the animate.css library is properly installed. Check that your parent selector exists on the page and that child identifiers are correct. Use browser developer tools to verify the elements exist and check for JavaScript errors in the console.
Scroll animations only trigger when the element becomes visible in the viewport. If the element is already visible on page load, the animation may trigger immediately. Place animated elements below the initial viewport, or use 'On page load' for above-fold elements.
For event-triggered animations (click, hover, etc.), the animation classes are automatically removed after 1 second to allow repeated animations. Scroll and onload animations intentionally play only once. If you need repeatable scroll animations, consider using a click or hover event instead.
Make sure you're following the correct workflow: Export saves database to active configuration (not sync directory). You need to then use Drupal's Configuration Synchronization to export to files. For import, first sync configuration files to active configuration, then use the Import tab to populate the database.