Search the Community

Hello im trying to achieve this effect with locomotive scroll Graphic hunters and here is the link to my code on GitHub and here it is live. I tried adding this javascript for scroll trigger and I also added the locomotive scroll for some reason it seems locomotive is maybe making it not work. gsap.registerPlugin(ScrollTrigger); // Call this function when the DOM content has loaded document.addEventListener("DOMContentLoaded", function() { // Initialize other functions like initLoaderHome(), initTimeZone() as needed initLoaderHome(); initMagneticButtons(); initTimeZone(); initBasicFunctions(); initScrolltriggerCheckScroll(); initScroll(); initScrolltriggerAnimations(); }); function initScroll() { let scroll = new LocomotiveScroll({ el: document.querySelector("[data-scroll-container]"), smooth: true, lerp: 0.075, }); scroll.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy("[data-scroll-container]", { 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 }; }, pinType: document.querySelector("[data-scroll-container]").style.transform ? "transform" : "fixed", }); window.addEventListener('resize', () => { scroll.update(); ScrollTrigger.refresh(); }); ScrollTrigger.addEventListener("refresh", () => scroll.update()); ScrollTrigger.refresh(); } /** * Scrolltrigger Animations Desktop + Mobile */ function initScrolltriggerAnimations() { // Disable GSAP on Mobile // Source: https://greensock.com/forums/topic/26325-disabling-scrolltrigger-on-mobile-with-mediamatch/ ScrollTrigger.matchMedia({ // Desktop Only Scrolltrigger "(min-width: 1025px)": function() { if (document.querySelector(".bg-img")) { // Scrolltrigger Animation : Example $(".bg-img").each(function(index) { let triggerElement = $(this); let targetElement = $(this); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, start: "100% 100%", end: "150% 0%", scrub: 0, } }); tl.to(targetElement, { opacity: 0, ease: "Power3.easeOut" }); }); } }, // End Desktop Only Scrolltrigger // Mobile Only Scrolltrigger "(max-width: 1024px)": function() { if (document.querySelector(".example")) { // Scrolltrigger Animation : Example $(".example").each(function(index) { let triggerElement = $(this); let targetElement = $(".example"); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, start: "0% 100%", end: "100% 0%", scrub: 0 } }); tl.to(targetElement, { rotate: 90, ease: "none" }); }); } } // End Mobile Only Scrolltrigger }); // End GSAP Matchmedia } but it wont work for some reason, when I apply markers: true it shows fade working but it doesnt work when no markers. I also not my locomotive code is causing that javascript I provide to not work. thats why it wont fade. I have no idea why it would do that.

