With Effects you can assign animations based on a range of set triggers. With these effects you can create a more lively design and communicate to your customers the state of an element when triggered.
In-depth
The effects created within Instant are triggered when interacting with an element in a predefined way. These triggers can be for example a hover or mouse press.
Triggers
Hover - triggered when you hover with your mouse over an element
Mouse press - when clicking / tapping on an element
Active - when an element is currently active, for example a variant select button
Disabled - When a product is out of stock
Focused - When an element is highlighted
Additionally we support effects based on scroll, refer to our article 'Animations on scroll' to learn more.
How to use Effects
Effect animations can be added to any layer in Instant and will also apply to all the nested layers within. You can create within nested elements additional triggers for creating nested effects.
To get started a trigger has to be assigned to an element. Select a layer that you want to add a trigger to. then proceed by selecting the interactions tab in the right sidebar.
Proceed by clicking on the '+' button next to effects. a dropdown appears, select the trigger that you wish to utilize to start the effect.
a Pop over panel appears where you can define the styles for this effect such as opacity, scale and fill color.
When clicking on Animation, you can define the animation & duration itself.