Search the Community

Hi Everyone, Can anyone help me to create sticky section with image, content reveal effect same as this reference website https://pave.ai/ ? It would be also good If any similar code, example available.

Hi, This is a bit beyond the scope of the help we provide in these free forums, since locomotive is not a GSAP product and we don't have the time resources to provide support for it, and the particular setup you have is a part of the problem as well (not being able to give an element a fixed height and overflow). Here is a demo of Locomotive using ScrollTrigger: https://codepen.io/GreenSock/pen/bGQaqzw Hopefully that helps. Happy Tweening!

Hii @Rodrigo i applied locomotiveJs(In locomotive js we have to make one wrapper div and we can not give height to it) to my project and scrollTrigger is giving me same problem, I can't give height to the wrapper div (main) so is there any other way to use scroller as main without giving it height .Hope you understood my problem

Hi, I am using locomotive scroll for the first time. I am facing some issue with moving horizontally when scrolling up or scrolling down. I am trying to have a effect like this website https://polygondesign.com.au/ It scrolls fine when I horizontally scroll on mousepad but not vertically up or down swipe on mac book. Highly appreciate any ideas or suggestions. thanks The attached codepen doesnt have the problem but attached to just give idea on what should be happening when scroll up and down. same behavior doesnt happen on my website. (I wonder if this is anything to do with any css issue) document.addEventListener('DOMContentLoaded', function() { var container = document.querySelector('#page'); // Initialize Locomotive Scroll var lscroll = new LocomotiveScroll({ el: container, smooth: true, // Enable smooth scrolling horizontal: true, // Enable horizontal scrolling multiplier: 2 }); // Add event listener for wheel event - DOESNT HORIZONTALLY MOVE WHEN VERTICALLY SCROLLED container.addEventListener("wheel", (evt) => { evt.preventDefault(); container.scrollLeft += evt.deltaY; }, { passive: false }); });

okey really really thank you for resolving my problem. I didn't choose second option because I wanted to use locomotive js on this ane if I wanted to apply locojs I can't give any height to the wrapper div.

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.

Hello everybody My apologies if I didn't find another way to ask a relatively simple question. I didn't find anything related to this here on the forum or on Google. I need to embed a video in HTML and I want the entire page to scroll smoothly. As I am not a member of the GSAP club, I tried the option of working with the Locomotive Scroll along with other GSAP codes for other animations. But when I turn the mouse wheel over the video, the scrool doesn't work. It only works if the iframe is at a lower z-index or something like that, but this way, the video commands don't work. Does the ScrollSmoother plugin available at the GSAP club, work with the mouse over an iframe? Grateful.

Hello im trying to get my barba.js to work and animate to different pages. When it goes to the second page it doesnt do anything. None of the buttons work either. Also I tried uploading to codepen but im not sure how to do multiple pages on there. here it is live and and git hub code

https://oceanschool.nfb.ca/

If I take a quick glance at your live site I see you're loading locomotive scroll, which is not part of the sandbox demo you've shared. That is why you make a minimal demo of your current setup, you already have a start point, great, so start introducing all the parts of your live site to the demo, so you can easily see when things break. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. This is not something we normally do on this forum, but because you're new here I've forked the pen from our own @Carl you've shared and add locomotive scroll to it and indeed everything breaks! We can't support third party tools on this free forum, we like to scope questions to GSAP tools only. We do however have our own smooth scroll library aptly named ScrollSmoother, you'll see this works out of the box with all the GSAP tools, but is only available for our club members. So you'll have to ask your self "how much is smooth scrolling worth for my project?", are you going to spend your free time debugging locomotive scroll with ScrollTrigger or become a member? I know what I would choose, but I can't judge that for you. In the past there where some to topic about locomotive scroll and ScrollTrigger, but since we've created our own plugin the advice use that this will work out of the box and will be much easier. https://codepen.io/mvaneijgen/pen/poBgrxy?editors=1010

