Open-Awesome
CategoriesAlternativesStacksSelf-HostedExplore
Open-Awesome

© 2026 Open-Awesome. Curated for the developer elite.

TermsPrivacyAboutGitHubRSS
  1. Home
  2. Categories
  3. Front-End Development
  4. Motion UI Design

Motion UI Design

The "Awesome Motion UI Design" project is a curated collection of resources dedicated to the principles and practices of motion design in user interfaces. Motion UI design refers to the use of animation and transitions to enhance the user experience and guide interactions within digital products. This list includes tools, libraries, tutorials, case studies, and inspiration for creating engaging motion effects. Designers, developers, and UX professionals will find valuable insights and resources to help them incorporate effective motion design into their projects. Explore this collection to elevate your UI design with compelling motion techniques that captivate users and improve usability.

motion-designui-animationuser-experienceinteraction-designdesign-toolsfrontend-developmentweb-design
RSSView on GitHub
874 stars75 forks0 contributorsUpdated
Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a projectStar on GitHub

Related Awesome Lists

💚
Vue.js

The "Awesome Vue.js" project is a curated collection of resources aimed at supporting developers using Vue.js, a progressive JavaScript framework for building user interfaces. This list encompasses a variety of resources including libraries, tools, plugins, tutorials, and community contributions that enhance the development experience. Whether you are a beginner looking to learn the basics or an experienced developer seeking advanced techniques, this list provides invaluable resources to help you create dynamic and responsive web applications. Dive into this collection to discover tools and insights that will elevate your Vue.js projects to the next level.

73.6k
⚛️
React

The "Awesome React" project is a curated resource list designed to support developers using React, a popular JavaScript library for building user interfaces. This list includes a wide range of resources such as libraries, tools, tutorials, components, and community-driven content that enhance the development experience. Whether you are a beginner looking to learn the basics or an experienced developer seeking advanced techniques, this collection provides valuable insights and tools to streamline your workflow. Dive into the world of React and discover the resources that will help you create dynamic and responsive user interfaces with ease.

72.7k
📦
Android UI

The "Awesome Android UI" project is a curated resource list dedicated to enhancing user interface design for Android applications. Android UI refers to the visual elements and interactive components that make up the user experience on Android devices. This list includes a variety of resources such as UI libraries, design tools, components, animations, and tutorials that cater to both novice and experienced developers. By providing a comprehensive selection of resources, this project empowers developers to create visually appealing and user-friendly applications. Whether you're looking for inspiration or practical tools to streamline your design process, you'll find valuable assets to elevate your Android UI development.

55.8k
🌊
Tailwind CSS

The "Awesome Tailwind CSS" project is a comprehensive repository of resources dedicated to using Tailwind CSS, a utility-first CSS framework for building custom user interfaces rapidly. This curated list includes official documentation, IDE extensions, tools, UI libraries, components, and plugins, providing valuable aids for developers of all skill levels. With resources for design inspiration and development support, the project fosters a vibrant community around Tailwind CSS. Whether you’re searching for components or enhancing your workflow, this collection serves as a go-to guide for maximizing the potential of Tailwind CSS.

15.0k

Table of Contents

14 sections · 146 projects

Sites

14 projects
Tympanus codrops

tympanus.net
Codyhouse

codyhouse.co
Dribbble

dribbble.com
Codepen

codepen.io
Give ’n’ Go

give-n-go.co
capptivate.co

capptivate.co
Awwwards

awwwards.com
cssanimation.rocks

cssanimation.rocks
michaelvillar.com

michaelvillar.com
hakim.se

hakim.se
ui-animations.tumblr.com

ui-animations.tumblr.com
hoverstat.es

hoverstat.es
appealing.

app-ealing.com
UI Movement

uimovement.com

Pinterest boards

5 projects
Gestures, transitions, animations

pinterest.com
Web UI animation

pinterest.com
UX/UI interaction & Motion design

pinterest.com
Animated UX/UI

pinterest.com
Motion UI

pinterest.com

Processing and other weird, but funny stuff

5 projects
Bees & bombs

beesandbombs.tumblr.com
PATAKK

patakk.tumblr.com
dvdp

dvdp.tumblr.com
bigblueboo

bigblueboo.tumblr.com
Misha Kvakin

misha-kvakin.tumblr.com

Articles

12 projects
How fast should your UI animations be?

valhead.com
Getting started with UI motion design

medium.com
A Designer’s Guide to Perceived Performance

medium.com
How to Use Animation to Improve UX

uxplanet.org
How To Use Animations and Motion in Web Design

blog.prototypr.io
UI Animation: Eye-Pleasing, Problem-Solving

uxplanet.org
UI Motion Design — The Compendium

blog.prototypr.io
Creating Usability with Motion: The UX in Motion Manifesto

medium.com
Jedi Principles of UI Animation

medium.com
Micro Interaction; great experience for user engagement

uxplanet.org
UI Animation. Microinteraction for Macroresult

uxplanet.org
The Principles of UX Choreography

medium.freecodecamp.org

Video, gif, presentation

15 projects
Adobe After Effects

adobe.com
Using After Effects for UI Animation Prototypes

youtube.com
UI Animation tutorials

uxinmotion.net
How to Use After Effects for Web Animation Prototypes

webdesign.tutsplus.com
MtMograph summits

mtmograph.com
30 days of AE

schoolofmotion.com
After Effects CC Essential Training on Lynda

lynda.com
BodyMovinBodyMovin

Render Adobe After Effects animations natively on Web, Android, iOS, and React Native using JSON exports.

#ui-animations#after-effects#animation
Stars32,016
Forks2,929
Last commit10 months ago
Squall

marcuseckert.com
Apple Motion

apple.com
Adobe Photoshop

adobe.com
9 Photoshop UI Animation Tutorials

bashooka.com
Adobe Flash

adobe.com
Apple Keynote

apple.com
How To Prototype UI Animations In Keynote

smashingmagazine.com