Text Animations in Droip allow users to enhance their website’s visual appeal by adding dynamic movement to text elements. These animations help capture user attention, create engaging experiences, and add a professional touch to designs.

How to Use Text Animations

Follow these steps to add dynamic text animations.

1. Accessing Text Animations

To apply text animations in Droip:

1. Select a Text Element: Click on any text element within the Droip editor.
2. Open the Interactions Panel: Navigate to the Interactions panel in the right style panel.
3. Add a New Interaction: Click the + (Add) icon to create a new interaction.
4. Choose a Trigger: Select a trigger that will activate the animation (e.g., On Page Load, Scroll into View, Hover, Click).
5. Select the Animation Type: From the animation options, choose Text Animations as the effect for the selected trigger.

2. Choose an Animation Type

Droip offers a variety of text animation styles to create unique effects. The available animation types include:

• Blur – Gradually reveals the text by transitioning from a blurred state.
• Flip – Rotates the text to create a flipping motion.
• Shoot – Animates text into place with a rapid movement effect.
• Scale – Expands or contracts the text for a zoom-like effect.
• Rotate – Rotates the text at various angles for a dynamic appearance.
• Shake – Adds a subtle or exaggerated shaking motion for emphasis.
• Stagger – Animates text progressively, creating a staggered effect.

3. Select the Application Type

You can define how the animation applies to the text by selecting one of the following application types:

• On Element – The entire text block moves as a single unit.
• On Words – Animates each word individually within the text block.
• On Character – Animates each character separately, creating intricate motion effects.

4. Customization Options

Droip provides extensive customization controls to fine-tune the text animation:

• Time – Adjusts how long the animation lasts, from quick transitions to slow, dramatic effects.
• Delay – Adds a wait time before the animation starts.
• Wait: The pause time between each letter or word as it animates on screen.
• Easing – Controls the speed curve of the animation (e.g., linear, ease-in, ease-out, ease-in-out).
• Scale – Adjusts the size of the text dynamically, making it grow or shrink during the animation.
• Blur – Controls the level of blur applied to the text, allowing for smooth fade-ins or motion blur effects.
• Skew – Tilts or distorts the text along the X or Y axis to create a slanted effect.
• Offset – Shifts the starting position of the text, allowing for directional movement before settling into place.
• Looping – Choose whether the animation plays continuously or only once.
• Repeat Count – Set a specific number of times the animation should repeat before stopping.

5. Preview & Save

Use the Preview button to see how the animation looks before finalizing. Once satisfied, click Save to apply the changes permanently.