Elementor Magic Scroll Addon Tutorial

We’re thrilled to introduce Magic Scroll Addon for Elementor, an innovative feature from Premium Addons Pro that transforms your website creation process. This cutting-edge tool allows you to infuse Elementor widgets with a variety of scroll animations, elevating the design of modern WordPress sites.

With Magic Scroll Addon for Elementor, your design elements can come alive with motion effects such as translation or rotation, CSS transitions like changes in opacity or padding, and even interactive animations like video playbacks or dynamic SVG drawings.

This guide will explore the diverse animation types and configurations available with Elementor Magic Scroll Addon, demonstrating how to leverage Premium Magic Scroll functionality to craft captivating scrolling experiences.

Experience the capabilities firsthand on our Elementor Magic Scroll Feature showcase page.

---

Requirements: 

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that this feature is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

---

How to apply the Magic Scroll Feature for Elementor?

Premium Magic Scroll for Elementor can be applied to any Elementor widget. To apply Magic Scroll on your Elementor widget, please follow the steps below:

Navigate to your Elementor widget settings > Advanced tab > Premium Magic Scroll section

• Enable Magic Scroll: Enable this option to apply Elementor Magic Scroll on this widget.

When you enable Magic Scroll feature, the Magic Scroll Responsive Settings section will appear below the Premium Magic Scroll section.

---

Elementor Magic Scroll Settings

Before editing any settings, you need to create a scene by adding animations to your widget from ADD ITEM button.

We’ve added many animations in Premium Magic Scroll to make sure you find the animation you are looking for. Below, you can find all the available animations in Elementor Magic Scroll feature.

Animations are grouped into five types: 

1. Position Animations
   • Translate Effect
   • Rotate Effect
   • Scale Effect
   • Skew Effect
   • Fade In and Fade Out Effects
2. CSS Properties Animations
   • Opacity Effect
   • Border Effect
   • Padding Effect
3. CSS Filters Animations
   • Blur Effect
   • Grayscale Effect
   • Brightness Effect
4. More Magic Animations
   • Color Effect
   • Background Color Effect
   • Font Size Effect
   • Letter Spacing Effect
   • Images Sequence Effect
   • Play Video Effect
   • Draw SVG Effect
   • Carousel Scroll Effect
   • Progress Bar Effect
   • Image Compare Effect
5. Advanced Animations
   • Custom Path Effect
6. CSS Class Effect
   

Every animation has its own settings and there are mutual settings included with every animation tab. So, First, we will discuss every animation with its related settings in the item tab. Secondly, we will discuss the mutual settings in the item tab.

Elementor Magic Scroll Animations

Position Animations

Translate Effect

Translate animation effect for Elementor is used to create a transition between two position points for Elementor element while scrolling. 

• TranslateX: Set the end horizontal position in pixels or percentages that the element will be moved to along the X-axis.
• Transform Origin X: Set the horizontal point around which a transformation is applied (Left, Center, Right, or Custom point)  
• TranslateY: Set the end vertical position in pixels or percentages that the element will be moved to along the Y-axis.
• Transform Origin Y: Set the vertical point around which a transformation is applied (Top, Center, Bottom, or Custom point).

---

Rotate Effect

Rotate animation effect for Elementor is used to create element rotation about one axis or more than one axis while scrolling.

• RotateX: Set the degree to which the element will rotate around the X-axis.
• Transform Origin X: Set the horizontal point around which a transformation is applied (Left, Center, Right, or Custom point)  
• RotateY: Set the degree to which the element will rotate around the Y-axis.
• Transform Origin Y: Set the vertical point around which a transformation is applied (Top, Center, Bottom, or Custom point). 
•  RotateZ: Set the degree to which the element will rotate around the Z-axis.

---

Scale Effect

Scale animation effect for Elementor is used to create zoom-in and zoom-out effects or enlarge and shrink effects for Elementor elements depending on page scroll direction.

• Scale to Section Width/Height: Enable this to scale the element until its width/height is equal to the browser window width.
• ScaleX: Set value for scaling horizontally.
• Transform Origin X: Set the horizontal direction in which the scaling effect is applied (Left, Center, Right, or Custom direction).  
• ScaleY: Set value for scaling vertically.
• Transform Origin Y: Set the vertical direction in which the scaling effect is applied (Top, Center, Bottom, or Custom direction).

---

Skew Effect

Skew animation effect for Elementor is used to skew the Elementor elements along the X-axis and Y-axis by the given angles while scrolling.

• Skew X: Set the skew degrees along the X-axis.
• Transform Origin X: Set the horizontal point around which a transformation is applied (Left, Center, Right, or Custom point). 
• Skew Y: Set the skew degrees along the Y-axis.
• Transform Origin Y: Set the vertical point around which a transformation is applied (Top, Center, Bottom, or Custom point).  

---

Fade In and Fade Out Effects

The Fade in and Fade Out animation effects in Elementor smoothly transition elements into or out of visibility as the user scrolls through the page.

