Animation Addons for Elementor – Elementor V4 Atomic Widgets, GSAP Animations & Templates

Mô tả

Animation Addons is an Elementor V4 addon built natively for the Atomic Editor, with 40+ Atomic Widgets, Elementor V4 templates, reusable Classes and Variables, GSAP animations, dynamic content, forms, and advanced extensions. It also includes the established Elementor V3 widget, extension, and template library for existing Elementor websites.

The new Elementor V4 toolkit is built for the Atomic Editor workflow. It works with reusable Classes, Variables, responsive styling, and Atomic Elements while continuing to support existing Elementor websites.

Elementor Free is required. Elementor Pro is not required for the Animation Addons V4 Atomic Widgets.

Elementor V4 Toolkit
Atomic Widgets
Elementor V4 Extensions
Elementor V4 Templates
Elementor V4 Sections
Elementor V3 Library
Free vs Pro
Pricing
Documentation

Built for Elementor V4 and the Atomic Editor

Elementor V4 introduces a more scalable workflow based on Atomic Elements, reusable Classes, Variables, responsive controls, and a unified styling system.

Animation Addons extends that workflow with:

• 40+ Elementor V4 Atomic Widgets.
• Atomic animation and interaction extensions.
• 30+ Elementor V4 full website templates.
• 500+ Elementor V4 section templates.
• GSAP-powered animation controls.
• Loop Grid filters and dynamic content tools.
• Popup Builder.
• Header Footer Builder.
• Atomic Nested Slider.
• Form Builder and form extensions.
• Performance and reduced-motion options.
• 100+ existing Elementor V3 widgets for projects that still need them.
• 300+ existing Elementor V3 full website templates.

40+ Elementor V4 Atomic Widgets Built Natively for Elementor V4

Explore 40+ Elementor V4 Atomic Widgets built natively for the Elementor V4 Atomic Editor. Create content, dynamic layouts, forms, navigation, sliders, videos, and GSAP-powered interactions using reusable Classes, Variables, and responsive controls.

Browse the complete Elementor V4 Atomic Widgets library. Each widget below links to its own page with a live demo and settings overview.

Content & UI Atomic Widgets

• Atomic Counter – Create animated number counters for stats, achievements, and metrics.
• Atomic Advanced Heading – Build styled Elementor V4 headings with flexible typography and layouts.
• Atomic Accordion – Create responsive accordions for FAQs and expandable content.
• Atomic Icon List – Build customizable icon lists for features, benefits, and navigation.
• Atomic Social Share – Add social sharing buttons to Elementor V4 pages.
• Atomic Image Compare – Create interactive before-and-after image comparisons.
• Atomic Countdown – Add countdown timers for launches, events, and offers.
• Atomic Timeline – Build structured timelines for events, processes, and milestones.
• Atomic Progress Bar – Display animated progress bars for skills, goals, and statistics.
• Atomic Toggle Switcher – Create content, pricing, and feature toggle switches.
• Atomic Button – Build customizable Elementor V4 buttons with flexible styling.
• Atomic Button Pro – Create advanced buttons with additional effects and interactions.
• Atomic Curved Text – Display curved or circular text for creative layouts.
• Atomic Google Maps – Add Google Maps directly inside Elementor layouts.
• Atomic Flip Box – Create interactive flip boxes with front and back content.
• Atomic Image Hotspot – Add interactive hotspots and information points to images.

Interaction & Animation Atomic Widgets

• Atomic Offcanvas – Create off-canvas menus, panels, and hidden content areas.
• Atomic Stack Cards – Build animated stacked-card layouts with scroll interactions.
• Atomic Lottie – Add lightweight Lottie animations to Elementor V4 pages.
• Atomic Draw SVG – Create SVG drawing animations with GSAP.

Form Atomic Widgets

• Atomic Search Form – Add customizable WordPress search forms to Elementor.
• Atomic Form – Build flexible forms directly inside the Elementor V4 editor.

Dynamic Content Atomic Widgets

