shanefry
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by shanefry
-
-
Here is the code pen I copy and pasted, the bug won’t happen inside of the code pen example which is odd. But once on my live server you can see the unexpected behaviour.
See the Pen 7663b55b05f5d473c0e61732fb9174b4 by cassie-codes (@cassie-codes) on CodePen
See live server bug here: https://shanefry.com/test
Scroll once, let the scroll finish, and watch how it pulls you back to the start. (Keep in mind this is mobile and tablets only)
-
Oh shoot I was using an older version! I updated that, but this still didn't fix the issue
-
Hi,
Here is the exact demo I used and the exact same code:
See the Pen 7663b55b05f5d473c0e61732fb9174b4 by cassie-codes (@cassie-codes) on CodePen
I noticed that on mobile it works on the codepen, but when uploaded to my live server the same issue happens. The scroll position gets reset to the very top... you can test it on your device here:
Really weird and frustrating lol
-
Thanks Cassie!
I included the locomotive scroll just because its being used but I don't believe its causing the issue. The issue disappears when I remove the following code:
ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y; }, getBoundingClientRect() { return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight }; }, pinType: pageContainer.style.transform ? "transform" : "fixed" });
I am fairly new to GSAP and used someone elses code. How does this section work so I could troubleshoot. I would assume yes it is returning 0 at weird times. I noticed its once the scroll comes to a stop it jumps right back to the top... super weird and I cant figure it out.
I think you're spot on it has to do with scrollTo and scroll.instance, but I'm unsure how these work. Any help would greatly be appreciated!
-
Hi,
I have come across a bug on mobile where if I scroll once and don't touch the screen again it automatically pulls the entire scroll position back to the top. I am not extremely familiar with GSAP and the horizontal scroll, as I used a common Codepen example to recreate this effect.
My website is: shanefry.com
Desktop: Have the horizontal scroll section - works as expected
Mobile: I hide that section and display a mobile alternative - for some reason it gets pulled to the top (cant navigate the website)
I find if I remove the horizontal scroll code, my website works as normal...
So I'm assuming something here is causing my locomotive scroll to be reset back to the top? Is there a way to kill this code on mobile and tablet?
The video attached shows the behavior I'm talking about. (Keep in mind I scroll once and don't touch the screen again)
const pageContainer = document.querySelector('#scroller'); const scroller = new LocomotiveScroll({ el: pageContainer, smooth: true, getDirection: true }); gsap.registerPlugin(ScrollTrigger); scroller.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y; }, getBoundingClientRect() { return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight }; }, pinType: pageContainer.style.transform ? "transform" : "fixed" }); let pinBoxes = document.querySelectorAll(".pin-wrap > *"); let pinWrap = document.querySelector(".pin-wrap"); let pinWrapWidth = pinWrap.offsetWidth; let horizontalScrollLength = pinWrapWidth - window.innerWidth; // Pinning and horizontal scrolling gsap.to(".pin-wrap", { scrollTrigger: { scroller: pageContainer, //locomotive-scroll scrub: true, trigger: "#sectionPin", pin: true, // anticipatePin: 1, start: "top top", end: "+=3000" }, x: -horizontalScrollLength, ease: "none" }); ScrollTrigger.addEventListener("refresh", () => scroller.update()); //locomotive-scroll ScrollTrigger.refresh();
GSAP & Locomotive Horizontal Scroll - Mobile Pulls Scroll Back to Top
in GSAP
Posted
THANK YOU!
This fixed all my mobile and tablet scrolling issues!
You're a life saver ❤️