• Fade In Animation Settings:
  • Select Animation: Choose “Fade In” to apply an entrance effect.
  • Fade Direction: Customize the direction from which the element will fade in.
  • Apply Animation On: Determine the target, such as the Element Container, for the fade-in effect.
• Fade Out Animation Settings:
  • Select Animation: Choose “Fade Out” for an exit effect.
  • Fade Direction: Set the direction in which the element will fade out.
  • Apply Animation On: Select the target, like the Element Container, for the fade-out effect.

---

CSS Properties Animations

Opacity Effect

Opacity animation effect for Elementor is used to apply a transparency effect to Elementor elements while scrolling to make the element appear partly transparent.

• Opacity: Set the transparency value that the element will reach at the end of the animation.

---

Border Effect

Border animation effect for Elementor is used to add borders to Elementor elements while scrolling.

• Border Type: select the type of the border between (None – Solid – Double – Dotted – Dashed – Groove).
• Width: Set the width of the element’s border.
• Color: Set the color of the element’s border. 
• Border Radius: Set the radius of the element’s corner.
• Advanced Border Radius: Apply custom radius values for Elementor element. Check this article to know how to do that.

---

Padding Effect

Padding animation effect for Elementor is used to add some padding or white space around the Elementor elements while scrolling.

• Padding: Set the value in pixels, em, or % of the padding effect at the end of the animation.

---

CSS Filters Animations

Blur Effect

Blur animation effect for Elementor is used to reduce the focus on the Elementor element while scrolling.

• Blur Value (px): Set the value in pixels of the blur effect at the end of the animation.

---

Grayscale Effect

Grayscale animation effect for Elementor is used to provide a transition effect from colored  Elementor element to gray monochrome Elementor element while scrolling.

• Grayscale Value: Set the value of the grayscale effect at the end of the animation.
  

---

Brightness Effect

Brightness animation effect for Elementor is used to apply a filter to set the brightness of Elementor elements while scrolling.

• Brightness Value (%): Set the value of the brightness effect at the end of the animation. Under 100% darkness element, while over 100% brightness it.
  

---

More Magic Animations

Color Effect

Color animation effect is used to change Elementor element color gradually while scrolling.

• Select Color: Set the final color Elementor element should reach at the end of the animation.   

Detailed Color Effect Documentation

---

Background Color Effect

Background color animation effect is used to change Elementor element background color or container gradually while scrolling.

• Select Color: Set the element background color at the end of the animation.  

Detailed Background Color Effect Documentation 

---

Font Size Effect

Font size animation effect is used to change Elementor element text size during the scroll.

• Font Size (px): Set the value in pixels of the text size at the end of the animation.  

---

Letter Spacing Effect

Letter spacing animation effect is used to change the horizontal spacing between characters while scrolling.

• Letter Spacing (px): Set the horizontal spacing value for the end of the animation.  

---

Images Sequence Effect

Images sequence animation effect is used to set groups of images in sequence and show them one by one while scrolling.

• Select Images: Choose images that will be displayed in sequence while the page scrolls.

Detailed Image Sequence Effect Documentation

---

Play Video Effect

Play video animation effect is used with Premium Video Box widget to play video forward or backward depending on page scroll direction.

Detailed Play Video Effect Documentation

---

Draw SVG Effect

Draw SVG animation effect is used with Premium SVG Draw widget to apply drawing animation on Elementor SVGs shapes while scrolling.

• Reverse Animation: Enable to play drawing animation backward.
• Start Point (%): Set the point that the SVG drawing animation should start from. (Reverse Animation Option Disabled)
• End Point (%): Set the point at the SVG drawing animation should end. (Reverse Animation Option Enabled)
• Draw All Paths Together: Enable this to draw all the SVG paths at the same time. Otherwise, it will draw paths one by one. 
• Fill Color After Draw: Enable to fill SVG shapes with color gradually while scrolling. 
• Fill Color After Fully Drawn: Enable to fill SVG shapes with color after the drawing animation is finished.
• Select Color: Set icon color at the end of scrolling.

Detailed Draw SVG Effect Documentation

---

Carousel Scroll Effect

Carousel scroll animation effect is used to trigger Premium Carousel widget to scroll horizontally forward or backward depending on page scroll direction.

• TranslateX: Set the horizontal position in pixels or percentages that the elements will be moved to along the X-axis.
  
  Note: Please make sure to use only negative values for TranslateX value.

---

Progress Bar Effect

Progress bar animation effect is used with Premium Progress Bar widget to increase or decrease the bar percentage value depending on page scroll direction.

---

Image Compare Effect

Image compares animation effect used with Premium Image Compare widget to control the visible ratio area between the original image and the modified image depending on the page scroll direction. 

Elementor Magic scroll More Magic Animations

---

Advanced Animations

Custom Path Effect

• Path Type: Make you choose between SVG Path or Custom Path

Custom path animation effect for Elementor is used to animate Elementor elements along a custom path rather than moving them in a straight line while page scrolling.

