Adding a Preset Click or Hover Interaction

Add interactions to create an animated experience as visitors click or hover over elements. Need a quick and easy animation? Use one of our presets (e.g. Grow, Move, Fade) and tweak it to your liking.

The interaction can animate the same element that visitors click or hover on, or a different element on the page. Either way, you have full control of the look, feel and timing so it's truly effective.

Step 1 | Add a trigger (Click or Hover)

To get started, select the element that triggers the interaction. This is the element that visitors hover over or click before seeing the animation. Then, go to the Inspector panel to add a new interaction.

Tip:

You can add multiple interactions to an element so it triggers a different animation on hover or click.

To add a trigger:

1. Select the element that should trigger the interaction.

2. Click the Open Inspector icon  at the top right of the editor.

1. Click the Animations and Effects tab .

2. Select Hover / Click.

3. Click + Add.

Step 2 | Set up the interaction

After choosing an element and trigger, set up the interaction. Select a pre-designed animation, the element that should show it and what exactly happens on hover or click.

Note:

The available animations depend on the element you select.

To set up the interaction:

1. (In the Setup panel) Choose what happens On Hover / On Click:Start Animation: Clicking / Hovering over the element triggers the chosen animation.
   Reset Animation: Clicking / Hovering over the element removes any animation that was previously applied.
   Toggle On/Off: Clicking the element triggers the animation and a second click removes it.
   Note: This option is only available for click interactions.
   

2. Select the Animated element:Make the element trigger its own animation: Click the element's name (the word (self) appears next to it).
   Animate a different element on the page: Select an element from the drop-down, or click Choose on Canvas to select it on the page.
   Tip: Hold the Cmd / Ctrl key to select a child element.
   

3. Select an animation:Click the Presets tab.
   Choose an animation from the list.
   

Tip:

When setting an element to show on click or hover, it appears with a checkered overlay on the canvas. This is to indicate that the element is initially transparent.

You can turn this indication off at any time. Click the Wix Studio icon , hover over View and click Transparent Elements.

Step 3 | (Optional) Adjust the animation

After choosing the animation you want, customize it to achieve the desired effect. You can control settings like the duration, delay and ease to make the animation really effective.

Note:

The available settings depend on the preset animation you choose.

To adjust the animation:

1. (In the Inspector) Click Adjust Animation at the bottom.

2. Customize the available settings to your liking:Delay: Drag the slider to add a delay (in seconds) before the animation starts.
   Duration: Drag the slider to set the duration of the animation (in seconds).
   Easing: Choose how the animation eases in and out from the drop-down.
   Scale: Choose how much the element grows or shrinks.
   Angle: Change the angle of movement.
   Distance: Make the element move farther from, or closer to, its default position on the page.
   Direction: Change the direction the element rotates in.
   

3. (Optional) Click Preview to see how the animation looks and make adjustments, if needed.

FAQs

Click below to learn more about creating interactions.

How does it look when an element triggers its own animation?

In the example below, hovering over the title animates it. The title skews and changes its color.

How does an interaction between different elements look?

In the example below, hovering over the text box animates the image right next to it.

Can one element trigger multiple other elements?

Yes, but not in a single interaction.

You need to create a separate interaction for each element you want to animate, even if they should all be triggered by the same element.

In the example below, we created 3 different hover interactions for the same text element. When visitors hover over the text, it animates an image, a button and another text element – all at the same time.

Can a single element have multiple animations?

When an element triggers its own animation (self), you can combine one hover interaction, one click interaction, and an entrance animation.

However, you can create a custom interaction to apply multiple transforms to the same element, so they all appear in a single interaction.

In the example below, we created a custom hover interaction for the title. When hovering over the title, it skews and changes its color at the same time.