amit95

No worries Was just curious to see how that demo works without containerAnimation but, it also seems like an older demo (before containerAnimation was about). Nevertheless, I've been experimenting with it and I'm encountering issues. From the containerAnimation demo you've linked above, the bare minimum code required to get .box-1 to animate on scroll is : let sections = gsap.utils.toArray(".panel"); let scrollTween = gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", // <-- IMPORTANT! scrollTrigger: { trigger: ".container", pin: true, scrub: 0.1, //snap: directionalSnap(1 / (sections.length - 1)), end: "+=3000" } }); gsap.set(".box-1", {y: 100}); gsap.to(".box-1", { y: -130, duration: 2, ease: "elastic", scrollTrigger: { trigger: ".box-1", containerAnimation: scrollTween, start: "left center", toggleActions: "play none none reset", id: "1", } }); Which I have mimicked as best as possible, just to get something animating on scroll. In my original demo, I was using timelines to get content to fade out on scroll and for it to then start the horizontal scroller (you can see this in action in my original question). Now in my latest demo below, as I've adapted the code to accomodate containerAnimation , I've had to remove the timeline, the horizontal scroller doesn't work as it did in the original and the .animate elements are in no way working as they should in the demo. Any hints to point me in the right direction? Apologies in advance if I've asked something super stupid, only started learning GSAP about two weeks ago, but making progress slowly slowly ? Latest: https://codepen.io/amit_rai95/pen/LYOGYZx

Hi @Cassie, I'll look into that demo above For arguments sake, it my approach definitely not possible for horizontal scrolling? I.e, see this demo here: https://codepen.io/GreenSock/pen/jOWvgjV

I have an svg which forms the basis of my horizontal scroller. Within this svg, I have added the class .animate to the elements which I want to fade in up as the item comes into view. The .animate class for reference has been added to all the text items in the svg. Currently, only the .animate elements that are in view initially fade in up. When I scroll down to continue the scroller, the other elements are static. They're not fading in or translating up or down in any way? Note: view pen in full view

Hi @Cassie, Appreciate the advice and the demo, both are extremely helpful I will have a play around and see if I can make things work, and more importantly, understand what's happening.

I've been struggling with this one for quite some time (as you may be able to tell with my previous posts ?). Nevertheless, thanks to the forums, and demos, I have been able to experiment with multiple approaches, none which work in the the way I want. In short, here is my expected behaviour: User scrolls down the page and .horizontalScroller__intro pins and moves down to the center of my .horizontalScroller which I've currently defined as end: "+=30%"). Once it has reached the end, as the user continues to scroll down, I now want .horizontalScroller__intro to fade out slowly Once .horizontalScroller__intro has faded out completely, I now want to fade in .horizontalScroller__items which has an opacity of 0 in the css. Once .horizontalScroller__items has faded in completely, I want the user to be able to scroll horizontally. Then the reverse when the user is scrolling back up Current results: .horizontalScroller__intro starts to fade out immediately (and is completely gone by the end position). I'm looking for .horizontalScroller__intro to start fading out after it has reached its end position. I have a separate scrollTrigger defined for the horizontal scroll (which just contains an image). When this trigger is used alongside the .horizontalScroller__intro trigger, the .horizontalScroller__intro jumps. Cannot get the .horizontalScroller__items to fade in (unsure if it doesn't like it because it's defined in the css?) What have I tried? Used this demo to achieve fade out Used this demo to achieve basic pin Tried the below snippet to get intro to fade out const tl = gsap.timeline( { scrollTrigger: { trigger: ".horizontalScroller__intro", start: "top", end: "+=30vh", scrub: true, // markers: true, toggleActions: "play reverse play reverse", } }); tl .to('.horizontalScroller__intro', { autoAlpha: 1, duration: 0.5 }) .to('.horizontalScroller__intro', { autoAlpha: 0, duration: 0.5 }, 0.5); Appreciate I've asked a few questions in this post. Any help would be appreciated

I'm using ScrollTrigger pin to turn my section into a horizontal scroll section. In this section, I have an element called .horizontalScroller__intro . On scroll, say 20% of the width of .horizontalScroller__items , I'm trying to gradually fade the intro away, so that the image is the only thing in view. To achieve this, I've created a timeline, similar to the approach defined here. However, in my demo, my intro disappears immediately. In short: When scrolling down (start to end of image), slowly fade away .horizontalScroller__intro When scrolling up (end to start of image), slowly fade .horizontalScroller__intro back in Note: Please view the pen in full view.

