Magical Addons Pro adds GSAP (GreenSock Animation Platform) scroll animation controls to Elementor. Elementor is required. In the Elementor editor, select an element and open its Advanced tab to select effects and adjust motion without writing code.

Apply animation to individual elements or combine effects across landing pages, marketing sections, headers, content blocks, and other Elementor layouts.

Choose effects for each content type

More than 30 presets provide starting points such as fade, slide, zoom, flip, bounce, rotate, elastic movement, and other special effects. Text, images, and backgrounds also have their own motion settings:

• Text: Typewriter, split characters, wave, text reveal, and bounce letters.
• Images: Parallax, Ken Burns, blur-in, 3D tilt, and reveal effects.
• Backgrounds: Parallax scroll, gradient shift, color morph, and reveal effects.

Set scroll behavior and timing

ScrollTrigger controls when an animation starts based on the visitor’s scroll position. Scrub animations link their progress to scrolling, so the motion follows the user’s position on the page.

Adjust duration and delay, choose from more than 30 easing settings, and set a play mode: play once, reverse when the visitor leaves, or repeat.

Fine-tune motion and sequences

Custom animation properties include X and Y movement, scale, rotation, skew, and opacity. Debug markers help fine-tune scroll-based animations. Advanced stagger animations sequence related elements, which can be used for lists, split text, or groups of visuals.