Editor X: About Click and Hover Interactions (Beta)
Important:
This feature is in beta mode 
. This means we're working on enhancing it before it's available to all of our users.
. This means we're working on enhancing it before it's available to all of our users. Editor X lets you create eye-catching interactions to grab your visitors' attention – without writing a single line of code. When visitors click or hover over elements, you can make them transform, move or reveal new content.
Choose from a range of pre-designed effects, or create a custom effect that answers your exact needs. Manage the timing, order and ease to tie it all together, then preview the final result directly from your Editor.
In this article, learn all about interactions in Editor X:
How do Interactions work?
Every interaction is made up of two parts: Effects and Triggers.
- Effect: The animation that you design for a specific element.
- Trigger: The action that sets off the effect – either clicking or hovering over an element.
The Interactions tab is split into these two areas, so you can choose where to start according to your preference. Our tutorial guides you to click the Triggers tab first, but you can work the other way around as well.
Choosing and customizing Effects
Effects are the animations that you design for a specific element. Need a quick and simple one? Choose a pre-designed effect like Grow, Rotate or Spin.
To create a more elaborate animation, design a custom effect that looks and behaves just like you want. Custom effects allow you to change the element's fill color, opacity, angle, size and much more on click / hover.
Tip:
After setting up a pre-designed effect, you can click the Edit icon 
next to its name to add any custom transforms you need.
next to its name to add any custom transforms you need. 
Designing an element's initial state
Once you add an effect to an element, you can access and customize its initial state. This is how your element looks when it loads, before visitors interact with it. You can adjust the element's initial opacity, angle, size and position, then create an effect to go along with it.
In the example below, an image is revealed when a visitor clicks the text. You can do this by setting the image's opacity to 0 in its initial state.
Interactions between different elements
Editor X lets you create interactions between elements, so clicking or hovering over one element affects another. As you define a new interaction, you can select the affected element – the same element visitors hovered or clicked on, or a different one on stage.
In the example below, clicking the button triggers three other containers to change their position:
Did this help?
|