Jami Posted July 1, 2021 Share Posted July 1, 2021 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 More sharing options...
akapowl Posted July 1, 2021 Share Posted July 1, 2021 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. 3 Link to comment Share on other sites More sharing options...
Jami Posted July 2, 2021 Author Share Posted July 2, 2021 Hello, Thanks for your reply. Basically I have implemented this technique but it is not accurate. It does not respond with the height of window. Link to comment Share on other sites More sharing options...
akapowl Posted July 2, 2021 Share Posted July 2, 2021 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now