Ecem Gokdogan
@ecemgo.bsky.social
creating content on
youtube.com/@ecemgokdogan
codepen.io/ecemgo
youtube.com/@ecemgokdogan
codepen.io/ecemgo
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
✨ 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
October 7, 2025 at 4:47 PM
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
✨ 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
✨ It also includes:
• Cloning images dynamically with JavaScript
• Smooth, responsive, and dynamic layout
#GSAP #ScrollTrigger
🎬 youtu.be/BENrlp--vDI
September 22, 2025 at 7:46 PM
📌 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
✨ 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
✨ It includes:
• Two image columns move in opposite directions
• Built with ScrollTrigger & ScrollSmoother
• Smooth and responsive dynamic layout
#GSAP #ScrollTrigger #ScrollSmoother
🎬 youtu.be/3ePl0OnmG3Y
September 9, 2025 at 6:36 PM
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
✨ 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
✨ It includes:
• Parallax image movement
• Scale (zoom) animations
• Mousewheel control
#swiperjs #slider
🎬 youtu.be/oLUnFyeEsEQ
August 19, 2025 at 8:46 PM
Swiper Slider with Parallax & Zoom Effects
✨ It includes:
• Parallax image movement
• Scale (zoom) animations
• Mousewheel control
#swiperjs #slider
🎬 youtu.be/oLUnFyeEsEQ
✨ 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
✨ It includes:
• Sequential diagonal images on scroll
• Marquee text
• Particle background animation
• Responsive adjustments
#GSAP #ScrollTrigger
🎬 youtu.be/o2XNqzynWbk
August 14, 2025 at 9:54 AM
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
✨ 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
✨ 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
July 14, 2025 at 5:39 PM
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
✨ 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
#swiperjs #gsap #slider
🎬 youtu.be/dP1Xg0q-q5k
July 10, 2025 at 4:19 PM
Swiper slider with a wavy slide transition effect using GSAP and an SVG filter 🌊✨
#swiperjs #gsap #slider
🎬 youtu.be/dP1Xg0q-q5k
#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
Includes mousewheel control, autoplay and responsive design.
#swiperjs #slider #splittingjs
🎬 youtu.be/Ie3w24fZiBk
June 26, 2025 at 2:16 PM
Swiper Creative Effect Slider with Cell-Based Animation using Splitting.js
Includes mousewheel control, autoplay and responsive design.
#swiperjs #slider #splittingjs
🎬 youtu.be/Ie3w24fZiBk
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
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
June 6, 2025 at 1:25 PM
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
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
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
April 30, 2025 at 5:15 PM
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
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
Smooth text & image transitions, and a responsive design — all step by step. #gsap
🎬 youtu.be/lUqQsJyK2jM
April 21, 2025 at 10:42 AM
Stacked Cards with Scroll Animations using GSAP ScrollTrigger
Smooth text & image transitions, and a responsive design — all step by step. #gsap
🎬 youtu.be/lUqQsJyK2jM
Smooth text & image transitions, and a responsive design — all step by step. #gsap
🎬 youtu.be/lUqQsJyK2jM
Reposted by Ecem Gokdogan
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
Live: ricardoolivaalonso-studioghibli.vercel.app
#html #css #javascript #threejs #blender #diorama #threejsJourney #anime #totoro #studioghibli
January 28, 2025 at 12:13 AM
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
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...
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...
January 22, 2025 at 11:59 AM
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...
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...
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
👉 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
January 14, 2025 at 9:37 AM
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
👉 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
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
It includes hover effects, dynamic transforms, responsive design, and a snowfall background with Particles.js.
#javascript #CSS #particlesjs #backgroundanimation
🎬 YouTube: youtu.be/bkpbaDKmm5Y
Interactive Rotating Slider with CSS & Vanilla Javascript | Background Animation #slider
YouTube video by Ecem Gokdogan
youtu.be
January 7, 2025 at 12:41 PM
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
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
#swiperjs #slider #javascript #CSS
🎬 YouTube: youtu.be/GfUOvjT-h7U
January 7, 2025 at 11:53 AM
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
#swiperjs #slider #javascript #CSS
🎬 YouTube: youtu.be/GfUOvjT-h7U
Stacked Cards with Autoplay | Vanilla Javascript & CSS
codepen.io/ecemgo/pen/y...
#stacked-cards #codepen
codepen.io/ecemgo/pen/y...
#stacked-cards #codepen
January 7, 2025 at 11:35 AM
Stacked Cards with Autoplay | Vanilla Javascript & CSS
codepen.io/ecemgo/pen/y...
#stacked-cards #codepen
codepen.io/ecemgo/pen/y...
#stacked-cards #codepen