Scroll to specific section by clicking on button using scroll trigger

[Sandeep Choudhary]

Hey guys,
I need a little help with this one.  I want scroll to specific slide by clicking on button but unable to find any way to perform same function.
Pls advice.
Many thanks

See the Pen NWmVxBb by SandeepChoudhary (@SandeepChoudhary) on CodePen

[mvaneijgen]

You can use the ScrollTo Plugin for that. I've create an array and pushed all your ScrollTrigger to that array. Then in your click handler you select one of them and get it .start of .end value and then scroll to it. Hope it helps and happy tweening! 

 

See the Pen QWPRNjO?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[Sandeep Choudhary]

@mvaneijgen
Thank you very much it helps a lot 

[Sandeep Choudhary]

Hi @mvaneijgen
is it possible to use this feature with in time line
Eg. i have section where scroll trigger is initiated under the time line and when i push into array iam getting the whole time line. any suggestion will be appreciated.
 

details.forEach((detail, index) => {

  let headline = detail.querySelector("h1");

  let benifitsTrigger1 = gsap.timeline({

    scrollTrigger: {

      trigger: headline,

      start: "top 80%",

      end: "top 50%",

      animation: gsap.to(photos[index], { yPercent: 0 }),

      scrub: true

    }

    allSt.push(benifitsTrigger1 );

  });

});

 

[mvaneijgen]

This seems weird to me, but with each reply please link to the demo you're working in so that we can take a look at the code inaction 

 let benifitsTrigger1 = gsap.timeline({
    scrollTrigger: {
      ...
      animation: gsap.to(photos[index], { yPercent: 0 }), // ScrollTrigger is already in a timelie, so it cant also target another animation 
      ...
    }
    allSt.push(benifitsTrigger1); // This can't be inside the timeline object
  });
});

 

What is the issue you're trying to solve?

[Sandeep Choudhary]

Hi @mvaneijgen

See the Pen jORozBR by SandeepChoudhary (@SandeepChoudhary) on CodePen

Here is demo created for you. iam trying to scroll to nth number of slide for each section but not getting any idea how this can achieve in time line.
if i use time line in animation then getting many number of scroll trigger. hopefully will get some hint or suggestion

[mvaneijgen]

I'm not sure what the question is, this is the same as my previous pen right, just with slightly different code. All the scrollTo plugin is doing is animating/scrolling to a point on the page, so lets say your element starts at 3000px you can feed in the value 3000 or like below get that value dynamically through the variables that are build in to the tools

 

See the Pen WNWByjX?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[Sandeep Choudhary]

Hi @mvaneijgen
thanks for the guidance i got the hint to solve the issue for same. 

[mvaneijgen]

The past few weeks there we're an influx of post using ScrollTrigger and the ScrollTo plugin, which made me write a post how the logic behind it works. Also check the second post by @GreenSock who shares some great helper functions! Hope it helps and happy tweening!