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 placement of the SVG relative to 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 at once, but each with a slight delay.
- Sync: All the lines animate simultaneously in sync.
- One by One: Each line animates sequentially, one after another.
- Delay: Set the time delay before each line or path starts 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 infinitely.
- Loop Count: Set a specific number of animation loops before stopping.
- 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 restart the animation by clicking or hovering over it.
- Replay Type: Choose whether the replay occurs on click or on hover.
Link: Default Divi feature, no additional settings required.
Background: Add a background color, gradient, image, video, pattern, or mask.
Admin Label: Rename the module for internal organization (visible only to you).
Design Tab
Customize the appearance of the SVG Animator Module with advanced design settings.
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 widget with custom code, conditions, and more.
Need Help?
If you have any questions or issues, feel free to contact our support team at: [email protected]