Studio Editor: About Animations
4 min read
Incorporating our animations in your designs can really take them to the next level. The Studio Editor offers 5 different animation types, based on when you want them to appear.
Make animations appear when visitors hover over, click or scroll past an element. You can also add an entrance animation, for when the element first loads, or one that loops continuously – all without a single line of code.
Note:
The animation size is calculated according to your specific browser when the page first loads. If you resize the browser window (by dragging its handles), the animation might not appear properly. We recommend refreshing the page for optimal display.
Entrance animation
Adding an entrance animation to an element is a great way to draw visitors' attention to it. The animation appears when the element first enters into view, so it instantly catches the eye. There are many types to choose from and customize to your client's exact needs.
Hover and click interactions
Add cool effects that appear when visitors hover over or click an element. You can make elements transform, move or reveal new content on hover / click.
Choose from a range of pre-designed effects, or create a custom effect with your exact specifications. Manage the timing, order and ease to tie it all together, then preview the final result directly from the Editor.
You can also create interactions between elements, so hovering over or clicking one element animates another.
In the example below, hovering over the paragraph triggers the button and image to move.
Scroll animation
Increase engagement and create interesting effects with scroll-driven animations. The animation's progress is directly related to the scroll position, going forward and backward as visitors scroll up and down.
You can also create interactions between elements, so scrolling past one element animates another.
In the example below, scrolling past the title makes the repeater grow.
Loop animation
Create a sense of movement in your design with animations that loop continuously. You can add a loop animation to any element you want visitors to notice - some are more subtle and some are true attention grabbers.
Frequently asked questions (FAQs)
Select a question to learn more about animation effects.
What elements can I add animation to?
How do I get started?
Can a single element have multiple animations?
How can I combine animations on a single element?
Did this help?
|