import React, { useEffect, useLayoutEffect, useRef } from "react"; import Navbar from "../../Components/Navbar"; import HeroSection from "../hero-section"; import SecondSection from "../SecondSection"; import ThirdSection from "../third-section"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import my from "../../assets/videos/my.mp4"; import MyProjects from "../projects-section"; import useLocoScroll from "../../utils/customHooks/useLocoMotive"; import { useState } from "react"; const Main = () => { // refs const ref = useRef(null); const img = useRef(null); // initialalizing custom hook useLocoScroll(); // regiester ScrollTrigger gsap.registerPlugin(ScrollTrigger); useLayoutEffect(() => { let ctx = gsap.context(() => { const elem = ref.current; // for second section text gsap.to( elem.querySelector("#hid"), { transform: "translateX(-100%)", ease: "none", fontWeight: "40", scrollTrigger: { trigger: document.querySelector("#component"), markers: false, start: "start start", // end: "bottom 40%", // end: () => "+=" + document.querySelector("#hid").offsetWidth, end: () => "+=" + document.querySelector("#hid").offsetWidth * 0.1, scrub: 1, pin: true, fastScrollEnd: true, }, }, ref ); }); return () => { ctx.revert(); }; }, []); useLayoutEffect(() => { const ctx = gsap.context(() => { const elem = img.current; console.log(); gsap.fromTo( "#header_img", { scale: 0.3, translateY: "-60%" }, { // y: -10, scale: 1, ease: "none", force3D: true, scrollTrigger: { trigger: elem, pin: true, start: "top 65%", end: "bottom 70%", // pinType: isTouch ? "fixed" : "transform", scrub: 1, markers: true, }, } ); }); return () => { ctx.revert(); }; }, []); return ( <> <div ref={ref} id="scroll_head" data-scroll-container> <Navbar /> <HeroSection /> {/* second section */} <div className="flex justify-start items-center overflow-hidden h-[100vh]" id="component" data-scroll-section > <h1 className="text-[40vw] uppercase main-heading whitespace-nowrap py-10" id="hid" > Where Imagination Meets Code </h1> <p className="text-white text-4xl">njgjhghgt</p> </div> {/* Third section */} <div className="h-[60vh] flex justify-center items-center" ref={img} data-scroll-section> <img src="https://platinumlist.net/guide/wp-content/uploads/2023/03/IMG-worlds-of-adventure.webp" alt="" data-speed="0.5" id="header_img" style={{ transformOrigin: "center center", scale: "0.3" }} /> </div> <MyProjects /> </div> </> ); }; export default Main; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/all"; import LocomotiveScroll from "locomotive-scroll"; import { useEffect } from "react"; import { Scroll } from "react-locomotive-scroll"; gsap.registerPlugin(ScrollTrigger); const useLocoScroll = (start, ref) => { useEffect(() => { let locoScroll = new LocomotiveScroll({ el: document.querySelector("[data-scroll-container]"), smooth: true, // multiplier: 1, class: "is-reveal", }); locoScroll.on("scroll", () => { ScrollTrigger.update(); }); ScrollTrigger.scrollerProxy( document.querySelector("[data-scroll-container]"), { scrollTop(val) { if (locoScroll) { return arguments.length ? locoScroll.scrollTo(val, 0, 0) : locoScroll.scroll.instance.scroll.x; } return null; }, scrollLeft(val) { if (locoScroll) { return arguments.length ? locoScroll.scrollTo(val, 0, 0) : locoScroll.scroll.instance.scroll.x; } return null; }, } ); const isUpdate = () => { if (locoScroll) { locoScroll.update(); } }; ScrollTrigger.addEventListener("refresh", isUpdate); ScrollTrigger.refresh(); return () => { if (locoScroll) { ScrollTrigger.removeEventListener("refresh", isUpdate); locoScroll.destroy(); locoScroll = null; } }; }, [start]); }; export default useLocoScroll;

We like to scope these forums to GSAP only questions. Locomotive scroll is a third party plugins that we can't provide support for. We de however have our own smooth scroll library called ScrollSmoother which works out of the box with all the GSAP tools! If you must use Locomotive scroll I would advise you do check if they have a support forum or otherwise I welcome you to use ScrollSmoother https://gsap.com/docs/v3/Plugins/ScrollSmoother/ Hope it helps and happy tweening!

I succeeded, finally. What I understand is that applying a 0.1s transition in the inline style is necessary for Locomotive Scroll to remain smooth and not stutter during scrolling, especially for discerning eyes. Additionally, from my understanding, favoring divs over spans seems to result in less pressure during scrolling, perhaps due to the block aspect rather than inline-block. Even though you can set a span to display: block, divs might offer a smoother scrolling experience. Moreover, occasionally, and with caution not to overload the browser, I use the willChange: "transform" attribute in the inline style. These measures seem particularly effective for addressing minor shakes and offsets, especially with text elements. Regarding the issue with background-color of sections and text invisibility, applying perspective in the Locomotive Scroll _base.scss file, to the [data-scroll-container], simply add perspective: 1px;. Don't worry at all about the lack of support for Locomotive Scroll in GSAP; the free tools are already excellent. As for the GSAP smooth scroll, yes, I'm aware, but it's a licensed option, correct? I also wanted to know, the license with all GSAP tools, is it a license that one can use for commercial websites? And how much does it cost and for how long does it work? I'd like to learn more. And thank you for the links and the response !

I am trying the exact same thing i saw in tutorials but don't now why I am still getting the locoScroll.on isn't a function error here is my code : import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; import LocomotiveScroll from "locomotive-scroll"; const scrollLoco = () => { gsap.registerPlugin(ScrollTrigger) const scrollEl = document.querySelector('.main'); let locoScroll = new LocomotiveScroll({ el: scrollEl, smooth: true, multiplier: 1.5, }); locoScroll.on('scroll', ScrollTrigger.update); ScrollTrigger.scrollerProxy(scrollEl, { scrollTop(value) { if (locoScroll) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; } return null; }, scrollLeft(value) { if (locoScroll) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.x; } return null; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight, }; }, }); const lsUpdate = () => { if (locoScroll) { locoScroll.update(); } }; ScrollTrigger.addEventListener('refresh', lsUpdate); ScrollTrigger.refresh(); } export default scrollLoco

