Skip to content

New: App Starter Pack — 368 files for a new app at $199 (Save 64%)See the pack

GuidesDesignSVGA

Custom animations: how to brief a studio for your app

When to commission custom SVGA or PAG work instead of buying catalogue files, and what a useful brief covers: canvas, frame rate, loops, LTR and RTL, size budget, format and replaceable layers.

svgastore team5 min read

Genie Lamp Wish animation
Genie Lamp Wish

Ready-made animations are the quickest way to fill a live room, but some pieces only make sense if they are built for you. The hard part of commissioning is rarely the animation itself; it is describing what you need precisely enough that the first delivery works in your app. This guide covers when custom work is worth it and what a useful brief contains.

Buy, adapt or commission

Start with what already exists. The store has 2,265 files on sale, 1,912 SVGA and 353 PAG, each with instant download, and many come as complete series. Commission when the catalogue cannot give you something specific.

SituationUsually the better route
Standard placements: gifts, entries, frames, bannersBuy from the catalogue
A full tier ladder such as VIP 1 to 15Buy a pack: the VIP Level Pack bundles 36 files
Your mascot, logo or in-app currency must appearCommission
Words in the artwork must match your brand or languageCommission, or ask for a replaceable text layer
A feature only your app has, with its own statesCommission
A series longer than any existing oneBuy what exists, commission extra tiers in the same style

A practical split is catalogue files for the everyday layer and a handful of commissioned signature pieces for the features that define your app. Study a catalogue series before you brief one of your own: in the VIP collection, VIP 1 to 8 in SVGA share a 440x440 canvas, 15 fps and 5 seconds, while the PAG versions of VIP 1 to 15 share 140x140, 15 fps and 3 seconds. That consistency is exactly what to ask a studio for.

What goes into the brief

Placement and canvas

Say where the animation plays and give the canvas in pixels; placement decides almost everything else. Real store files show how much canvases vary:

PlacementExample fileCanvasfpsLengthSize
Full-screen giftGenie Lamp Wish750x1624157 s735 KB
Entry effectNeon Tunnel Drive540x960303.7 s1.75 MB
Avatar frameSapphire Crown Halo414x414204 s417 KB
Broadcast bannerSVIP 7 Emerald Banner1080x312152 s237 KB
Good-number badgeUID Good Number Lv 190x90152 s88 KB
Level plateLevel 0 to 9 Background119x32302 s60 KB

For tall pieces, mark where your gift panel, chat and seats sit, so the focal point is not hidden behind interface.

Frame rate and length

Ask for a number, not "smooth". Store files use frame rates from 3 to 75 fps, and every example above uses 15, 20 or 30. More frames usually means a bigger file. Give a target length too: Red Packet Open Lv 1 lasts 1.3 seconds, while a showpiece gift such as Lantern Hanfu Lady runs 15.

Loop or one-shot

State whether it loops (frames, seat effects, badges), plays once and disappears (gifts, entries), or plays once and holds a final frame (results). For loops, ask for a seamless join between the last and first frames.

LTR and RTL

If you serve right-to-left languages such as Arabic or Urdu, ask for mirrored versions of anything directional: banners, entry bars, progress tracks. The catalogue ships these as pairs, for example Broadcast CP and Broadcast Cprtl, both 720x220, 20 fps, 5 seconds and 401 KB. List what must not mirror, such as numbers, logos and Latin text.

Size budget

Give a maximum size per placement and name the slowest phone it must run on. The store median is 88 KB, and 1,195 of its 2,265 files are under 100 KB, but medians vary by placement: 2.4 KB in Mic, Voice & Seats, 201 KB in Avatar Frames and 735 KB in Animated Gifts. A budget agreed up front pushes the studio to reuse sprites and trim frames, rather than discovering the problem after delivery.

Format and runtime

Choose SVGA or PAG at the start and name the runtime: SVGA plays with the open-source SVGAPlayer runtimes (Android, iOS, Web, Flutter), PAG with Tencent's libpag. List the platforms you ship on. Not every effect in a studio's animation tool exports cleanly to either format, so ask the studio to confirm early that the look you want is achievable.

Replaceable layers

If the animation shows a user's avatar, name or a number, say so. SVGAPlayer can replace a named image slot, or draw text into one, at playback, and libpag can replace the contents of text and image layers. List each slot with its layer name, size and font and colour rules, so developers can fill it without a re-export.

Sound and states

Most files are silent; only 42 of the 2,265 in the store carry sound. If you want audio, say where and for how long. For anything with levels or states, brief the whole set at once, such as closed, opening and banner states for a treasure box, and ask for the same canvas and anchor point across the series.

Deliverables and acceptance

Agree the delivery list before work starts:

  • final .svga or .pag files, named to your convention

  • the editable source project, with ownership agreed in writing

  • a preview on a dark background

  • a spec line per file: canvas, fps, length and size

Accept each file against the brief. Drop it into the free SVGA and PAG viewer to check canvas, frame rate and size on light and dark room backgrounds, then test on your slowest supported phone. The viewer keeps a copy of every file opened in it for review, so for work that must stay private until launch, run the same checks in your own app build instead.

Next step

Write the brief as one page using the headings above, attach screenshots of where each animation will sit, and link the catalogue files closest to what you want; a link to a piece in Animated Gifts or Banners & Broadcasts says more than adjectives. When it is ready, send it through the custom work form.

In this post

The files we talked about

All posts