PopCraft Docs

The Lottie templates are animated assets for a website or an app: hero loops, animated icons, loaders, empty and success states, onboarding illustrations, feature explainers, chart animations and micro-interactions. There are packs for eleven sectors, plus a Techniques pack with one template per animation feature. Each template is drawn for Lottie first, so its export plays in any Lottie player exactly as it plays in Animate: nothing is baked frame by frame, and nothing is turned into a picture.

Finding them

Open New file and choose Motion. Tick Lottie-ready to see only templates that export to Lottie, or type lottie in the search box (lottie ai narrows it to a sector). A template that exports to Lottie wears a Lottie badge next to its length.

The packs come in four sizes, all in the Motion group's sizes:

Size	Used for
Lottie icon, 512×512	Animated icons, loaders, success states and micro-interactions
Lottie button, 480×160	Buttons and toggles
Lottie illustration, 800×600	Empty states, onboarding, explainers and charts
Lottie hero, 1600×900	Hero loops

Icons, loaders and buttons have no background, so they sit on your page's own colour. Heroes have a background.

The packs

AI

Template	What it is	Size	Length
AI thinking shimmer	Loader: a response card whose lines shimmer left to right under a turning sparkle	800×600	2.0 s, loops
Neural net pulse	Hero loop: signals race through a three-layer network, lighting each node they reach, over a soft glow	1600×900	4.0 s, loops
Assistant typing	Loader: three dots rise and brighten in turn inside a chat bubble	512×512	1.2 s, loops
Generate button	Micro-interaction: a sheen sweeps the pill while its sparkle turns and two small stars twinkle	480×160	2.4 s, loops
Model routing	Feature explainer: each prompt travels to the hub, which picks the model that fits and lights it	1600×900	6.0 s, loops

Fintech

Template	What it is	Size	Length
Payment successful	Success state: a green disc pops, the check draws itself on, and a ring and sparks burst out	512×512	1.8 s
Tap to pay	Feature explainer: the card swings onto the terminal, the waves pulse, the screen ticks green, and the card lifts away	800×600	3.0 s, loops

Health

Template	What it is	Size	Length
Heartbeat	Animated icon: the heart beats twice, a ripple spreads from each beat, and the trace draws across it	512×512	1.6 s, loops
Weekly activity	Chart animation: seven days of activity rise one after another, the best day lights up and the goal line slides in	800×600	2.2 s

E-commerce

Template	What it is	Size	Length
Add to cart	Micro-interaction: a parcel drops into the cart, the cart dips under it, and the count badge pops	512×512	2.0 s, loops
Empty cart	Empty state: the cart rocks gently on a soft floor while a few items float by above it	800×600	4.0 s, loops

SaaS

Template	What it is	Size	Length
Toggle switch	Micro-interaction: the knob slides across with a little squash while the track fills with the brand colour, then switches back	480×160	2.4 s, loops
Growth chart	Chart animation: the gridlines settle, the growth line draws across left to right, its points pop in turn and the latest one pulses	800×600	2.4 s
SaaS UI onboarding checklist	Onboarding illustration: four steps tick off one by one, the progress ring fills a quarter with each, and the finished ring turns green with a small burst	800×600	3.6 s
SaaS UI empty state: no data yet	Empty state: an empty chart card floats over its shadow, its ghost bars breathing in a slow wave, while the add button bobs and pings	800×600	4.0 s, loops
SaaS UI empty state: no search results	Empty state: a magnifier sweeps down the faded result rows, each dimming as the lens passes, and its question mark tilts as it comes back empty	800×600	4.0 s, loops
SaaS UI upgrade unlocked	Success state: the lock braces, its shackle springs open, the keyhole turns into a sparkle with a burst, and a tick lands on its corner	512×512	2.4 s
SaaS UI trial timeline	Feature explainer: a traveller moves along the line from today, past the reminder bell, to the day the card is billed, and each stop lights as it is reached	800×600	6.0 s, loops
SaaS UI file upload	Loader: a document slips behind a cloud, the progress bar fills in uneven pushes, and a tick lands with a small burst before the next file comes up	800×600	4.5 s, loops
SaaS UI sync connected	Feature explainer: two app tiles lean in, the line between them closes from both ends, the link badge pops, and a pulse runs each way along the line	800×600	4.5 s, loops
SaaS UI streaming answer	Loader: under the prompt, the answer arrives a word at a time, line after line, with a cursor riding its leading edge, then its actions pop in	800×600	6.0 s, loops
SaaS UI dashboard hero loop	Hero loop: a dashboard assembles itself in its window, a payment toast and a new-customer card land over its edges, and it clears to build again	1600×900	6.0 s, loops
SaaS UI error and retry	Error state: the alert shakes its head, gently, then the retry arrow around it takes one turn and settles	512×512	3.2 s, loops

