Scrolling SVG

Create scroll-synced masterpieces! The Scrolling SVG widget allows you to link SVG animations directly to the user’s scroll progress, creating an immersive storytelling experience.

This widget comes free with WPMozo Addons Lite. To use it, simply install and activate the free version of plugin.

Overview

User-controlled animations are highly engaging. As your visitors scroll down the page, your SVG can draw itself, rotate, or change size based on their movement. This creates a powerful connection between the content and the reader.

How to use

• Search for “Scrolling SVG” in Elementor.
• Add your SVG graphic.
• Define the Start and End scroll points.
• Enable the Sticky option if you want the graphic to stay in view while the animation plays.

Content settings

• SVG Content: Provide your SVG graphic via file upload or custom code input.
• Scroll Start/End: Define the scroll offset points where the animation should begin and finish.
• Sticky Behavior: Enable the sticky option to keep your SVG in view while it completes its scroll-bound animation.

Style settings

Path styling

Customize how the SVG paths appear during the scroll animation.

• Color & Width: Set the stroke color and thickness for the drawing path.
• Dash Offset: Advanced control over the line drawing gaps.
• Opacity: Control the visibility of the paths as they reveal.

Animation effects

Configure the scroll-bound motion of your SVG.

• Rotation: Make the SVG spin as the user scrolls up or down.
• Scaling: Sync the size of the SVG to the scroll progress.
• Smoothness: Adjust how closely the animation tracks the scrollbar.

Container and layout

Position the SVG within your page design.

• Responsive Width: Set the graphic size for mobile, tablet, and desktop.
• Z-Index: Control the stacking order relative to other elements.
• Alignment: Position the SVG within its column or section.