I sniffed out an interesting tutorial about bringing GSAP-style animations to Elementor without hand-coding. In this walkthrough, Andrea Egli tests the Animation Addons plugin for WordPress/Elementor and shows how far you can go with scroll-triggered effects, horizontal scrolling, split text, and more—directly from the editor.
💡 What the Video Teaches: GSAP-Level Effects in Elementor (No Custom Code)
This tutorial explores how to build Elementor animations that feel like GSAP—without writing JavaScript. Using Animation Addons (free + pro), Andrea walks through the plugin’s templates, widgets, and GSAP-powered extensions (like ScrollTrigger, Smooth Scrolling, Split Text, Horizontal Scroll) and demonstrates how to enable, configure, and preview effects inside the Elementor editor.
What Is Animation Addons and Why It Matters for Elementor Animations
- Problem it solves: Hand-coding GSAP snippets in WordPress/Elementor can get brittle—snippets need to play nicely with Elementor, WordPress core, and other plugins. Maintenance becomes a headache after updates.
- Plugin approach: Animation Addons wraps GSAP features behind Elementor UI controls, so you can configure timelines and effects (delay, duration, stagger, triggers) from the panel.
Key features shown:
- 200+ starter website templates (pro) that ship with GSAP effects built in.
- GSAP Extensions: ScrollTrigger, Smooth Scrolling, Split Text, Horizontal Scrolling, Draw SVG, Pin on Scroll, Motion Path, and more.
- Large widget library (sliders, forms, video, advanced UI elements) with documentation and live previews.
Free vs Pro: What You Actually Get
- Free: Generous set of widgets, basic smooth scrolling, 20 starter templates.
- Pro: ~200 templates, GSAP extensions (the heavy hitters) like ScrollTrigger, Split Text, Horizontal Scroll, Draw SVG, Pin, etc.
SEO keywords: Animation Addons plugin, Elementor GSAP animations, GSAP in Elementor, Elementor scroll trigger, Elementor split text, Elementor horizontal scroll, smooth scrolling Elementor
Installing Animation Addons (Free + Pro) the Right Way
- Install Animation Addons (free) from your WordPress dashboard (Plugins → Add New).
- Upload and activate Animation Addons Pro (zip) if you have a license.
- In the WP admin sidebar, go to Animation Addons → Settings and enter your license (Pro).
- Use the plugin’s Dashboard to access:
- Settings
- Page Import (for templates)
- Custom Fonts / Icons
- CPT Builder
- Animation Builder
- Code Snippets
- Theme Builder
Tip: Only enable the widgets and extensions you’ll actually use—Andrea shows how turning everything on floods the Elementor sidebar and can slow down the editor.
Enabling GSAP Extensions Inside Elementor
Navigate to Animation Addons → Extensions and toggle what you need:
- ScrollTrigger (and variants, including horizontal)
- Smooth Scrolling
- Split Text / Text Animation
- Horizontal Scroll
- Draw SVG
- Pin on Scroll
- Motion Path
If an effect doesn’t appear in the Elementor panel, make sure the specific extension is enabled (open the extension group and toggle the exact effect).
Using Starter Templates With Built-In GSAP Effects
From Starter Templates, pick a niche (e.g., Interior Design) and preview before importing.
These templates already include GSAP-enhanced sections (menus, hero transitions, animated buttons, cursor effects, etc.). It’s a quick way to start from a “working GSAP baseline” without writing code.
Example: Advanced Button With Hover Animation
- Add the Advanced Button widget (Animation Addons) to your page.
- Under Content → Style, choose from eight built-in hover styles (arrows, outlines, motion).
- Customize icon position, text, and interaction.
- This replaces complex JS/CSS hover effects with a click-and-configure workflow.
Why it’s useful: These micro-interactions often break after updates if hand-coded. The widget encapsulates them so you can maintain them safely.
Example: Text Reveal (Split Text) on Page Load vs On Scroll
- Select your Heading in Elementor.
- In the Text Animation (GSAP) panel (available when GSAP extensions are enabled):
- Choose animation type (e.g., Text Reveal).
- Adjust Delay, Duration, and Stagger—the same core GSAP concepts, now exposed as UI controls.
- Set Trigger to On Page Load (for hero headings) or On Scroll (for sections further down).
- Result: Smooth, professional split-text reveals without a single line of JS.
Example: Horizontal Scroll Section
- Enable Horizontal Scroll under GSAP extensions.
- Apply it to a section and tweak settings (trigger behavior, speed, smoothing).
- Great for portfolio panels, feature carousels, or awards timelines that slide sideways as the user scrolls.
SEO phrases to weave naturally: how to add GSAP animations in Elementor without code, Elementor text reveal, Elementor horizontal scroll, Elementor ScrollTrigger tutorial.
🐶 wpPug’s Take
There’s a lot to wag about here. From a production standpoint, wrapping GSAP in Elementor controls is a big win: fewer brittle snippets, fewer surprises after core/plugin updates, and dramatically faster iteration for designers who’d rather build than debug.
A few things to watch:
- Performance & panel clutter: Enabling every widget/extension can make the editor feel overloaded. Turn on only what you need.
- Free vs Pro expectation: The headline GSAP tools live in Pro. Free is generous, but if you want ScrollTrigger, Split Text, and Horizontal Scroll, plan on upgrading.
- Documentation matters: The plugin includes per-widget docs and live previews—use them. You’ll move faster and avoid misconfigurations.
Bottom line: if you’ve been fighting custom GSAP inside Elementor, Animation Addons is a pragmatic way to ship ScrollTrigger-level experiences without custom code.
🐾 Final Thoughts
Andrea’s walkthrough shows how Animation Addons brings GSAP-grade motion to Elementor with minimal setup. The combination of GSAP extensions, starter templates, and Elementor-native controls makes it a compelling toolkit for modern, interactive WordPress sites—especially portfolios, landing pages, and creative showcases.
That’s all for today — see you in the next sniff-through!