Education

Template	What it is	Size	Length
Open book	Onboarding illustration: an open book turns a page while sparkles rise from it	800×600	3.0 s, loops
Lesson complete badge	Success state: a medal swings in on its ribbon, its star spins into place and rays burst behind it	512×512	1.8 s

Travel

Template	What it is	Size	Length
Flight route	Hero loop: a plane flies an arc between two cities, lighting the dotted route behind it, and the destination pin pops as it lands	1600×900	5.0 s, loops
Location pin drop	Animated icon: the pin drops onto the map, squashes as it lands and springs up, and a ripple spreads from where it stands	512×512	2.0 s, loops

Food delivery

Template	What it is	Size	Length
Courier on the way	Loader: a courier rides a scooter with the food box on the back, wheels turning and the road rushing past	800×600	1.2 s, loops
Preparing your order	Loader: a pot on the flame, its lid rattling and steam curling up	512×512	2.4 s, loops

Real estate

Template	What it is	Size	Length
Home search	Animated icon: a magnifier circles a house and each window lights up as the lens passes over it	512×512	3.0 s, loops
Save listing	Micro-interaction: on the listing card the heart fills with a pop and a burst, holds, then clears	512×512	2.4 s, loops

Security

Template	What it is	Size	Length
Shield scan	Success state: a light scans down the shield, then the check pops in green and the shield glows	512×512	2.6 s, loops
Unlock	Micro-interaction: the keyhole turns, the shackle springs up and swings open as the body turns green, then it locks again	512×512	2.4 s, loops

Climate

Template	What it is	Size	Length
Wind farm	Hero loop: three wind turbines turn at their own speeds on rolling hills under a warm sun, clouds drifting by	1600×900	3.0 s, loops
Battery charging	Loader: the battery fills cell by cell while the bolt pulses, then empties to go again	512×512	2.4 s, loops

Techniques

One template for each of the newer animation features, so you can open it, see the feature at work and take it apart. Select a layer and open its keys to see how each one is built.

Template	What it is	Size	Length
Line draw	Success state: trim paths draw a ring and the check inside it, then wipe them away from their starts	512×512	2.4 s, loops
Trim spinner	Loader: an arc grows and shrinks with its trim's start and end while the trim offset carries it round the ring	512×512	1.6 s, loops
Shape morph	Animated icon: one outline morphs from a circle to a star, a heart and a rounded square, each with a different number of points	512×512	4.0 s, loops
Like button	Micro-interaction run by a state machine: the heart breathes while idle, grows on hover, fills with a burst on click and empties on a second click	512×512	3.0 s, interactive

To try Like button, press Present and move the pointer over the heart, then click it twice. Export it as dotLottie to keep the state machine; a Lottie JSON file has the timeline and its markers but not the machine.

Play and export one

Play a Lottie template, then export it as Lottie · 0:06

Description

The Payment success Lottie template in Animate. Space plays it: the card flips and the tick draws on. The export button in the transport bar opens Export animation, where Lottie is picked as the format.

Open the template; it opens in Animate.
Press Space to play it.
Click the export button in the transport bar and pick Lottie: bodymovin JSON, or a .lottie file.

Making one yours

Every colour in a pack is a brand colour role, so applying a brand kit recolours the whole asset, every state included. A state change is drawn as one brand colour fading in over another, not as a keyed colour, so the kit's colours carry into each state. The few gradients (a glow, a sheen) keep their own colours. Move, resize or restyle layers as in any file. The keys use bezier, linear and hold curves only, so your own keys with those curves keep the file exact.

Exporting

Press Export on the transport bar, choose Lottie, and pick Lottie JSON (.json, for lottie-web and most players) or dotLottie (.lottie, a smaller zip for the dotLottie players). See Exporting video for what carries over. The agent can export them too, with export_lottie.

Templates that loop end on the frame they start on. Set your player to loop them (lottie-web: loop: true; dotLottie files already say so). One-shot states such as Payment successful and Lesson complete badge rest on their last frame. Play them once, when the moment happens.

How they are checked

Each template is checked against real Lottie players, not only against PopCraft's own reading of the file:

In every test run. The export is loaded into lottie-web's SVG renderer, seeked across the timeline, and every layer it draws is compared with where PopCraft puts that layer: its position, scale, rotation, opacity and colours. The file is also checked against the Lottie JSON schema. It is then imported and exported again, and must draw the same. A template that loops must end on the picture it starts with.
In a browser, pixel for pixel. Each export is played by lottie-web in Chrome, and the pictures are compared with PopCraft's own canvas at the same frames.