Patterns for Animations & Transitions
Pre-built or interactive animations are used to reinforce and enhance the user experience.
397. Modal with Card Options
397. Modal with Card Options
Decision MakingFeedbackAwarenessOnboardingPathfinding
392. SaaS for Construction Workers
392. SaaS for Construction Workers
Landing Page
382. Interactive Background Animation
382. Interactive Background Animation
FeedbackAwarenessOnboardingLanding Page
378. Modal Blackout with Animation
378. Modal Blackout with Animation
Decision MakingAwarenessOnboarding
362. Slack - Side Menu Toggle
362. Slack - Side Menu Toggle
Pathfinding
353. Population Pyramid - Visualizations with live filters
353. Population Pyramid - Visualizations with live filters
PathfindingAwarenessDecision Making
362. Modal Blackout with Form & Animations
362. Modal Blackout with Form & Animations
Accessibility
357. Modal with Steps (No blackout)
357. Modal with Steps (No blackout)
PathfindingAwarenessDecision Making
340. Asana - Zoom/Magnifier Over Image
340. Asana - Zoom/Magnifier Over Image
AccessibilityPathfinding
341. Image Grid Customization Sliders
341. Image Grid Customization Sliders
AccessibilityPathfinding
339. Asana - Platform Onboarding Simulator
339. Asana - Platform Onboarding Simulator
Decision MakingAwarenessPathfinding
328. Apple Safari - Zoom In/Out Transition
328. Apple Safari - Zoom In/Out Transition
Pathfinding
314. Snapchat - Snap Camera
314. Snapchat - Snap Camera
Landing Page
312. Instagram - Animated Illustration with Menu
312. Instagram - Animated Illustration with Menu
PathfindingAwareness
309. Instagram - Brand Gradient
309. Instagram - Brand Gradient
Landing PagePathfinding
308. MercadoLibre - Hero Slider
308. MercadoLibre - Hero Slider
PathfindingAwareness
303. Background Animation
303. Background Animation
OnboardingAwareness
302. Theme Switcher in Side-drawer
302. Theme Switcher in Side-drawer
AccessibilityPathfinding
300. Sound Bars Graph
300. Sound Bars Graph
AwarenessPathfinding
293. Collapsable Sidebar Menu
293. Collapsable Sidebar Menu
AwarenessPathfindingAccessibility
268. GIPHY - Alert on Drag & Drop
268. GIPHY - Alert on Drag & Drop
AwarenessPathfinding
274. Interactive Background Animation
274. Interactive Background Animation
PathfindingAwareness
259. Squarespace - Multi-depth Sidebar Navigation
259. Squarespace - Multi-depth Sidebar Navigation
Pathfinding
258. Squarespace - Adaptable Viewport Size
258. Squarespace - Adaptable Viewport Size
AccessibilityPathfinding
243. GIPHY - Trim Video Slicers
243. GIPHY - Trim Video Slicers
Decision MakingAwarenessAccessibility
251. Progressive Layout Loader
251. Progressive Layout Loader
PathfindingAwareness
235. Background Animation on Hover
235. Background Animation on Hover
Decision MakingAwarenessPathfinding
228. Notification Bell Status
228. Notification Bell Status
Accessibility
212. Automatic Background Animation 
212. Automatic Background Animation
Decision MakingAwareness
130. Animated Email Page
130. Animated Email Page
AwarenessDecision Making
91. Bubble Status Reading 
91. Bubble Status Reading
PathfindingAwarenessAppreciation
166. Confetti Explosion
166. Confetti Explosion
AppreciationDecision Making