Use animations to bring your site to life. Add effects such as "Float-in" and "Expand-in" to create imaginative, striking pages and draw visitors' attention to your content.
You can apply animations to a variety of elements, and even apply different effects to the same element on both your desktop and mobile sites. Animation on your mobile site is set to suit and fit smaller screens, so you can continue to wow your visitors.
Adding animation to an element
Begin making your site dynamic and engaging by adding an animation to your elements. Each animation has its own different effect, so you can mix them up with different elements and give your visitors a lasting impression.
To add animation:
Click the relevant element in the Editor.
Click the Animation icon .
Select an animation from the available options.
Customizing an animation
After adding animation to an element, you can customize it to make it behave the way you want and suit your site's feel.
Adjust settings such as the power, direction, and delay to make an impact and engage your visitors.
To customize the animation:
Click the relevant element in your Editor.
Click the Animation icon .
Click Customize and use the options to adjust your animation:
Power: Click the drop-down menu and select how powerful the animation is when it plays.
Direction: Select what direction the animation enters from, such as clockwise or from the right.
Distance: Use the slider to increase or decrease the distance between the effect's start and end point.
Duration: Use the slider to adjust how long you want the animation to play for.
Delay: Drag the slider to increase or decrease the delay between the page loading and the animation beginning.
Only animate first time: Click the toggle to enable / disable the animation only being displayed the first time the page loads.
Adding animations to your mobile site
As well as adding animation to elements on your desktop site, you can also add them to your mobile site, so your visitors get a great browsing experience from all of their devices.
Animations for mobile have been designed specifically for smaller screen resolutions and sizes, so you don't need to worry about spacing.
To add animation on mobile:
Go to your mobile Editor.
Click the relevant element.
Click the Animation icon .
Select an animation from the available options.
Comments