Animations & Transitions | Components

Patterns for Animations & Transitions

Pre-built or interactive animations are used to reinforce and enhance the user experience.

Recommendation (Ad)

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

No preview

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

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

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