The following settings are enabled with Elementor SVG Path type

• SVG Path: Add the SVG path code. You can create paths from Motion Path Helper.
• Stroke Thickness: Set the width of the stroke.
• Stroke Color: Set stroke color.
• Space Between Dashes: Set the space between stroke dashes.
• Width: Set the value to increase or decrease the stroke path.
• X Position: Set the position of the stroke center point on the X-axis.
• Y Position:  Set the position of the stroke center point on the Y-axis.

The following setting is enabled with Elementor Custom Points path type

• Custom Points: Add multiple points path code. For example, {50,20},{100,-50},{200,200}.
  

---

CSS Class Effect

CSS Class animation effect for Elementor is used to add a custom CSS class to Elementor element and apply its CSS styles on page scrolling.

• CSS Class: Add a CSS class to be added to the ELementor element on page scroll down.

Please note that the CSS class will not be removed on scrolling back.

---

Repeated settings in Elementor Magic Scroll Animations Tab

• Apply Animation on: Choose applying animation effect on the same Elementor Element Container or select another Elementor element using Custom CSS Selector.
• Reverse Animation: Enable to reverse animation sequence to play backward.
• Sync with the Previous Animation: Enable to start this animation at the end of the previous animation.
• Delay (sec): Set a positive value to delay the start of this animation or a negative value to start this animation before the previous animation ends.
• Sync with the whole scene: Enable to trigger animation effect at the start of the animation scene.
• Easing: Specify the rate of animation changes over time.
• Disable Animation On: Choose which type of display you want to disable the animation on.

---

General Settings for Elementor Magic Scroll

• Perspective (PX): Set value to the perspective to create 3D depth with Translate, Rotate, and Skew animation effects.
• Run All Effects Simultaneously: Enable this option to start/end all scroll effects at the same moment.
• Loop Count: Set number of times an animation effect should be played before the end of the scene.
• How should this animation work: Choose how Elementor element’s animations will work on the scene.
• Lock Page Scroll Until Animation Ends: Choose this option to disable page scroll until the animation is completed.
  • Animation Order: Set when the element animation will be triggered.
    Use this option when there is more than one element that has Premium Magic Scroll feature enabled in the same scene and you want to add a sequence to your animation.
    For example, If the value equals ” 1 ” that means the related animations to this element will be triggered at the start of the scene. If the value equals ” 3 ” that means the related animations will be triggered after the second element animations end.
  • Delay (sec): Set a positive value to delay the start of this element’s animations or a negative value to start this element’s animations before the previous element’s animations end. This option is enabled if the order of the element’s animations is not the first one to be triggered in the sequence.
  •   Decrease Animation Speed By: Set a value to control your animation speed. The larger the value you set the slower the scene will animate.
  • Scrub: This option controls the time delay after you scroll and before the animation happens. Leave it empty if you want the animation to be synced with the page scroll.

---

Complete Animation on Viewport

Choose this option to start and complete the animation once the viewport top hits the top of the section.

• Animation Duration (sec): Set how long time the animation will take to complete.
• Animation Delay (sec): Set a delay time to start the animation after the animation trigger.
• When the animation should start: Choose when the animation should be triggered.
• Reverse Animation on Scroll Up: Enable this option to trigger animation on page scroll up.

---

Play Animation Only When Visible

Choose this option to start the animation when the element is visible on the viewport.

• Start Animation From: Choose when the animation should be triggered.
• Offset (%): Set offset between the top of the viewport and when the animation starts.
• Decrease Animation Speed By: Set a value to control your animation speed. The larger the value you set the slower the scene will animate.
• Scrub: This option controls the time delay after you scroll and before the animation happens. Leave it empty if you want the animation to be synced with the page scroll.

---

Stick to Another Element

Choose this option to start element animation due to another element’s behavior in the viewport.

• Stick this Element to: Set the CSS selector of the reference element to be sticky with.
• Start Sticky From: Choose when the Elementor element animation starts due to the reference element’s position in the viewport.
• Offset (%): Set offset between the top of the viewport and when the animation starts.
• Stop Sticky: Choose when the animation ends due to the reference element’s position in the viewport.
• Disable Sticky On: Choose which type of display you want to disable the sticky option on.

Please note: Sticky Animations works on the Frontend only so to check animation changes click on Save and Preview from Elementor editor.

---

Magic Scroll Responsive Settings

These settings help you to disable Elementor Magic Scroll animation depending on device type or disable the Lock Page Scroll option depending on section height.

---

Conclusion

Elementor Magic Scroll provides different types of animation effects that help creators and designers create catchy, interactive, and magnificent live Elementor web pages to impress their audience. 

This guide helps you to understand how Elementor Magic Scroll feature works and how to adjust its settings to manipulate scroll animations on Elementor elements the way you like. Check out the rest of Global Addons in Premium Addons.

---

If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help!

Join the Community

You’re most welcome to join our Facebook group and YouTube channel to get updates about new features, improvements, and bug fixes.