Studio Editor: About Animations

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.

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.

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.

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.

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. 

Transform your client projects with our WebGL effects, designed to turn media backgrounds into showstoppers. These effects engage site visitors while ensuring optimal performance. Choose from a variety of impressive presets, tweak their properties and decide how they activate—automatically on scroll, or through the visitor's mouse movement. 

Select a question to learn more about animation effects.