This effect is built using a parametric animation, triggered by horizontal mouse movement.
Setup Instructions
1. Select the frame
Choose the frame named
slider frame— it contains the two image halves (colored + black & white)
2. Add the parametric animation
In the Interact panel, create a new Parametric Animation
Set the action to Horizontal Mouse Move
Interaction Settings
Click the Customize button next to
Mouse Move XTurn ON
Smooth AnimationTurn ON
On ClickTurn ON
From current position
→ This allows the interaction to start from wherever the mouse currently is
Area of Action: keep as
slider frameBy name: Turn OFF
Layer of Interaction: choose
left plus slider— this is the layer that will expand/shrink on drag
Animation Properties
Choose:
WidthonlyTurn ON both
Start fromandChange to
Set values:
Start from = 5%Change to = 95%Leave
Min/Max Widthas defaultDuration = 4sEase = linear→ for smooth real-time drag without delay
Important Note on Image Setup
To make the effect seamless:
In both
leftandrightframes, place the same image,In the same position and same size
This creates the illusion of a single image being gradually revealed.