Jump to content
Search Community

Problem with anchors and horizontal scroll - ScrollTrigger

Atanas Antonov test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

Hi guys,

 

I'm very thankful that Greensock exists and is available for everbody.

 

I'm making a single page site with 3 full-screen sections and one of them has horizontal scroll with several panels.

 

The basis is Horizontal section example on

See the Pen jOWaZZV by jimmyadaro (@jimmyadaro) on CodePen

. I've added a snapping for each section to snap on the next section on scroll. I've tried also a Prev / Next buttons for the panels on each panel and lets say that is working. :)

 

The problems are with the main navigation. There should be anchors to each section and for some specific panels in horizontal scroll. I've tried many hours but it's not happening.

 

Can anybody please help me to navigate from header to specific panel (let's say 3rd) and to each section without stop on the middle one (the horizontal scroller)?

 

Thank you very much!

 

Best,
Atanas

See the Pen NWrLOBN by atanasantonov (@atanasantonov) on CodePen

Link to comment
Share on other sites

  • Solution

Hey Atanas and welcome to the GreenSock forums.

 

To do this you need to calculate the position of the container and the x offset of the section to navigate to. Add them together then scroll to that value. The calculations are easier if you make your horizontal scroll section's duration the same as the widths of the elements.

 

Additionally I would use a single function for all of your anchor links. And I don't quite understand what you're trying to do with the snapping bit at the end so I removed that.

See the Pen bGexQpq?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Thanks 2
Link to comment
Share on other sites

  • ZachSaucier changed the title to Problem with anchors and horizontal scroll - ScrollTrigger

Hi Zach and thank you very much for the warm welcome!

 

I've tried many hours to do that but without success... The good part is that I've got more familiar with the GSAP and the plugins. The last part was for snap to the next/prev section on little scroll but that causes the problem with stop on the middle section... I'm gonna try it another way.

 

Will inspect your elegant solution.

 

I'm very thankful for your help and for the instant response!

 

Is there a way to double ot tripple the speed of the scroll? Because now to jump to the next panel you need to make two-three mouse scrolls on desktop for example...

 

Best,
Atanas

 

 

 

 

Link to comment
Share on other sites

45 minutes ago, Atanas Antonov said:

Is there a way to double ot tripple the speed of the scroll? Because now to jump to the next panel you need to make two-three mouse scrolls on desktop for example...

Currently that distance is simply the width of the elements. So arguably it's the most natural value. To speed it up, change the end value of the ScrollTrigger to what you want and then adjust the calculations of the horizontal offset to accomodate.

  • Thanks 1
Link to comment
Share on other sites

  • 1 month later...
On 11/7/2020 at 7:06 PM, ZachSaucier said:

Hey Atanas and welcome to the GreenSock forums.

 

To do this you need to calculate the position of the container and the x offset of the section to navigate to. Add them together then scroll to that value. The calculations are easier if you make your horizontal scroll section's duration the same as the widths of the elements.

 

Additionally I would use a single function for all of your anchor links. And I don't quite understand what you're trying to do with the snapping bit at the end so I removed that.

 

 

Hi guys. Thank you for the cool tool. I have a question related to this topic. How can i scroll to a panel in the horizontal layout (similar to the one above) from another page? For example with using the following anchor   http://mysite.com/timeline#panel3 ?

Link to comment
Share on other sites

13 minutes ago, ZachSaucier said:

@dersmoll Welcome to the GreenSock forums.

 

To do that you will need to parse the URL on page load and then create the animation that goes to that section similar to how it is shown in the demo above.

Got it, thank you. I was thinking if there is any other way without url parsing :)

Link to comment
Share on other sites

  • 1 month later...

Hi Zach,

 

How would you handle the scrolling to a specific anchor when the elements in the horizontal scroll are not equal width?

 

im basically doing this:

 

const scrollPos = offset.top + offset.left;
const selector = scrollPos ? { y: scrollPos } : '#timeline'; 

gsap.to(window, { scrollTo: selector, duration: 2 });

 

Currently overshooting my target but if i click my link a few times it evens out and is correct so guessing its a calculation error.

 

for context its a horizontal scroll with different sections of varying length.

 

thanks

 

Jamie

Link to comment
Share on other sites

12 minutes ago, JamieRobertson said:

Currently overshooting my target but if i click my link a few times it evens out and is correct so guessing its a calculation error.

Without context it's impossible to say for sure, but you need to calculate the offset based on your element's positioning and your ScrollTriggers. There are more examples in the ScrollTrigger demos section for reference.

Link to comment
Share on other sites

You changed the widths of the sections, so you will need to adjust the tween that is ScrollTriggered as well as the scrollTo calculations accordingly. Do you have a specific question that we can help with? 

 

This demo that's listed in the description of the pen that you forked shows an example of this sort of thing with varying widths:

See the Pen xxEQNBB?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Hi Zach,

 

thanks for the example, im building something similar but it also has elements above so the user needs to scroll down to hit the timeline.

Within this horizontal scroll i have certain cards that act as an intro card and they have an ID, this is what i want to link to.

 

So basically the example you provided but with lots of panels and only certain cards have an id to which i want to scroll to from anywhere on the page.

 

I hope you can help, its driving me nuts... XD

 

Edit: im also building in React.

 

Jamie

Link to comment
Share on other sites

Apologies if i gave that impression, thats not my intention. just seem to be fighting against gsap and eager to learn more...

 

Can i ask what the difference is with these?

 

      gsap.to(Container.current, {
        x: () =>  -(Container.current.scrollWidth - document.documentElement.clientWidth),
        ease: "Power3.out",
        scrollTrigger: {
          trigger: Container.current,
          invalidateOnRefresh: true,
          pin: true,
          scrub: 1,
          end: () => "+=" + (Container.current.scrollWidth - document.documentElement.clientWidth)
        }
      });

This scrolls as expected except i get a jank when it ends as position fixed is removed.

 

Compared to this:

      Timeline.current = gsap
      .timeline(
        {
          ease: "Power3.out",
          scrollTrigger: {
            trigger: Container.current,
            invalidateOnRefresh: true,
            pin: true,
            scrub: 1,
            end: () => "+=" + (Container.current.scrollWidth - document.documentElement.clientWidth)
          }
        }
      )
      .to(
        Container.current,
        {
          x: () =>
          -(Container.current.scrollWidth - document.documentElement.clientWidth)
        }
      )

This example is smoother, but gives me the issues discussed earlier. 

 

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