Search the Community

I'm trying to implement a GSAP timeline with Locomotive Scroll beta to pin an element while scrolling in a Next.js component. The code works perfectly in a normal HTML and JS environment, but it's not functioning as expected in Next.js. Here is the minimal demo with normal html environment: https://codesandbox.io/p/sandbox/gsap-timeline-forked-3dqjgv?file=%2Fsrc%2Findex.js%3A8%2C18 Here is the Next Js version: https://codesandbox.io/p/devbox/c4cq6q?file=%2Fpin-element%2Fsrc%2Fapp%2FPinComponent.js%3A28%2C11 I'm new to GSAP and I'm looking for assistance to fix the issue.

Hi, I have a project that deployed live: https://taxbiexwaterpoloclub.com/ When the page loads the first time (after a hard refresh *sometimes not always*) the footer is not able to scroll to the bottom, you can see that you have space on the scroller but you can't actually scroll. if you scroll via the scroller it pushes the page back up again.. you have to either refresh the page or else resize the window. it's very random and sometimes it works as is should, sometimes i doesn't. i'm using gsap and scroll trigger for most of the animations.. I'm also using locomotive scroll for smooth scrolling. On a development environment this doesn't happen only once it's deployed to a live server. I've linked the footer file to this thread home-footer-old.php

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

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 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.

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/.

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!

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 }); });

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

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

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 !

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.

Issue resolved. I had a `will-change: transform` in my _base.scss file for Locomotive Scroll. No more offset or shaking. However, now when I scroll back up after the pinned element, there's a latency before the section's color takes effect. During this time, the body's color is applied.

Hello community! So, I'm using React, GSAP, and LocomotiveScroll. When I scroll, sometimes there's a kind of focus shift on the text if, for example, I translate it on the y-axis. Most often, a 0.1s transition in the inline style of the target element fixes the issue. Rarely not. Additionally, on a specific element, a banner with text that translates on the x-axis, a slight offset occurs between each scroll. The text seems to increase by 1px, then goes back down by that pixel once the scroll progress is completed, and there's still that notorious focus shift that blurs the text. This latter issue happens on a section that I pin with ScrollTrigger. I've created a minimal demo on CodePen, but I have a problem I can't solve with the operation or import of Locomotive Scroll in my App.tsx (possibly a TypeScript syntax issue that I'm not familiar with), so the demo isn't effective, but I'll share it. Thanks. https://stackblitz.com/edit/stackblitz-starters-9py85q?description=React TypeScript starter project&file=src%2FApp.tsx,src%2FLocoScrollHook.js&title=React Starter

/* 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

Hello community! So here's the thing: I have a window.resize event where I apply a state as true or false based on the screen size to hide and show elements. However, when I resize the window, the ScrollTrigger doesn't retrigger. I'm using React with Locomotive Scroll. During the resize event, I destroy (if that's the right logic) all the ScrollTriggers, then I do a ScrollTrigger.refresh(). My ScrollTriggers have invalidateOnRefresh: true, but nothing seems to work. So, I'm lost. If you need a minimal demo without issues, I can provide one. Thanks.

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

Hi, You can definitely create parallax effects with ScrollTrigger: https://codepen.io/GreenSock/pen/rNJQPXz https://codepen.io/GreenSock/pen/BarmbXq And this demo by @akapowl shows how to integrate ScrollTrigger with Locomotive: https://codepen.io/akapowl/pen/wvJroYy Hopefully this helps. Happy Tweening!

https://oceanschool.nfb.ca/

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 community. So, after numerous searches and head-banging, I can't find the solution. I have an animation triggered by ScrollTrigger. This animation targets phrases. These phrases are inserted into the DOM through a map, triggered either on rendering or when the state changes. The desired effect is that the state, which is an array of strings, changes when the user hovers over one of the icons next to these phrases. Depending on the targeted icon, there can be two, three, or four phrases. The problem is that during onLeave, onEnterBack, or onLeaveBack, only the number of phrases from the first targeted icon is animated. In short, the initial state contains four phrases; if I then hover over an icon containing 3 phrases, then another icon with 2, then one with 3, then one with 4, only 3 phrases are animated in the ScrollTrigger animation. If the sequence is 4 phrases initially, then 2 on hovering over an icon, then 3, then 4, only 2 phrases are animated. I specify that I also use Locomotive Scroll, and due to the ScrollTrigger proxy, I cannot use useEffect with a dependency array in my .js function.