need help in scrolltrigger

[Rodrigo]

Hi,

 

I just noticed that you are asking help basically on the same subject in two different threads.

 

The example provided by @mvaneijgen here should provide a solid starting point:

 

Happy Tweening!

[omi]

On 8/25/2023 at 11:50 PM, Rodrigo said:

Hi,

 

I don't really understand what you mean with this:

 

@mvaneijgen already linked a video where @Cassie talks about this:

 

Check this example:

 

 

 

Hopefully this helps.

Happy Tweening!

i tried but not working can anyone help me to provide the code please..

[omi]

On 8/14/2023 at 9:00 PM, Toso said:

I don't have an online demo for this section only iam sorry I created it inside a project currently working on it, it's a nextjs app 

@Tosoi need your help to implement the click functionlaity

[Toso]

@omi  sure for the click function I used scrollToPugin Maybe it's not the best idea but I was thinking that since it is a scrub animation so i need to scroll for example 500px to reach the next card and to scroll 1000 for the third card and so on ,,,,

 

1- Calculated the position of the section in the page with getBoundingClientRect  so if you pass this to scrollTo it will take you to the section 

2- calculated the scroll position that I need to see the card I want as I mentioned before I called this ( step ) so you know it in the code 

3- added them together and that's the ( target ) where you want to go with scrollToPlugin 

 

 

Forgive me if this looks weird

But I was trying to achieve it with vanilla js and used gsap later when I was stuck and the deadline was about to hit me 😁

 

let boxHeight: any = gsap.getProperty('.singleBox', 'height');

      const rect: any = document.querySelector('.boxes');

      const rectPosition: any = rect.getBoundingClientRect();

 

 

  

scrollNav.forEach((e: any, i: any) => {

          e.addEventListener('click', () => {

            let step: any = (endTime / boxes.length) * i + boxHeight;

            let target: any = rectPosition.top + step;

            gsap.to(window, {

              duration: 1,

              ease: 'sine',

              scrollTo: { y: target },

            });

            index = i;

            activeDot();

          });

        });

 

 

[Toso]

the only problem that currently happens in this section is that the clientRect function fails to calculate the position of the section after the refresh  because when i refresh the page refresh in the section, if i go back up and refresh then scroll to the section it will work just fine