DiviFlash introduces the SVG Animator Module in v1.4.10 and above, allowing you to control and customize your SVG files with animation effects for shapes and paths.
Activation Required: This module is disabled by default. To use it, you need to enable it manually. Refer to our guide for step-by-step instructions.
Let’s see the settings in brief and how to make better use of it —
Content Tab
This tab contains all the essential settings to upload, align, and style your SVG file.
Element
- Upload SVG: Upload the SVG file you want to animate.
Note: Before uploading an SVG file, go to the DiviFlash Dashboard and enable SVG File Upload to allow SVG animations.
- Alignment: Adjust the horizontal alignment of the SVG within its container (Left, Center, Right).
- Color: Change the color of the SVG file.
- Width: Adjust the width of the SVG file.
- Line Width: Adjust the thickness of the SVG lines.
Animation
Customize the animation behavior of your SVG file.
- Type: Select an animation type:
- Delayed: All lines animate together with a slight delay between each one.
- Sync: All the lines animate simultaneously in sync.
- One by One: Each line animates sequentially, one after another.
- Delay: Set the delay before each line or path begins animating. (Available only when “Delayed” animation type is selected.)
- Speed: Adjust the playback speed of the animation. (Ensure the speed is greater than the delay for smooth animation.)
- Timing Function: Choose how the animation progresses over time (Ease-in, Ease-out, Linear, etc.).
- Loop: Enable this to repeat the animation continuously:
- Unlimited: Runs the animation continuously.
- Loop Count: Set a specific number of animation loops before stopping. (If you enable “Unlimited” option, then you won’t see the loop count option.)
- Path Timing Function: Define how each path or line progresses through the animation.
- Trigger Type: Select how the animation starts:
- Auto Start: Begins when the page loads.
- In Viewport: Starts when the SVG comes into view.
- Replay: Allow users to replay the animation by clicking or hovering over it.
- Replay Type: Choose whether the replay occurs on click or on hover.
Link: Use this default Divi setting to add a link to the entire module.
Background: Add a background color, gradient, image, video, pattern, or mask to the module.
Element Label: Rename the module to organize it more easily in the Divi Builder. (Only you can see this label.)
Design Tab
Customize the visual appearance of the SVG Animator module.
Sizing: Adjust the width, height, and alignment of the module.
Spacing: Add custom margin and padding to the module’s container.
Border: Customize the border style, width, and color. And style each border separately or apply the same style to all sides.
Box Shadow: Add shadow effects to the module.
Filters: Apply color filters to enhance the appearance.
Transform: Scale, rotate, move, or skew the module.
Animation: Apply reveal animation effects and customize delay, duration, repeat settings, and animation type.
Advanced Tab
This tab provides additional settings for advanced users who want greater control over the module with custom code, conditions, and more.
Need Help?
If you have any questions or need assistance, contact our support team: [email protected]
