GSAP animation controls for Elementor
Magical Addons Pro adds professional scroll-triggered animation capabilities to Elementor through GSAP, the GreenSock Animation Platform. It is designed for creators who want to bring movement to page content without writing code. Animation controls are available from the Elementor editor, where you can select an element and work from the Advanced tab.
The Pro animation features support a range of visual effects for landing pages, marketing sections, headers, content blocks, and other Elementor layouts. You can animate individual elements or build a more coordinated motion style across a page by combining effects, timing, easing, and scroll controls.
Preset and content animations
Magical Addons Pro includes more than 30 preset animations. These cover effects such as fade, slide, zoom, flip, bounce, rotate, elastic movement, and other special effects. Presets provide a practical starting point when you want to add motion without defining every animation property manually.
Text animation options include typewriter effects, split characters, wave effects, text reveals, and bounce letters. These controls can help introduce headings, labels, calls to action, and other text-based content in a more noticeable way.
Image animation options include parallax, Ken Burns, blur-in, 3D tilt, and reveal effects. Background animation options include parallax scroll, gradient shift, color morph, and reveal effects. Together, these options allow page creators to apply different motion treatments to text, imagery, and backgrounds rather than using one effect throughout an entire design.
Scroll and timing controls
ScrollTrigger support lets you customize when an animation starts according to the visitor’s scroll position. You can connect animation progress to scrolling with scrub animations, creating movement that follows the user’s position on the page.
Animation controls include duration, delay, and more than 30 professional easing options. You can also choose how an animation behaves through play modes: play once, reverse when the visitor leaves, or repeat the animation. These settings are useful for adjusting how much motion a page uses and when that motion should occur.
Advanced controls include custom animation properties for X and Y movement, scale, rotation, skew, and opacity. You can use these properties to shape a more specific effect instead of relying only on a preset.
Fine-tuning and advanced effects
Magical Addons Pro provides debug markers for fine-tuning scroll-based animations. Advanced stagger animations are also included, allowing related items to animate in a staggered sequence. These controls can be useful for lists, repeated content, split text, or groups of visual elements that should enter the page in an ordered rhythm.
The animation workflow is intended to be accessible without coding. Select an Elementor element, open its Advanced tab, and use the Magical animation controls to choose effects and adjust their behavior.
Installation
Install Magical Addons for Elementor in WordPress and use its Elementor editing workflow for page design. The Pro edition adds the GSAP animation capabilities described above. After the add-on is available, edit an Elementor layout, select an element, open the Advanced tab, and configure the animation settings, timing, scroll behavior, and play mode.
