ScrollingTo panel within a timeline

[vibe9]

I have seen quite a few examples but none seem to work when applied to my particular example/use case.  Wondering if anyone can help me here.

 

I need the nav anchor links to scroll to each one of the panels within my "Pinner" timeline.

 

Thanks!

See the Pen OJBJXML by vibe9 (@vibe9) on CodePen

[Rodrigo]

Hi,

 

What have you actually tried? The codepen example you posted doesn't really do much of anything in terms of animating anything when clicking one of the nav elements.

 

This is not the easiest thing to achieve because in this case you need to tell GSAP to scroll to a certain position using the ScollTo Plugin. The challenge is getting that scroll position. What you could try is add a label to the start of each panel's animation and then use this helper function to find the time of that label:

https://greensock.com/docs/v3/HelperFunctions#getNestedLabelTime

 

Then based on the total duration of the timeline get the percentage corresponding for each label and that should give you a value of the ScrollTrigger instance's progress where that particular label is. Then with the start and end points of the Timeline's ScrollTrigger instance you can get the scroll position and feed that to the ScrollTo plugin. This examples leverages this approach:

See the Pen oNPPmwq by GreenSock (@GreenSock) on CodePen

 

Unfortunately we don't have the time resources to craft custom complex solutions for our users in these free forums. Hopefully that example is enough to get you started.

Happy Tweening!

[vibe9]

I sincerely appreciate all of your help, and your insight as far as providing a suggestion on how to tackle this.

 

After an exhausting two weeks of myself and my partner (we are at desks beside one another in the same office) both trying every possible way we could think of to make GSAP work for this project -- the challenges above notably being the rate limiting step, we have abandoned using GSAP for this project.

 

Instead I coded the whole thing in a day (yesterday) using a couple lines of JS to sync the scroll and watch sections using intersectObserver, along with some CSS keyframe animations to move and fade things, and I now have it all working (sans GSAP):

 

See the Pen OJBPweV by vibe9 (@vibe9) on CodePen