# Animate Elementor

**Plugin Name**: Animate Elementor  
**Description**: Adds scroll-based animation controls to Elementor widgets and sections using AOS (Animate On Scroll).  
**Tags:** animation, elementor, elementor addons, animate elementor, elementor animation 
**Version**: 1.0.3
**Requires at least**: 6.0  
**Requires PHP**: 7.4  
**Tested up to**: 6.8  
**Stable tag**: 1.0.3  
**Author**: spiderwares  
**Contributors**: spiderwares, harshilitaliya  
**License**: GPL v2 or later  
**Text Domain**: animate-elementor  
**Domain Path**: /languages  

Animate Elementor adds smooth scroll-based animations to Elementor widgets and sections using AOS — no coding required.


##  Description

Animate Elementor is a lightweight and powerful animation plugin for Elementor that lets you add beautiful scroll-based animations to any Elementor widget or section — no coding required. built on the reliable AOS (Animate On Scroll) library, this plugin brings your pages to life with professional animation effects like fade, slide, zoom, flip, and more. Whether you're using Elementor Free or Pro, you can easily control animations with intuitive settings right inside the Elementor editor.

🔹 **No coding needed** – just simple controls inside Elementor.  
🔹 **Fast and lightweight** – optimized for performance.  
🔹 **Compatible** with Elementor Free and Pro versions.


## Features

* ⭐ Add scroll-based animations to any Elementor widget or section
* ⭐ Choose from a wide range of effects: fade, slide, zoom, flip, and more
* ⭐ Built with AOS (Animate On Scroll) – lightweight and reliable
* ⭐ Includes Tilt.js for 3D tilt animations with easing control
* ⭐ Customize animation delay, duration, and easing without code
* ⭐ Enable or disable animations per widget or section
* ⭐ Compatible with both Elementor Free and Pro versions
* ⭐ Seamlessly integrated into Elementor's settings panel
* ⭐ Clean and responsive animations across all devices
* ⭐ Works with all WordPress themes and page builders
* ⭐ No extra dependencies – optimized for performance
* ⭐ Built using WordPress coding standards for high compatibility
* ⭐ Developer-friendly structure with hooks and filters
* ⭐ Translation-ready with .pot file included
* ⭐ Regularly updated and maintained for best performance

## Animation Types

###  Background Animations

* ⭐ `waves` – flowing animated wave effect, perfect for headers and hero sections
* ⭐ `fog` – soft, ambient fog effect for immersive backgrounds
* ⭐ More background effects coming soon…
* ⭐ **Need a custom animation effect?** We're happy to help — reach out at **[hello@spiderwares.com](mailto:hello@spiderwares.com)**.


###  Scroll Animations

- 🌫️ `fade`
- ⬆️ `fade-up` ⬇️ `fade-down` ⬅️ `fade-left` ➡️ `fade-right`
- 🔼 `fade-up-right` 🔽 `fade-up-left` ◀️ `fade-down-right` ▶️ `fade-down-left`
- 🔄 `flip-left` 🔁 `flip-right` 🔃 `flip-up` 🔂 `flip-down`
- 📤 `slide-up` 📥 `slide-down` ↩️ `slide-left` ↪️ `slide-right`
- 🔍 `zoom-in` 🔎 `zoom-in-up/down/left/right`
- 📉 `zoom-out` 📈 `zoom-out-up/down/left/right`

### Tilt Animations

- 📏 `linear`
- ⚙️ `ease`, `ease-in`, `ease-out`, `ease-in-out`
- 🎯 `Tilt Default (Smooth)` 
- 🎨 `Ease In Quad (Bezier)` 
- 🎯 `Ease In Cubic (Bezier)`
- 🔥 `Ease Out Cubic (Bezier)` 
- ⚡ `Ease In Out (Sharp)` 

## Installation

1. Download the **Animate Elementor** plugin.
2. Upload the plugin to `/wp-content/plugins/animate-elementor` directory or install via the WordPress Plugins screen.
3. Activate the plugin through the **Plugins** menu in WordPress.
4. Edit your pages with Elementor and start adding animations!


## 🎮 Usage

1. Open any page in the Elementor editor.
2. Select the widget or section you want to animate.
3. Go to the **Animation Settings** panel.
4. Choose an animation effect and configure options like delay or duration.
5. Save and preview your page to see the animation in action!


## Screenshots

1. **Animation Examples** – See animations like fade, slide, and zoom applied to Elementor widgets and sections.
2. **Animation Types** – Includes fade-up, fade-down, fade-right, slide-up, and many more effects.
3. **Easing Options** – Customize animation easing with presets like ease-in, ease-out, ease-in-back, and others.
4. **Anchor Placement** – Set where the animation triggers: top-bottom, top-center, center-center, etc.

## Changelog

### 1.0.3 – Added Tiltjs Support

– ✅ Introduced **background animation support** for Elementor sections
– ✅ Added two new background animation effects: `waves` and `fog`

### 1.0.1 – Added Tiltjs Support

– ✅ Integrated **[Tilt.js](https://gijsroge.github.io/tilt.js/)** for interactive tilt animations.

### 1.0.0 – Initial Release

– ✅ Added AOS integration for scroll-based animations  
– ✅ Custom animation controls for Elementor widgets and sections  
– ✅ Lightweight and responsive  
– ✅ Clean UI with live preview support


## Upgrade Notice

### 1.0.0
– Initial Release.
– 🎯 Add scroll-based animations using AOS in Elementor.
– 🛠️ Lightweight and easy to use.


##  FAQ

### Q1: How do I enable animations?
After activating the plugin, open any Elementor page, select an element, and configure its Animation settings.

### Q2: Which animations are included?
Animate Elementor supports fade, slide, zoom, flip, and other scroll-triggered effects.

### Q3: Will it work with Elementor Free version?
Yes! Animate Elementor is compatible with both free and pro versions of Elementor.


##  External Libraries

– **[AOS (Animate On Scroll)](https://michalsnik.github.io/aos/)** — For smooth, performant scroll-triggered animations.
– **[Tilt.js](https://gijsroge.github.io/tilt.js/)** — For interactive tilt animations with customizable easing options.

##  License

This plugin is licensed under the [GPL v2 or later](https://www.gnu.org/licenses/gpl-2.0.html).

##  Contributing

We welcome contributions! Fork the repository, create a feature branch, and submit your pull request.


##  Support

Need help? Contact us at [hello@spiderwares.com](mailto:hello@spiderwares.com) or open a ticket on the plugin’s support forum.