Navigating through the timeline with anchors

[sugo 0 Likes (Newbie)]

I saw this paneling demo from somebody and for an upcoming project I would like to use this.

The demo I saw can be found here: 

See the Pen enxAp by grayghostvisuals (@grayghostvisuals) on CodePen

 

I was wondering if it is possible to make an anchor navigation to each one of the panels. I tried it fast but it seems that the offset gets broken from bringing each element to a 'top: 0%;'.

Is there any way to achieve this some other way?

 

Feel free to share your thoughts or ideas.

[Carl 9,066 Likes (Superhero)]

Thanks for the demo, it appears the scrolling is being controlled by ScrollMagic.

I don't have a lot of experience with that tool (although I hear it is great). Once you pass all your tweens off to ScrollMagic it most likely is best to let ScrollMagic handle their positioning. If you start moving divs around outside of ScrollMagic I imagine it can cause some problems.

 

I'd definitely recommend digging more into the ScrollMagic API. This demo here appears to illustrate the type of effect you are after:

 

http://janpaepke.github.io/ScrollMagic/examples/advanced/anchor_link_scrolling.html#bottom

 

instead of moving the divs around it appears you need to force the page to scroll to the proper position.