Scrollsmoother integration issue

[Mattrudd]

Hi folks,

 

I've repurposed a design Timothy Ricks made available - via his great Webflow tuts but my project is raw code.   

The original setup had a sticky container that I've changed to a ScrollTrigger pinning.

All works as desired until I switch ScrollSmoother on... clicking backwards through the tabs e.g. Build > Design or Build > Plan... back up the achorLinks index 2 > 1 > 0... doesn't play well with the animations.

Appreciate this isn't exactly a minimal pen so forgive me there 😬 - but felt I needed to give the context.

Pretty sure I need to modify this section... have tried loads of options but can't quite nail it, so have returned the JS back to Timothy's code plus my added ScrollTrigger.
 

let anchorLinks = component.find("[tr-anchors]").children();
    anchorLinks.on("click", function () {
      let myIndex = $(this).index();
      let scrollDistance = triggers.eq(myIndex).offset().top + triggers.eq(myIndex).height() - 1;
      $("html, body").animate({ scrollTop: scrollDistance });
    });

🙌 as ever

See the Pen YzJgKgJ by matt-rudd (@matt-rudd) on CodePen

[Rodrigo]

Hi,

 

I've been fiddling with your demo for a while and can't really find a way to make it work. The normal approach for doing this is checking a specific ScrollTrigger instance, get it's start and end points and based on the link being clicked (assuming that the progress of the ScrollTrigger is spread evenly between the amount of links).

 

In this case you're using ScrollSmoother which internally has a ScrollTrigger instance to track everything. Our best bet is to plug into that since is the one controlling the ScrollSmoother progress. Also you can use ScrollSmoother scrollTo() method so you don't have to use jQuery animate method.

 

This seems to work:

let anchorLinks = component.find("[tr-anchors]").children();
anchorLinks.on("click", function () {
  let myIndex = $(this).index();
  const st = smoother.scrollTrigger;
  const distance = st.start + ((st.end - st.start) * (myIndex / anchorLinks.length));
  smoother.scrollTo(distance + 1, true);
});

Now I stated that I couldn't really find a way to work and that's because I had to add that magic number (1) there: smoother.scrollTo(distance + 1, true) that makes me a bit uncomfortable to be honest, but unfortunately your demo is not the smallest and simplest around, so follow it is a bit complicated. That at least takes you to the start of each section. Also you have a lot (and I mean a lot!) of warnings of gsap not finding some targets in the console. IDK if this is because there are things missing in the HTML or if you have those in your development environment as well. Maybe those are connected or they're not 🤷‍♂️

 

Here is a fork of your demo. Notice that I removed the snapping functionality since it was also causing issues as well:

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

 

Finally I think you are overcomplicating this quite a bit. If I was you I'd try to keep everything on just one Timeline and use ScrollTrigger for that timeline, since every animation is connected. There is no need for multiple timelines and ScrollTrigger instances. That could be one of the causes for the issues you're having.

 

This is a similar example but far simpler in terms of how the animations are constructed:

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

 

Hopefully this helps.

Happy Tweening!

[Mattrudd]

This is about as close as I got... admittedly leaning a little on gtp 4 for a few suggestions (which I know isn't ideal, but been staring at this a few days now!)
 

The vertical progress bar far right is jittery when the height animates, and clicking the tabs is erratic, especially clicking to a previous tab as described above. So something is amiss with my approach!

 

See the Pen YzJgXqY by matt-rudd (@matt-rudd) on CodePen

[Mattrudd]

4 minutes ago, Rodrigo said:

Finally I think you are overcomplicating this quite a bit. If I was you I'd try to keep everything on just one Timeline and use ScrollTrigger for that timeline, since every animation is connected. There is no need for multiple timelines and ScrollTrigger instances. That could be one of the causes for the issues you're having.

Brill thanks as ever @Rodrigo! (I posted again just as you replied).

I think I may just drop the anchor clicking all together and just rely on the scrolling to advance/go back. Especially as I'm not convinced many people will use that method of navigating on this particular design!

Appreciate my example pen is WAY more complicated than normal... and I totally get you about overcomplicating the approach... another lesson learned in terms of saving time by designing a fresh approach from scratch rather than trying to reverse engineer things!

Thanks again dude - your time and help is very appreciated.