A cinematic glassmorphism slider powered by GSAP + jQuery, featuring smooth full-height image fades, elegant frosted glass UI, and buttery 60fps transitions — built with the latest CSS (backdrop-filter, custom properties, :has(), clamp()).
✨ FEATURES
• Full-height crossfade transitions (GSAP timeline)
• Frosted glass card with backdrop-filter blur + saturation
• Auto-play with GSAP timeline + pause on hover
• Keyboard (← →), swipe, and dot navigation
• Smooth gradient overlays & cinematic vignette
• jQuery-powered DOM control + GSAP for animation
• Fully responsive (mobile → 4K) using clamp() & CSS Grid
• Accessible: ARIA labels, focus states, prefers-reduced-motion
• 60fps GPU-accelerated (transform + opacity only)
• Modern CSS: :has(), custom properties, color-mix(), aspect-ratio
🎨 PERFECT FOR
Hero sections, portfolios, landing pages, product showcases, photography sites, agency sites, and modern web apps.
🛠 TECH STACK
HTML5 • CSS3 (backdrop-filter, :has, clamp, color-mix) • GSAP 3 • jQuery 3.7 • CSS Grid • Custom Properties
🎛 CUSTOMIZE
All timing, easing, blur intensity, and colors are exposed as CSS variables + a GSAP config object at the top of the JS. Change images in one array.
💡 WHY GSAP?
GSAP gives frame-perfect timeline control, hardware-accelerated transforms, and cross-browser consistency that pure CSS can't match for chained fade sequences — while jQuery keeps the markup logic simple and readable.
If you enjoyed this, hit ❤️ and follow for more glassmorphism + GSAP experiments!
Top comments (0)