Jump to content
Search Community

ScrollActivated slider with thumbs

Maria07 test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

  • Solution

Hi @Maria07 and welcome to the GreenSock forums!

 

This boils down to calculating the correct scroll position. In this cases using the offset or the element's position from the top might not always work, since ScrollTrigger adds some space for pinning elements. Is better to use the amount of sections (which normally coincides with the amount of links) and calculate that scroll position based on the start and end points of the ScrollTrigger instance and the index of each link element.

const navLinks = gsap.utils.toArray(`${sectionAttribute} [data-point]`);

const totalLinks = navLinks.length - 1;
navLinks.forEach((link, index) => {
  link.addEventListener("click", (e) => {
    e.preventDefault();
    if (index === 0) {
      return gsap.to(window, {
        scrollTo: {
          y: tl.scrollTrigger.start,
        }
      });
    }
    if (index === totalLinks) {
      return gsap.to(window, {
        scrollTo: {
          y: tl.scrollTrigger.end
        }
      });
    }
    gsap.to(window, {
      scrollTo: {
        y:
        tl.scrollTrigger.start +
        (tl.scrollTrigger.end - tl.scrollTrigger.start) *
        (index / totalLinks)
      }
    });
  });
});

 

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

17 hours ago, Rodrigo said:

Hi @Maria07 and welcome to the GreenSock forums!

 

This boils down to calculating the correct scroll position. In this cases using the offset or the element's position from the top might not always work, since ScrollTrigger adds some space for pinning elements. Is better to use the amount of sections (which normally coincides with the amount of links) and calculate that scroll position based on the start and end points of the ScrollTrigger instance and the index of each link element.

const navLinks = gsap.utils.toArray(`${sectionAttribute} [data-point]`);

const totalLinks = navLinks.length - 1;
navLinks.forEach((link, index) => {
  link.addEventListener("click", (e) => {
    e.preventDefault();
    if (index === 0) {
      return gsap.to(window, {
        scrollTo: {
          y: tl.scrollTrigger.start,
        }
      });
    }
    if (index === totalLinks) {
      return gsap.to(window, {
        scrollTo: {
          y: tl.scrollTrigger.end
        }
      });
    }
    gsap.to(window, {
      scrollTo: {
        y:
        tl.scrollTrigger.start +
        (tl.scrollTrigger.end - tl.scrollTrigger.start) *
        (index / totalLinks)
      }
    });
  });
});

 

Here is a fork of your codepen:

 

 

 

Hopefully this helps.

Happy Tweening!

Thanks for solution

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