Animated Slider with Ripple Effect using Swiper & GSAP
This tutorial shows how to create an animated slider with ripple effects using Swiper JS and GSAP. It features smooth fade transitions, a circular mask effect, and layered animations to enhance visual interaction. The slider is built with HTML, CSS, and Javascript, utilizing Swiper JS for slide navigation and GSAP for animations.
You will see how to:
Build a Swiper JS slider with multiple slides and navigation buttons.
Style the slides with CSS Grid, SVG masks, and media queries for responsiveness.
Animate image layers with GSAP, applying staggered scaling effects and smooth transitions.
Improve user experience by disabling navigation buttons until animations are complete.
📂 Resources:
1) Swiper JS: https://swiperjs.com/get-started
2) GSAP Installation: https://gsap.com/docs/v3/Installation/
3) SVG file (mask-image) : https://github.com/ecemgo/assets/blob...
⭐Lists:
GSAP: • GSAP
Swiper JS: • Swiper JS
Slider with Vanilla Javascript & CSS: • Slider with Vanilla Javascript & CSS
Background Animation: • Background Animation
CSS Hover Effect: • CSS Hover Effect
👩💻 My Social Profiles:
X: https://x.com/ecemgo
Codepen: https://codepen.io/ecemgo
GitHub: https://github.com/ecemgo
TikTok: / ecemgo
🕔 Timestamps:
0:00 – Intro
0:20 – HTML: Setting up the Swiper slider
1:44 – Swiper JS: Slider features and navigation
2:20 – CSS: Layout, masks and responsive design
6:40 – GSAP: Animation for the ripple effect
8:05 – Customizing navigation & Improving user interaction