I'm trying do example app and learn gsap and locomotive scroll. I create sample page, when during scrolling show some animation. In chrome browser all right, but when I'm trying in safari, my animation is flickering. My code: <template> <div class="scroll" data-scroll-container> <div class="horizontal-sections"> <div class="pin-wrap"> <div class="animation-wrap to-right"> <div class="section"> <NuxtLink to="/"> <p> Chnage page</p> <h2>Scroll Down</h2> </NuxtLink> </div> <div class="section section-amin section-gray"> <h2>You need to animate on scroll. Performing some action.</h2> <div class="block-anim"></div> </div> </div> </div> </div> <div class="section section-lightblue"> <h2>Some section 1</h2> </div> <div class="section"> <h2>Some section 2</h2> </div> <div class="horizontal-sections"> <div class="pin-wrap"> <div class="animation-wrap to-right"> <div class="section"> <NuxtLink to="/"> <p> Chnage page</p> <h2>Scroll Down</h2> </NuxtLink> </div> <div class="section"> <h2>Some section 2</h2> </div> <div class="section section-amin section-gray"> <h2>You need to animate on scroll. Performing some action.</h2> <div class="block-anim1"></div> </div> </div> </div> </div> <div class="section"> <h2>Some section 2</h2> </div> </div> </template> <script setup lang="ts"> import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; import LocomotiveScroll from 'locomotive-scroll'; gsap.registerPlugin(ScrollTrigger); let locoScroll: any = null; onMounted(() => { locoScroll = new LocomotiveScroll({ el: document.querySelector('.scroll') as HTMLElement, smooth: true, }); pinType: document.querySelector(".scroll").style.transform ? "transform" : "fixed" locoScroll.on('scroll', ScrollTrigger.update); ScrollTrigger.scrollerProxy('.scroll', { scrollTop(value) { return arguments.length ? locoScroll?.scrollTo(value, { duration: 0, disableLerp: true }) : locoScroll?.scroll.instance.scroll.y; }, }); const horizontalSections = gsap.utils.toArray('.horizontal-sections'); horizontalSections.forEach((section: any, i) => { const thisPinWrap = section.querySelector('.pin-wrap'); const thisAnimWrap = thisPinWrap.querySelector('.animation-wrap'); const getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth); ScrollTrigger.create({ trigger: section, scroller: '.scroll', start: 'top top', end: () => '+=' + thisAnimWrap.scrollWidth, pin: thisPinWrap, scrub: true, }); const fakeHorizontalAnim = gsap.fromTo( thisAnimWrap, { x: () => (thisAnimWrap.classList.contains('to-right') ? 0 : getToValue()), }, { x: () => (thisAnimWrap.classList.contains('to-right') ? getToValue() : 0), ease: 'none', scrollTrigger: { trigger: section, start: 'top top', scroller: '.scroll', end: () => '+=' + (thisAnimWrap.scrollWidth - window.innerWidth), scrub: true, }, } ); const tl = gsap.timeline(); tl.to('.block-anim', { duration: 1, scroller: '.scroll', ease: 'power3', clipPath: 'inset(25% 25% 25.01% 25.01% round 25vw 25vw 25.01vw 25.01vw)', }); const tl1 = gsap.timeline(); tl1.to('.block-anim1', { duration: 1, scroller: '.scroll', ease: 'power3', clipPath: 'inset(25% 25% 25.01% 25.01% round 25vw 25vw 25.01vw 25.01vw)', }); ScrollTrigger.create({ trigger: section, start: () => 'top top-=' + (thisAnimWrap.scrollWidth - window.innerWidth), end: () => '+=' + window.innerWidth, animation: tl1, scroller: '.scroll', scrub: true, }); ScrollTrigger.create({ trigger: section, start: () => 'top top-=' + (thisAnimWrap.scrollWidth - window.innerWidth), end: () => '+=' + window.innerWidth, animation: tl, scroller: '.scroll', scrub: true, }); }); ScrollTrigger.refresh(); }); onBeforeRouteLeave((to, from, next) => { ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); locoScroll?.destroy(); next(); }); </script> <style lang="scss" scoped> body { margin: 0; padding: 0; overflow-x: hidden; } h2 { position: relative; z-index: 2; margin: 0; } .section { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100vw; flex: 0 0 100vw; background: lightgray; } .section-gray { background: gray; } .section-lightblue { background: lightblue; } .block-anim { will-change: transform; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: lightgoldenrodyellow; } .horizontal-sections { position: relative; overflow-x: hidden; .pin-wrap, .animation-wrap { display: flex; position: relative; z-index: 1; height: 100vh; } } .spacer { height: 50vh; width: 100vw; } </style> And link to page: https://skandynawia-przystan.vercel.app/test. Do yoy know how I can fixed this ?

Hi, im tying to use scrollProxy with locomotive like in the docs with Nextjs. Locomotive works fine but scrollTrigger its always at the initial position. It seams that the scrollTop inside the scrollerPoxy its not returning any value. I made a codesandbox to show the case: Scroll component: https://codesandbox.io/s/nextjs-gsap-locomotive-qq11t?file=/src/components/scroll.jsx Live demo: https://qq11t.sse.codesandbox.io/ I'm looking for a good way to implement a smooth-scroll in nextjs so if any have an alternative to locomotive and works with gsap it would help any way. Thx, for the support

