Marcos Aidos

Hello fellow "gsapers", I'm looking for some guidance on how to achieve the effect i want. The main effect i want its like this codepen i linked. I have an dinamic array of section that will be pinned just like that codepen, but then each one of those sections will have an image sequence. When the image sequence of one section ends then it should transition to the next section, and then start the corresponding image sequence (all this controlled by user scrolling). I got the sections transition working just like the codepen, but i dont know how to approuch to make the transition wait until the section image sequence end and then do the section change. I would be very thankfull if someone could point me in the right direction. I'm a bit lost, and still new to gsap.

Yes, its was something like that, since i have a master js file where i have global stuff, and then separate files with the animations, the master file was running after the other files... I'm dumb.. well thats how we learn ? Thank you to everyone. BTW GSAP is awsome

I applied that pen you showed with GSAP only, and partially worked. Smooth scroll is applied but pinned sections with horizontal scroll dispear from the viewport when i reach them with scroll. But if i resize the page and then scroll it all works well.. very strange.

Hello @Cassie, Thank you for showing me that post, i read it, and tried the solution, but there they went with full horizontal scroll, i have a mixed of both in my page, i start with vertical scroll and some special sections become horizontal scroll. I still didnt get how to make Locomotive scroll and gsap work well together, it seems o need to chose one scroll direction and go with it. But hey, maybe its me not seeing the full picture or still not undertstanding how it all works.

Hello, I'm new to GSAP but i was able to put some parallax and some pinned section with horizontal scroll working with ScrollTrigger, but now i wanted to add Locomotive Scroll for smooth scroll and other text animations but GSAP doesnt seem to like it. After adding Locomotive scroll and initializing it, all animations done with ScrollTrigger stopped working. Cant figure out the reason why. I saw this in the scrollerProxy info tried to apply it to my case but with no success const locoScroll = new LocomotiveScroll({ el: document.querySelector(".masterpage"), //my main container (data-scroll-container) smooth: true, }); locoScroll.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(".masterpage", { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; }, pinType: "transform" }); Anyone could help me? Thank you in advance