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 columns and 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.

Premium Magic Scroll Addon for Elementor Page Builder
Premium Magic Scroll Addon for Elementor Page Builder

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.

Activate Elementor Magic Scroll Effect
Enable Elementor Magic Scroll Effect

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
  2. CSS Properties Animations
  3. CSS Filters Animations
  4. More Magic Animations
  5. Advanced Animations

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).
Settings of the Elementor Translate animation effect
Elementor Translate Animation Settings

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

Settings of the Elementor Rotate animation effect
Elementor Rotate Animation Settings

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, Bottom, or Custom direction).
Settings of the Elementor Scale animation effect
Elementor Scale Animation Settings

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 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).  
Settings of the Elementor Skew animation effect
Elementor Skew Animation Settings

5. 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.
Settings of the Elementor Fade In-Out animation effect
Elementor Fade In-Out Animations Settings

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 appear partly transparent.

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

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.
Settings of the Elementor Border animation effect
Elementor Border Animation Settings

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.
Settings of the Elementor Padding animation effect
Elementor Padding Animation Settings

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.
Settings of the Elementor Blur animation effect
Elementor Blur Animation Settings

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.
Settings of the Elementor Grayscale animation effect
Elementor Grayscale Animation Settings

3. 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.
Settings of the Elementor Brightness animation effect
Elementor Brightness Animation Settings

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.   
Settings of the Elementor Color animation effect
Elementor Color Animation Settings

2. Background Color Effect

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

  • Select Color: Set the element background color at the end of the animation.  
Settings of the Elementor Background Color animation effect
Elementor Background Color Animation Settings

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.  
Settings of the Elementor Font Size animation effect
Elementor Font Size Animation Settings

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.  
Settings of the Elementor Letter Spacing animation effect
Elementor Letter Spacing Animation Settings

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.
Settings of the Elementor Images Sequence animation effect
Elementor Image Sequence Animation Settings

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.

Settings of the Elementor Play Video animation effect
Elementor Play Video Animation Settings

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 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.   
Settings of the Elementor Draw SVG animation effect
Elementor Draw SVG Animation Settings

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.
Settings of the Elementor Carousel Scroll animation effect
Elementor Carousel Scroll Animation Settings

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.

Settings of the Elementor Progress Bar animation effect
Elementor Progress Bar Animation Settings

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. 

Settings of the Elementor Image Compare animation effect
Elementor Image Compare Animation Settings

Advanced Animations

1. Custom Path Effect

Custom path animation effect for Elementor is used to animate Elementor elements 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 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.
  • 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 the 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}.
Settings of the Elementor Custom Path animation effect
Elementor Custom Path Animation Settings

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.

Settings of the Elementor CSS Class aniamtion effect
Elementor CSS Class Animation Settings

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.
Elementor Magic Scroll Animations Mutual Settings
Elementor Magic Scroll Animations Mutual Settings

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

    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.
Lock page scroll option and it's related settings
Lock Page Scroll Until Animation Ends Settings
  1. 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.
Elementor Complete Animation on Viewport Option and it's related settings
Complete Animation On Viewport Settings
  1. 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.
Elementor Play Animation Only When Visible Settings
Play Animation Only When Visible Settings
  1. 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.
Elementor Stick to Another Element settings
Stick to Another Element settings

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.

Elementor Magic Scroll Responsive Settings
Elementor Magic Scroll Responsive Settings

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 Features 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 YoutTube channel to get updates about new features, improvements, and bug fixes.

Related Docs:

This Post Has One Comment

  1. Zaun

    The interactive design elements you’ve incorporated into the tutorial, along with the clear explanations, bring a touch of excitement to the learning process. It’s evident that a lot of thought and effort went into creating this resource. I particularly appreciate the way you provide real-world examples, making it easier for users to visualize how to implement the Magic Scroll on their own websites.

Leave a Reply

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 44+ Elementor Widgets Totally Free of charge.

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.