Mockup animations use a time-based keyframe timeline scaled 0–100% of the project duration.
The timeline
A horizontal band runs across the bottom of the mockup view. The left edge is 0% (start), the right edge is 100% (end). The orange dot at the top is the playhead.
Drag the playhead to scrub through the animation. The preview updates live.
Adding a keyframe
- Move the playhead to a position.
- Change any transform value (position, rotation, scale, depth-of-field).
- The change is recorded as a keyframe at that position.
A coloured diamond appears in the timeline for each animatable property.
Per-property rows
Click the small expand arrow on the timeline to open per-property rows. Each row shows the keyframes for one property: position, rotation, scale, DoF, etc. Diamonds can be dragged along their row to re-time.
Edit keyframe values
Click a diamond to make it the active keyframe. The property panel updates to the keyframe’s value; edit it the same as a non-keyframed value.
Delete keyframes
- Click a diamond → press Delete.
- Right-click → Delete keyframe.
- Drag the diamond off the timeline.
Easing
Between two adjacent keyframes the curve segment can be set — see Easing Curves.
Project duration
The timeline always runs 0–100%. The actual duration in seconds is set in the project’s export settings (default 6 seconds). Change duration and the keyframes stay at their proportional positions.
Copy and paste keyframes
Multi-select diamonds with marquee → Cmd / Ctrl-C → move playhead → Cmd / Ctrl-V. The pasted keyframes land at the new playhead position, preserving spacing.
Apply a preset
Right-click the timeline → Apply preset → pick from the preset library to drop a complete keyframe set in one click. See Preset Animations.
Leave a Reply