Hey everyone, I am trying to recreate this codepen. But I have a horizontal scrolling website. So its kinda tricky... This is what I have so far gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(ScrollTrigger); const scrollContainer = document.querySelector('.data-scroll-container'); const locoScroll = new LocomotiveScroll({ el: scrollContainer, direction: 'horizontal', smooth: true, /*lerp: 0.1,*/ /*touchMultiplier: 2.54,*/ reloadOnContextChange: true, tablet: { smooth: true, direction: 'horizontal', gestureDirection: 'both', }, smartphone: { smooth: true, direction: 'vertical', } }); window.onresize = function(){ location.reload(); } locoScroll.on('scroll', ScrollTrigger.update); ScrollTrigger.scrollerProxy(scrollContainer, { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, scrollLeft(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.x; }, // 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: scrollContainer.style.transform ? "transform" : "fixed" }); window.addEventListener("load", function () { let pinBoxes = document.querySelectorAll(".pin-wrap > *"); let pinWrap = document.querySelector(".pin-wrap"); let pinWrapWidth = pinWrap.offsetHeight ; let horizontalScrollLength = pinWrapWidth - window.innerHeight; gsap.to(".pin-wrap", { scrollTrigger: { scroller: scrollContainer, //locomotive-scroll scrub: true, trigger: "#sectionPin", onEnter:() => { console.log("Enter") }, pin: true, //horizontal: true, // anticipatePin: 1, start: "left center", end: pinWrapWidth }, /*y: -horizontalScrollLength, ease: "none"*/ }); // 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(); }); I cant seem to find out why its not working. The structure of my DOM is similiar as in the codepen. Special is that I use Elementor as my base, but it should not have any affect on this. As attribute I do have data-section in each section, as its not working else... Hope someone can help me!!! ❤️ Cheers zoruak

Hey guys, I wonder if you could give me some advice again I am using the Locomotive smooth scroll script (https://locomotivemtl.github.io/locomotive-scroll/), which gives my projects a beautiful buttery scroll effect but I need some help with playing GSAP animations along with this when the target element comes into view. You'll see in the Pen that when each block comes into view it has a class added "is-inview". It would be great if I could just have an animation play as soon as that class is added, and then reverse when that class is removed. Maybe something to keep looking for changes on the elements? Any ideas? Huge thanks as always! Andy

When I add pin to element background of scroll is visible Here's my code: gsap.registerPlugin(ScrollTrigger); function gsapanim(){ const locoScroll = new LocomotiveScroll({ el: document.querySelector(".scrollContainer"), smooth: true }); // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning) locoScroll.on("scroll", ScrollTrigger.update); // tell ScrollTrigger to use these proxy methods for the ".smooth-scroll" element since Locomotive Scroll is hijacking things ScrollTrigger.scrollerProxy(".scrollContainer", { 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(".scrollContainer").style.transform ? "transform" : "fixed" }); // TIMELINE 1 const tl1 = gsap.timeline({scrollTrigger: { scroller: ".scrollContainer", trigger: '.header', start: "top top", end: "bottom 60%", scrub: 3, markers: false, id: 'header', pin: '.header', } }); tl1.to('.top__logo', { scale: 4, opacity: 1, ease: "none" }) const tlcs = gsap.timeline({scrollTrigger: { scroller: ".scrollContainer", trigger: '.header', start: "top top", end: "bottom 60%", scrub: 3, markers: false, pin: '.header', } }); tlcs.to('.top__smoke-child', { x: "-200%", opacity: 0, ease: "none", id: "header2" }) tl1.to('.top__logo', {scale: 5, opacity: 0, duration: 0.5}); tl1.to('.header', {opacity: 0, duration: 0.1}); tl1.to('.header', {display:"none", color: "black"}); // TIMELINE 2 const tl2 = gsap.timeline({scrollTrigger: { scroller: ".scrollContainer", trigger: ".section--main__ui_1", start: "-385px 28%", end: "999px 33%", markers: true, toggleActions: "restart none restart none", id: "tl2" } }); tl2.fromTo('.main__top_1', {opacity: 0}, {opacity: 1, duration: 1, delay: 1}) tl2.fromTo('.main__description_1', {opacity: 0}, {opacity: 1, duration: 1}) const tl3 = gsap.timeline({scrollTrigger: { scroller: ".scrollContainer", trigger: ".section--main__ui_2", start: "-385px 28%", end: "999px 33%", markers: true, toggleActions: "play restart restart none", id: "tl3", } }); tl3.fromTo('.main__top_2', {opacity: 0}, {opacity: 1, duration: 1, delay: 1}) tl3.fromTo('.main__description_2', {opacity: 0}, {opacity: 1, duration: 1}) // 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(); P.S: My container is also called "scrollContainer"

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 !