Wow. Another how-to video that makes something looking super complex really really easy. Next step: re-creating it on a playground site and then using it on a client site.
Great scrolling example, I really like it 🤩. Started creating a page directly, but... maybe I'm doing something wrong: I have a heading with link and hover color on each slider, the link on the first slider works, the links on the other sliders don't work??
@@websquadron Wauw, you respond very quickly👍 I tried 99, 999 and 1000 on the heading, on the slider and also on both (Slider 999 and heading 1000) This did not solve it
Great Tutorial! However, I have 2 caveats: 1. if you use e.g. a loop-carousel on the same page, keep in mind to add an additional css class or id before the slider class! 2. does not work well with Safari :-)
In my case it works best (even in Safari) when deleting the css transform in the following class... .e-n-carousel .swiper-wrapper { display: flex; flex-direction: row; /*transition: transform 0.2s ease;*/ } This seems to get in the way of GSAP's scrubbing somehow 🙂
@@websquadron btw, I got a "Access blocked: This app’s request is invalid" error when trying to sign up/in to the Code Snippets repo using the Google SSO option.
The link is there in the description. UA-cam doesn't allow syntax in video description. Also, if I share the code in the comments, and then I change the code, I'd have to revisit the comments again. But to keep all happy, I have pinned it.
Dude these last several weeks worth of videos have been some of your best ever.
Keep an eye out for Wednesday!
@@websquadron Will do boss
Wow. Another how-to video that makes something looking super complex really really easy. Next step: re-creating it on a playground site and then using it on a client site.
Amazing! - thanks
Very clever - thank you
I love it too 😊
And once again a great tutorial!!!! I made it quickly, but at the last slide I scroll down vertical and the caroussel scrolls back to the beginning.
Double check as it shouldn't do that. test.websquadron.co.uk/beta
@@websquadron is it my computer, because if I look at your test site, I have the same issue now, where it first wasn't
@ Which browser are you using as I checked again and it's fine on Chrome and Edge and safari
@@websquadron exactly all three... so strange... does is happen on my test for you as well? don't know if I can put a link here?
and now --- today it doesn't glitch... so strange??
The icon is a great touch, (click) 🙂
thanks buddy ill try this in real project
Another superb tip. Cheers
Great scrolling example, I really like it 🤩.
Started creating a page directly, but... maybe I'm doing something wrong:
I have a heading with link and hover color on each slider, the link on the first slider works, the links on the other sliders don't work??
Increase the Z-index on the other buttons and check with that.
@@websquadron Wauw, you respond very quickly👍
I tried 99, 999 and 1000 on the heading, on the slider and also on both (Slider 999 and heading 1000)
This did not solve it
@@arwbruijn6722 Dang. Yup that's a flaw caused by the GSAP scrolling and not initiating the interactive part later on. I'll dig deeper on that.
👏 Great work! Can we see it live somewhere? Would be Nice! And thanks for the tuto!
Sure for as long as I keep that page active as it's my test site :) test.websquadron.co.uk/beta/
Very nice work.
Make sure that you watch today's video on Loop Carousel Magic!
@@websquadron Of course I'll check it out. 👍
go on with this, great content
I have discovered a problem. When we place buttons in the carousel slides, the button is only clickable when I swipe the slide but not when I scroll.
Yup, I'm looking into that.
It's fine on Slide 1, but not after that.
@@websquadron Exactly. ChatGPT didn't have a quick solution either.
Great Tutorial! However, I have 2 caveats:
1. if you use e.g. a loop-carousel on the same page, keep in mind to add an additional css class or id before the slider class!
2. does not work well with Safari :-)
1. Very true.
2. It works for me on Safari. I just checked. test.websquadron.co.uk/beta
@@websquadron ok, it works in Safari but at least very choppy (M1 MacbookPro) ;-)
In my case it works best (even in Safari) when deleting the css transform in the following class...
.e-n-carousel .swiper-wrapper {
display: flex;
flex-direction: row;
/*transition: transform 0.2s ease;*/
}
This seems to get in the way of GSAP's scrubbing somehow 🙂
nice
What if I want to disrespect mobile users and keep the horizontal scroll with the icon? What part of the code should I be paying attention to?
Not at my machine but just stick into ChatGPT and ask it to remove parts that only let it work on screen sizes > 768
@ sorry. I wasn’t at my machine either. I’ll run it through AI and let you know.
@@websquadron btw, I got a "Access blocked: This app’s request is invalid" error when trying to sign up/in to the Code Snippets repo using the Google SSO option.
Hi/ Hello. Registration is required via the link. Please post the code here in the comments or in any cloud. Thank you.
It's free to create an account.
See pinned comment above.
@@websquadron Ok
Shame that you didnt share the javascript code in the video ...
The link is there in the description. UA-cam doesn't allow syntax in video description.
Also, if I share the code in the comments, and then I change the code, I'd have to revisit the comments again.
But to keep all happy, I have pinned it.
The Code: [Please improve it where you can and feedback to me].
@media (min-width: 768px) {
.e-n-carousel {
overflow: hidden;
height: 100vh;
position: relative;
}
.elementor-swiper-button-next,
.elementor-swiper-button-prev {
display: none;
}
.e-n-carousel .swiper-wrapper {
display: flex;
flex-direction: row;
transition: transform 0.2s ease;
}
.e-n-carousel .swiper-slide {
flex: 0 0 100vw;
height: 100vh;
}
.stickyicon {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
}
// Wrap all JavaScript functionality in a media query check
function initCarousel() {
if (window.matchMedia('(min-width: 768px)').matches) {
gsap.registerPlugin(ScrollTrigger);
const swiperWrapper = document.querySelector('.swiper-wrapper');
const slides = document.querySelectorAll('.swiper-slide');
const stickyIcon = document.querySelector('.stickyicon');
const skipSection = document.getElementById('skip');
const totalSlides = slides.length;
// Ensure the first slide is visible
gsap.set(swiperWrapper, { x: 0 });
// Calculate total scrollable width
const totalScrollWidth = (totalSlides - 1) * window.innerWidth;
// Enable pinning only on larger screens (desktop/tablet)
const enablePinning = true; // Always true since we're already in media query check
// Scroll distance calculation
const scrollEndValue = `+=${totalSlides * window.innerHeight}`;
// Horizontal scroll animation triggered by vertical scroll
const scrollAnimation = gsap.to(swiperWrapper, {
x: () => -totalScrollWidth,
ease: 'none',
scrollTrigger: {
trigger: '.e-n-carousel',
pin: enablePinning,
scrub: true,
end: scrollEndValue,
anticipatePin: 1,
pinSpacing: true,
},
});
// Show/hide sticky icon based on the carousel's visibility
ScrollTrigger.create({
trigger: '.e-n-carousel',
start: 'top top',
end: scrollEndValue,
onEnter: () => {
stickyIcon.style.opacity = '1';
stickyIcon.style.pointerEvents = 'auto';
},
onLeave: () => {
stickyIcon.style.opacity = '0';
stickyIcon.style.pointerEvents = 'none';
},
onEnterBack: () => {
stickyIcon.style.opacity = '1';
stickyIcon.style.pointerEvents = 'auto';
},
onLeaveBack: () => {
stickyIcon.style.opacity = '0';
stickyIcon.style.pointerEvents = 'none';
},
});
// Sticky icon click behavior
stickyIcon.addEventListener('click', () => {
if (skipSection) {
gsap.to(window, {
scrollTo: skipSection.offsetTop,
duration: 0.1,
ease: 'none',
});
}
});
}
}
// Initialize on load
initCarousel();
// Refresh on resize
window.addEventListener('resize', () => {
initCarousel();
if (window.matchMedia('(min-width: 768px)').matches) {
ScrollTrigger.refresh();
}
});
noice