emjay Posted September 2, 2020 Share Posted September 2, 2020 Hello Greensock fans, i have created a pen based on the Greensock example "Slide In Panels". However, I wanted to enable a jump to another panel from a panel. Since the panels are next to each other I don't know how to slide to the next panel. Is it possible to calculate this somehow based on the height of the elements? I would be happy about feedback from you. Thanks and Happy Gsapping See the Pen ZEWXBGw by emjay (@emjay) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted September 2, 2020 Share Posted September 2, 2020 See the Pen bGpogXE?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen I've ad a label to each slide and than change da anchor to a button on which I check on click to what slide it should go and than `.seek` to that slide. Hope it helps 1 Link to comment Share on other sites More sharing options...
emjay Posted September 2, 2020 Author Share Posted September 2, 2020 Hello @mvaneijgen, this is an interesting and nice solution, thank you very much for showing me this. I found one little problem, the scroll position isn't changed, so if I use button and then scroll it jumps to the actual scroll position. And one little question, would it be possible to animate to this label, just like if I would scroll? Something like "play to the defined label"? Thanks, Martin Link to comment Share on other sites More sharing options...
mvaneijgen Posted September 2, 2020 Share Posted September 2, 2020 @emjay yeah that was also something I was wondering and found that someone already asked something similar on this forum and you'll need to use the `ScrollToPlugin` see the topic See the Pen bGpeZNj?editors=1010 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
emjay Posted September 2, 2020 Author Share Posted September 2, 2020 Thanks again @mvaneijgen this helped a lot. I'm now also looking on page load if there is an hash in the url and then scroll to the desired section! Martin Link to comment Share on other sites More sharing options...
mvaneijgen Posted September 2, 2020 Share Posted September 2, 2020 @emjay be sure to share your findings here, to help others in the future. Link to comment Share on other sites More sharing options...
emjay Posted September 2, 2020 Author Share Posted September 2, 2020 @mvaneijgen I'm currently testing it to make sure that it always works, as soon as I update the pen with it I'll record the result here. Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 2, 2020 Share Posted September 2, 2020 @mvaneijgen Your original demo in this thread jumps when someone clicks a link then goes back to scrolling. We recommend affecting the actual scroll position so that ScrollTrigger stays synced. The thread that you link to in your second post is the same thread I was going to link to Also these: 1 hour ago, emjay said: I'm now also looking on page load if there is an hash in the url and then scroll to the desired section! You just need to parse the URL for the ID, find the element that matches, calculate how far a user would need to scroll to get to that element, then animate to (or just immediately set it to) that scroll position. 1 Link to comment Share on other sites More sharing options...
Douglas Posted September 28, 2020 Share Posted September 28, 2020 Hey; I did what you're looking to do on the site I was building when I asked that question. You can see an example with this link: https://nofixedaddressinc.com/#about It should auto-scroll to the "Magic before margins" section with that link. I just check to see if a hash exists and if so, run the same function that let's me click the nav to scroll to a position in the timeline. 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