• Atomic Posts Grid – Display WordPress posts in responsive grid layouts.
• Atomic Loop Grid – Build dynamic Elementor V4 loop layouts for posts and custom content.

Blog Atomic Widgets

• Atomic Post Title – Display dynamic WordPress post titles in templates.
• Atomic Search Query – Display the current WordPress search query dynamically.
• Atomic Post Content – Add dynamic post content to Elementor templates.
• Atomic Post Image – Display featured images dynamically in post layouts.
• Atomic Post Pagination – Add navigation between WordPress posts and content.
• Atomic Table of Contents – Generate structured navigation for long-form content.

Header & Footer Atomic Widgets

• Atomic WP Menu – Display WordPress menus inside Elementor V4 layouts.
• Atomic Nav – Build flexible navigation menus for headers and websites.
• Atomic Site Logo – Display your WordPress site logo dynamically.

Slider Atomic Widgets

• Atomic Loop Grid Slider – Turn dynamic Loop Grid content into responsive sliders.
• Atomic Nested Slider – Build flexible sliders with nested Elementor content.
• Atomic Stack Cards – Create interactive stacked-card slider experiences.

Video Atomic Widgets

• Atomic Video Mask – Create masked video layouts for modern Elementor designs.
• Atomic Video – Add responsive videos with customizable controls and layouts.

Elementor V4 Loop Filter Atomic Widgets

Build advanced filtering experiences for Elementor V4 Loop Grid layouts with the Atomic Loop Filter widgets.

• Atomic Taxonomy Filter – Filter Loop Grid content by categories, tags, and custom taxonomies.
• Atomic Author Filter – Filter posts and dynamic content by author.
• Atomic Field Filter – Filter Loop Grid results using custom field values.
• Atomic Date Filter – Filter posts and content by date or date range.
• Atomic Search Filter – Add keyword search for Loop Grid and dynamic content.
• Atomic Sort Filter – Sort Loop Grid results by supported content fields.
• Atomic Result Count – Display the number of matching Loop Grid results.
• Atomic Active Filters – Show currently selected filters with easy removal options.
• Atomic Filter Drawer – Display filters inside a compact off-canvas filter panel.

These filters are designed for dynamic Elementor V4 layouts and can update Loop Grid results without a full page reload.

GSAP Animations for Elementor

Animation Addons brings a complete GSAP-powered motion system directly into the Elementor V4 Atomic Editor, allowing you to create advanced, high-performance animations without writing custom JavaScript.

Animation capabilities include:

🌟 ScrollTrigger
🎨 GSAP Animation Builder
🎬 Preset Animation
⚡ Smooth Scrolling
🌐 Horizontal Scrolling
📌 Sticky Elements
⏳ Timeline-Based Animation
✂️ Split Text Animation & Text Scramble
🔄 Flip Animation & Draggable
🛒 Scroll To Animation
🎥 Lottie Animation
🖼️ DrawSVG Animation & Morph SVG
➡️ Motion Path Animation
📏 Stagger Animation
🌪️ Scroll Smoother
🌍 Parallax Effects
🎥 Nested Elements
🎞️ Clip Path Animation
📸 Image Sequence Animation
🌟 Reveal Animation
🌫️ Bounce & Fade Animation
✨ Cursor Hover, Cursor Move Effect and Custom Cursor Effects

Elementor V4 Extensions

Browse the complete Elementor V4 Extensions library. Each extension below links to its own page.

Animation and interaction extensions:

• Regular Animation – Add flexible entrance and motion effects.
• Parallax – Create smooth scroll-based parallax effects.
• Text Animation – Animate headings and text visually.
• Image Animation – Add motion effects to images.
• Horizontal Scroll Animation – Create horizontal scrolling sections.
• Image Hover – Add interactive image hover effects.
• Sticky Pin Element – Keep elements fixed while scrolling.
• Cursor Hover Effect – Add cursor-based hover interactions.
• Mouse Move Effect – Move elements with cursor movement.
• Advanced Tooltip – Add customizable interactive tooltips.
• Tilt – Create 3D tilt effects on hover.
• Scroll To – Smoothly scroll to target sections.
• Popup – Create custom Elementor popups.
• Background Video – Add video backgrounds to sections.

