Help Center
    Help Center
  1. Studio, Partners & Enterprise
  2. Wix Studio
  3. Using the Wix Studio Editor
  4. Adding effects and animations
    5. Studio Editor: Adding an Entrance Animation

Studio Editor: Adding an Entrance Animation

4 min read
Adding an entrance animation to an element is a great way to draw visitors' attention to it. The animation appears when the element first enters into view, so it instantly catches the eye. There are many types to choose from and customize to your client's exact needs.
An example of a section on a live site, each element with its own entrance animation
In this article, learn more about:

Adding an entrance animation

You can add an entrance animation to specific elements and sections, or the site page as a whole.

To add an entrance animation:

  1. Select the relevant element.
  2. Click the Open Inspector icon  at the top right of the editor.
A screenshot of opening the Inspector panel in the Studio Editor.
  1. Click the Animations and Effects tab .
  2. Click + Add under Entrance.
  3. Select an animation from the list.
    Tip: Hover over animations to see a preview of how they look. 
  4. (Optional) Click Adjust Animation at the bottom to customize settings like direction, delay and duration.
A GIF showing that hovering over animation types, when deciding on an animation, shows a preview

Customizing an entrance animation

After choosing an animation, set it up to behave the way you want. Choose how long the animation lasts, when it starts, its intensity and more. 

To customize an entrance animation:

  1. Select the relevant element, section or page.
  2. Click the Open Inspector icon  at the top right of the editor.
A screenshot of opening the Inspector panel in the Studio Editor.
  1. Click the Animations and Effects tab .
  2. Click the animation you want to change. 
  3. Click Adjust Animation to change its settings:
    • Direction: Decide which direction the animation should come from.
      Tip: Depending on the animation type, you either set the direction in degrees (e.g. 180°) or choose an option from a drop-down (e.g. from left, clockwise). 
    • Duration: Change the length of time of the animation.
    • Delay: Set the amount of time between the page loading and the animation starting. 
    • Easing: Choose how gradually the animation should ease in and/or out. 
Note:
The available customization options depend on the animation you choose.
A screenshot showing the available settings when customizing a Reveal entrance animation

Removing an entrance animation

You can remove an entrance animation at any time from the Inspector panel. 

To remove an entrance animation:

  1. Select the relevant element.
  2. Click the Open Inspector icon  at the top right of the editor.
A screenshot of opening the Inspector panel in the Studio Editor.
  1. Click the Animations and Effects tab .
  2. Hover over the animation and click the More Actions icon .
  3. Click Remove.
A screenshot showing how to select an animation in the Inspector and remove it

Did this help?

|
In this article
  • Adding an entrance animation
  • Customizing an entrance animation
  • Removing an entrance animation

Related content

Studio Editor: About Animations

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched