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 in your site, the difference between them is played 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 scroll-driven effects where elements move as the user scrolls.
The fade-in-from-bottom effect is created by combining Y-axis movement with an opacity change using the "On Appearance" conditional style. This makes the element appear to rise upward as it fades in.
Create a fade-in-from-bottom animation
Here's how to create an animation that slides in while fading.
These steps assume your design is already set up and you just need to add the animation to a box element.
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.
Click [Conditional Style] in the upper-right corner of the right panel, then select [On Appearance]. If the panel is closed, open the right panel first.
From the [On Appearance] templates, select [Fade in from bottom].
In the [On Appearance] style editing mode, the pre-set template values will be highlighted in pink. If you'd like to adjust the motion, modify each value as needed.
Check how it looks using Live Preview.
If you're editing a published site, go to the publish panel and update your site. Your changes won't go live until you do this.