Search the Community

Hi, I was wondering how do I implement GSAP ScrollTrigger into a Locomotive Scroll that has the direction set to horizontal? Is this even possible or do I need to implement horizontal scrolling with GSAP? like in this demo (https://codepen.io/cameronknight/pen/qBNvrRQ) The CodePen preview isn’t working correctly. Here is the direct link to the pen: https://codepen.io/Pullapooh/pen/VwmMRJR

Hi, I would like to get Locomotive Scroll to work with some parallax code and ScrollTrigger. I am using the demos Parallax scene on scroll - ScrollTrigger Locomotive Scroll with ScrollTrigger scrubbing and pinning but when I add the Locomotive Scroll, it breaks the parallax code. How do I get the parallax code to work with the Locomotive Scroll? Thanks

Hi guys, I have added smooth scrolling within my application using locomotive. I have added it on top of my App component. It is working good and is not messing up with my animations that use scrolltrigger within my main App component however my animations that uses scrolltrigger within my children components don't work anymore. My triggers markers disappeared. In my main component I have added: const locoScroll = new LocomotiveScroll({ el: smoothScroll, smooth: true, }); locoScroll.on("scroll", ScrollTrigger.update); I am sure it is something dumb but what is the norm for working with both (gsap and locomotive) within React? Thank you!

Hello, is there any quick way with gsap to make the animation of https://locomotivemtl.github.io/locomotive-scroll/ at section 3. with the Lerp elements?

Hello, i would this post. That you can with scrolltigger make animations like full page, but i am using locomotive + scrolltrigger, i need a part of my sections to behaviour like fullpage. I need on my codepen the hero__inner sections behave like fullpage, or something similar, Thanks in advance

Hello there, I need a help, i am trying to understand how i can do different animations with scrolltrigger & locomotive when a section enters a view port , and a different on exit. For example here, i need the hero section starts autoAlpha: 0 when is leaving the view port, but i am not really sure the timestamp on the timeline, whats the position parameter to use.

It appears as though the scrollerProxy is initiated multiple times after routing which causes the matrix 3d animation to jump from -232213 to 0 and back. I think this is because the nuxt instance is kept while routing between pages that also use the _.vue page template but I cant figure out how to force it to forget the past scrollerProxy ? Any advice as to how to initiate smoothscrolling in Nuxt? // _.vue template <template> <div> </div> </template> <script> import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger) export default { mounted() { this.smooth() this.$forceUpdate() }, destroyed() { // used to kill the ScrollTrigger instance for this component this.expand = false }, methods: { smooth() { if (process.client) { window.scrollTo(0,0) const locoScroll = new this.LocomotiveScroll({ el: document.querySelector('.smooth-scroll'), smooth: true }) // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning) locoScroll.on('scroll', ScrollTrigger.update) ScrollTrigger.scrollerProxy('.smooth-scroll', { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.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} }, // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element). pinType: document.querySelector('.smooth-scroll').style.transform ? 'transform' : 'fixed' }) // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. ScrollTrigger.addEventListener('refresh', () => locoScroll.update()) // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc. ScrollTrigger.refresh() const headerItems = ['.header__logo', '.nav', '.header__trigger'] if (!this.isTouchDevice()) { headerItems.forEach((item) => { gsap.to(item, { scrollTrigger: { trigger: '.header', scroller: '.smooth-scroll', scrub: true, pin: true, start: 'top', end: document.querySelector('body').offsetHeight, pinSpacing: false, }, y: document.querySelector('body').offsetHeight, transformOrigin: 'center top', ease: 'none' }) }) const largeMedia = document.querySelectorAll('.large-media.no-controls') if (largeMedia) { largeMedia.forEach((media) => { let mediaItem = media.querySelector('video') if (media.querySelector('img')) { mediaItem = media.querySelector('img') } gsap.to(mediaItem, { scrollTrigger: { trigger: media, scroller: '.smooth-scroll', scrub: true, start: 'top', end: 'bottom', }, y: '100%', transformOrigin: 'center top', ease: 'none' }) }) } const nextCase = document.querySelector('.next-case') if (nextCase) { gsap.to('.next-case .large-media', { scale: 1, opacity: 0, scrollTrigger: { trigger: nextCase, scroller: '.smooth-scroll', start: `top-=${window.innerHeight / 2}`, end: `bottom-=${window.innerHeight}`, scrub: 1, } }) gsap.to('.next-case__background', { opacity: 1, scrollTrigger: { trigger: nextCase, scroller: '.smooth-scroll', start: `top-=${window.innerHeight / 2}`, end: `bottom-=${window.innerHeight}`, scrub: 1, } }) gsap.to('.large-text-header', { opacity: 1, scrollTrigger: { trigger: nextCase, scroller: '.smooth-scroll', start: `top-=${window.innerHeight / 2}`, end: `bottom-=${window.innerHeight}`, scrub: 1, } }) const observerTrigger = document.querySelector('.next-case__observer-trigger') const onIntersection = (entries) => { for (const entry of entries) { if (entry.isIntersecting) { this.loaded = entry.intersectionRatio if (entry.intersectionRatio > 0.95) { this.background = true if (!this.expand) { // window.location.href = nextCase.querySelector('a').getAttribute('href') // goor, doch effectief this.$router.push(nextCase.querySelector('a').getAttribute('href')) this.expand = true } } } } } let threshold = [] // create array with numbers between 0 and 1 for (var i = 0; i <= 100; i++) { threshold.push(i / 100) } const observer = new IntersectionObserver(onIntersection, { threshold }) observer.observe(observerTrigger) } } } }, isTouchDevice() { try { document.createEvent('TouchEvent') return true } catch (e) { return false } } }, } </script>

Hello,i was looking to make a progress bar for my page, but the progress of the scroll is wrong. Also i need to add an option to change color, when in view on some sections. Regards, D

Hi again ? I have come across an issue that I can't seem to find a solution for. When I scroll to the pinned horizontal section, it's like the next sections ignore the pinned section and keep changing colours. I'm finding it hard to explain but you'll see what I mean from the example. Each section should be a different colour but the pinned section is making the dynamic colours change before the next sections. Anyone know what I'm doing wrong?

Hi Guys! I have been struggling for a while on this animation, I have made many attempts but without success. Now i need your help! I have a scroll slider and need to change the background image based on active years tiles, like this reference but in horizontal mode... Anyone can help me? I need to set active class on years tile and fade in / out the img in slider-years Thanks in advance!

Hi, I tried to incorporate Locomotive Scroll by doing a copy-paste job from the demo in the docs. It went pretty well. However, on Chrome and FireFox (mac) you'll see that the scroller-start and scroller-end markers jump vertically. If I set pin:true you will see that car does a similar vertical jitter. I suspect I set something up wrong with the css, but have been staring at it for quite awhile. Would appreciate any help

Hi friends! Please tell me does anyone have an idea how can I implement this scroll effect by using GSAP and locomotive-scroll? EXEMPLE https://www.designembraced.com/ CODEPEN: https://codepen.io/ClementRoche/pen/YmVNEx Thank you guys

Hi, For my website I'm trying to use the code from snorkl.tv in order to have a smooth scroll : https://www.snorkl.tv/scrolltrigger-smooth-scroll/ I've created the div with a class="scrollContainer" and used the proxy method but I'm stucked. Because my timeline is broken. Here is a Pen of my code. https://codepen.io/_youri/pen/LYZxZPW Where am I wrong ? You should open the pen in a new window as my div have width bigger that the display in Pen !

Hi everyone, I've reviewed the codepen solution for Locomotive / ScrollTrigger Integration (https://codepen.io/GreenSock/pen/1dc38ca14811bc76e25c4b8c686b653d), but am having difficulty implementing a simple ScrollTrigger animation in my own case. In the attached example, I'm trying to apply a simple fade to the images on scroll. Thanks for your help, M

Hey Zach, Thanks to your code, I have clearly progressed in understanding. Just for fun and learning I have a question: How does the 'yValue' value come about? Can it be calculated? It doesn't turn around precisely. https://codepen.io/mikeK/pen/WNbaeJR I use gsap 2.0 for this case because I like the 'old' smooth start / stop function and cannot do this with 3.0. The locomotive is already under construction. But here I have to specify the alignment of the parts. https://codepen.io/mikeK/pen/bGNjjyZ Kind regards Mikel