Skip to content
animorio
IT

Components

468 components

Animated interface pieces, ready to copy.

The pieces of an interface, animated and ready to copy, grouped by family. Each one works with the keyboard, with a finger and with reduced motion, and is tested in Safari on iPhone too.

Components are real pieces of interface, animated: buttons, menus, navigation bars, forms, notifications, calendars and many more. Each one works with a mouse, a finger and a keyboard, has all its states (rest, hover, press, waiting, done) and respects people who asked for less motion. They are made to be copied into a website or an app and adapted.

The families, in short

Actions

Buttons
Buttons whose animation tells the story of the action: sending, buying, signing up, liking, with their waiting and confirmation states.
Toggles
On and off switches with a movement you can feel.
Ratings
Stars, shapes and scales to give a rating.

Navigation

Menus
Menus that open and close: dropdowns, fans, full screen, context menus.
Navigation
Bars that are always there to move around a site: at the top, at the bottom like in apps, at the side, tables of contents.
Footers
The bottom of a website, with its links, the newsletter and an animation.
Steppers
Step-by-step journeys, like a booking or an order.
Tabs
Tabs to switch between different content in the same space.
Trees
Branching structures, like file folders.

Forms

Forms
Fields for email, passwords, codes and payment cards, with animated checks and errors.
Sliders
Sliders to drag to pick a value: volume, price, zoom.
Pickers
Animated ways to choose between options: times, seats, colours.
Calendars
Calendars to pick dates and book.
Counters
Numbers that go up and down: quantities, tickets, gauges.
Search
Search fields that open up and show results.
Tags
Tags and filters to add, remove and combine.
Dials
Dials to turn to set a value.
Drawing
Surfaces to write or draw on with a finger.

Content

Cards
Cards with an effect: holographic, embossed, scratch to reveal.
Galleries
Galleries of images and products to browse and zoom.
Carousels
Content that slides sideways: reviews, records, colours.
Accordions
Questions and answers that open and close.
Charts
Charts that draw and gather themselves, with readable data.
Weather
Weather forecasts for the week and hour by hour.
Lists
To-do lists and lists that change their layout.
Tables
Tables to sort and to read on a phone too.
Players
Music players with their controls.
Code
Code blocks to read and copy.
Stories
Full-screen stories like on social media.
Avatars
Profile pictures and groups of people.
Boards
Column boards with cards to move around.
Books
Catalogues and menus to leaf through page by page.

Feedback

Loading
Waits worth watching: skeletons, progress bars, pull to refresh.
Notifications
Alerts that arrive, stack up and go away.
Dialogs
Dialogs and sheets that open over the page.
Tooltips
Tooltips that appear next to a word or a button.
Chat
Conversations with incoming messages and reactions.
Consent
Clear cookie banners and permission requests.

Shop

Timers
Countdowns and stopwatches.
Carts
Shopping carts that show what is inside.
Pricing
Pricing tables with plans and billing periods.
Games
Small games for prizes and discounts.
Tickets
Tickets and passes to tear off or show.

Something missing?

Describe the animation you’re after, or send us a site to take apart. We pick the next ones from here.

What are you asking for?

Both is fine too.

It takes a minute.

What kind? optional

No email, no account: see the privacy policy.

JournalHow it’s made: animated websites we love, taken apart piece by piece, with demos rebuilt from scratch.