Before we hit the tutorial, you may ask, what is Elementor Magic Scroll Addon? Visit this documentation article to get to know more about this new Global Addon that has been built exclusively for Elementor Page Builder.
In this tutorial, we are going to learn how can we use the Elementor SVG Draw widget to animate a text on scroll using Premium Magic Scroll Global Addon. So, let’s get started!
Adding an Animated Text to Elementor Website Using Magic Scroll Elementor Global Addon.
01. Google Font to SVG Path Library
Go and open the Google Font to SVG Path library then, start customizing the Google font you want to use on your Elementor website.
- Google Font: Select from a wide range of Google fonts. Pick the one that suits you.
- Upload Font: Or, you can upload a font file of your choice. It’s recommended to stick to the fonts listed under the Google Font dropdown list.
- Variant: This is a changeable dropdown list. You’ll find it changed according to the selected font. It provides a list with the font style or font-weight, as mentioned, it depends on the Google Font you already selected.
- Text: Write the text/content that will be used on your Elementor web page.
- Size: Adjust the font size. NOTE* You’ll also be able to adjust the font size from the SVG Draw Elementor widget.
- Fill: Unselect the fill option if you want to apply a text effect like the one used on the Elementor Magic Scroll demo page. Keep it selected if you want your text to have a fill color. NOTE* Heavy-weight fonts are recommended when unselecting the Fill option.
- Stroke: Set a stroke color for your text when the fill color option is unselected.
- Stroke Width: Customize your text stroke width.
Quick Note* Mostly, you won’t need to adjust further options from the Google Font to SVG Path library more than the options listed above.
Once you finish, copy the SVG code that appears to you in the last text field.
02. Use Elementor SVG Draw Widget
Go back to your website and from the Elementor editor, drag Premium SVG Draw widget and drop it into your desired section.
- SVG Type: Select “Custom SVG”.
- SVG Code: Paste the SVG code you already copied from the Google Font to SVG Path library.
- Width & Height: Manage your SVG text size using those two controls.
- Alignment: Align your SVG text to the Left, Center, or Right.
- Use With Magic Scroll: Make sure to enable this option.
SVG Draw > Style: From the Style tab, you can keep adjusting the SVG text according to your design needs by adding a Stroke Color, Fill Color, adjusting the Path Thickness, and adding a Space Between Dashes if needed.
03. Animate The Text Using Elementor Magic Scroll
Jump to the widget’s Advanced tab, scroll down until you see Premium Magic Scroll, switch it on, then click on “Add Item”. From the repeater item that appeared to you, adjust its settings as follows.
A. Repeater Item Settings
- Select Animation: From the dropdown list, select “Draw SVG”.
- Apply Animation On: Keep “Elementor Container” selected as it is.
- Reverse Animation: This option is used to reverse the animation direction.
- Start Point (%): This option specifies how much of the SVG path should be drawn when the animation starts. For example, if it’s set to 50%, then when the animation starts, half of the SVG path will be already drawn.
- End Point (%): This option appears when Reverse Animation option is enabled. It specifies the point at which the animation should end at.
- Fill Color After Draw: Activate this option to make the text get a fill color on the scroll.
- Select Color: Add the color you want the text to be filled with.
B. Magic Scroll Settings
- How This Animation Should Work?: In our example, we used “Lock Page Scroll Until Animation Ends” because we wanted the text to be fully filled before jumping to the next Magic Scroll effect or next scene. Know more about the other options listed under “How This Animation Should Work?” and how they actually work through the documentation article.
- Animation Order: Setting this option depends on your design needs. In our example, we made it “1” because we wanted it to be the first Magic Scroll animation visible in this scene.
- Decrease Animation Speed By: From here, you can adjust how fast or slow the animation should behave/work. In our example, we kept it at “1”.
Congratulations!
Now, you are supposed to have the exact same effect made by “YOU” on your Elementor website. Honestly, we believe that you will reach much better animation effects than the one we provided and we’re really thrilled to see it. Don’t hesitate to share your work on our Facebook group and make us get INSPIRED!
