Studio Editor: About Animations

2 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.
An example of an entrance animation applied to an entire page, revealing it as it loads

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.
GIF showing how interactions look on a live site.

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. 
An example of a scroll animation on a live site

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. 
An example of a text mask element with a loop animation on a live site

Did this help?

|