How to Make a Logo Reveal Animation

By the end of this guide you will have a two to four second logo reveal exported as an MP4 or a WebM. You need a KinoViz account and your logo as an .svg file. The whole workflow runs on the Free plan; paid plans change only the export resolution, frame rate and watermark.

What you need

• The logo as SVG. A PNG works, but it cannot be exploded into paths, so you lose the draw-on and per-shape reveal options.
• A rough idea of the beat: mark first, wordmark second, is the safest default.
• Ten to twenty minutes.

Step by step

1. Set the canvas and the duration

Create a project and choose the canvas that matches the placement — Landscape (1920 × 1080) for a video intro or site hero, Square for social, Portrait for Reels and Stories. Then set the project length with the duration button in the timeline toolbar — it shows the current length (for example 10s) and opens a list of preset lengths plus a custom value. A reveal rarely needs more than four seconds.

2. Import the logo and split it into parts

Drag the SVG onto the canvas. Right-click it and choose Explode to Paths so each shape becomes its own element, or Convert to editable if you want the wordmark to remain live, editable text.

In the Layer Panel, group what belongs together with Ctrl/Cmd+G. A typical split is two groups: the mark and the wordmark.

3. Design the final frame first

In Design Mode, place the logo exactly as it should look when the reveal is over. Every keyframe after this is created by stepping back in time and taking something away — opacity, scale, stroke length. Working backwards from the resting frame guarantees the logo lands where you intended.

4. Draw the outline on

Select a path that has a stroke. In the property panel you will find Draw start and Draw end sliders, which control how much of the stroke is drawn.

1. Put the playhead at the start and set Draw end to 0 — the stroke disappears.
2. Move the playhead forward and set Draw end to 100 — the stroke is complete.

Between those two keyframes the line draws itself on. Draw start does the same from the other end, which is useful for a line that retracts.

5. Fade and scale the mark into place

Switch to Animation Mode with the Design / Animate toggle. Near the start of the timeline, set the mark's opacity to 0 and its scale a little under its final size. A moment later, restore opacity to 100 and scale to its resting value. Two keyframes per property produce a clean pop-in; more than that usually reads as fussy.

6. Bring the wordmark in after the mark

Give the wordmark its own beat, after the mark has settled.

• Live text — apply a TextFX preset. The typewriter category reveals by character, word or line and is available on every plan, including Free. motion_advanced presets such as slideUp and elasticOut require Creator or above.
• Outlined paths — offset each letter by hand: drag its clip bar in the timeline so it starts slightly after the previous one, or shift its first keyframe along the track.

7. Shape the timing with easing

Right-click a keyframe and choose Easing. KinoViz includes more than 40 curves, each drawn as an inline preview:

You can also enter a custom cubic Bezier when a preset is close but not exact.

8. Export

Open the export dialog from the top bar and pick MP4 for general distribution or WebM for a smaller web-friendly file. Both bake the canvas background into the video, so if you need the reveal on transparency, export a single PNG frame instead. Choose the resolution and frame rate your plan allows, then start the render. It runs in the browser tab, so keep the tab open.

Tips

• Hold the end frame. Leave roughly half a second where the logo simply sits, so viewers register it before the clip cuts.
• Offset by tenths, not seconds. Delays around 0.05–0.15 s per element read as one deliberate motion; larger gaps read as separate events.
• Keep the mark and wordmark on different beats. Simultaneous entrances compete for attention and flatten the reveal.
• Trim the clip bars. Drag the edges of each layer's clip bar in the timeline so nothing is on screen before it should be.

FAQ

How long should a logo reveal be?

Two to four seconds is the usual range for an intro or a social sting. Set the length with the duration button in the timeline toolbar rather than leaving the default ten seconds, so the timeline shows only the time you are using and the exported file is not padded with dead frames.

Can I export a logo reveal with a transparent background?

As a still frame, yes. Set the canvas background to the checkerboard swatch in the Background panel and export PNG, which keeps the transparency. Video export does not: MP4 and WebM both bake the canvas background into every frame, and transparent video export is not yet available. For a moving reveal over other footage, bring that footage into the KinoViz project and composite it there before exporting.

Can I reuse the same reveal across several projects?

Turn the logo into a Component. Components use a master and instance model, so edits to the master propagate to every instance, and each instance can carry small overrides such as a different colour. Components are available on all plans. Creator and above can also export the project as a .kino file and re-import it elsewhere.

Which plan do I need for a logo reveal?

The whole workflow — SVG import, exploding to paths, stroke draw-on, keyframes, easing, clip timing and the basic TextFX presets — works on Free. Free exports are capped at 540p and 24 fps and carry a watermark. Creator removes the watermark and raises the ceiling to 1080p at 30 fps.

Related

• How to Animate an SVG in the Browser
• How to Export a Transparent PNG
• Animation & Timeline — keyframes, easing, clip bars and TextFX
• Components — master and instance reuse
• Export Formats — formats, resolution and watermark by plan
• Glossary — motion design terms explained
• Pricing