Jump to content
Search Community

Backwards anchors in stacking sections

greatex test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hi,

 

I am new to GSAP. I try to do overlapping setions with menu. Everything works like I expected expcept menu anchor links. If I am on the top of the page and I click on some link. everything works perfect. Problem is when I am at the bottom of the page and I click on some link in the menu. It takes me to the right section but this section is overlapped with section before.

 

My idea was somehow reset or unpin section when leaves from the viewport, but I cant find the right code for it.

 

I tried to find any solution on forum, but all topics what I have found solve more complex problems, but none can be used for this easy task.

 

Thank you for your ideas.

See the Pen OJRWZQz by langimaster (@langimaster) on CodePen

Link to comment
Share on other sites

  • Solution

 

Hey @greatex - welcome to the forum.

 

Here is a possible workaround for your issue.

 

On click, first check if the current scroll-position is bigger or higher than the targets offsetWidth multiplied by the index of the link you want to go to, which is the same as the index of the section in your case because they are in the same order. So this would obviously not work if you had a link placed somewhere in between, that should direct to a section somewhere else - also the calculation part would not work, if your sections had different heights.

 

Anyways, this way, you could find out, wether to scroll up, or down in your very specific scenario. 

 

If it's down, use what you did already.

If it's up, use the targets offsetWidth multiplied by the index mentioned before.

 

See the Pen 4d54755f37050bbc3ec64c9e75990c2c by akapowl (@akapowl) on CodePen

 

 

As already mentioned, this is by no means waterproof, but in your very special demo-scenario it works.

 

Hope this is at least a bit helpful.

Cheers.

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

  • 1 year later...

Hello, 

 

Im trying to achieve something similar to this, but in my example some sections have more then 100vh height.

 

See the Pen wvjqoyL by barakhov (@barakhov) on CodePen

 

So I need to anchor the sections to their bottom, and not to the top, like in this example:

https://www.polybion.bio/

 

Is this possible with ScrollTrigger?

 

Thank you!

 

Link to comment
Share on other sites

 

Hello there. 

 

8 minutes ago, Alex Barak said:

Im trying to achieve something similar to this, but in my example some sections have more then 100vh height.

 

The posts linked in this thread should be helpful to get the panel-reveal to work with sections taller than 100vh. If you then still need help on adding anchor links to it, please provide an updated demo with what you have tried so far.

 

 

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