Editor X: Adding Animations to Your Site

2 min read
Editor X is transitioning to Wix Studio, our new platform for agencies and freelancers.Learn more about Wix Studio
Make your site stand out from the crowd! Add animation to any element, group or stack to create amazing, eye-catching effects.
In this article, learn more about:
Note:
You can only set one animation per element, group or stack across all breakpoints.

Adding an Animation

Each element, group or stack on your site can have a unique animation. There's several animations to choose from, and each one can be customized as you wish.

To add an animation:

  1. Click the relevant element, group or stack.
  2. Click the Animation icon .
  3. Select an animation.

Customizing an Animation

Set up your animations to behave the way you want. Customize your animation's settings including direction, duration and more.

To customize an animation:

  1. Click the relevant element, group or stack.
  2. Click the Animation icon .
  3. Click Customize to change the animation settings:
    • Power: Select the strength of the animation. 
    • Duration: Change the length of time of the animation
    • Delay: Set the amount of time between the page loading and the animation starting. 
    • Only animate first time: Click the toggle to set your animation to play when the site visitor enters that page for the first time. The animation is not displayed again if the site visitor enters the page again.
Note:
The available customization options depend on the animation you choose.

Removing an Animation

Easily remove an animation from an element or page section in just a click.

To remove an animation:

  1. Click the relevant element, group or stack.
  2. Click the Animation icon .
  3. Click None.

Did this help?

|