Count / Typing / Loading animations - Otter Features Library
Animations make the website much more friendly, interesting, and unique. The Otter plugin offers three types of animations to suit all of your needs. This article will present how you can add animations and what they can be used for.
| Using the Animations | Use cases of the Animations |
| 🎥 Video - How to Animate Otter Blocks? | |
Important notice: If you are a Mac user and experience issues with animations, please make sure you check the Reduce motion option, as mentioned here.
🧰 Using the Animations
Most of the blocks that contain text have these animations available, and they can be accessed by opening the right sidebar and clicking on the ➕ icon next to Block Tools. Choose then the Animations.
A new accordion called Animation will appear. After that, pick the desired one and open the Animations tab to start configuring it.
📝 Note: As you may observe, some animations will not be available if they are not suited for the selected area (e.g., counting does not appear for the selected text).
Once selected, each animation can have further customizations:
- Delay - control the start time of the animation using one of the available values or a custom value.
- Speed - will make the animation appear/move in a certain way (slow, fast, etc.).
- Play on hover - the animation will start only when the user hovers with the mouse.
- Trigger offset - as mentioned in the description, the animation trigger will depend on the screen height.
- Replay animation - allows you to preview the animation in the editor.
🗂 Use cases of the Animations
- slowly type the main aspects of your company
- create an automatic numbered section to increase the authenticity
📝 Note: To make such a section work with counting animation, first select the number and add animation, then insert the rest of the text.