Jump to content
Search Community

pinning scrollTrigger

Olga__Kondr test
Moderator Tag

Recommended Posts

Hey @Olga__Kondr

 

The way you have it set up with your end being +=100% means, it will be pinned for 100% of the height of your .left-wrap__description, which in this case would be around the 100vh you have set as height for that element.

 

To get it working as you'd like, you would have to get the height of your right-wrap for the end and substract the height of your left-wrap (plus any margins  applied to the right-wrap).

 

 

See this example:

 

See the Pen 44a852ffe8f8167ceef22ce2684b38fd by akapowl (@akapowl) on CodePen

 

 

I changed the CSS for your .left-wrap__description to this, so its bottom actually meets up with the bottom of the window when pinned

 

.left-wrap__description {
  width: 150px;
  height: calc(100vh - 170px);
  padding: 35px;
  background-color: red;
}

 

 

And I changed the end of your ScrollTrigger to this

 

    end: () => '+=' + (document.querySelector('.right-wrap').offsetHeight - document.querySelector('.left-wrap__description').offsetHeight - 50)

 

Now it gets the relevant heights neccessary in a function-based manner, so it also responds correctly on resizes.

 

 

Hope this helps get a better understanding.

 

Cheers,

Paul

 

 

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