Home
PATTTTERNS - An open catalog of design patterns | Product Hunt

Made with šŸ’™ by Pablo Armenv2.1.10

Home
/Components
/Animations & Transitions

Patterns for Animations & Transitions

Pre-built or interactive animations are used to reinforce and enhance the user experience.
Ā 
Recommendation (Ad)
https://uink.digital
Ā 
  • Desktop (33)
  • Tablet (0)
  • Mobile (3)
400. 3D Button Shadow

400. 3D Button Shadow

Desktop, Awareness, Pathfinding, Button, Animation, Transition

Open pattern
397. Modal with Card Options

397. Modal with Card Options

Desktop, Decision Making, Feedback, Awareness, Onboarding, Pathfinding, Web, EspaƱol, Modal, Thumbnail, Animation

Open pattern
392. SaaS for Construction Workers

392. SaaS for Construction Workers

Desktop, Landing Page, Web, EspaƱol, Drag & Drop Gesture, Carrousel, Image / Illustration, Animation, Navbar, Hypertext Links, Fixed on Scroll

Open pattern
382. Interactive Background Animation

382. Interactive Background Animation

Desktop, Feedback, Awareness, Onboarding, Landing Page, Web, English, Animation, Scrollbar, QR

Open pattern
378. Modal Blackout with Animation

378. Modal Blackout with Animation

Desktop, Decision Making, Awareness, Onboarding, Web, EspaƱol, Modal, Hypertext Links, Animation

Open pattern
362. Slack - Side Menu Toggle

362. Slack - Side Menu Toggle

Desktop, Pathfinding, Web, EspaƱol, Navbar, Side Panel, Transition

Open pattern
353. Population Pyramid - Visualizations with live filters

353. Population Pyramid - Visualizations with live filters

Desktop, Pathfinding, Awareness, Decision Making, Web, EspaƱol, Graph, Filters, Dropdown Menu, Transition

Open pattern
362. Modal Blackout with Form & Animations

362. Modal Blackout with Form & Animations

Desktop, Accessibility, Apple OS, EspaƱol, Modal, Text Input, Transition

Open pattern
357. Modal with Steps (No blackout)

357. Modal with Steps (No blackout)

Desktop, Pathfinding, Awareness, Decision Making, Web, English, Modal, Animation, Image / Illustration

Open pattern
340. Asana - Zoom/Magnifier Over Image

340. Asana - Zoom/Magnifier Over Image

Desktop, Accessibility, Pathfinding, Web, English, Animation

Open pattern
341. Image Grid Customization Sliders

341. Image Grid Customization Sliders

Desktop, Accessibility, Pathfinding, Web, English, Animation, Drag & Drop Gesture, Range Field

Open pattern
339. Asana - Platform Onboarding Simulator

339. Asana - Platform Onboarding Simulator

Desktop, Decision Making, Awareness, Pathfinding, Web, English, Text Input, Pagination, Animation, Hypertext Links

Open pattern
328. Apple Safari - Zoom In/Out Transition

328. Apple Safari - Zoom In/Out Transition

Desktop, Pathfinding, Apple OS, EspaƱol, Transition, Tabs, Thumbnail, Pinch Gesture

Open pattern
314. Snapchat - Snap Camera

314. Snapchat - Snap Camera

Desktop, Landing Page, Web, English, Scrollbar, Navbar, Fixed on Scroll, Button, Animation, Video

Open pattern
318. Instagram - Animated Illustration with Menu

318. Instagram - Animated Illustration with Menu

Desktop, Pathfinding, Awareness, Web, English, Animation, Pagination, Carrousel

Open pattern
309. Instagram - Brand Gradient

309. Instagram - Brand Gradient

Desktop, Landing Page, Pathfinding, https://about.instagram.com/brand/gradient, Web, English, Animation, Scrollbar, Photo

Open pattern
308. MercadoLibre - Hero Slider

308. MercadoLibre - Hero Slider

Desktop, Pathfinding, Awareness, Web, EspaƱol, Carrousel, Drag & Drop Gesture, Transition, Photo

Open pattern
303. Background Animation

303. Background Animation

Desktop, Onboarding, Awareness, Web, English, Animation, Password Input

Open pattern
302. Theme Switcher in Side-drawer

302. Theme Switcher in Side-drawer

Desktop, Accessibility, Pathfinding, Web, EspaƱol, Side Panel, Transition, Image / Illustration, Click Event, Google

Open pattern
300. Sound Bars Graph

300. Sound Bars Graph

Desktop, Awareness, Pathfinding, Apple OS, EspaƱol, Sound Bar, Transition, Click Event, Dropdown Menu, WhatsApp

Open pattern
293. Collapsable Sidebar Menu

293. Collapsable Sidebar Menu

Desktop, Awareness, Pathfinding, Accessibility, Web, English, EspaƱol, Side Panel, Transition, Click Event, Navbar, Google, Gmail

Open pattern
268. GIPHY - Alert on Drag & Drop

268. GIPHY - Alert on Drag & Drop

Desktop, Awareness, Pathfinding, Web, Apple OS, English, Drag & Drop Gesture, Modal, Hypertext Links, Animation, Image / Illustration, GIPHY

Open pattern
274. Interactive Background Animation

274. Interactive Background Animation

Desktop, Pathfinding, Awareness, Web, English, Animation, Loader, Drag & Drop Gesture, GitHub

Open pattern
259. Squarespace - Multi-depth Sidebar Navigation

259. Squarespace - Multi-depth Sidebar Navigation

Desktop, Pathfinding, Web, English, Side Panel, Hypertext Links, Animation, Squarespace

Open pattern
258. Squarespace - Adaptable Viewport Size

258. Squarespace - Adaptable Viewport Size

Desktop, Accessibility, Pathfinding, Web, English, Side Panel, Hypertext Links, Animation, Squarespace

Open pattern
243. GIPHY - Trim Video Slicers

243. GIPHY - Trim Video Slicers

Desktop, Decision Making, Awareness, Accessibility, Web, English, Animation, User Selection, Drag & Drop Gesture, GIPHY

Open pattern
251. Progressive Layout Loader

251. Progressive Layout Loader

Desktop, Pathfinding, Awareness, Web, English, Tooltip, Loader, Animation, Google, Google Analytics

Open pattern
235. Background Animation on Hover

235. Background Animation on Hover

Desktop, Decision Making, Awareness, Pathfinding, Web, EspaƱol, Animation, Hypertext Links, Disney

Open pattern
228. Notification Bell Status

228. Notification Bell Status

Desktop, Accessibility, Web, English, Hypertext Links, Dropdown Menu, Empty State, User Selection, Avatar, Animation, YouTube, Google

Open pattern
212. Automatic Background Animation

212. Automatic Background Animation

Desktop, Decision Making, Awareness, Web, English, Animation, Loader, Hypertext Links

Open pattern
130. Animated Email Page

130. Animated Email Page

Desktop, Awareness, Decision Making, Email, English, Animation, Hypertext Links, Google, Gmail

Open pattern
91. Bubble Status Reading

91. Bubble Status Reading

Desktop, Pathfinding, Awareness, Appreciation, Web, English, Infinite Scroll, Pagination, Animation, Fixed on Scroll, Progress State, Empty State, TechCrunch

Open pattern
166. Confetti Explosion

166. Confetti Explosion

Desktop, Appreciation, Decision Making, Web, English, Modal, Hypertext Links, Animation, Image / Illustration

Open pattern
Ā