Form Extensions

• Conditional Display – Show or hide fields based on conditions.
• Validation Pro – Add advanced form validation rules.
• Create User – Create WordPress users from form submissions.

Utility Extensions & Tools

• Dynamic Tags Atomic – Add dynamic WordPress data to Elementor V4.
• Mask Atomic – Apply creative masks to elements.
• Custom CSS – Add custom CSS directly to elements.
• Custom Fonts – Upload and use custom fonts.
• Post Type Builder – Create custom post types visually.
• Custom Icon – Upload and use custom icon sets.
• Code Snippet – Add custom CSS, JavaScript, or HTML snippets.

Elementor V4 Templates

Browse Elementor V4 website templates and Elementor V4 section templates.

The V4 toolkit includes:

• 30+ Elementor V4 website templates.
• 500+ Elementor V4 section templates.
• Atomic Editor layouts using reusable Classes and Variables.
• Responsive Elementor V4 layouts.
• Template importing with design-system information.
• Optional local importing of supported template assets.

Compare Free vs Pro, review pricing, or explore the complete Elementor V4 toolkit.

Form Builder

Build forms visually inside Elementor.

Available capabilities include:

• Form widget
• Conditional Display
• Custom validation
• Custom validation messages
• Date and time fields
• Create User actions
• Mailchimp integration
• Brevo integration

Performance Controls

Animation Addons is modular so site owners can enable only the widgets and extensions they need.

Performance-focused features include:

• Widget and extension enable/disable controls.
• Lazy animation loading.
• Reduced-motion support.
• Per-page performance controls.
• Widget and extension usage information.
• Cache compatibility controls.
• GSAP library display conditions.
• Performance diagnostics.

Actual front-end performance depends on the widgets, animations, media, theme, hosting, caching configuration, and other plugins used on the website.

Elementor V3 Classic Library

Still building with the classic Elementor editor? Animation Addons keeps its established Elementor V3 library, separate from the Elementor V4 Atomic toolkit above. It works with Elementor Free, and some widgets and extensions are marked Pro. See the full Elementor V3 library, or compare what each version includes on the V3 Free vs Pro page and V3 pricing page.

What you get with Elementor V3:

• 100+ Elementor V3 widgets for content, marketing, navigation, sliders, forms, and dynamic WordPress data.
• 25+ Elementor V3 extensions for animation, scroll, cursor, popup, and design controls.
• 300+ Elementor V3 full website templates.
• 10,000+ Elementor V3 section templates.
• Ready-made Elementor V3 page templates.
• GSAP-powered animation extensions such as scroll animation, split text, pin, horizontal scroll, and cursor effects.

V3 widgets:

• Content and media: Image Box, Image Box Slider, Image, Image Gallery, Brand Slider, Text Hover Image, Image Compare, Image Hotspot.
• Marketing and conversion: Counter, Progress Bar, Countdown, Notification, Advanced Pricing Table.
• UI and interaction: Button, Advanced Button, Icon Box, Tabs, Services Tab, Advanced Accordion, Toggle Switcher, Clickdrop, Floating Elements.
• Sliders and motion: Event Slider, Content Slider, Nested Slider, Scrollmotion Cards.
• Testimonials and team: Testimonial, Team.
• Navigation and layout: One Page Nav, Nav Menu, Site Logo, Breadcrumbs.
• Dynamic WordPress data: Post Title, Post Content, Post Excerpt, Post Featured Image, Post Meta Info, Post Pagination, Posts, Featured Posts, Banner Posts, Archive Title, Portfolio, Category Showcase, Grid Hover Posts, Post Reactions, Post Rating, Video Posts Tab, Current Date, Search Form, Filterable Posts, Posts Read Later.
• Forms and integrations: Contact Form 7, Mailchimp, Advanced Mailchimp.
• Animated text and media: Animated Text, Animated Title, Animated Heading, Typewriter, YouTube Video, Weather, Author Box.
• Pro widgets: GSAP DrawSVG, Lottie, Cube Scroll Reveal, Video Box Slider, Advanced Posts, Video Story, Live Events, Posts Slider, Breaking News Slider, Video Popup, Video Box, Video Mask, Scrollable Video, Stacked Cards, Flip Box, Vertical Marquee, Advanced Portfolio, Nested Motion Card.

