In this documentation, we will cover how to customize the Text Animation Extension, a Pro feature provided by Zoloblocks.
Enable The Text Animation Extension
To use the Text Animation Extension from Zoloblocks, first, you have to enable the extension.
- Go to WordPress dashboard > Zoloblocks Plugin dashboard.
- Then, Click the Extensions Tab.
- Search the Text Animation extension Name.
- Enable the Text Animation extension.
- Hit the Save Settings Button.
Inserting the Advanced Heading Block
1. Go to the Page and Hit the “+” Block inserter icon Button.
2. Search the Advanced Heading Block.
3. Drag the widget and drop it on the page.
Where To Find the Text Animation Extension
The Text Animation feature supports only Advanced Heading. That’s why we take the Advanced Heading block to show the feature. After inserting the Advanced Heading block and customizing it, you will get the Text Animation feature –
1. Go to Block.
2. Then, click on the Basic option.
3. Now, enable the Animation switcher to get more options to add and customize the heading.
Let’s Explore the Text Animation Extension
1. Split Type: You can change the heading text animation split type by words, characters, or lines with this option.
2. Animation Type: You can select the animation type here. In this option, some animation types are included, such as Masked Slide Up, Masked Rotate, Scrub Opacity, Scrub Blur, Zoomout, Zoomin, Bend Drop & Custom. If you select the animation type as Custom then you will get some options (translate, rotate, scale, Skew, delay, Stagger & duration) to customize the animation by yourself.
3. Translate: This option lets you adjust the Translate X, Y, and Z values to move the text horizontally, vertically, or in depth (3D space) during the animation.
4. Rotate: This option allows you to rotate the animation text. By enabling the Rotate 3d Option, you will get two more option as Rotate X & Rotate Y to rotate the text horizontally and vertically.
5. Scale: You can control how much the text (or each character, word, or line, depending on “Split Type”) is scaled during the animation. Scale X controls scaling horizontally (width) along the X-axis, Scale Y controls scaling vertically (height) along the Y-axis, and Scale X controls scaling in 3D depth, along the Z-axis.
6. Skew: The Skew option allows you to distort or slant the text along the X and Y axes during the animation. Skew X controls the horizontal slant of the text characters & Skew Y controls the vertical slant of the text characters.
7. Delay (ms): This option allows you to set the time before the animation starts after the page or element loads.
8. Stagger: It defines the interval between each character, word or line (based on split type) during the animation.
9. Duration (ms): It determines how long each animation takes to complete.
10. Repeat: Enable the switcher to loop the animation continuously after completing one full cycle. Also, you can specify the pause duration between each loop of animation by setting a number in the repeat delay option.
11. Start Preview: This button allows you to instantly preview the text animation after making any changes.
All done! You have successfully customized the Text Animation extension on your page.
Video Assist
Please visit the demo page for examples.
Thanks for being with us.
