Patterns for Animations & Transitions
- Desktop (47)
- Tablet (2)
- Mobile (6)
406. Fixed Bottom-Right Chat Bubble
Desktop | Feedback | Pathfinding | Onboarding | Web | English | Chat | Side Panel | Accordion | Fixed on Scroll | Notification Badge | Progress State | Live State | Transition | Scrollbar | Text Input
405. Ferrari Luce Website (by LoveFrom)
Desktop | Landing Page | Web | Navbar | Footer | Hypertext Links | Animation | Carrousel | Fixed on Scroll | Image / Illustration | Thumbnail | Button | Transition | Video | Anchor Scroll | Scrollbar
404. Sidebar Backdrop Menu
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 | Web | English | User Selection | Drag & Drop Gesture | Loader | Animation | Image / Illustration | Empty State | Progress State | Button | File OS | Click Event
402. Transition: Zoom-to-Dock for Minimize
Desktop | Awareness | Accessibility | Decision Making | Apple OS | EspaƱol | Navbar | Drag & Drop Gesture | Animation | Pagination | Side Panel | Transition | Click Event | Browser Window
400. 3D Button Shadow
Desktop | Awareness | Pathfinding | Button | Animation | Transition
397. Modal w/ Card Options
Desktop | Decision Making | Feedback | Awareness | Onboarding | Pathfinding | Web | EspaƱol | Modal | Thumbnail | Animation | Close Overlay | Cards | Dim Overlay
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 w/ Animation
Desktop | Decision Making | Awareness | Onboarding | Web | EspaƱol | Modal | Hypertext Links | Animation
375. Toggle/Show Sidebar Menu
Desktop | Pathfinding | Web | EspaƱol | Navbar | Side Panel | Transition | Hover Event | Click Event | Avatar | List Items | Tabs
353. Population Pyramid - Visualizations with live filters
Desktop | Pathfinding | Awareness | Decision Making | Web | EspaƱol | Graph | Filters | Dropdown Menu | Transition
362. Modal Blackout w/ Form & Animations
Desktop | Accessibility | Apple OS | EspaƱol | Modal | Text Input | Transition
357. Modal w/ Steps & Animation (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
336. Transition: Zoom-In/Out for Browser Windows
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 (on Load)
Desktop | Onboarding | Awareness | Apple OS | 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
286. Background Animation on Scroll
Desktop | Awareness | Pathfinding | Web | EspaƱol | Animation | Transition | Image / Illustration | Fixed on Scroll | Apple
279. Collapsable Layout Sidebars
Desktop | Pathfinding | Accessibility | Apple OS | macOS | EspaƱol | Toolbar | Navbar | Side Panel | Click Event | Transition | Avatar | Chat | Drag & Drop Gesture | List Items | Button | Close Overlay | Slack
268. Drag & Drop to Upload File
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
264. Interactive Background Animation
Desktop | Pathfinding | Apple OS | English | Animation | Click Event | Image / Illustration | Vectors | Figma
259. 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
254. Toggle/Hide Sidebar Menu (Mouse)
Desktop | Pathfinding | Accessibility | Web | English | EspaƱol | Toggle Field | Active State | Side Panel | Transition | Click Event | Notion
251. Progressive Layout Loader
Desktop | Pathfinding | Awareness | Web | English | Tooltip | Loader | Animation | Google | Google Analytics
235. Background Animation (on Mouse 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
227. Secondary Sidebar Toggle (Mouse)
Desktop | Tablet | Accessibility | Pathfinding | Apple OS | EspaƱol | Click Event | Transition | Side Panel | Toggle Field | Active State | Apple | Apple Notes
217. Vertical Icon Menu (duplicated)
Desktop | Pathfinding | Web | English | Side Panel | Transition | Image / Illustration | Tooltip | Hover Event | Intercom
212. Automatic Background Animation (on Load)
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
138. Widget Customization Sidebar (2-pane)
Desktop | Accessibility | Apple OS | macOS | English | Side Panel | Cards | Long Click Event | Drag & Drop Gesture | Close Overlay | Tabs | Transition | Toolbar | Apple
91. Bubble Status Reading
Desktop | Pathfinding | Awareness | Appreciation | Web | English | Infinite Scroll | Pagination | Animation | Fixed on Scroll | Progress State | Empty State | TechCrunch
166. Generated Effect: Confetti Explosion
Desktop | Appreciation | Decision Making | Web | English | Modal | Hypertext Links | Animation | Image / Illustration
23. Floating Voice Widget with Actions
Desktop | Awareness | Apple OS | macOS | English | Fixed on Scroll | Button | Animation | Avatar | Sound Bar | Color Marker | Apple
139. Transition: Zoom-Out on Hover
Desktop | Pathfinding | Web | English | Transition | Hover Event | Image / Illustration