Tip: Setting up animations and effects in Studio.Design
In Studio.Design, you can create animations, effects, and other motion-based expressions using conditional styles.
When you apply both a default style and a conditional style to a box element on your site, the difference between them plays back as an animation. You can fine-tune how the animation moves using three settings: easing, duration, and delay.
With the "Scroll" conditional style, you can create effects where elements move as the user scrolls.
To create a fade-in effect from below, use the "On appear" conditional style to combine vertical (Y-axis) movement with a change in opacity. This makes the element appear to slide upward while fading in.
Create a fade-in-from-below animation
Here's how to create an animation that slides in while fading.
The steps below show how to apply the animation to a box element that has already been designed.
Open the Design Editor and navigate to the page where you want to add the fade-in animation.
Select the target box element on the page.
In the top right of the right panel, click [Conditional Style] and select [On appear]. If the panel is closed, open the right panel first.
From the [On appear] templates, select [Fade in from below].
In the [On appear] style editing mode, the values preset by the template are highlighted in pink. Adjust any of these values to fine-tune the motion.
Use Live Preview to check how it looks.
If you're editing a published site, update the site from the Publish panel. Your changes won't appear on the live site until you do this.