Help Center
    Help Center
  1. Creating your site
  2. Using Editor X
  3. Adding effects and animations
    4. Editor X: Managing Your Interactions

Editor X: Managing Your Interactions

4 min read
Editor X is transitioning to Wix Studio, our new platform for agencies and freelancers.Learn more about Wix Studio
Manage the interactions you created for your page to keep them fresh. From the Inspector panel, you can add more animations to an element, edit existing ones or remove those you no longer need. 
In this article, learn how to:

Adding a new interaction

Add more hover or click interactions to your element. Each element can show one click and one hover animation – those are marked as Self on the list – but it can trigger animations in multiple other elements at the same time.

To adding a new interaction

  1. Select the relevant element.
  2. Click the Inspector icon at the top of Editor X.
  3. (In the Inspector) Click the Interactions tab .
  4. Click + Add under Hover / Click.
  5. Create your preset or custom interaction. 
A screenshot of the Interactions tab in the Inspector panel, clicking to add a new interaction.

Editing an existing animation

After seeing how your animation looks and behaves on your site, you may want to make some adjustments. Change the way the animation starts, the element that shows the animation, or select a different animation altogether. 

To edit an existing animation:

  1. Select the relevant element.
  2. Click the Inspector icon at the top of Editor X.
  3. (In the Inspector) Click the Interactions tab .
  4. Click an animation to edit it. 
  5. Choose what you want to edit in your animation:
    • On Click / Hover: Change the way the animation starts.
    • Animated element: Select a different element to show the animation. 
    • Presets: Choose a different pre-designed animation.
    • Custom: Click the More Actions icon next to your animation to edit, rename or remove it. 

Previewing an animation

You can preview your animations directly inside the Editor to make sure they look great before going live. 

To preview an animation

  1. Select the relevant element.
  2. Click the Inspector icon at the top of Editor X.
  3. (In the Inspector) Click the Interactions tab .
  4. Hover over an animation and click the More Actions icon .
  5. Click Preview.
A GIF of the Interactions tab in the Inspector panel, showing how to preview an animation inside the Editor

Removing an animation from an element

You can remove animations you don't want your element to show. 

To remove an animation from an element:

  1. Select the relevant element.
  2. Click the Inspector icon at the top of Editor X.
  3. (In the Inspector) Click the Interactions tab .
  4. Hover over an animation and click the More Actions icon .
  5. Click Remove.
A screenshot of the Interactions tab in the Inspector panel, removing an animation from an element

Did this help?

|
In this article
  • Adding a new interaction
  • Editing an existing animation
  • Previewing an animation
  • Removing an animation from an element

Related content

Editor X: About Click and Hover Interactions
Editor X: Adding a Custom Interaction
Editor X: Adding a Preset Interaction

Hire a Professional

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