Jump to content
Search Community

pin-spacer class does not added to document immediately

alisafa test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi guys. I am using locomotive scroll and gsap and scrolltiriger in my project.  in codepen demo you can see the structure idea that I want to implement in my real project. (a smooth scrolling and a pin section with horizontal scrolling effect) I found out that the desire behavior happens only after an element with class pin-spacer is added to dom. in this demo on code pen after running the project everything work just fine but in my real project(that have this structure but with some photos and iframes and other things)  the element with class pin-spacer is added with delay and it causes that the scroll behavior ( section with horizontal scrolling behavior ) not happening after page is loaded and it works after something like 20 seconds. I tried to used gsap and locomotive scroll packaes with npm or cdn or adding <script> directly and none of them solve my problem. could you help me please? how can I make the element pin-spacer added to dom right away? I want horizontal scrolling work when dom is ready

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

Link to comment
Share on other sites

Hi @alisafa welcome to the forum!

 

locomotive-scroll is a third party tool, there are some demo's how there to show you how to set it up, but GSAP has its own smooth scroll library aptly name SmoothScroll, which is build to work with ScrollTrigger, so if you want support on these forums, you're better of using the tools that are provided by Greensock, because we like to keep this forum focused on the GSAP tools.

 

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

 

 

Link to comment
Share on other sites

Hi,

 

It sounds like you must have some layout shifting after you create your ScrollTrigger instances. Maybe you're loading images or using lazy loading for some elements of your page.

 

Maybe wait for the load event and create your Locomotive and ScrollTrigger instances after all the images are loaded, or add fix heights to your images to prevent those layout shifts.

 

Like @mvaneijgen mentions, a minimal demo that is close to your real setup (no need for the entire project) could give us some idea of what the issue might be.

 

Happy Tweening!

Link to comment
Share on other sites

  • 2 weeks later...

@Rodrigo @mvaneijgen thanks for your replies.

I somehow managed all I wants from gsap there is only one problem. As you can see in codepen example above I have a section that scrolls horizontally when you reach to that section every thing works fine but on resize there would be an unwanted space at the end of last slide. please look at the below image :
image.thumb.png.87b67657a130e83bdd16b87c1ddc0f10.png

 

here is my config and code for gsap :
 

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", 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",
  });
 
  // Pinning and horizontal scrolling
 
  let horizontalSection = document.querySelector(".horizontal-scroll");
  let pinWrap = horizontalSection.querySelector(".pin-wrap");
  let pinWrapWidth = pinWrap.offsetWidth;
  let horizontalScrollLength = pinWrapWidth - window.innerWidth;
  gsap.to(pinWrap, {
    scrollTrigger: {
      scroller: "[data-scroll-container]",
      scrub: true,
      trigger: horizontalSection,
      pin: true,
      start: "top top",
      end: pinWrapWidth,
      invalidateOnRefresh: true,
    },
    x: -horizontalScrollLength,
    ease: "none",
  });
 
 
  // new ResizeObserver(() => scroller.update()).observe(
  //   document.querySelector("[data-scroll-container]")
  // );
 
  ScrollTrigger.addEventListener("refresh", () => scroller.update()); //locomotive-scroll
  ScrollTrigger.refresh();
}

 

 

and here is my html

     
 <div class="scrollContainer">
     <section id="services" class="horizontal-scroll">
        <div class="pin-wrap" data-scroll data-scroll-direction="horizontal">
          <div class="pin-wrap_row pin-wrap_row--1"></div>
          <div class="pin-wrap_row pin-wrap_row--2"></div>
          <div class="pin-wrap_row pin-wrap_row--3"></div>
        </div>
      </section>
</div>

 

I guess this problem can because 

``` 

let pinWrapWidth = pinWrap.offsetWidth;

 let horizontalScrollLength = pinWrapWidth - window.innerWidth;
```
 
and when I resize this width didnt get updated. so how can I handle this problem. please notice everythin works fine on codepen somoe how but not working in my real project.
Link to comment
Share on other sites

@Rodrigo
I found a demo on codePen which has the issue on resize that I have. here is the link 

See the Pen GREjqrp by raj-shukla (@raj-shukla) on CodePen

 . try to scroll untill you get to images at the end of horizontal scroll section you will see something like this (which is the excepted behavior ) :

image.thumb.jpeg.2e0993831c08799b30dccefd32942757.jpeg

 

now try to resize browser ( not codePen output resizable section) and you will see the unwanted space that I say like below image:

Untitled2.thumb.jpg.47aee33bfec8089928ffcedca9222488.jpg

 

and if you refresh the page it will be ok. I tested it on Chrome and firefox. this is the exact problem that Iam talking about. so would you please help me to solve it . I stuck into it for so long :( . I think some how aftre browser resize we should update pin section width but I dont know how

Link to comment
Share on other sites

I some how could mange a hacky solution for it.  in gsap.to method I changed end and x attributes in below way:

```

gsap.to(pinWrap, {
    ....
      end: () => {
        let pinWrap = horizontalSection.querySelector(".pin-wrap");
        let pinWrapWidth = pinWrap.offsetWidth;
        return pinWrapWidth;
      },
     ...
    },
    x: () => {
      let pinWrap = horizontalSection.querySelector(".pin-wrap");
      let pinWrapWidth = pinWrap.offsetWidth;
      let horizontalScrollLength = pinWrapWidth - window.innerWidth;
      return -horizontalScrollLength;
    },
  ......
  });
```

 

I am sure its not the best way and you might know a better way to solve it ( I am new to gsap and don't know the all methods and events) but the above change in end and x attributes seems to solve my problem. if you know a better solution ( my solution definitely is not best practice ) I would be happy to hear. thanks

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