How to Add Animations to your component?
Questions:
- How do I animate my component?
- What are the animation options for components?
- How do I make the banner slide into view?
- How do I delay an animation?
Description:
This guide explains how to apply entrance effects to your component as it appears on the screen. These viewport-triggered animations begin automatically when the component becomes visible, helping to capture visitor attention and create a dynamic page experience.
We'll show you, step by step, how to:
-
Select an Effect: Choose from fading, moving, zooming, or spinning motions.
-
Control Speed and Direction: Fine-tune how fast and from where the animation enters.
-
Stagger Entrances: Apply delays for a more sophisticated presentation.
Solution:
-
Choose an Animation Type - Select a base effect from the Animation panel to determine how the component appears. You can choose Fade, Move, Zoom In, Zoom Out, or Spin&Pop.
-
Set the Movement Direction
If you selected the "Move" animation, use the arrow toggles to define the starting point. This controls whether the banner slides into its final position from the top, bottom, left, or right.
-
Adjust the Duration Speed
Select either Fast or Slow under the Duration settings. This determines the overall energy and timing of the transition.
-
Configure the Animation Delay
Choose a Short, Medium, or Long delay before the animation triggers. Setting a delay ensures the component waits a specified amount of time after entering the viewport, which is ideal for creating staggered entrance effects.
-
Preview Your Effects
Click the "Play Preview" button at the bottom of the animation settings panel to see how your configuration looks before saving.
Tips and Tricks:
Pro-Tips:
-
Use the reset icon next to each setting row if you want to quickly clear your configurations and return to the default state.
-
Staggering your delays across different components on the page creates a much more refined, professional look.
Warnings:
-
Keep your target audience in mind, as highly energetic animations like Spin & Pop might be distracting on heavily text-based or serious landing pages.