Hi, Yeah unfortunately Locomotive is not a GSAP product and we don't have the time resources to provide support for it. Although @akapowl one of our superstars here in the forums shares some great insight on using Locomotive in general and with React in this thread: Also you'd like to check this threads as well: Finally GSAP has it's own smooth scrolling solution: ScrollSmoother https://gsap.com/docs/v3/Plugins/ScrollSmoother/ Here is a demo in React: https://stackblitz.com/edit/stackblitz-starters-9xvpi2 Hopefully this helps. Happy Tweening!

https://stackblitz.com/edit/stackblitz-starters-9py85q?description=React TypeScript starter project&file=src%2FApp.tsx,src%2Fstyle.css,src%2FLocoScrollHook.js&title=React Starter Here's a minimal demo. Locomotive Scroll isn't configured; I can't manage to do it. The issue doesn't occur in the minimal demo, so it must be related to Locomotive Scroll.

/* global gsap */ import React, { useEffect } from 'react'; import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; import Navbar from './Navbar'; import backgroundImage from '../Assets/bmw.jpg'; const Herosection = () => { useEffect(() => { gsap.registerPlugin(ScrollTrigger); const tl = gsap.timeline({ scrollTrigger: { trigger: "#main", markers: true, start: "50% 50%", end: "100% 50%", scrub: 2, // pin: true } }); tl.to("#center", { height: "100vh" }, 'a') .to("#top", { top: "-50%" }, 'a') .to("#bottom", { bottom: "-50%" }, 'a') .to("#top-h", { top: "60%" }, 'a') .to("#bottom-h", { bottom: "-30%" }, 'a') .to(".content", { delay: -0.2, marginTop: "0%" }); }, []); return ( <div> <Navbar /> <div id="main-p"></div> <div id="main"> <div id='top'> <h id="top-h">Gallery</h> </div> <div id="center" style={{ backgroundImage: `url(${backgroundImage})` }}> <div className="content"> <h4>GRAVITY</h4> <h3>Browse the work that define a movement and created a craft.</h3> <div className="btn"> <h5>ENTER GALLERY</h5> </div> <h2>(17)</h2> </div> </div> <div id='bottom'> <h id="bottom-h">Gallery</h> </div> </div> </div> ); }; export default Herosection; //css *{ margin: 0; padding: 0; box-sizing: border-box; color: #0f0f0f; } @font-face { font-family: Founder; src: url(./Assets/FoundersGroteskCondensed-Bold.woff2); } @font-face { font-family: CardinalR; src: url(./Assets/cardinalfruitweb-regular.woff2); } @font-face { font-family: Cardinali; src: url(./Assets/cardinalfruitweb-italic.woff2); } @font-face { font-family: Font1; src: url(./Assets/kesslersuperdisplayweb-regular.ttf); } @font-face { font-family: Font2; src: url(./Assets/FraktionMono-Regular.ttf); } html, body { font-family: "Roslindale Display Condensed"; scroll-behavior: smooth; scroll-snap-type: y proximity; } .nav { position: fixed; width: 100%; display: flex; justify-content: space-between; z-index: 1000; } .nav-links { display: flex; } .logo, .nav-item { margin: 2em; font-weight: 400; font-size: 1.5vw; } h1 { width: 80%; position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; font-weight: 500; font-size: 20vw !important; line-height: 1; text-transform: uppercase; } a { text-decoration: none; font-weight: 500; } .slide-in { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #0f0f0f; transform-origin: bottom; z-index: 15; } .slide-out { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #0f0f0f; transform-origin: top; z-index: 15; } #main-p{ width:100%; height:100vh; background-color: #ffffff; } #main{ position: relative; width: 100%; height: 100vh; background-color: aquamarine; overflow: hidden; z-index: 0; } #top{ position: absolute; top: 0; width: 100%; height: 50vh; background-color: #fff; z-index: 1; overflow: hidden; } #center{ position: relative; width: 100%; height: 100vh; transform-origin: center; background-color: rgba(0, 0, 0, 0.5); transition: all cubic-bezier(0.19, 1, 0.22, 1)1s; overflow: hidden; } #bottom{ position: absolute; bottom: 0; width: 100%; height: 50vh; background-color: #fff; overflow: hidden; } #main h{ font-family: Founder; font-size: 22vw; position: absolute ; top: 46.5%; left: 50%; transform: translate(-50%,-50%); } #top-h{ bottom: 50% ; } #bottom-h{ top:0% !important; } .content{ margin-top: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100vh; color: #ffffff; gap: 4vh; } .content h4{ font-size: 1vw; font-family: Founder; color: #fff; } .content h3{ width: 22%; font-size: 3vw; font-family: CardinalR; text-align: center; font-weight: 400; color: #fff; } .content .btn{ display: flex; align-items: center; justify-content: center; width: 7vw; height: 2vw; border-radius: 50px; background-color: #fff; color: #0d0d0d; font-family: Founder; } .content h2{ font-size: 20vw; font-family: Founder; color: #fff; } /* HeroSection2 */ #main1{ position: relative; display: flex; align-items: center; width: 100%; height: 100vh; z-index: 0; /* overflow: hidden; */ margin-top: 100px; } .left1{ display: flex; align-items: center; justify-content: center; width: 30%; height: 100%; } .center1{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 40%; height: 120%; } .right1{ display: flex; align-items: center; justify-content: center; width: 30%; height: 100%; } .btn1{ display: flex; align-items: center; justify-content: center; align-items: center; padding: 0.5vw 1.2vw; border: 1px solid #333; border-radius: 50px; font-size: 0.5vw; font-family: Font2; transition: all cubic-bezier(0.19, 1, 0.22, 1)1s; } .t-center{ display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 50%; transition: all cubic-bezier(0.19, 1, 0.22, 1)2s; } .b-center{ width: 100%; height: 50%; transition: all cubic-bezier(0.19, 1, 0.22, 1)2s; } .center1 hk{ line-height: 15vh; font-size: 10vw; font-weight: 400; font-family: Font1; text-align: center; } .c-center-one{ position: relative; transform-origin: center; width: 100%; height: 0vh; transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s; } .c-center-two{ width: 100%; height: 0vh; transition: all cubic-bezier(0.19, 1, 0.22, 1)1s; } .img-all{ position: absolute; opacity: 0; pointer-events: none; transition: all cubic-bezier(0.19, 1, 0.22, 1)2s; background-size: cover; background-position: center; z-index: 200; } .img-one{ bottom: 60%; right: 50%; width: 25vw; height: 25vh; filter: blur(10px); transition: all cubic-bezier(0.19, 1, 0.22, 1)2s; } .img-two{ top: 55%; left: 50%; width: 15vw; height: 17vh; filter: blur(5px); transition: all cubic-bezier(0.19, 1, 0.22, 1)2s; } .img-three{ top: 50%; left: 37%; width: 10vw; height: 12vh; background-image: url(https://images.unsplash.com/photo-1683446297911-f4a1fa8e62dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2564&q=80); filter: blur(20px); transition: all cubic-bezier(0.19, 1, 0.22, 1)2s; } .img-four{ top: 40%; left: 55%; width: 7vw; height: 7vh; background-image: url(https://images.unsplash.com/photo-1683446297911-f4a1fa8e62dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2564&q=80); filter: blur(20px); } #one{ background-image: url(https://images.unsplash.com/photo-1682687218608-5e2522b04673?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2575&q=80); } #two{ background-image: url(https://images.unsplash.com/photo-1683446297911-f4a1fa8e62dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2564&q=80); } #three{ background-image: url(https://images.unsplash.com/photo-1683573254548-ebb7b94d7def?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1353&q=80); } #four{ background-image: url(https://images.unsplash.com/photo-1683053243792-28e9d984c25a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1160&q=80); } #five{ background-image: url(https://images.unsplash.com/photo-1682709846996-f3c895743d37?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80); } #six{ background-image: url(https://images.unsplash.com/photo-1682794496831-81a52c8e9136?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80); } #seven{ background-image: url(https://images.unsplash.com/photo-1682314803906-d2078f031d82?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80); } #eight{ background-image: url(https://images.unsplash.com/photo-1682200736161-77f04daf9a59?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1744&q=80); } /* Componets2 */ .links { display:flex; gap:3em; } a{ text-decoration: none; color: #000; } footer { position: fixed; bottom:0; width: 100%; padding: 3em; display: flex; justify-content: space-between; align-items: center; } .hero { width: 100%; position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); text-align: center; z-index: -1; } h1 { width: 100%; color: #c0c0c0; font-size: 15vw; font-weight: 400; letter-spacing: -0.05em; } p { font-size: 1.5vw; color: #000; opacity: 0.35; } .btn { position: relative; top:75%; left:50%; transform: translate(-50%, -50%); background: #0084ff; color: #fff; font-size: 12px; border-radius: 30px; padding: 1em 2em; cursor:pointer; z-index: 2; } .img-gallery-container { display: flex; position: relative; width: 100vw; padding-top: 100vh; } .img { position: absolute; margin-bottom: 1em; width: 400px; height: 500px; overflow: hidden; top:50%; left: 50%; transform: translate(-50%, -50%); } .img:nth-child(1), .img:nth-child(3) { left:75%; } .img:nth-child(2), .img:nth-child(4) { left:25%; } .img.reorder { position: absolute; top:47.5%; left:50%; transform: translate(-50%, -50%); width: 250px; height: 325px; } .img.reorder:nth-child(1) { transform: translate(-50%,-50%) rotate(10deg); } .img.reorder:nth-child(2) { transform: translate(-50%,-50%) rotate(-5deg); } .img.reorder:nth-child(3) { transform: translate(-50%,-50%) rotate(2deg); } .img.reorder:nth-child(4) { transform: translate(-50%,-50%) rotate(-2deg); } package.json { "name": "react-website", "version": "0.1.0", "private": true, "dependencies": { "@gsap/react": "^2.1.0", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "framer-motion": "^11.0.6", "gsap": "^3.12.5", "locomotive-scroll": "^4.1.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-locomotive-scroll": "^0.2.2", "react-router-dom": "^6.22.1", "react-scripts": "5.0.1", "sass": "^1.71.1", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } can anyone solve why pin true is not working in my code

I want to convert a locomotive scroll into a gsap module on react. import React, {useLayoutEffect} from "react"; import { useEffect } from "react"; import { useRef } from "react"; import { imageData } from "../../../Constants/constants.jsx"; import LocomotiveScroll from "locomotive-scroll"; import "../../../../node_modules/locomotive-scroll/src/locomotive-scroll.scss"; import "../../../styles.scss" import GalleryItem from "./GalleryItem.jsx"; const Home = () => { const ref = useRef(null); useEffect(() => { if (ref) { if (typeof window === "undefined" || !window.document) { return } const scroll = new LocomotiveScroll({ el: ref.current, smooth: true, direction: "horizontal", multiplier: 0.5, }); } }, []); const images = imageData.map((tupples, index) => tupples.map((url, elementIndex) => ( <GalleryItem key={url} src={url} index={elementIndex} columnOffset={index * 7} /> )) ); if (typeof window === "undefined" || !window.document) { return null } return ( <> {/*<div className="top"></div>*/} <div className="main-container"> <div className="scroll-container" data-scroll-container ref={ref}> <div className="content"> <div className="gallery"> {images} </div> </div> </div> </div> </> ); }; export default Home; I can't use locomotive scroll with both vertical and horizontal scroll. This component display multiple images placed on different position.

Hi I'm new in this web development. I'm learning things right now. This codepen is fully working but when i apply locomotive js in this js file it stops me from scrolling i don't even see the scroll bar. I want to achieve this codepen animation which also woks with the locomotive js. Please help me and explain how it works. Thanks One more thing, when i apply the locomotive i change the scroller to ".main" it is still not working

Hi, @akapowl one of the forums superheroes created this nice demo using locomotive that you can check: https://codepen.io/akapowl/pen/wvJroYy Happy Tweening!

I am not particularly tied to locomotive scroll. Whatever can achieve the goal is fine. Do you know if this effect can be achievable in ScrollSmoother? Is there a close enough demo example of what I am looking for? Any ideas would be helpful. Thank you so much! The screen should be able to scroll smoothly in horizontal direction with any wheel event whether up/down or sideways just like in https://polygondesign.com.au/.

<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 { 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> I use Nuxt3 and gsap and Locomotive Scroll. My first animation called tl working correct, but when scroll down and view second animation called tl1 doen't working. How I can fix it ? my webiste: https://skandynawia-przystan.vercel.app/ my github: https://github.com/cyprianwaclaw/Skandynawia-Przystan

how to use snap with scrolltrigger using with locomotive scroll. i know this is other library

Hi everyone, i hope you can help me with this error. I can't understand why is not working my code.. This is the page: import { motion } from "framer-motion"; import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; import React, { useLayoutEffect, useRef } from "react"; import styled from "styled-components"; import Img1 from "../assets/images/project1.jpg"; import Img2 from "../assets/images/project1.1.jpg"; import Img3 from "../assets/images/project2.jpg"; import Img4 from "../assets/images/project2.1.jpg"; import Img5 from "../assets/images/project3.jpg"; import Img6 from "../assets/images/project3.1.jpg"; import Img7 from "../assets/images/project4.png"; import Img8 from "../assets/images/project4.1.png"; const Section = styled.div` min-height: 100vh; width: 100%; margin: 0 auto; display: flex; justify-content: flex-start; align-items: flex-start; position: relative; /* background-color: ${(props) => props.theme.text}; */ `; const Title = styled(motion.h1)` font-size: ${(props) => props.theme.fontxxxl}; font-family: "Kaushan Script"; font-weight: 300; color: ${(props) => props.theme.body}; text-shadow: 1px 1px 1px ${(props) => props.theme.text}; position: absolute; top: 5rem; left: 5rem; z-index: 15; @media (max-width: 64em) { font-size: ${(props) => props.theme.fontxxl}; } @media (max-width: 48em) { font-size: ${(props) => props.theme.fontxl}; } `; const Text = styled.div` width: 20%; background-color: #363636; color: #fff; font-size: ${(props) => props.theme.fontlg}; font-weight: 300; position: absolute; padding: 2rem; height: 100vh; top: 0; left: 0; z-index: 11; p { position: relative; font-size: ${(props) => props.theme.fontlg}; font-weight: 300; margin: 0 auto; top: 25%; } @media (max-width: 48em) { display: none; } `; const RightSide = styled.div` position: absolute; padding-left: 30%; background-color: ${(props) => props.theme.grey}; min-height: 100vh; display: flex; justify-content: flex-start; align-items: center; `; const Item = styled(motion.div)` display: inline-block; width: 20rem; margin-right: 6rem; img { width: 100%; height: auto; cursor: pointer; } h1 { font-weight: 500; text-align: center; cursor: pointer; } @media (max-width: 48em) { width: 15rem; } `; const Product = ({ img, title = "" }) => { return ( // x: 100, y: -100 <Item initial={{ filter: "grayscale(100%)" }} whileInView={{ filter: "grayscale(0%)" }} transition={{ duration: 0.5 }} viewport={{ once: false, amount: "all" }}> <img width="400" height="600" src={img} alt={title} /> <h1>{title}</h1> </Item> ); }; const Portfolio = () => { gsap.registerPlugin(ScrollTrigger); const ref = useRef(null); const horRef = useRef(null); useLayoutEffect(() => { try { let element = ref.current; let scrollingElement = horRef.current; let pinWrapWidth = scrollingElement.offsetWidth; let t1 = gsap.timeline(); setTimeout(() => { t1.to(element, { scrollTrigger: { trigger: element, start: "top top", end: `${pinWrapWidth} bottom`, scroller: ".App", //locomotive-scroll scrub: 1, pin: true, }, height: `${scrollingElement.scrollWidth}px`, ease: "none", }); t1.to(scrollingElement, { scrollTrigger: { trigger: scrollingElement, start: "top top", end: `${pinWrapWidth} bottom`, scroller: ".App", //locomotive-scroll scrub: 1, }, x: -pinWrapWidth, ease: "none", }); ScrollTrigger.refresh(); }, 1000); ScrollTrigger.refresh(); return () => { t1.kill(); ScrollTrigger.kill(); }; } catch (error) { console.error("ScrollTrigger Error:", error); } }, []); return ( <Section> <Title data-scroll data-scroll-speed="-2" data-scroll-direction="horizontal"> Portfolio </Title> <Text data-scroll data-scroll-speed="-4"> <p> Welcome to our Portfolio Showcase, where we proudly present a curated selection of our finest web development projects. Each project is a testament to our team's creativity, technical expertise, and unwavering commitment to excellence. <br /> <br /> Explore a diverse range of visually stunning and functionally exceptional websites that we've crafted for clients across various industries. From sleek and modern designs to user-friendly e-commerce platforms, our portfolio embodies the essence of innovation and craftsmanship. <br /> <br /> These projects are not just websites; they are successful digital experiences that have helped our clients thrive online. Discover the possibilities with our web development agency through our showcased masterpieces. </p> </Text> <RightSide ref={horRef}> <Product img={Img1} title="AFA Trasporti" /> <Product img={Img2} title="AFA Trasporti" /> <Product img={Img3} title="Confort Uno Mobili" /> <Product img={Img4} title="Confort Uno Mobili" /> <Product img={Img5} title="Upvision Media 1.0" /> <Product img={Img6} title="Upvision Media 1.0" /> <Product img={Img7} title="Portfolio" /> <Product img={Img8} title="Portfolio" /> </RightSide> </Section> ); }; export default Portfolio; This is ScrollerTriggerProxy: import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; import { useEffect } from "react"; import { useLocomotiveScroll } from "react-locomotive-scroll"; const ScrollTriggerProxy = () => { const { scroll } = useLocomotiveScroll(); gsap.registerPlugin(ScrollTrigger); useEffect(() => { if (scroll) { const element = scroll?.el; scroll.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(element, { 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: element.style.transform ? "transform" : "fixed", }); } return () => { ScrollTrigger.addEventListener("refresh", () => scroll?.update()); ScrollTrigger.refresh(); }; }, [scroll]); return null; }; export default ScrollTriggerProxy; And App.js: import { ThemeProvider } from "styled-components"; import GlobalStyle from "./style/GlobalStyle"; import { dark } from "../src/style/Themes.js"; import { LocomotiveScrollProvider } from "react-locomotive-scroll"; import ScrollTriggerProxy from "./components/ScrollTriggerProxy"; import { useRef } from "react"; import Home from "./sections/Home"; import "locomotive-scroll/dist/locomotive-scroll.css"; import { AnimatePresence } from "framer-motion"; import Services from "./sections/Services"; import Portfolio from "./sections/Portfolio"; function App() { const containerRef = useRef(null); return ( <> <GlobalStyle /> <ThemeProvider theme={dark}> <LocomotiveScrollProvider options={{ smooth: true, // ... all available Locomotive Scroll instance options smartphone: { smooth: true, }, tablet: { smooth: true, }, }} watch={ [ //..all the dependencies you want to watch to update the scroll. // Basicaly, you would want to watch page/location changes // For exemple, on Next.js you would want to watch properties like `router.asPath` (you may want to add more criterias if the instance should be update on locations with query parameters) ] } containerRef={containerRef}> <ScrollTriggerProxy /> <AnimatePresence> <main className="App" data-scroll-container ref={containerRef}> <Home /> <Services /> <Portfolio /> </main> </AnimatePresence> </LocomotiveScrollProvider> </ThemeProvider> </> ); } export default App; Hope you can help me, thanks.

thanks im also facing some issues while using locomotive scroll along with gsap i used the function that was already provided by gsap but still my div that were having fixed position were not working as they should