Point: Setting up animations and effects in Studio.Design
In Studio.Design, you can create animations, effects, and other dynamic expressions using conditional styles.
When you set both a default style and a conditional style on a box element, the difference between them plays as an animation. You can fine-tune how the animation behaves using three settings: Easing, Duration, and Delay.
The "Scroll" option in conditional styles lets you create effects where elements move as the user scrolls.
By stacking two images and using the "Hover" option in conditional styles to make the top image transparent on hover, the bottom image shows through — creating the appearance of an image switch. This works by reducing the opacity of the top image to reveal the one beneath it.
Set up an image switch on hover
Note: Touch devices don't support hover interactions, so the result may not appear as intended on those devices.
Place Image ① on the page — this is the image you want to show on hover.
Layer Image ② on top of it — this is the image you want to show by default. It's easier to position if you increase the size of the parent image first.
Set the size of Image ② (the top image) to 100% width and 100% height.
Select Image ② (the default image on top).
You can use the Layers panel to make sure you select the correct image.
Click [Conditional Style] at the top of the right panel, then select [Hover] from the menu.
Click the [Custom Settings] button.
Under [Appearance], set the opacity to 0.
When you're done, click the [Back] button (arrow icon) to the right of the [Hover] label in the right panel to return to the default style settings.
Check how it works using Live Preview.
If you're editing a published site, go to the Publish panel and update your site. Your changes won't appear on the live site until you do.