Jump to content
Search Community

Vertically Pinned Section with Anchors

Jami test
Moderator Tag

Recommended Posts

Hello All,

I created a Vertically Pinned section with GSAP and scrollTrigger the section link is attached.

Basically this is working fine for me but there is a problem. I wants that when I click on a specific anchor then it will scrolled to the specific section I tried different methods but it is not working fine.


It will be great if you help me in this case. I'll be thankful.

See the Pen VwbLZYV by JamiKazmi (@JamiKazmi) on CodePen

Link to comment
Share on other sites

Hey Jami - welcome to the forum.

 

My suggestion to handle that would be this:

  • Initially Take the total scroll-duration of your ScrollTrigger (3000) and store it in a variable
  • get the total amount of your slides
  • get the amount of scroll each slide takes up - total scroll amount / number of slides 
  • also get half of that amount for each slide - which will come into play later, as you have two different tweens with a duration of 1 for each slide

 

Then for each link of your nav, get the slide to go to - maybe with help of / via that data-attribute you have on the parent li-element minus 1.

 

And lastly in the scrollTo get the offsetTop of your container ( you actually want to get the offsetTop of the parentElement of the container, since it will be wrapped in a pin-spacer) plus the ratio for each panel times the slide to go to plus that second ratio I mentioned (since you want that fading in tween to be done and otherwise you would get to the point before that fading in happened and thus you would have a blank slide).

 

Hope this will help.

 

  • Like 3
Link to comment
Share on other sites

2 hours ago, Jami said:

Basically I have implemented this technique but it is not accurate.

 

In your approach you are calculating things based on the height of your 'slides' but those are not relevant for the position to scroll to here. If you log out the values for each section to scroll to with your approach, you will notice that already the forth has a value way higher than the section above your slide-section and the duration of your ScrollTrigger combined - so it will scroll way past your slide section when clicking on that one.

 

What is relevant for where to scroll to here, is the duration of the scrubbing ScrollTrigger (3000px) and the amount of slides you have.

Following my suggestion above should give you the expected outcome. Give it a shot :) 

 

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