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. You can choose how and when your animations play - only once, on scroll, on loop, and more.
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. Our mobile animations are designed to fit smaller screens, so you can wow your visitors on any device.
In this article, learn how to:
Issues with your animation?
Follow our steps to ensure they're working as expected on your live site.
Adding animation to an element
Make 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.
Tip:
You can add animation to a group of elements by selecting the group, and clicking the Animation icon 
.
.To add animation:
- Click the relevant element in your editor.
- Click the Animation icon .
- Select an animation from the available options.
- Entrance: The animation only plays once when the selected element appears on the screen.
- Loop: The animation plays continuously on loop.
- Scroll: The animation plays when the element scrolls into view.
Note:
Header elements will not animate when the site visitor changes between site pages.
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.
Note:
The available customization options depend on the animation you choose.
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 to select how powerful the animation is when it plays.
- Direction: Select what direction the animation enters from (e.g. clockwise, from the right).
- Distance: Use the slider to change 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: Use the slider to increase or decrease the delay between the page loading and the animation beginning.
- Animation type: Choose from in, out or continuous animation type when scrolling.
- Motion style: Select the intensity of the motion, such as gentle or moderate.
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:
Animation effects you add in desktop do not carry over to your mobile site, as they are optimized for different screen sizes. If you want an element to be animated on mobile as well, follow the steps below.
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 note for Velo:
If you're using Velo (code) to hide or show an element, its animation needs to be set via Velo as well.
Did this help?
|