Jump to content
GreenSock

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

Navigating through the timeline with anchors

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

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.

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