V3 extensions:

• Free: Code Snippet, Custom CSS, Popup Builder, Custom Fonts, Custom Icon Fonts, Custom Post Type, Wrapper Link, Mega Menu Builder, and Advanced Tooltip.
• Pro: Smooth Scroller, Advanced Animation Control, Pin Element on Scroll, Text Animation, Image Animation, Cursor Hover Effect, Image Reveal on Hover, Cursor Move Effect, Horizontal ScrollTrigger, Portfolio Filter, and Tilt Effect.

The Elementor V3 widgets and templates are separate from the Elementor V4 Atomic Widgets and V4 templates. You can use both on the same site, and each widget or extension can be switched on or off from the Animation Addons dashboard.

Who Is Animation Addons For?

Animation Addons is built for Elementor V4 users, Elementor V3 users, WordPress designers, freelancers, agencies, developers, no-code creators, and teams building reusable Elementor design systems.

Documentation and Support

Documentation:
https://animation-addons.com/docs/

Elementor V4 Toolkit:
https://animation-addons.com/

Elementor V3 Library:
https://animation-addons.com/v3/

Support:
https://crowdyflow.ticksy.com/

Elementor V4 Guide:
https://animation-addons.com/blog/elementor-v4-and-atomic-editor/

Trusted By Leading WordPress & Elementor Creators

Animation Addons is trusted and reviewed by top WordPress & Elementor educators who actively demonstrate real-world animation workflows.

Featured & Reviewed By:

Matt Tutorials

Andrea Egli

Hamza – GoTechUG

Buddydevelopers

External Services

Services are contacted only when their feature is used.

1. Feature Requests

animation-addons.com
Sends: name, email, request.
Terms: https://animation-addons.com/terms-and-conditions/
Privacy: https://animation-addons.com/privacy-policy/

2. Template Library

block.animation-addons.com
Sends: template/category, API version, language.
Terms: https://animation-addons.com/terms-and-conditions/
Privacy: https://animation-addons.com/privacy-policy/

3. Starter Templates

themecrowdy.com
Sends: search term, template ID. Imports template files and media.
Terms: https://animation-addons.com/terms-and-conditions/
Privacy: https://animation-addons.com/privacy-policy/

4. OpenWeatherMap

api.openweathermap.org
Sends: location and API key.
Terms: https://openweathermap.org/terms
Privacy: https://openweathermap.org/privacy-policy

5. Mailchimp

api.mailchimp.com
Sends: email and mapped form fields.
Terms: https://mailchimp.com/legal/terms/
Privacy: https://mailchimp.com/legal/privacy/

6. Video Services

YouTube: https://www.youtube.com/t/terms
Vimeo: https://vimeo.com/terms
Dailymotion: https://legal.dailymotion.com/en/terms-of-use/
VideoPress: https://wordpress.com/tos/

7. Google Maps

maps.google.com
Loads the configured map in an iframe.
Terms: https://policies.google.com/terms
Privacy: https://policies.google.com/privacy

Source Code

Human-readable source.

Build with Node.js 18+:

npm install
npm run build
npm run build-win
npm run start
npm run release

Source locations:

• /src → /assets/build
• /inc/AtomicWidgets → /assets/atomic
• /assets/src → /assets/js and /assets/css

Dependencies and build scripts are in package.json, webpack.config.js, and gulpfile.js.

Source:
https://github.com/Wealcoder/animation-addons-for-elementor

Vendored libraries:

• CodeMirror 5.65.16: https://github.com/codemirror/codemirror5
• Select2 4.1.0: https://github.com/select2/select2