Horizontal Scroll Section
Bootstrap 5 section that pins to the viewport and slides photo cards sideways as the page scrolls down, with a counter and progress bar.
Tag: animation
Components tagged with "animation".
43 component(s)
Sliding Login and Register Form
Pure CSS sign in and sign up forms with a gradient overlay panel that slides between them, plus a mobile switcher and client-side validation.
Stats with Circular Progress Rings
Dark stats section with four SVG circular progress rings that fill and count up to their percentage when scrolled into view.
Image Reveal Cursor on Hover
Tailwind CSS project list where hovering a row reveals a photo that follows the cursor with smooth easing and tilt, plus keyboard and touch fallbacks.
Pulse Ring Loader
Pure CSS loading animation with concentric rings expanding from a beating dot, in default, large and inline sizes with custom properties and reduced motion.
Animated Blob Background
Pure CSS animated background with blurred, morphing color blobs drifting behind a hero headline, with a pause button and reduced-motion support.
Chat Bubbles with Typing Indicator
Pure CSS chat window with grouped incoming and outgoing message bubbles, an animated three-dot typing indicator and a working composer.
Minimal Contact Form with Animated Underline Inputs
Pure CSS minimal contact form with floating labels, underlines that sweep in on focus, a character counter and accessible inline validation.
Custom Cursor Follower
Smooth custom cursor with a dot and an eased ring that grows on links, shows a label over cards and inverts the headline, in CSS and vanilla JS.
Link Underline Effects
Six animated link underline styles in pure CSS (slide, center, highlighter, ink fill, line swap and wave) that also work on links that wrap.
Glitch Text Effect
Pure CSS glitch heading with sliced cyan and magenta copies, CRT scanlines, and subtle, hover-only and acid palette variants.
Shimmer Skeleton
Dark pure CSS skeleton screen for a profile card, article and comment list, with one synchronized shimmer sweep across every placeholder.
Bouncing Dots Loader
Pure CSS three-dot loaders: bounce, pulse with rings, chat typing indicator and a button loading state, all driven by custom properties.
Animated To-Do Checklist
Dark to-do checklist in pure CSS with self-drawing check marks, an animated strike-through, a progress bar and vanilla JS to add and clear tasks.
Inline Newsletter Form
Compact pure CSS newsletter signup with a pill email field, an animated subscribe button and loading, error and success states.
Scroll Reveal Animations
Elements fade, slide, zoom or flip into view on scroll using IntersectionObserver and data-sr attributes, with stagger delays and reduced-motion support.
Animated Gradient Background
Pure CSS hero section with a slowly shifting multi-color gradient, drifting blurred blobs and a grain overlay, customizable through CSS variables.
Animated Gradient Text
Pure CSS animated gradient text for headings using background-clip, with four palettes, a shine sweep variant, a CSS-only pause switch and a fallback color.
Typing Text Effect
Pure CSS typewriter effect with a blinking caret, using steps() and ch units on a monospace headline and a retro terminal window with replay.
Live Analog Clock
Live analog clock with CSS-rotated hands, conic-gradient ticks, a digital readout and optional time zone support, in pure CSS and vanilla JS.
Maintenance Page with Animated Gears
Dark full-page scheduled maintenance notice with interlocking SVG gears, a live countdown, progress bar and task checklist in pure CSS and vanilla JS.
Pricing Cards with Hover
Three pure CSS pricing cards with hover lift and a featured plan that has a spinning conic-gradient border, glow and Most popular badge.
Circular Progress Indicator
SVG ring progress indicators with an animated fill, count-up percentage, glow colors and a slider-driven demo ring with color thresholds.
Native dialog Modal
Accessible modal built on the native HTML dialog element with @starting-style enter and exit animation, blurred backdrop, mobile bottom sheet and an invite form.