Cassie

Hi there Figar, As we state in the forum guidelines we don't have capacity to investigate, recreate or explain how to create custom effects found on other websites. We are more than happy to answer GSAP-specific questions though. So if you give this effect a go yourself and get stuck in the process, feel free to post a minimal demo here and we'll give you some advice on how to get closer to your goal.

You could potentially initialise all the event listeners as the carousel enters and then remove them when the animation's complete. (small note - It sounds like pretty bad UX practise though, I'd be a little frustrated if a website removed my ability to scroll normally midway through a page) Why don't you pop together a demo and if you get stuck we can give you some pointers!

Heya! I think you're after timelines and the position parameter. At the moment you're using timelines - but you're not using them to sequence animations at all - you're just using normal tweens and delays. Timeline's unlock a whole new way of thinking about animation. Give this article a look! There's an explainer video too.

Hey there! Sounds like you may be after touch/wheel events rather than scrolling? Like these demos? https://codepen.io/BrianCross/pen/PoWapLP https://codepen.io/bassta/pen/kDvmC https://stackoverflow.com/questions/24217087/how-to-determine-scroll-direction-without-actually-scrolling

Hey there! It could possibly be related to this issue Could you pop together a minimal demo so we can take a look. Thanks!

Hi there @Volt 22 This is definitely achievable using scrollTrigger. Here are some collections that may help you get a broader picture of possibilities and techniques. https://greensock.com/showcase/ https://greensock.com/st-demos/ In terms of structured learning @Carl's creative coding club is a very good way to go! https://www.creativecodingclub.com/bundles/creative-coding-club?ref=44f484

Hey there! This is a pretty complex demo. It's solving a lot of problems that you don't need solved for your use case. Maybe it would help to start over with a simpler starting point? Something like this? https://codepen.io/GreenSock/pen/RwLeXEL?editors=1010

Hey there! I'm afraid canvas isn't really my thing so I can't help here, and as you mentioned this isn't a specifically GSAP related question. I'm sure someone will be able to help out, you just may not get a response immediately (just managing expectations) Nice demo by the way, it looks great.

Spoken as a former banner dev - You're doing gods work here. Backup gifs were the bane of my life. Good job @kek

Oh ok I get you, If you're using a loop you can use the index value to work out which section you're entering. boxes.forEach((box, i) => { ScrollTrigger.create({ trigger: box, start: "top bottom", onEnter: () => { initCanvas(box, i) } }); } function initCanvas(box, i) { // get the image(s) you need based in the index value } https://codepen.io/GreenSock/pen/bGomQwp?editors=1011 Hope this helps!

I can't help without a demo I'm afraid! If I were you I would try implementing it bit by bit. Get the horizontal scroll working first, then add the code to handle the drag. If it's possible to remove other animations while you're testing the functionality then do so.

Hi there! We try to keep these forums focused on GSAP related questions and this is really more down to custom JS logic. In your case this event handler isn't firing - I imagine this is because all the videos are already in the DOM. You seem to be swopping out classes rather than actually loading the videos in, so that loaded event won't fire. once(secondWalk, 'loadedmetadata', () => { console.log('loaded') gsap .timeline({ defaults: { duration: 1 }, scrollTrigger: { trigger: '.video-scroll', start: 'top -1', end: 'bottom bottom', scrub: true, }, }) .fromTo( secondWalk, { currentTime: 0, }, { currentTime: secondWalk.duration || 1, } ); }); https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event Hope this helps.

Hey there, sorry I don't understand this question. Could you provide an updated demo showing what you mean? Also - you shouldn't ever need to use intersection observer and ScrollTrigger together, ScrollTrigger can do everything intersection observer can and more.

Hey there! You're targeting 'section' elements to do the horizontal scroll, but you've got loads of 'section' elements outside of that wrapper. const sections = gsap.utils.toArray("section"); You'll need to be more specific about the elements you're targeting. Your CSS is also not laying the sections out correctly. My advice is always to isolate the issue, fix and then re-integrate. Here's a step in the right direction. ✨ https://codepen.io/GreenSock/pen/jOGevrK?editors=0010