Resetting pinned animation when animating body to div

[ddi-web-team]

I love the example of the layered pinning example using scroll trigger that the Green Sock account made

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

and I wanted to use this concept to create a timeline for my company. I have the concept working but something that I realized is that scrolling fatigue might set in because it's a large timeline.

 

The solution that I came up with was a 'controller' that would be pinned to the side that would contain anchors to the decades of the company's history. I use jquery to scroll to the container that is the trigger for the scrollTrigger.

 

  $('html, body').animate({
    scrollTop: $('#container1').offset().top
  })

 

This works if you're viewport is above a decade and you click on the controller. But if you're already past a certain decade and use the controller, it does take you to the correct container, but the animation is already played out. I thought the solution would be to reset the specific  timeline that controlled the decade you were scrolling to, but that  didn't work.

 

_70s.on('click', function(event){
  event.preventDefault();
  //This is what I tried. Trying .invalidate() breaks the animation completely
  tl1.restart();
  $('html, body').animate({
    scrollTop: $('#container1').offset().top
  })
})

But this doesn't work. The animation is still at the end. I thought maybe invalidate() was what I needed but that completely broke the animation.

 

Any help would be greatly appreciated. And thanks for the scroll trigger plugin. It's been a lot of fun to use.

See the Pen e1701291867daedf3aba4d9243cd48df?editors=1010 by DDI-Web-Team (@DDI-Web-Team) on CodePen

[ZachSaucier]

Hey DDI. A couple things:

1. I'd use GSAP's ScrollToPlugin over jQuery's animations. They'll perform better, keep all animations in GSAP, and give you more flexibility.
2. Pinning in ScrollTrigger creates a container element to keep the offset. So to get to the top of that section, you should actually select the parent of the container (the one that ScrollTrigger adds). 

   _70s.on('click', function(event) {
     event.preventDefault();
     gsap.to(window, {scrollTo: document.querySelector('#container1').parentElement});
   })
   
   _80s.on('click', function(event) {
     event.preventDefault();
     gsap.to(window, {scrollTo: document.querySelector('#container2').parentElement});
   })

   There may be a better way of doing this. Maybe @GreenSock or someone will come up with something.

[ddi-web-team]

Hi @ZachSaucier

That worked like a charm. Thank you. I wasn't aware that ScrollTrigger added a container to the DOM. Learned something new.