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

Made with šŸ’™ by Pablo Armenv2.1.13

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 (47)
  • Tablet (2)
  • Mobile (6)
406. Fixed Bottom-Right Chat Bubble

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)

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

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

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

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

400. 3D Button Shadow

Desktop, Awareness, Pathfinding, Button, Animation, Transition

397. Modal w/ Card Options

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

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

382. Interactive Background Animation

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

378. Modal Blackout w/ Animation

378. Modal Blackout w/ Animation

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

375. Toggle/Show Sidebar Menu

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

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

362. Modal Blackout w/ Form & Animations

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

357. Modal w/ Steps & Animation (No blackout)

357. Modal w/ Steps & Animation (No blackout)

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

340. Asana - Zoom/Magnifier Over Image

340. Asana - Zoom/Magnifier Over Image

Desktop, Accessibility, Pathfinding, Web, English, Animation

341. Image Grid Customization Sliders

341. Image Grid Customization Sliders

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

339. Asana - Platform Onboarding Simulator

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

336. Transition: Zoom-In/Out for Browser Windows

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

314. Snapchat - Snap Camera

314. Snapchat - Snap Camera

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

318. Instagram - Animated Illustration with Menu

318. Instagram - Animated Illustration with Menu

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

309. Instagram - Brand Gradient

309. Instagram - Brand Gradient

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

308. MercadoLibre - Hero Slider

308. MercadoLibre - Hero Slider

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

303.  Background Animation (on Load)

303. Background Animation (on Load)

Desktop, Onboarding, Awareness, Apple OS, English, Animation, Password Input

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

300. Sound Bars Graph

300. Sound Bars Graph

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

293. Collapsable Sidebar Menu

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

286. Background Animation on Scroll

Desktop, Awareness, Pathfinding, Web, EspaƱol, Animation, Transition, Image / Illustration, Fixed on Scroll, Apple

279. Collapsable Layout Sidebars

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

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

274. Interactive Background Animation

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

No preview

264. Interactive Background Animation

Desktop, Pathfinding, Apple OS, English, Animation, Click Event, Image / Illustration, Vectors, Figma

259. Multi-depth Sidebar Navigation

259. Multi-depth Sidebar Navigation

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

258. Squarespace - Adaptable Viewport Size

258. Squarespace - Adaptable Viewport Size

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

243. GIPHY - Trim Video Slicers

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)

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

251. Progressive Layout Loader

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

235. Background Animation (on Mouse Hover)

235. Background Animation (on Mouse Hover)

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

228. Notification Bell Status

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)

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

No preview

217. Vertical Icon Menu (duplicated)

Desktop, Pathfinding, Web, English, Side Panel, Transition, Image / Illustration, Tooltip, Hover Event, Intercom

No preview

212. Automatic Background Animation (on Load)

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

130. Animated Email Page

130. Animated Email Page

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

138. Widget Customization Sidebar (2-pane)

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

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

166. Generated Effect: Confetti Explosion

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

23. Floating Voice Widget with Actions

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

139. Transition: Zoom-Out on Hover

Desktop, Pathfinding, Web, English, Transition, Hover Event, Image / Illustration

Ā