Jump to content
Search Community

Search the Community

Showing results for 'locomotive' in content posted in GSAP.

Didn't find what you were looking for? Try searching for:

  • Search By Tags

    Type tags separated by commas.

  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.

Find results in...

Find results that contain...


Date Created

  • Start

    End

Last Updated

  • Start

    End

Filter by number of...

Joined

  • Start

    End

Group

Personal Website

Twitter

CodePen

Company Website

Location

Interests

Found 589 results

3
4
5
...
24
Page 4 of 24  
  1. akapowl
    I'm pretty sure that happens, because when reloaded, the window/body/documentElement is not at the very top when locomotive-scroll gets initialized. From what I can tell, on its own, locomotive-scroll will always reload at the very top. I have seen some issues over on their Github where people were asking, whether it was possible to use scroll restoration with locomotive, or for the locomotive-team to implement it, but none of those I remember got a postive answer, if any. So my guess is, that it's just a thing, that is neccessary for locomotive-scroll to work the way it does (one reason I never really used it myself). And a way to work around the issue then would be to set your window.history.scrollRestoration to 'manual' and/or ScrollTrigger.clearScrollMemory('manual') Obviously your page will not reload where it was then, but at least it will be working - as I said, I guess it's very likely just a locomoitve-scroll thing. Does any of you get this updated demo to break? ...I couldn't. https://codepen.io/akapowl/pen/vYzVmVQ
  2. AnimatiCSS
    Hello, first of all congratulations on the great work with this library. When using GSAP + Locomotive Scroll, if I assign the data-scroll-section attribute in the sections to improve performance (as locomotive suggests) then, if we have a Scrolltrigger animation using .pin, it breaks. I imagine because it modifies the DOM by adding a parent above said section. What can we do to solve this problem? Here I leave a codepen with a demonstration of what I say: https://codepen.io/animaticss/pen/wvqGBMM Thank you!
  3. Dallah
    Hi, I have an issue with the locomotive scroll and scroll trigger pin, but it's only happening on mobile. This issue can also be seen on the scrollProxy doc example in codepen Somehow, the moment the scroll enters the pin section and the scroll speed is too fast, there will be a flash of white space that only appears for a few milliseconds. As seen in this video. Sometimes the section event gets detached and stacked on top of the other section White space: 00:05 00:24. Section detached: 00:42 Thanks for your help and for this amazing product! * Recorded on Android
  4. Ivan Mocs
    Hello, how to make Back to top with progress indicator like this: i use locomotive scroll in html I use it, but it not work : Back to top with progress indicator 2 (codepen.io)
  5. BenjaminO
    Hello folks, I was using the library Locomotive-Scroll with Barba js and Scrolltrigger proxy. But I saw the latest release of GSAP and it seems that the new ScrollSmoother plugin can correct a lot of problem I have (especially on safari IOS because Locomotive can't handle smooth : true for mobile). Unfortunately, I am struggling making things work. I set the following structure in my HTML : <body data-barba="wrapper"> <div id="smooth-wrapper"> <!-- fix content (not reinjected by barba) --> <main id="smooth-content"> <!-- I tried to invert smooth-content with barba container bu it results the same --> <div data-barba="container" data-barba-namespace="home"> </div> </main> </div> <script type="module" src="./js/main.js"></script> <!-- script where I create instance for ScrollSmoother --> </body> I have this error message : Invalid property – "overscrollBehavior" – "set to" – "none" – "Missing plugin? gsap.registerPlugin()" at load and the browser is lagging a lot. I didn't set CSS Plugin in my main.js (I tried) but I still have the issue. In the Main JS file I set: import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; import SplitText from "gsap/SplitText"; import ScrollSmoother from "gsap/ScrollSmoother"; import ScrollToPlugin from "gsap/ScrollToPlugin"; gsap.registerPlugin(ScrollTrigger, SplitText, ScrollSmoother, ScrollToPlugin); If you have an idea, I would be super happy. And thank you in advance !!
  6. rapidmotion134
    Am using Angular and trying to do an animation on ScrollTrigger and using locomotive scroll for scrolling and cant get the scroll animation to work animation (works when I remove locomotive scroll) and my code is as follows import { Component, ElementRef, Inject, OnInit, ViewChild, } from '@angular/core'; import LocomotiveScroll from 'locomotive-scroll'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import { DOCUMENT } from '@angular/common'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent implements OnInit { locoScroll!: LocomotiveScroll; @ViewChild('home', { static: true }) home: ElementRef<HTMLDivElement>; constructor(@Inject(DOCUMENT) private document: Document) { gsap.registerPlugin(ScrollTrigger); } ngOnInit(): void { this.locoScroll = new LocomotiveScroll({ el: document.querySelector('#body'), smooth: true, }); this.locoScroll.on('scroll', ScrollTrigger.update); this.setup(); this.initialAnimation(); this.initScrollAnimation(); ScrollTrigger.addEventListener('refresh', () => this.locoScroll.update()); ScrollTrigger.refresh(); } setup(): void { ScrollTrigger.scrollerProxy('#body', { scrollTop(value) { return arguments.length ? this.locoScroll.scrollTo(value, 0, 0) : this.locoScroll.scroll.instance.scroll.y; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight, }; }, pinType: (<HTMLElement>document.querySelector('#body')).style.transform ? 'transform' : 'fixed', }); } initScrollAnimation() { gsap.from('.about', { scrollTrigger: { trigger: '.about', scroller: '#body', start: 'bottom bottom', scrub: true, }, ease: 'power4.out', duration: 2, opacity: 0, y: +50, }); } initialAnimation(): void { gsap.from(this.home.nativeElement.childNodes, { duration: 2.5, opacity: 0, scale: 0, ease: 'power4.out', stagger: 0.5, delay: 0.5, }); } } can someone please point out what am missing or doing wrong, thank you
  7. Ocamy
    Hi, i encounter a problem trying to use Locomotive Scroll and Barba, the pinned section is in wrong position on the initial load, but after going to next page and coming back it works fine. I've combined to demos that i found to show the problem. https://codesandbox.io/embed/smoosh-hill-qb6er4?fontsize=14&hidenavigation=1&theme=dark LE: By providing the demo i found out that resizing the window (in codesandbox) it works fine but i still don't know how to solve it. The actual question: how can i add ScrollTrigger.refresh() without resizing the window?
  8. Md. Israfil
    Hi there I'm new in gsap I'm having issues with animating images on scrollTrigger in react js. When I'm scrolling onUpdate function not calling I know i'm doing something wrong in my code but I can't figure out. import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'; import './App.css'; import Header from './Components/Header'; import Page from './Components/Page'; import Page1 from './Components/Page1'; import Page2 from './Components/Page2'; import Page3 from './Components/Page3'; import Page4 from './Components/Page4'; import Page5 from './Components/Page5'; import Page6 from './Components/Page6'; import Page7 from './Components/Page7'; import Page8 from './Components/Page8'; import Page9 from './Components/Page9'; import LocomotiveScroll from 'locomotive-scroll'; import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import { useGSAP } from '@gsap/react'; gsap.registerPlugin(ScrollTrigger); function App() { const mainRef = useRef<HTMLElement>(null); const page = useRef<HTMLElement>(null); const page1 = useRef<HTMLElement>(null); const page2 = useRef<HTMLElement>(null); const page3 = useRef<HTMLElement>(null); const page4 = useRef<HTMLElement>(null); const page5 = useRef<HTMLElement>(null); const [frameCount, setFrameCount] = useState(467); useLayoutEffect(() => { new LocomotiveScroll({ smooth: true }); }, []); const canvaRef = useRef<HTMLCanvasElement>(null); const [imageSeq, setImageSeq] = useState({ frame: 1 }); const [renderImages, setRenderImages] = useState<Array<HTMLImageElement>>([]); const [loading, setLoading] = useState(true); // useLayoutEffect(() => {}, [canvaRef.current]); function scaleImage(img: HTMLImageElement, ctx: CanvasRenderingContext2D) { console.log(img); const canvas = ctx.canvas; const hRatio = canvas.width / img?.width; const vRatio = canvas.height / img?.height; const ratio = Math.max(hRatio, vRatio); const centerShift_x = (canvas.width - img.width * ratio) / 2; const centerShift_y = (canvas.height - img.height * ratio) / 2; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage( img, 0, 0, img.width, img.height, centerShift_x, centerShift_y, img.width * ratio, img.height * ratio ); } useEffect(() => { const loadImages = async () => { const images = import.meta.glob('./assets/sequence/*'); const imagePromises = Object.values(images).map((resolve) => resolve()); const imageModules = await Promise.all(imagePromises); const imageUrls = imageModules.map((module) => module.default); // setImages(imageUrls); // This will log an array of image URLs return imageUrls; }; loadImages() .then((urls) => { const imgs = urls.map((item) => { const img = new Image(); img.src = item; return img; }); setRenderImages(imgs); }) .then(() => { setLoading(false); }) .catch((err) => console.log(err)); }, []); useGSAP( () => { animation(); }, { dependencies: [renderImages.length], scope: mainRef } ); const animation = async () => { if (!canvaRef.current || !renderImages[0]) return; console.log({ canvaRef }); const canvas = canvaRef.current; const context = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; window.addEventListener('resize', function () { canvas.width = window.innerWidth; canvas.height = window.innerHeight; console.log(this.window.innerWidth); render(context as CanvasRenderingContext2D); }); gsap.to(imageSeq, { frame: frameCount, // Decrement the frame in the animation snap: 'frame', ease: 'none', scrollTrigger: { scrub: 0.5, trigger: page.current, start: 'top top', end: '400% top', scroller: mainRef.current, }, onUpdate: () => { // Update the state with the new frame count setFrameCount((prev) => prev - 1); // Set the updated frame value without animating gsap.set(imageSeq, { frame: frameCount }); // Render based on the updated frame render(context as CanvasRenderingContext2D); console.log(imageSeq); }, }); ScrollTrigger.create({ trigger: mainRef.current, pin: true, markers: true, scroller: mainRef.current, // set start end according to preference start: `top top`, end: `400% top`, }); renderImages[1].onload = () => render(context as CanvasRenderingContext2D); // renderImages[1].onload = () => // scaleImage(renderImages[imageSeq.frame], context); }; function render(context: CanvasRenderingContext2D) { console.log(imageSeq?._gsap); scaleImage(renderImages[imageSeq.frame], context); } console.log(imageSeq); if (loading) return <div>Loading</div>; return ( <div ref={mainRef as React.RefObject<HTMLDivElement>} className='relative overflow-hidden bg-[#2C2C2C]' > <Header /> <div className='r relative overflow-hidden min-h-[100vh] min-w-[100vw]'> <Page ref={canvaRef as React.RefObject<HTMLCanvasElement>} /> <canvas id='canvas' style={{ zIndex: '9999' }} className='z-50 max-w-[100vw] max-h-[100vh]' ref={canvaRef as React.RefObject<HTMLCanvasElement>} ></canvas> </div> <Page1 ref={page1 as React.RefObject<HTMLElement>} /> <Page2 ref={page2 as React.RefObject<HTMLElement>} /> <Page3 ref={page3 as React.RefObject<HTMLElement>} /> <Page4 ref={page4 as React.RefObject<HTMLElement>} /> <Page5 ref={page5 as React.RefObject<HTMLElement>} /> <Page6 /> <Page7 /> <Page8 /> </div> ); } export default App; App.tsx
  9. TrulyNewbie
    Hi, I'm moving from Locomotive to ScrollSmoother. When my testimonial changes size, the area beneath the footer is huge. Or when I resize a text box I have the same problem. So is there a version of "locoScroll.Update", "locoScroll.Start" and "locoScroll.Stop" for gsap? $('.testimonials').on('afterChange', function(){ locoScroll.update();ScrollTrigger.refresh(); console.log("after") }); I've read the docs, but maybe I'm not searching for the right terms
  10. sayan5561
    This is my first time trying scroll trigger in gsap I am trying to understand how locomotive scroll and scroll trigger work together but when the animation is going on I am facing some kind of sticky-ness in the animation I mean the animation is not smooth there some kind of delay in between but I don't know what is the reason for this. I tried to recreate this situation in my code pen which I have linked below. It will be helpful if some one can help me to solve this. thank you
  11. Ramzz
    Hello, guys! how's going? i hope you guys just fine ^_^. I wanna ask about scrollTrigger issue, so i have a locomotive scroll and integrated with GSAP ScrollTrigger but why the animation is going to hard animation or looks like "Steps ease" at my yellow div? (the right side of the "About me" text), and if i add "scrub: true" it will be smooth animation, but i won't add some scrub. You can see my demo here https://codepen.io/ramzxd/pen/vYppKBJ thanks for helping! Keep safe
  12. Niraj
    Hello guys, I am trying to create something similar to this website. https://uiwd.co/ I think I'm pretty close to cracking the code but I am stuck on some issues. 1 : I want image grid on left and right. I can't get these images to align on right side. 2 : Locomotive scroll is not working. When I add it, I can't scroll down past 2 images. 3 : Should I use React to make such websites? Because I will have to create this for client sometime in future. 4: How can I improve my current progress? Thank you all in advance for help.
  13. thefrontendfreak
    Hello there! facing a strange problem. When scrolling through the site the animation is working bit slowly or creating judders. Sometimes the scroll get slow as well. Please help me on this. One of the code sample : gsap.to('.aboutHero__semiTitle h2 .char', { delay: .8, y: 0, opacity: 1, ease: "easeInOut", stagger: 0.004, duration: .5, lazy: false, scrollTrigger: { trigger: '.aboutHero__semiTitle', scrub: false, start: "top 70%", scroller: ".smooth-scroller", pin: 0, } }) Cant share the codepen as the site is on my staging server right now
  14. thefrontendfreak
    Animation not working perfectly. The main goal is to achieve smoothness. But I am not able to getting it. When you scroll down to the page animation feels like laggy or working a bit slowly specially if you scroll faster you will see it stuck into the page sometimes. Please help me on this one. I am really stuck into this from last couple of days.
  15. sonja
    Hello everyone, I am relatively new to the topic of GSAP but have already grown very fond of it. I have been trying to implement a horizontal pinned scroll with some divs scrolling vertically on top of it and got it to work: https://codepen.io/sonjara/pen/eYeoPdO So far, so good! Sadly, as I tried to add a smooth scroll (I tried locomotive and smooth scrollbar) that didn't work at all: https://codepen.io/sonjara/pen/GROLBOb It seems as if the trigger of my ".pinElem" moves as I am scrolling and my divs are too far down? I have looked at a lot of forum entries, but so far I couldn't find a solution. I would be very happy and grateful if someone could take the time to help me Thank you!
  16. neontrenton
    Hello. I'm having trouble getting any GSAP animations to properly show when using Locomotive Scroll. It works properly in Codepen, but in my dev environment, the splittext animations do not fire unless the screen is resized. Any ideas what I'm doing wrong here? I can't seem to replicate in Codepen so I'm not sure how to troubleshoot. Thanks for any help you can send my way!
  17. newyorker
    Hi everyone, I'm new to the community, but been a huge fan of GSAP which i've just started to get into. I'm currently working on a school project, and trying to implement Locomotive scroll with Scrolltrigger. The issue that im facing is when I enable locomotive scroll, everything seems to be working fine, but when i select and go to a specific page from the menu, user gets stuck in that page, I've also realized that gsap animation that is triggered is also acting a bit strange on scroll, and i cant seem to get it working properly. The site functions normal without the locomotive scroll. I've added a rough draft of my project to give some idea of what i'm doing. I'm fairly new to javascript, and i'm not really sure if my implementation is correct, and i would really appreciate if someone could point me into right direction to setup Scrolltrigger and Locomotive scroll to work properly. Thank you & happy tweening ?
  18. Elodie
    Hello, Since last month my website scrolling appears to be lagging on Chrome, desktop version (slow and blurry compared to Firefox) : https://kuroweb.fr/ I use Gsap scroll trigger with locomotive scroll. I guess my code isn't the best optimized but so far it's been working fine : https://kuroweb.fr/wp-content/themes/kuroweb/js/gsap.js Could someone help me understand why? Thanks !
  19. Samsky
    Hallo Greensocks, Happy holidays to you all Is there anyway to achieve the same img parallax effect from locomotive-scroll to scrolltrigger? I honestly don't like scroll jacking with the locomotive-scroll library, it's causing many problems. https://roelle-tolen.netlify.app/ thanks in advance Sam
  20. TrulyNewbie

    Locomotive snap

    TrulyNewbie posted a topic in GSAP

    Hi, I want to snap each section as I scroll. But since I've added locomotive scroll, it no longer works. I've read a bunch of threads and tried to figure it out myself, but I can't find a working solution. I'd appreciate any help! Thank you (again and again)
  21. aleksandrevic
    Dear community, I've implemented smooth and horizontal scrolling with locomotive scroll and I now want to use ScrollTrigger to control animations based on the horizontal scroll progress. Therefore, I've implemented the scrollerProxy function, which only works if I set my page to vertical scrolling via Locomotive Scroll. In general I face two issues: I cannot use ScrollTrigger with horizontal scrolling of Locomotive Scroll I cannot use Locomotive Scroll's data-scroll-sections to split the page (e.g. for better performance). Please find my implementation of scrollProxy: const scrollContainer = document.querySelector('#scrollable'); const locoScroll = new LocomotiveScroll({ el: scrollContainer, smooth: true, direction: 'horizontal', gestureDirection: 'vertical', getSpeed: true, getDirection: true, useKeyboard: true, multiplier: 0.8, firefoxMultiplier: 1.6 }); gsap.registerPlugin(ScrollTrigger); 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; }, getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; }, pinType: scrollContainer.style.transform ? "transform" : "fixed" }); ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); ScrollTrigger.refresh(); Based on this, I tried something like the following: let trigger = gsap.timeline({ scrollTrigger: { trigger: "#section", start: "left right", end: "left center", markers:true } }); trigger.from(".element", { x: "200px" }) The markers do show up, however they are placed for in a way that it looks like scrollTrigger is expecting vertical scrolling. The animation doesn't work at all - nothing happens. Could somebody please help me out? What could I provide you with in order to help me? Thanks, Aleks
  22. Pollux Septimus
    Hello @GreenSock, Thank you very much for your help! I have created a custom hook that integrates locomotive-scroll and ScrollTrigger using the video I linked in the original question, gsap Locomotive Scroll with ScrollTrigger demo, gsap docs for scrollerProxy, and some other Youtube videos. I have also took into consideration your comment from above. Everything works now, and having the hook where I could simply turn locomotive-scroll on and off helped me debug stuff. I will leave the code below for anyone else struggling. Maybe this thread will help. I hope you don't mind. Here is the custom hook: import React, { useEffect } from 'react'; import LocomotiveScroll from 'locomotive-scroll'; import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; const useLocoScroll = (start) => { gsap.registerPlugin(ScrollTrigger); useEffect(() => { if (!start) return; const scrollEl = document.querySelector('.App'); 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(); }, [start]); }; export default useLocoScroll; To use this hook you simply call it inside theApp.js file like so: useLocoScroll(true) or any condition that will result to true You'll also need to add data-scroll-container to the".App" div and data-scroll-section to the most outer div of any of your sections. For simple use I have created a Section component that does that. For a batter understanding of the hook, please check gsap demo. import React from 'react'; const Section = ({ children }) => { return <section data-scroll-section>{children}</section>; }; export default Section; To use this, simply wrap your jsx into this component like so: return( <Section> code... </Section> ) For the gsap / ScrollTrigger code I've done exactly what Jack suggested. Here is another code example: useEffect(() => { let ctx = gsap.context(() => { const tl = gsap.timeline({ scrollTrigger: { trigger: heroContainerRef.current, scroller: '.App', start: 'top top', scrub: 1, }, }); tl.to(textColRef.current, { x: 200, opacity: 0, }); tl.to( imageWrapperRef.current, { x: -200, opacity: 0, }, 0 ); }); return () => ctx.revert(); }, []); Please note the scroller: '.App' inside the ScrollTrigger. This is very important as you need to specify what the new scroller is. Also, don't forget to add into your App.css or index.css the CSS that locomotive-scroller recommends. Hope this helps
  23. Pollux Septimus
    Hello @GreenSock, Thank you for you replay! I know that ScrollSmoother is easier to work with, but purchasing the GreenSock Club does not make sense for me right now. Sorry. Regardless I am still locking for a wait to have a smooth scroll while being able to use everything else that gsap offers. I am sorry that it was difficult to navigate the demo. It's part of a bigger project and I tool only what's necessary. I forgot to add content underneath the hero section so you could scroll. I have fix the issue and now you should be able to scroll ?. Also, there ware some different styling for mobile so please enlarge the window in order to see the animation. Maybe this will help. I have also added a 3s duration so the animation doesn't fly off the screen. I did ignore the ScrollTrigger and implemented the locomotive-scroll. It seems to work fine. I don't think that the locomotive package is the problem as I wasn't able to make the ScrollTrigger run even before adding it. Before adding the locomotive scroll, I had overflow: hidden on the App and body and had a separate component with overflow-y scroll. I figure that ScrollTrigger doesn't work on divs with overflow-y so I added the locomotive scroll because I planned to do it anyways. The difference between before the locomotive scroll and after is the before the animation wont event run. Now the animation runs but ScrollTrigger gets ignored. Can you please take a quick look at pages > homepage > hero > index, right before where the jsx starts and see if you can spot anything? If you don't see anything at the first glimpse I will try to find other solutions. Thank you!
  24. alisafa
    @Rodrigo Thanks for you answer .I think the one reason for layout breaks in my project after hard reload is when I hard reload there is a short moment that locomotive scroll is not get the control of scroll bar yet , In this short moment I started scrolling so after locomotive take the control and changes the scroll bar I think the position of scroll is somehow is not right anymore and my layout breaks. I added a timer to my Js file and added a loader and make the display of main body to none so at for example 5s of beginning of page's loading , you can not scroll and after 5s loader gone and locomotive takes the control of scroll bar so everything looks fine. but I think if someone's network is not so fast this 5s may not solve the problem. although I insert the locomotive and gsap cdns at the end of body or I insert them in head and used defer to execute them in a order but it didn't help. so the only thing that I could handle was to set a 5s loader as I told you.
  25. Rodrigo
    Hi, Sorry about the troubles. I ran your codepen example in debug mode and I was able to see that things got really weird when doing a hard refresh on the page. Unfortunately Locomotive is not a GSAP product and we don't have the time resources to support it. On top of that I know very little about it so I couldn't tell you what is creating the issue. I tried updating GSAP, ScrollTrigger and Locomotive to their latest versions. Also added some extra configurations and code and didn't change much. It works most of the times but sometimes it breaks: https://codepen.io/GreenSock/pen/qBMJmaX I even tried in this example created by @akapowl and the issue persists: https://cdpn.io/pen/debug/wvJroYy If you scroll down and then do a refresh or hard refresh everything goes wrong. My main suspect is the locomotive configuration, since the scroll bar also gets out of place and some as this doesn't happen on their main website: https://locomotivemtl.github.io/locomotive-scroll/ You should create an issue on their repo and look on stackoverflow for some answers. GSAP has it's own smooth scroll solution ScrollSmoother that works and integrates ScrollTrigger effortlessly, so I suggest you take a look at it: https://greensock.com/scrollsmoother/ Sorry I can't be of more assistance. Happy Tweening!
3
4
5
...
24
Page 4 of 24  
×
×
  • Create New...