I have a block which becomes pinned and scrolls horizontally. Within this block, I have a vector which has a width of 3573px. When a user scrolls, I want the vector to scroll also, alongside the images in my demo. Have tried moving my vector under .horizontalScroller__scroll, so that it scrolls alongside the images, but that didn't work. In addition to this, I'm looking for a way to slow down the slider. If a user slingshots the scrollbar up, they miss the first few items in the pinned container. See visual below: In the above: When you scroll down fast, it's already started scrolling and the first image is outside view already (which is expected behaviour). But is there a way to slow it down so that the first slide is always visible, no matter scroll speed. When you scroll up fast, it doesn't showcase the first few slides. See approach: <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script> <section class="spacer"></section> <section class="horizontalScroller"> <div class="container"> <div class="row justify-content-center"> <div class="col-12 col-md-8"> <div class="horizontalScroller__intro text-center"> <h2 class="horizontalScroller__header">Header</h2> </div> </div> </div> </div> <div class="horizontalScroller__scroll"> <div class="horizontalScroller__images" id="horizontal-scroll"> <div class="horizontalScroller__item"> <div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div> </div> <div class="horizontalScroller__item"> <div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div> </div> <div class="horizontalScroller__item"> <div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div> </div> <div class="horizontalScroller__item"> <div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div> </div> </div> </div> <div class="horizontalScroller__pattern"> <div class="horizontalScroller__pattern-inner"> <svg class="horizontalScroller__pattern-svg" xmlns="http://www.w3.org/2000/svg" width="3573.448" height="935.115" viewBox="0 0 3573.448 935.115"> <g id="Journey_line" data-name="Journey line" transform="translate(58.751 66.918)"> <path id="Path_111603" data-name="Path 111603" d="M-57.191,807.764c141.061,46.335,271.1-48.506,208.8-171.343-44.647-88.041-84.385,2.223-76.906,70.2,11.034,100.3,75.906,190.808,216.669,143.778C406.3,812,470.169,700.216,568.892,676.505c94.985-22.813,137.722,77.422,240.409,77.422,189.877,0,202.929-186.737,384.8-145.215,70.851,16.176,119.356,96.77,315.333,91.709,108.733-2.808,183.293-179.6,324.1-222.009,136.412-41.091,145.842,55.306,290.03,55.078,221.015-.348,232.464-251.918,446.846-265.314,144.5-9.029,229.247,90.469,364.966-54.532,26.116-27.9,52.772-44.257,77.079-53.559,38.931-14.9,81.644-13.148,119.848,3.795,52.233,23.165,142.179,57.218,225.578-44.538C3456.26-.7,3510.921-63.64,3510.921-63.64" fill="none" stroke="rgba(249,247,250,0.3)" stroke-miterlimit="10" stroke-width="10" /> <path class="pulse" id="Path_111604" data-name="Path 111604" d="M1922.219,474.558a33.6,33.6,0,1,1-33.6-33.6,33.6,33.6,0,0,1,33.6,33.6" fill="#5d209f" /> <path class="pulse" id="Path_111605" data-name="Path 111605" d="M1908.09,474.558a19.475,19.475,0,1,1-19.476-19.476,19.476,19.476,0,0,1,19.476,19.476" fill="#f6eb61" /> <path class="pulse" id="Path_111606" data-name="Path 111606" d="M1056.355,649.037c0-19.115-15.045-34.611-33.6-34.611s-33.6,15.5-33.6,34.611,15.045,34.611,33.6,34.611,33.6-15.5,33.6-34.611" fill="#5d209f" /> <path class="pulse" id="Path_111607" data-name="Path 111607" d="M1042.226,649.037c0-11.078-8.719-20.059-19.476-20.059s-19.475,8.981-19.475,20.059,8.719,20.059,19.475,20.059,19.476-8.981,19.476-20.059" fill="#f277c6" /> <path class="pulse" id="Path_111610" data-name="Path 111610" d="M623.423,672.044c0-18.834-15.045-34.1-33.6-34.1s-33.6,15.268-33.6,34.1,15.045,34.1,33.6,34.1,33.6-15.268,33.6-34.1" fill="#5d209f" /> <path class="pulse" id="Path_111611" data-name="Path 111611" d="M609.294,672.044a19.478,19.478,0,1,0-19.476,19.764,19.621,19.621,0,0,0,19.476-19.764" fill="#ff6d6a" /> <path class="pulse" id="Path_111608" data-name="Path 111608" d="M2355.151,439.3a33.6,33.6,0,1,0-33.6,33.6,33.6,33.6,0,0,0,33.6-33.6" fill="#5d209f" /> <path class="pulse" id="Path_111609" data-name="Path 111609" d="M2341.022,439.3a19.475,19.475,0,1,0-19.476,19.476,19.476,19.476,0,0,0,19.476-19.476" fill="#ff6d6a" /> </g> </svg> </div> </div> </section> <section class="spacer"></section> .spacer { height: 100vh; background: lightblue; } .horizontalScroller { padding: 100px 0 60px 0; background-color: #5D209F; height: 100vh; position: relative; overflow: hidden; } .horizontalScroller__intro { margin-bottom: 25px; } .horizontalScroller__scroll { height: 70%; position: relative; overflow: hidden; } .horizontalScroller__images { display: flex; align-items: center; position: relative; z-index: 1; } .horizontalScroller__item { width: 50vw; display: flex; justify-content: center; flex: 0 0 auto; } .horizontalScroller__image { -o-object-fit: fill; object-fit: fill; margin: 0 auto; width: 260px; height: 255px; } .horizontalScroller__pattern { position: absolute; top: -50%; width: 100%; height: 100%; } .horizontalScroller__pattern-inner { height: 100%; } $(function() { let images = gsap.utils.toArray(".horizontalScroller__item"); gsap.to(images, { xPercent: -100 * (images.length - 1), ease: "none", scrollTrigger: { trigger: ".horizontalScroller", pin: true, scrub: 1, end: "+=3600", // size of svg bg //end: () => "+=" + document.querySelector(".horizontalScroller__images").offsetWidth } }); });

Fair enough, thanks for your guidance

Hi @akapowl, Thanks for the guidance I've managed to make some headway after your suggestions and have somewhat of a solution in place. See latest fiddle here. For visual, here is my latest JS: $(function() { const pageContainer = document.querySelector("[data-scroll-container]"); const scroll = new LocomotiveScroll({ el: pageContainer, smooth: true, }); scroll.on(pageContainer, ScrollTrigger.update); ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? scroll.scrollTo(value, 0, 0) : scroll.scroll.instance.scroll.y; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }; } }); /* anims */ function animateFrom(elem, direction) { direction = direction || 1; var x = 0, y = direction * 100; if (elem.classList.contains("gsap_reveal--fromLeft")) { x = -100; y = 0; } else if (elem.classList.contains("gsap_reveal--fromRight")) { x = 100; y = 0; } elem.style.transform = "translate(" + x + "px, " + y + "px)"; elem.style.opacity = "0"; gsap.fromTo(elem, { x: x, y: y, autoAlpha: 0 }, { duration: 2, x: 0, y: 0, autoAlpha: 1, ease: "expo", overwrite: "auto", }); } function hide(elem) { gsap.set(elem, { autoAlpha: 0 }); } gsap.utils.toArray(".gsap_reveal").forEach(function(elem) { hide(elem); // assure that the element is hidden when scrolled into view ScrollTrigger.create({ trigger: elem, scroller: "[data-scroll-container]", onEnter: function() { animateFrom(elem) }, onEnterBack: function() { animateFrom(elem, -1) }, once: true, }); }); /* anims end */ window.addEventListener("load", function(event) { ScrollTrigger.refresh(); }); ScrollTrigger.addEventListener("refresh", () => scroll.update()); ScrollTrigger.refresh(); }); Key changes in the above based on before: Moved my animateFrom() below the scrollerProxy() Added scroller: "[data-scroll-container]" to my scrollTrigger Follow-up question. Whilst I do have something working now, I have all of my GSAP animations in another js file. This file is called animations.js. In my demo above and in the fiddle, the scrollTrigger animations only work when the scrollTrigger is below the scrollerProxy() and above the scroll.update() event listener. Is the only way for this to work is to have all of my animations between the two? Something like below: ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? scroll.scrollTo(value, 0, 0) : scroll.scroll.instance.scroll.y; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }; } }); /* /* ALL scrollTrigger animations here */ window.addEventListener("load", function(event) { ScrollTrigger.refresh(); }); ScrollTrigger.addEventListener("refresh", () => scroll.update()); ScrollTrigger.refresh();

I have sections across my site which are using ScrollTrigger. Once I implemented Locomotive JS, all of my ScrollTrigger animations stopped working. I've read through the forums and saw that you need to update() ScrollTrigger when Locomotive is scrolling. I implemented this and saw no results. Then, I resized the window and my ScrollTrigger animations that were in view, they started working. In short, animations trigger on resize, but not on page load. I've implemented update() and also tried refresh(), but no luck. Below is a demo of the issue. Further down, I've added in steps to recreate and also a visual. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.3/dist/locomotive-scroll.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.3/dist/locomotive-scroll.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script> <div data-scroll-container> <div data-scroll-section> <section class="hero"> <div class="container"> <div class="row justify-content-center justify-content-xl-between"> <div class="col-12 col-md-10 col-lg-9 col-xl-5"> <div class="hero__text text-center text-xl-start"> <h1 class="hero__title" data-scroll data-scroll-speed="2">Title</h1> </div> </div> </div> </div> </section> <section class="textImageRepeater"> <div class="container"> <div class="row"> <div class="col-12"> <div class="textImageRepeater__item textImageRepeater__layout--row"> <div class="textImageRepeater__text text-center text-md-start gsap_reveal gsap_reveal--fromRight"> <div class="textImageRepeater__copy"> <h2>Header</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="textImageRepeater__graphic text-center gsap_reveal gsap_reveal--fromLeft"> <img class="textImageRepeater__image" src="https://picsum.photos/200/300" alt="placeholder-image" loading="lazy"> </div> </div> <div class="textImageRepeater__item textImageRepeater__layout--rowReverse"> <div class="textImageRepeater__text text-center text-md-start gsap_reveal gsap_reveal--fromRight"> <div class="textImageRepeater__copy"> <h2>Header</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="textImageRepeater__graphic text-center gsap_reveal gsap_reveal--fromLeft"> <img class="textImageRepeater__image" src="https://picsum.photos/200/300" alt="placeholder-image" loading="lazy"> </div> </div> </div> </div> </div> </section> </div> </div> $(function() { gsap.registerPlugin(ScrollTrigger); function animateFrom(elem, direction) { direction = direction || 1; var x = 0, y = direction * 100; if(elem.classList.contains("gsap_reveal--fromLeft")) { x = -100; y = 0; } else if (elem.classList.contains("gsap_reveal--fromRight")) { x = 100; y = 0; } elem.style.transform = "translate(" + x + "px, " + y + "px)"; elem.style.opacity = "0"; gsap.fromTo(elem, { x: x, y: y, autoAlpha: 0 }, { duration: 2, x: 0, y: 0, autoAlpha: 1, ease: "expo", overwrite: "auto" }); } function hide(elem) { gsap.set(elem, { autoAlpha: 0 }); } gsap.utils.toArray(".gsap_reveal").forEach(function(elem) { hide(elem); // assure that the element is hidden when scrolled into view ScrollTrigger.create({ trigger: elem, onEnter: function() { animateFrom(elem) }, onEnterBack: function() { animateFrom(elem, -1) }, onLeave: function() { hide(elem) } // assure that the element is hidden when scrolled into view }); }); /*******************************************************************/ /* Locomotive /*******************************************************************/ const pageContainer = document.querySelector("[data-scroll-container]"); const scroll = new LocomotiveScroll({ el: pageContainer, smooth: true }); // each time locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning) scroll.on(pageContainer, ScrollTrigger.update); // tell ScrollTrigger to use these proxy methods for the ".data-scroll-container" element since Locomotive Scroll is hijacking things ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? scroll.scrollTo(value, 0, 0) : scroll.scroll.instance.scroll.y; }, // we don't have to define a scrollLeft because we're only scrolling vertically. getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; } }); window.addEventListener("load", function (event) { ScrollTrigger.refresh(); }); ScrollTrigger.addEventListener("refresh", () => scroll.update()); ScrollTrigger.refresh(); }); .hero { min-height: 1000px; background: lightblue; display: flex; align-items: center; } .textImageRepeater { overflow: hidden; padding: 120px 0 160px 0; } .textImageRepeater__intro { margin-bottom: 66px; } .textImageRepeater__layout--row { flex-direction: row !important; } .textImageRepeater__layout--rowReverse { flex-direction: row-reverse !important; } .textImageRepeater__item { display: flex; align-items: center; justify-content: center; flex-direction: column; padding-top: 70px; justify-content: space-between; } .textImageRepeater__header { margin: 17px 0; } .textImageRepeater__graphic { margin: 0; } .textImageRepeater__text, .textImageRepeater__graphic { flex-basis: 50%; } .textImageRepeater__text { max-width: 500px; } .c-scrollbar_thumb{ background-color: #5D209F!important; width: 7px; margin: 2px; opacity: 1; border-radius: unset; mix-blend-mode: multiply; } Steps to recreate: Open this fiddle Widen the output box to something wide (i.e. 1300px) Run the fiddle Scroll down and you'll see the elements not loading Resize the output box to something smaller The scrollTrigger animations now appear Here is a gif showcasing the issue: