Patterns for Animations & Transitions
- Desktop (37)
- Tablet (0)
- Mobile (3)
404. Side Menu from Filter Button
Desktop | Pathfinding | Accessibility | Decision Making | Web | English | Side Panel | Scrollbar | Toggle Field | Button | Image / Illustration | Fixed on Scroll | Filters | Animation
403. File Upload and Background Loader
Desktop | Awareness | Feedback | Onboarding | User Selection | Drag & Drop Gesture | Loader | Animation | Image / Illustration | Empty State | Progress State | Button | File OS | Click Event
402. Window Minimize (Zoom-to-dock Transition)
Desktop | Awareness | Accessibility | Decision Making | Apple OS | EspaƱol | Navbar | Drag & Drop Gesture | Animation | Pagination | Side Panel | Transition | Click Event
400. 3D Button Shadow
Desktop | Awareness | Pathfinding | Button | Animation | Transition
397. Modal with Card Options
Desktop | Decision Making | Feedback | Awareness | Onboarding | Pathfinding | Web | EspaƱol | Modal | Thumbnail | Animation
392. SaaS for Construction Workers
Desktop | Landing Page | Web | EspaƱol | Drag & Drop Gesture | Carrousel | Image / Illustration | Animation | Navbar | Hypertext Links | Fixed on Scroll
382. Interactive Background Animation
Desktop | Feedback | Awareness | Onboarding | Landing Page | Web | English | Animation | Scrollbar | QR
378. Modal Blackout with Animation
Desktop | Decision Making | Awareness | Onboarding | Web | EspaƱol | Modal | Hypertext Links | Animation
362. Slack - Side Menu Toggle
Desktop | Pathfinding | Web | EspaƱol | Navbar | Side Panel | Transition
353. Population Pyramid - Visualizations with live filters
Desktop | Pathfinding | Awareness | Decision Making | Web | EspaƱol | Graph | Filters | Dropdown Menu | Transition
362. Modal Blackout with Form & Animations
Desktop | Accessibility | Apple OS | EspaƱol | Modal | Text Input | Transition
357. Modal with Steps (No blackout)
Desktop | Pathfinding | Awareness | Decision Making | Web | English | Modal | Animation | Image / Illustration
340. Asana - Zoom/Magnifier Over Image
Desktop | Accessibility | Pathfinding | Web | English | Animation
341. Image Grid Customization Sliders
Desktop | Accessibility | Pathfinding | Web | English | Animation | Drag & Drop Gesture | Range Field
339. Asana - Platform Onboarding Simulator
Desktop | Decision Making | Awareness | Pathfinding | Web | English | Text Input | Pagination | Animation | Hypertext Links
328. Apple Safari - Zoom In/Out Transition
Desktop | Pathfinding | Apple OS | EspaƱol | Transition | Tabs | Thumbnail | Pinch Gesture
314. Snapchat - Snap Camera
Desktop | Landing Page | Web | English | Scrollbar | Navbar | Fixed on Scroll | Button | Animation | Video
318. Instagram - Animated Illustration with Menu
Desktop | Pathfinding | Awareness | Web | English | Animation | Pagination | Carrousel
309. Instagram - Brand Gradient
Desktop | Landing Page | Pathfinding | https://about.instagram.com/brand/gradient | Web | English | Animation | Scrollbar | Photo
308. MercadoLibre - Hero Slider
Desktop | Pathfinding | Awareness | Web | EspaƱol | Carrousel | Drag & Drop Gesture | Transition | Photo
303. Background Animation
Desktop | Onboarding | Awareness | Web | English | Animation | Password Input
302. Theme Switcher in Side-drawer
Desktop | Accessibility | Pathfinding | Web | EspaƱol | Side Panel | Transition | Image / Illustration | Click Event | Google
300. Sound Bars Graph
Desktop | Awareness | Pathfinding | Apple OS | EspaƱol | Sound Bar | Transition | Click Event | Dropdown Menu | WhatsApp
293. Collapsable Sidebar Menu
Desktop | Awareness | Pathfinding | Accessibility | Web | English | EspaƱol | Side Panel | Transition | Click Event | Navbar | Google | Gmail
268. GIPHY - Alert on Drag & Drop
Desktop | Awareness | Pathfinding | Web | Apple OS | English | Drag & Drop Gesture | Modal | Hypertext Links | Animation | Image / Illustration | GIPHY
274. Interactive Background Animation
Desktop | Pathfinding | Awareness | Web | English | Animation | Loader | Drag & Drop Gesture | GitHub
259. Squarespace - Multi-depth Sidebar Navigation
Desktop | Pathfinding | Web | English | Side Panel | Hypertext Links | Animation | Squarespace
258. Squarespace - Adaptable Viewport Size
Desktop | Accessibility | Pathfinding | Web | English | Side Panel | Hypertext Links | Animation | Squarespace
243. GIPHY - Trim Video Slicers
Desktop | Decision Making | Awareness | Accessibility | Web | English | Animation | User Selection | Drag & Drop Gesture | GIPHY
251. Progressive Layout Loader
Desktop | Pathfinding | Awareness | Web | English | Tooltip | Loader | Animation | Google | Google Analytics
235. Background Animation on Hover
Desktop | Decision Making | Awareness | Pathfinding | Web | EspaƱol | Animation | Hypertext Links | Disney
228. Notification Bell Status
Desktop | Accessibility | Web | English | Hypertext Links | Dropdown Menu | Empty State | User Selection | Avatar | Animation | YouTube | Google
212. Automatic Background Animation
Desktop | Decision Making | Awareness | Web | English | Animation | Loader | Hypertext Links
130. Animated Email Page
Desktop | Awareness | Decision Making | Email | English | Animation | Hypertext Links | Google | Gmail
91. Bubble Status Reading
Desktop | Pathfinding | Awareness | Appreciation | Web | English | Infinite Scroll | Pagination | Animation | Fixed on Scroll | Progress State | Empty State | TechCrunch
166. Confetti Explosion
Desktop | Appreciation | Decision Making | Web | English | Modal | Hypertext Links | Animation | Image / Illustration