Animated Swiper Slider with Connected Effects
✨ It includes:
• Outer slider with autoplay & progress bar
• Inner slider with creative effect
• Synced sliders that move together
• Text reveal animation
• Responsive layout
#SwiperJS #slider
🎬 youtu.be/fVBXiRAwvVY
Card Reveal Animation with GSAP ScrollTrigger ✨
✨ It includes:
• Text fade-out with ScrollTrigger
• Cards are revealed one by one
• Pinned section synced with scroll
• Hover effect using clip-path
• Responsive layout
#GSAP #ScrollTrigger
🎬 youtu.be/s7RFZhrJgxM
Image Transitions Between Sections on Scroll with GSAP
✨ It includes:
• Built with GSAP Flip & ScrollTrigger
• Responsive design with GSAP matchMedia
• Flip animation on desktop & tablet
• Static layout on smaller screens
#GSAP #ScrollTrigger #Flip
🎬 youtu.be/-LE3aUVU608
📌 Horizontal Scroll with Opposite Direction using GSAP ScrollTrigger
✨ It also includes:
• Cloning images dynamically with JavaScript
• Smooth, responsive, and dynamic layout
#GSAP #ScrollTrigger
🎬 youtu.be/BENrlp--vDI
Two-Column Opposite Vertical Scroll Effect with GSAP 🚀
✨ It includes:
• Two image columns move in opposite directions
• Built with ScrollTrigger & ScrollSmoother
• Smooth and responsive dynamic layout
#GSAP #ScrollTrigger #ScrollSmoother
🎬 youtu.be/3ePl0OnmG3Y
Swiper Slider with Parallax & Zoom Effects
✨ It includes:
• Parallax image movement
• Scale (zoom) animations
• Mousewheel control
#swiperjs #slider
🎬 youtu.be/oLUnFyeEsEQ
GSAP ScrollTrigger: Diagonal Image Motion + Marquee Text
✨ It includes:
• Sequential diagonal images on scroll
• Marquee text
• Particle background animation
• Responsive adjustments
#GSAP #ScrollTrigger
🎬 youtu.be/o2XNqzynWbk
Stacked Cards with GSAP ScrollTrigger & ScrollSmoother
✨ It includes:
• Creating stacked cards
• Animate cards with clip-path effects (run once on enter)
• Use ScrollTrigger for scroll animations
• Smooth scrolling with ScrollSmoother
#GSAP
🎬 youtu.be/W7wGSJyIfCM
Swiper slider with a wavy slide transition effect using GSAP and an SVG filter 🌊✨
#swiperjs #gsap #slider
🎬 youtu.be/dP1Xg0q-q5k
Swiper Creative Effect Slider with Cell-Based Animation using Splitting.js
Includes mousewheel control, autoplay and responsive design.
#swiperjs #slider #splittingjs
🎬 youtu.be/Ie3w24fZiBk
Scroll Animation using GSAP ScrollTrigger
This project includes:
- Animate text, images & video on scroll
- Use staggered effects for smooth transitions
- Apply random positions for a dynamic layout
#GSAP
🎬 youtu.be/qj4gRVvxhaY
Animated 3D Slider using Swiper JS and Splitting.js
This project includes:
– 3D coverflow slider with Swiper JS
– Animated text using Splitting.js
– 3D transform with CSS
– Mousewheel navigation support
– AI-generated images made with ChatGPT-4o
🎬 youtu.be/zu9u088xEpk
Stacked Cards with Scroll Animations using GSAP ScrollTrigger
Smooth text & image transitions, and a responsive design — all step by step. #gsap
🎬 youtu.be/lUqQsJyK2jM
I'm so glad to hear that, thank you! ☺️🍀
Un pequeño diorama inspirado en Studio Ghibli (hay unos pequeños easter egg)
Live: ricardoolivaalonso-studioghibli.vercel.app
#html #css #javascript #threejs #blender #diorama #threejsJourney #anime #totoro #studioghibli
Just created a new pen! 🎵
It features a Swiper card slider synced with a dynamic music player. 🎶
You can skip, shuffle, play, or pause songs seamlessly with smooth transitions and interactive controls.
#CodePen #SwiperJS #slider #music-player
@codepen.io : codepen.io/ecemgo/pen/P...
Here are the seven pens:
1️⃣ codepen.io/ecemgo/pen/M...
2️⃣ codepen.io/ecemgo/pen/v...
3️⃣ codepen.io/ecemgo/pen/a...
4️⃣ codepen.io/ecemgo/pen/r...
5️⃣ codepen.io/ecemgo/pen/W...
6️⃣ codepen.io/ecemgo/pen/y...
7️⃣ codepen.io/ecemgo/pen/j...
I appreciate your support! 🤗
CodePen has published the list of the 100 most-hearted demos of 2024! 🎉
👉 codepen.io/2024/popular...
The list includes seven of my pens! 🙌
Thank you to everyone who liked and supported my work! Your encouragement means the world to me! 🙏
The pens are in the next post!
@codepen.io #codepen
thank you 😊
Rotating slider with smooth animations using HTML, CSS & Vanilla JS
It includes hover effects, dynamic transforms, responsive design, and a snowfall background with Particles.js.
#javascript #CSS #particlesjs #backgroundanimation
🎬 YouTube: youtu.be/bkpbaDKmm5Y
This 3D flip card slider is built with Swiper JS. Each slide has front and back views, background blur, gradients, and smooth animations for a dynamic effect.
#swiperjs #slider #javascript #CSS
🎬 YouTube: youtu.be/GfUOvjT-h7U
