Jump to content
Search Community

Refreshing page on scrolltrigger section breaks down the page

alisafa test
Moderator Tag

Recommended Posts

when I reach to a section with horizontal scrolling (which uses scrolltrigger and locomotive scroll) and I refresh the page the page breaks down and the section which has scrolltrigger disappears . here is my website http://www.insoostudio.ir and you can produce this problem by refreshing the page on this section .
Untitled.thumb.jpg.1c12a2689a7215f90f18663c7a93918c.jpg

after refreshing the page on this section you will see that this section scrolling fails and all the section below it will be disappear  and all and all the page will breaks down.
here is my config for scrolltrigger
```
 

  gsap.registerPlugin(ScrollTrigger);
const pageContainer = document.querySelector(".scrollContainer");
pageContainer.setAttribute("data-scroll-container", "");
 
const scroller = new LocomotiveScroll({
  el: pageContainer,
  inertia: 0.8,
  multiplier: 0.5,
  smooth: true,
  getDirection: true,
});
scroller.on("scroll", function (t) {
  document.documentElement.setAttribute("data-direction", t.direction);
});
  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 horizontalSection = document.querySelector(".horizontal-scroll");
 
  let pinWrap = horizontalSection.querySelector(".pin-wrap");
 
  gsap.to(pinWrap, {
    scrollTrigger: {
      scroller: "[data-scroll-container]",
      scrub: true,
      trigger: horizontalSection,
      pin: true,
      start: "top top",
,
      end: () => `+=${pinWrap.offsetWidth}`,
    },
 
    x: () => window.innerWidth - pinWrap.offsetWidth,
    ease: "none",
  });
 
  ScrollTrigger.addEventListener("refresh", () => scroller.update()); //locomotive-scroll
  ScrollTrigger.refresh();


```
I will be thankful if you can help me with this problem.

Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

@GSAP Helper I prepared  a demo on code pen but in code pen my problem occur rarely you have to refresh on horizontal scrolling section to see that page breaks some how as I explained at the beginning of this topic. you may not experience this problem in code pen after refreshing but I  see this problem when I run the exact same code locally . I also send a link to download a zip file of the exact same code to run in locally .you can download and run npm install and npm start and then refresh on the horizontal scrolling section to see the problem :

if the problem that I told not occurs after refreshing when you hit the horizontal scrolling section you can use ctrl+shift+r to heard reload and also it may happen when you try scrolling as soon as the page runs ( before locomotivescroll fully loaded) and also once the page breaks refreshing wont help any more and you may have to refresh so many times or hard refresh to have your correct structure back again.
here is the code pen :


See the Pen ExprJMX by alisafaeyan (@alisafaeyan) on CodePen


for see the problem on your locallhost download the below file:
https://blissful-noether-fohw-yyre.storage.iran.liara.space/rar/scrolltrigerrar.rar


I am so thankful Please help me I stuck on this project for so long :( :( 

Link to comment
Share on other sites

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:

See the Pen qBMJmaX by GreenSock (@GreenSock) on CodePen

 

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!

  • Like 2
Link to comment
Share on other sites

33 minutes ago, Rodrigo said:

I even tried in this example created by @akapowl and the issue persists

 

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.

 

See the Pen vYzVmVQ by akapowl (@akapowl) on CodePen

  • Like 3
Link to comment
Share on other sites

@Rodrigo @akapowl thanks my friends for your time and your answer, I added some changes that dear @akapowl says like below but unfortunately page breaks again on refresh at the end or at the horizontal section specially when you hard reload. I couldn't break the version of @akapowl on code pen neither the previous version of my own but it definitely breaks in my localhost or the on my project. I am at the point to let it go and change the section entirely :( :( 
 

  gsap.registerPlugin(ScrollTrigger);
 
  ScrollTrigger.clearScrollMemory("manual");
  window.history.scrollRestoration = "manual";
 
const pageContainer = document.querySelector(".scrollContainer");
pageContainer.setAttribute("data-scroll-container", "");
 
const scroller = new LocomotiveScroll({
  el: pageContainer,
  smooth: true,
  mobile: {
    breakpoint: 0,
    smooth: true,
  },
});
 
ScrollTrigger.defaults({
  scroller: scroller
});
 
  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 horizontalSection = document.querySelector(".horizontal-scroll");{
  let pinWrap = horizontalSection.querySelector(".pin-wrap");
 
  gsap.to(pinWrap, {
    scrollTrigger: {
      scroller: "[data-scroll-container]",
      scrub: true,
      trigger: horizontalSection,
      pin: true,
      start: "top top",
      end: () => `+=${pinWrap.offsetWidth}`,
      invalidateOnRefresh: true,
 
    },
 
    x: () => window.innerWidth - pinWrap.offsetWidth,
    ease: "none",
  });
 
  ScrollTrigger.addEventListener("refresh", () => scroller.update());
  ScrollTrigger.refresh();
Link to comment
Share on other sites

Hi,

 

Sorry to hear that the issues are still there.

 

Unfortunately if the codepen examples work, that means that something else in your setup is breaking this. If I was you I would remove everything except the header and the footer and add some dummy elements before and after the horizontal section. Then start adding one section at a time and when it breaks, you'll find the culprit of your troubles and will be able to isolate what's causing the issue.

 

Good luck with your project! 👍

Happy Tweening!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...