10 Sites for Browsing Motion Design Examples
Where to look when you need to see motion, not read about it: curated showcases, open galleries, and places where you can take the file apart.
Motion is hard to learn from a still. A screenshot shows you the composition; it never tells you how long a card takes to settle, how a title breathes in, or why one logo reveal feels expensive and another feels like a template. The only way to build that sense is to watch a lot of good work, and ideally to open some of it up and see how it was made.
These are ten places we keep going back to. They are ordered roughly from "watch finished work" to "pick the work apart", and one of them is ours.
1. Layerz Canvas Gallery
Our own gallery, and the reason we wrote this list. Every piece is a motion
or design document made in Layerz Canvas, and most of them were built by
Claude through the Layerz Canvas MCP. That changes what you can do with an
example: alongside each piece you get the prompt that produced it, and you
can download the .lcanvas document, open it in the app, and look at the
actual keyframes, easing curves, and layer structure instead of guessing.
Best for: product films, app promos, explainers, and anyone who wants to see the file behind the video rather than the video alone.
2. Motionographer
The long-running editorial home of the motion design industry. Studios, title sequences, commercials, and personal projects, with interviews that go into process and credits that tell you who actually did the work. When a piece on Motionographer looks effortless, the accompanying article usually explains how many people and weeks it took.
Best for: industry-level motion graphics and the stories behind them.
3. Vimeo Staff Picks
Still the place where motion studios publish their reels and short films at full quality. The Staff Picks channel is curated by humans and skews toward craft, so a few minutes of scrolling gives you a reliable sense of what the top of the field looks like this year. Search "motion graphics" or "title sequence" for narrower feeds.
Best for: reels, short films, and finished broadcast-quality work.
4. Dribbble (Animation)
dribbble.com/shots/popular/animation
Short loops, micro-interactions, and UI transitions, mostly a few seconds long and mostly from product and brand designers. Dribbble is where you go for the small moments: a toggle that feels right, a loading state with personality, an icon that animates on tap. Filter by "Animation" and sort by popular or recent.
Best for: UI motion, micro-interactions, and quick loops to study frame by frame.
5. Behance (Motion Graphics)
Behance's Motion Graphics field is where longer case studies live. A single project page often walks through storyboards, style frames, and the final film, which makes it one of the few places you can see the planning that precedes the animation. Use the search page with the Motion Graphics creative field selected.
Best for: full case studies with style frames and process.
6. LottieFiles
A huge library of Lottie animations, many free to use and all of them playable in the browser with a scrubber. Because Lottie files are vector and layer-based, the examples here are closer to "working motion" than to rendered video: you can download one, drop it into a tool that reads Lottie, and see the layers and keyframes that drive it. Layerz Canvas imports Lottie, so these are also a good source of material to remix.
Best for: icon animations, loaders, illustrations in motion, and files you can actually open.
7. Rive Community
Rive's community page is full of interactive animations, which is a different kind of example: state machines, hover and press responses, characters that react to input. Open any piece in the Rive editor to see how the states and transitions are wired. Even if you never ship a Rive file, it is the best public collection of motion that responds to the user instead of just playing.
Best for: interactive and stateful motion, game-like UI, characters.
8. Awwwards (Animation)
awwwards.com/websites/animation
Motion on the web is its own discipline, and Awwwards is where the most ambitious examples of it get collected. The animation category covers scroll-driven storytelling, page transitions, cursor effects, and hero sequences, all live sites you can scroll through yourself rather than recordings. Pay attention to timing on scroll, which no video can teach you.
Best for: web animation, scroll choreography, and landing-page motion.
9. Codrops
Codrops publishes web animation demos with the source code attached: text effects, image transitions, menus, WebGL experiments. Each demo is a small, focused idea you can read in an afternoon. If you have ever wondered how a specific hover effect was built, there is a good chance a Codrops tutorial covers it.
Best for: developers and designers who want to see the code behind a motion effect.
10. Art of the Title
Title sequences are motion design's oldest form, and this site is the archive. Every entry pairs the sequence with an interview about typography, pacing, and the brief, going back decades. It is the best place to study how type moves in time and how a mood is set in ninety seconds.
Best for: typography in motion, pacing, and openings.
How to actually use these
Watching is the easy part. Three habits make it stick:
- Count the beats. Pick one piece and note when each element enters, how long it holds, and how it leaves. Most good motion runs on fewer, longer beats than you expect.
- Open the file when you can. Lottie, Rive, and
.lcanvasdocuments let you see the easing curve instead of guessing it. A curve you have looked at is a curve you can reproduce. - Rebuild one thing a week. Take a short loop from Dribbble or a shot from our gallery and recreate it from scratch. The point is not the copy; it is noticing every decision you would have made differently.
And if a piece in our gallery is close to what you need, skip the rebuild: download the document, change what is yours, and export.