Keyframes allow you to create custom animations by defining property values at specific points in time.
The Studio UI provides an intuitive interface for adding and managing keyframes without writing JSON code.
Step-by-Step Guide
1. Position Your Playhead
Move the red playhead on the timeline to the exact point where you want to add a keyframe. This sets the timing for your animation keyframe.
2. Select Your Media Clip
Click on the media clip in the timeline that you want to animate. This will open the edit media panel on the left side.
3. Open the Animations Section
In the edit media panel, click on "Animations" at the top of the panel.
4. Enable Custom Keyframes
Click on "Custom Keyframe" to open the keyframe editor.
5. Add a Keyframe
Click the "Add" button to create a keyframe at the current playhead position.
6. Configure Keyframe Properties
The keyframe panel displays the following properties you can animate:
Available Properties:
X - Horizontal position offset
Y - Vertical position offset
Opacity - Transparency (0 to 1)
Scale - Size multiplier
Rotation - Angle in degrees
Easing Options: For each property, you can set the easing/interpolation type using the dropdown menu (Linear, easeIn, easeOut, easeInOut, easeInQuad, easeOutQuad, easeInOutQuad, and more).
7. Add Additional Keyframes
Move the playhead to the next point in time where you want another keyframe, then repeat steps 5-6.
The animation will automatically interpolate between your keyframes using the specified easing.