Jump to content
Search Community

Pin not working with ScrollTrigger.scrollerProxy()

sobakaalkaidi test
Moderator Tag

Recommended Posts

Hey @sobakaalkaidi

 

You have that container there, so I think you need to direct the scrollerProxy to that container.

ScrollTrigger.scrollerProxy(container, {
  ...

 

Plus, you have to set the container as the scroller for the ScrollTriggers.

gsap.to('.pin', {
  scrollTrigger: {
    trigger: ".pin",
    scrub: true,
    markers: true,
    pin: true,
    // pinType: "transform",
    start: "top top",
    end: "+=1000px",
    scroller: container
  }
});

 

At least that got it working for me:

See the Pen 0dd4ce258a7afbd9fa48faafaa03030b by akapowl (@akapowl) on CodePen

 

Cheers, Paul

  • Like 5
Link to comment
Share on other sites

You're welcome @sobakaalkaidi.

 

 

Another sidenote from me (smooth-scrollbar related - nothing to do with GSAP):

 

In your code I noticed, you are missing the 'd' in front of 'amping':

 

const scrollbar = Scrollbar.init(document.body, {amping: 0.05, delegateTo: document});

 

 

It is supposed to be damping, not amping. Like this:

const scrollbar = Scrollbar.init(document.body, {damping: 0.05, delegateTo: document});

 

 

 

  • Like 2
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...