We’ve recently released a selection of animation effects you can apply to any row, column, image or text box! You can access the new animation settings from the right sidebar, when you select any of these areas or elements on a responsive page.
In this post we explore some of the benefits of website animations and show you how to best apply our new scroll and hover effects on your responsive pages.
Use a ‘Slide In’ animation to create a smooth transition between sections and introduce new content seamlessly. Set images, text or columns to slide into view from the left/right or top/bottom as you scroll into the section.
‘Zoom In’ is a fantastic transitional scroll animation for image grids. You can change the delay time of each image in-editor to really bring your gallery or portfolio page to life. Why not try the ‘Fade In’ animation for a more subtle look? You can access full customisation in the Moonfruit editor, with both speed and delay settings for all scroll effects.
Animations are great for adding depth to rows and columns, that activate as you scroll the page. Add a ‘Pulse’ or ‘Bounce’ scroll animation to content card style columns to add a real sense of dimension to your website.
Another way to add an illusion of depth is with background scroll effects. Find out how to apply fixed or zoom effects to your website backgrounds here: Make it brilliant with scroll effects.
Hover animations add a feeling of interactivity and are a great way to engage your visitors. Simple hover effects on links enhance the users’ experience and journey across your website.
Try adding a subtle ‘Head Shake’ or ‘Pulse’ hover animation to your text links. You can edit your animation to the finest detail – from speed control to infinite looping – all in a couple of clicks.
Applying a planned, less-is-more approach when animating your website will result in a cohesive feel that really contributes to the overall look and feel of your pages. Animations make interacting with your site less jarring, and give a real boost to user experience.