Elementor Magic Scroll Addon Tutorial

As always, we are excited to bring you new and easy ways to create stunning websites. And Magic Scroll for Elemntor page builder is a new cool global feature in the Premium Addons Pro library that helps you create creative modern WordPress websites by applying many types of scroll animations to any Elementor column or widget. 

By using Magic Scroll for Elementor feature you can add different types of scrolling animations to the Elementor elements such as Motion animations like translate or rotate animations, CSS animations like opacity or padding animations, or more magic animations like playing video animation, drawing SVG animation, ….etc.

In this tutorial, we will discuss Elementor Magic Scroll different animations and settings, and how to use Premium Magic Scroll feature to create stunning scroll effects.

Click here to check Elementor Magic Scroll Feature demo.

---

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 column or widget. To apply Magic Scroll on your Elementor column/widget, please follow the steps below:

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

• Enable Magic Scroll: Enable this option to apply Elementor Magic Scroll on this column/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 column/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
   • 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.

Available Animations in Elementor Magic Scroll with its related settings:

Position Animations

1. 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).
  

2. 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 that the element will rotate around 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 that the element will rotate around 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 that the element will rotate around Z-axis.
  
  

3. 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, Buttom, or Custom direction).
  

4. 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 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 Y-axis.
• Transform Origin Y: Set the vertical point around which a transformation is applied(Top, Center, Bottom, or Custom point).  

5. Fade In and Fade Out Effects

Fade In and Fade Out animation effects for Elementor are used to make the Elementor elements come gradually into or out of view while scrolling.

• Fade Direction: Set the direction in which the element will fade in or fade out (Top – Right – Bottom – Left).

CSS Properties Animations

1. Opacity Effect

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

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

2. 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.
  

3. 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

1. 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.

2. 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.
  

3. Brightness Effect

Brightness animation effect for Elementor is used to apply a filter to set the brightness of Elementor element 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

1. Color Effect

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

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

2. Background Color Effect

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

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

3. Font Size Effect

Font size animation effect for Elementor is used to change Elementor element text size gradually while scrolling.

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

4. Letter Spacing Effect

Letter spacing animation effect for Elementor is used to change the horizontal spacing behavior between Elementor element text while scrolling.

• Letter Spacing (px): Set the value in pixels of the horizontal spacing between text characters at the end of the animation.  

5. Images Sequence Effect

Images sequence animation effect for Elementor 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 page scrolling.

6. Play Video Effect

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

7. Draw SVG Effect

Draw SVG animation effect for Elementor 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 that the SVG drawing animation should end at. (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. 
• Select Color: Set icon color at the end of scrolling.   
• Fill Color After Fully Drawn: Enable to fill SVG shapes with color after the drawing animation is finished.

8. Carousel Scroll Effect

Carousel scroll animation effect for Elementor 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.

9. Progress Bar Effect

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

10. Image Compare Effect

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

Advanced Animations

1. Custom Path Effect

Custom path animation effect for Elementor is used to animate Elementor element along a custom path while page scrolling.

• Path Type: Choose between SVG Path or Custom Path

The following settings are enabled with Elementor SVG Path type

• SVG Path: Add the SVG path code. You can create paths from here.
• Stroke Thickness: Set the width of the stroke.
• Stroke Color: Set stroke color.
• Space Between Dashes: Set the space between stroke dashes.
• 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.
• Zoom: Set value to scale up the stroke path.
• Height: Set the height of the stroke path.

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}.
  

2. 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 this animation should work? : Choose how Elementor element’s animations will work on the scene.

1. Lock Page Scroll Until Animation Ends
   Choose this option to disable page scroll until the animation is completed.
   
   
   1. Animation Order: Set when the element animation will be triggered.
      Use this option when there is more than one element 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.
      
      
   2. 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.
      
      
   3.   Decrease Animation Speed By: Set a value to control your animation speed. The larger the value you set the slower the scene will animate.
      
      
   4. 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.

2. Complete Animation On Viewport
   Choose this option to start and complete the animation once the viewport top hits the top of the section.
   
   
   1. Animation Duration (sec): Set how long time the animation will take to complete.
   2. Animation Delay (sec): Set a delay time to start the animation after the animation trigger.
   3. When the animation should start: Choose when the animation should be triggered.
   4. Reverse Animation on Scroll Up: Enable this option to trigger animation on page scroll up.

3. Play Animation Only When Visible
   Choose this option to start the animation when the element is visible on the viewport.
   
   
   1. Start Animation From: Choose when the animation should be triggered.
   2. Offset (%): Set offset between the top of the viewport and when the animation starts.
   3. Decrease Animation Speed By: Set a value to control your animation speed. The larger the value you set the slower the scene will animate.
   4. 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.

4. Stick to Another Element
   Choose this option to start element animation due to another element’s behavior in the viewport.
   
   Please note: Sticky Animations works on the Frontend only so to check animation changes click on Save and Preview from Elementor editor.
   
   
   1. Stick this Element to: Set the CSS selector of the reference element to be sticky with.
   2. Start Sticky From: Choose when the Elementor element animation starts due to the reference element’s position in the viewport.
   3. Offset (%): Set offset between the top of the viewport and when the animation starts.
   4. Stop Sticky: Choose when the animation ends due to the reference element’s position in the viewport.
   5. Disable Sticky On: Choose which type of display you want to disable the sticky option on.

---

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. You can check out the rest of our Global Features for Elementor from here.

---

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

Join the Community

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