Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
emjay

Slide in Panels and anchor links to go to specific panel

Recommended Posts

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

@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 post
Share on other sites

@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.

  • Like 1
Link to post
Share on other sites

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 post
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.

×