Tip: 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 is played back as an animation. You can fine-tune the animation behavior with three settings: "Easing," "Duration," and "Delay."
The "Scroll" conditional style lets you create scroll-based effects where elements move as the user scrolls.
How to create a button with a color sweep effect on hover
The edge-sweeping color effect is created by combining the [Hover] conditional style on the parent box with the [in: Hover] conditional style on a child element.
By applying a hover condition to the parent box and scaling an inner box horizontally, you can create the appearance of color spreading from the left edge.
Step 1: Create a button
Place a button using a default part and adjust the design.
Place a button.
Open the Add panel
and go to the [Parts] tab, then select [Button] to add a button part.
Adjust the button design as needed. For details on design settings, refer to the following help article collections:
Step 2: Add a box inside the button and set up the transform
Add a box inside the button that will be used for the color change effect.
With the text box inside the button selected, add a new box.
Apply the following settings to the newly added box. You can configure these in the [Box] tab of the right panel. If the panel is closed, open the right panel first.
[Layout]: Width 100%, Height 100%
[Appearance]: Background color set to black
[Position]: Set to Absolute
[Overflow]: Hidden
In the [Transform] tab of the right panel, apply the following settings:
[Scale]
X-axis (↔︎): 0%
Y-axis (↕︎): 100%
[Origin]
Center left
Step 3: Set the "Hover" conditional style on the parent box
Select the parent box of the button, click [Conditional Style] at the top of the right panel, and choose [Hover].
In the hover style editing mode, set [Opacity] to 100%.
Step 4: Set the "in: Hover" conditional style on the added box
Select the newly added box with the black background, click [Conditional Style] at the top of the right panel, and choose [in: Hover].
In the in: Hover style editing mode, apply the following settings:
[Opacity]: 100%
[Transform]
[Scale]
X-axis (↔︎): 0%
Y-axis (↕︎): 100%
[Origin]
Center left
[Animation]
[Duration]: 0.5s
Step 5: Set the "in: Hover" conditional style on the text box
Select the text box and set the stacking order in [Position] to "2".
Click [Conditional Style] at the top of the right panel and choose [in: Hover].
In the in: Hover style editing mode, set the [Color] under [Typography] to white.
Step 6: Review your settings and publish
Click the arrow button (Preview) in the top-right corner of the editor and use Live Preview to fine-tune your settings.
Once you've finished all your settings, including any other design changes, publish or update your site to apply the changes to the live site.