Jump to content
Search Community

Scrollto the end of an timeline with scrollTrigger

juanadie test
Moderator Tag

Go to solution Solved by juanadie,

Recommended Posts

Hello everyone,

I'm new around here. Starting with this fantastic tool!

I am developing a project and I would need to know how to scroll to the end of a timeline linked to a scrolltrigger. So you could navigate to a given timeline or to the previous or next timeline.

I have tried to reproduce it in codepen.

Can't figure out the solution :(

Thanks in advance.

See the Pen wvxQzqa by juanadie (@juanadie) on CodePen

Link to comment
Share on other sites

Hi @juanadie and welcome to the GreenSock forums!

 

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

 

In this case is better to check the ScrollTrigger start/end points for each timeline and feed that value to the ScrollTo plugin:

const timelines = [timeline1, timeline2, timeline3, timeline4, timeline5];
const links = gsap.utils.toArray(".link");
let currentIndex = 0;

const gotoSection = () => {
  const targetSt = timelines[currentIndex].scrollTrigger;
  gsap.to(window, {
    scrollTo: {
      y: targetSt.start,
      autoKill: false
    },
    duration: 1
  });
};
links.forEach((link, i) => {
  link.addEventListener("click", (e) => {
    e.preventDefault();
    currentIndex = i;
    gotoSection();
  });
});

const prevBtn = document.getElementById("prev");
prevBtn.addEventListener("click", () => {
  if (!currentIndex) return;
  currentIndex -= 1;
  gotoSection();
});

const nextBtn = document.getElementById("next");
nextBtn.addEventListener("click", () => {
  if (currentIndex === links.length - 1) return;
  currentIndex += 1;
  gotoSection();
});

Here is a live example:

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

 

That example uses the start point of the ScrollTrigger instance so it'll take you to the start of the timeline. If you want to go to the end of the timeline just use this in the gotoSection method:

const gotoSection = () => {
  const targetSt = timelines[currentIndex].scrollTrigger;
  gsap.to(window, {
    scrollTo: {
      y: targetSt.end,
      autoKill: false
    },
    duration: 1
  });
};

I used the start point since it makes more sense to me as  a user to go to the start of a section instead of the end when clicking an anchor link.

 

Hopefully this helps. Let us know if you have more questions.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Hi,

 

Just create a couple of GSAP set() instances in order to go to the top/bottom of the document:

https://greensock.com/docs/v3/GSAP/Tween/set()

 

Something like this:

const topBtn = document.getElementById("top");
topBtn.addEventListener("click", () => {
  gsap.set(window, { scrollTo: 0 });
});

const bottomBtn = document.getElementById("bottom");
bottomBtn.addEventListener("click", () => {
  gsap.set(window, { scrollTo: "max" });
});

I updated the codepen example to include both buttons:

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

 

Also I'm using fastScrollEnd in order to set the animations to their end state. You can read more about it here (and watch @Carl's video, it's a great explanation of how it works):

https://greensock.com/3-8#preventOverlapsAndFastScrollEnd

 

Let us know if you have more questions.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Hi,

 

Just use the same approach I posted in my previous post. Create a set instance (zero seconds GSAP instance so it is immediate) using the ScrollTo Plugin in order to jump to that position without scrolling. Right now those links are using this method:

const gotoSection = () => {
  const targetSt = timelines[currentIndex].scrollTrigger;
  gsap.to(window, {
    scrollTo: {
      y: targetSt.start,
      autoKill: false
    },
    duration: 1
  });
};

So instead of using a to() instance use a set():

const gotoSection = () => {
  const targetSt = timelines[currentIndex].scrollTrigger;
  gsap.set(window, {
    scrollTo: {
      y: targetSt.start,
      autoKill: false
    }
  });
};

 

Keep in mind that at this stage your code is using ScrollTrigger to control the progress of the specific timeline you created for each section, so in order to set the progress of that timeline you'll have to update the scroll bar position otherwise you'll see a lot of jumping around and not great UX.

 

Maybe I'm missing something here, so if you keep having issues please include a minimal demo that shows the problem you're having.

Happy Tweening!

Link to comment
Share on other sites

Hi,

 

In your jump method use ScrollSmoother's scrollTo method instead of the regular ScrollTo Plugin config:

const jumptoSection = () => {
  const targetJp = timelines[currentIndex].scrollTrigger;
  smoother.scrollTo(targetJp.end, false);
};

You can read more about it here:

https://greensock.com/docs/v3/Plugins/ScrollSmoother/scrollTo()

 

Let us know if you have more questions.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

2 hours ago, juanadie said:

Thank you, if you come from Spain (MAD) you are invited to a beer! Or a coffee, whatever you prefer

I can't stand any heat over 32ºC, so probably I'll go back to Spain during autumn or winter, so I'll take some chocolate y churros at La Puerta del Sol :D 

Happy Tweening!

  • Haha 1
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...