# 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.2  
**Requires at least**: 6.0  
**Requires PHP**: 7.4  
**Tested up to**: 6.8  
**Stable tag**: 1.0.2  
**Author**: harshilitaliya  
**Contributors**: 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 adds lightweight, smooth, and fully customizable scroll-based animation controls to Elementor widgets and sections. Using the popular **AOS** (Animate On Scroll) library, you can trigger animations like fade, slide, and zoom as users scroll through your pages.

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


## 🚀 Features

– 🎨 Add scroll animations to any Elementor widget or section.
– 🎯 Wide range of animation effects: fade, slide, zoom, flip, and more.
– ⚡ Powered by **[AOS (Animate On Scroll)](https://michalsnik.github.io/aos/)**.
– 💫 **[Tilt.js](https://gijsroge.github.io/tilt.js/)** integration for interactive tilt animations with customizable easing options.
– 🛠️ No extra libraries — lightweight and optimized.
– 🧩 Seamless integration with Elementor UI.
– 💬 Simple and intuitive settings.

## 🎞️ Animation Types

Choose from a wide range of animation effects:

- 🌫️ `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`


## 🎛️ Easing Options

Control how your animations behave with easing presets:

- 📏 `linear`
- ⚙️ `ease`, `ease-in`, `ease-out`, `ease-in-out`
- 🌀 `ease-in-back`, `ease-out-back`, `ease-in-out-back`
- 🎵 `ease-in-sine`, `ease-out-sine`, `ease-in-out-sine`
- 🧮 `ease-in-quad`, `ease-out-quad`, `ease-in-out-quad`
- 🧊 `ease-in-cubic`, `ease-out-cubic`, `ease-in-out-cubic`
- 🧷 `ease-in-quart`, `ease-out-quart`, `ease-in-out-quart`

### Tilt Easing Options:

- 📏 `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.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 [i.harshil8493@gmail.com](mailto:i.harshil8493@gmail.com) or open a ticket on the plugin’s support forum.