Jump to content
Search Community

Horizontal scrollsmoother with scrolltrigger and anchors

dadostudio test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hello, we just recently acquired the Business Green membership and we're experimenting with Scrollsmoother and such, so far everything is great.

I'm trying to build a website with horizontal scroll in HP, with scrollsmoother and some cool parallax effects using this example that works great (you basically add the attribute data-speed-x to the element you want to give the parallax effect to).

Now I'm trying to add some anchor links in the page to (smooth)scroll to the last section and return to the first one and I can't seem to find a good solution. I tried a bunch of different methods using scrollTo plugin, but nothing worked. Can you help me finding a way to put smooth scroll links to the internal sections of my pen example?

Thanks a lot in advance.

See the Pen bGmMbNj by luigi-basile (@luigi-basile) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @dadostudio and welcome to the GreenSock forums!

 

First thanks for being a Club GreenSock member and supporting GreenSock!

 

For this you can easily use the ScrollTrigger instance for the horizontal animation and get it start and end points:

const anchors = gsap.utils.toArray(".anchor");
anchors.forEach((anchor, i) => {
  anchor.addEventListener("click", (e) => {
    e.preventDefault();
    if (i === 0) {
      gsap.to(window, {
        scrollTo: {
          y: scrollTween.scrollTrigger.end
        },
        duration: 0.35
      });
    }
    if (i === anchors.length - 1) {
      gsap.to(window, {
        scrollTo: {
          y: scrollTween.scrollTrigger.start
        },
        duration: 0.35
      });
    }
  });
});

Here is a fork of your codepen:

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

 

Here is another example that uses different links for each section, but the approach is basically the same:

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

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

Works great!! Thanks a lot Rodrigo.

May I ask you if you have any idea as to why the refresh resize isn't working (you can see it in the codepen I posted). If you resize the browser window you will see a white space growing at the end, but it should refresh all dimensions and object positions in the horizontal scroll instead.

Thanks a lot!

Link to comment
Share on other sites

Hi,

 

I couldn't really tell you about that. This could be related to the ResizeObserver instance you're using, but I'm not really familiar with that particular API.

 

You should take a look at that code and see what could be happening. Is worth noticing that ScrollTrigger watches resize events in order to run it's calculations again in order to reset the start/end points of every ScrollTrigger instance. My best guess is that the resize observer you're using is somehow interfering with ScrollTrigger.

 

I've seen plenty of examples that use ScrollTrigger to control a horizontal animation without resize observer that work fine when resizing the window, so I would start by removing that and see what happens. Unfortunately there is a lot going on in your code that is not GSAP related and we don't have the time resources to fix custom logic. We have to keep our focus on GSAP related stuff. You can post in the Jobs & Freelance forum or contact us for a consulting job if you want.

 

Sorry I can't be of more assistance.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

Hi Rodrigo, thanks a lot for the solution again. I was wondering if you could help me in making the nav buttons appear only when they reach a particular slide. Basically I'd like the "go to the last slide" button to appear only when it reaches the last slide, and the "go to the first slide" to remain visible only on the first slide.

I know I should use ContainerAnimation, but in my example I'm already using it for the horizontal scroll and I don't know how to use it for this purpose too. I updated my pen.

See the Pen poxmvvw by luigi-basile (@luigi-basile) on CodePen

 

Thanks a lot!

Link to comment
Share on other sites

Hi,

 

One solution is to make the horizontal animation a timeline and midway add some opacity animations to each anchor. Also I think you might want to have the last section anchor visible at the beginning and the first section one visible at the end. Something like this:

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

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

Hi,

 

You can store the duration of the horizontal section tween and get the amount of the slides in order to get a more dynamic approach:

const horizontalDuration = 2;
// Pinning and horizontal scrolling
let scrollTween = gsap
.timeline({
  scrollTrigger: {
    scrub: true,
    trigger: sec,
    pin: sec,
    start: "center center",
    end: () => `+=${pinWrapWidth}`,
    invalidateOnRefresh: true
  }
})
.to(pinWrap, {
  x: () => -horizontalScrollLength,
  ease: "none",
  duration: horizontalDuration
})
.to(
  anchors[0],
  {
    autoAlpha: 0,
    duration: 0.1
  },
  horizontalDuration / slides.length
)
.to(
  anchors[1],
  {
    autoAlpha: 1,
    duration: 0.1
  },
  (horizontalDuration - (horizontalDuration / slides.length))
);

Here is a fork of your last example:

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

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

Hi all, sorry to bother you again but suddenly the parallax on scrollsmoother doesn't work anymore. If you try scrolling one of the pens in the topic, you can see the parallax effect is not working but it worked perfectly before. What am I missing? it was working just fine before!

Thanks!

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.
×
×
  • Create New...