ANIMATIONS DEEP DIVE
Create animated ads in SeenThis Studio
Bring in the product, reveal the message and time the call to action. SeenThis Studio gives you presets and precise controls for each layer, with preview and playback built in.
01
Compose the sequence
The order in which layers enter sets what the viewer sees first.
A headline can reveal word by word, and a button can wait until the offer is clear. You can adjust each of those moments without rebuilding the ad as a finished video.
Choose an entrance, emphasis or exit preset and preview it before applying it. Use keyframes when the design needs precise control over position, scale, rotation, opacity or timing. The controls available depend on the layer and property.
Bring the product into view
A product image can fade in, follow a curved path and settle into place. An emphasis effect such as Float can keep it moving, and a pulse can repeat a chosen number of times. Presets and keyframes can work on the same layer, with timing you can inspect and adjust.
02
Refine it in SeenThis Studio
A preset gets a movement close; keyframes and easing make it exact.
Adjust a movement on the canvas
With Auto Keyframe enabled, supported changes on the canvas or in Properties record keyframes at the playhead. Adjust points and Bézier handles to shape a motion path.
Easing controls how a movement speeds up or slows down. A hold keyframe keeps its value until the next keyframe, where it changes immediately.
Give the headline time to be read
Animate text by character, word or line. Control the reveal order and stagger, then leave enough time for the complete message to be read.
03
One timeline, from editing to playback
The same animation code runs in SeenThis Studio and in the delivered ad.
Stagger layers, move selected animation bars and keyframes together, and use snapping to line them up. The creative timeline coordinates the animation with playback.
Copy, paste or duplicate animations to carry a treatment across the creative, then adjust the timing and path for the receiving layer. The design can be reused while product data supplies different text and images.
SeenThis Studio uses shared animation code for editor playback and the delivered creative. The browser animates the layers directly, separate from the video.
The runtime also responds to the viewer’s reduced-motion setting. Movement is simplified so layers can enter and leave on cue without travelling across the ad. Other effects, and the video itself, need to be considered separately.
Preview the whole creative in the intended browser and placement. Check that the headline stays readable and that the product reveal and call to action make sense together.
We build SeenThis Studio’s animation engine alongside the custom player that runs the ad. Both follow the creative’s timeline, which helps the footage and the layers stay in step when the ad pauses or loops.
The engine is part of the same system as our video encoding and adaptive streaming, so a moving headline or product image can be animated by the browser instead of becoming part of the video.