Wix Editor: Adding and Customizing an Animation
4 min read
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. Learn more about animation effects on your mobile site
In this article, learn how to:
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.
Note:
Remove animation effects from your elements by clicking the Animation icon 
on the element, then clicking None 
.
on the element, then clicking None .Tip:
You can add animation to a group of elements by selecting the group, and clicking the Animation icon .
.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.
Note:
The available customization options depend on the animation you choose.
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.
Note:
If you want an element to be animated on both the desktop and mobile versions of your site, you need to add the effect in both of the Editors. Animation effects you have added in desktop do not carry over to your mobile site, as they are optimized for different screen sizes.
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.
Important:
- Animations added to elements in the header are only displayed when the element is first loaded.
- If an element is being hidden/shown using Velo, its animations need to be set via Velo as well. Learn more about Velo elements
Issues with your animation?
Follow our steps to ensure they're working as expected on your live site.
Did this help?
|