Change the speed of scrollTrigger.scroll() method

[Publipresse]

Hello,

 

I have a scrollTrigger animation that works well actually, here is the code : 

 

    var triggers = [];

    slides.forEach(function(el, i) {

        triggers[i] = gsap.to(el, {

            width: '100%',

            ease: Linear.easeNone,

            scrollTrigger: {

                trigger: el,

                pin: slider,

                pinnedContainer: slider,

                start: "center center",

                end: '+='+end+'%',

                scrub: 0.5,

                snap: {

                    snapTo: 1,

                    directional: false,

                    delay: 1,

                },

            },

        });

    });

 

I also have buttons that go to the start of each animation when I click on it, also works : 

 

 

    buttons.forEach(function(el, i) {

        el.addEventListener('click', function(e) {

                const scrollTrigger = triggers[i].scrollTrigger;

                scrollTrigger.scroll(scrollTrigger.start);

        });

    });

 

My only issue is that, when I click on the button, the animation that goes to the scroll start is super fast. When I scroll using the mousewheel, it's nice and smooth, but when I click on buttons, it's practically instand jump, how can I control the speed here ? 

 

See the video to understand the issue : 

https://www.loom.com/share/45be203f47a6462196735f9ab8af90d9

 

Thank you

[mvaneijgen]

Hi @Publipresse, 

 

I think you're looking for the ScrollToPlugin with which you can have it scroll to a certain spot, with a duration. You could do some fancy calculations to check how much the distance is from this spot and then set a second amount that feel appropriate for that distance.

 

Hope it helps and happy tweening! 

 

 

[Rodrigo]

Hi,

 

There are quite a few examples lying around in the forums regarding the approach Mitchel mentions, these are just a few:

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

 

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

 

See the Pen 4a9d18b3def973c8e4e5e0d106b2e664 by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Publipresse]

On 9/22/2023 at 3:04 PM, mvaneijgen said:

Hi @Publipresse, 

 

I think you're looking for the ScrollToPlugin with which you can have it scroll to a certain spot, with a duration. You could do some fancy calculations to check how much the distance is from this spot and then set a second amount that feel appropriate for that distance.

 

Hope it helps and happy tweening! 

 

 

 

Hello,

 

Thank you for the answer.

 

That solution don't work because as you can see in the video, all my element have the same scroll position as they are on top of each other (all absolute optitionned in a relative parent div).

[Publipresse]

On 9/22/2023 at 5:20 PM, Rodrigo said:

Hi,

 

There are quite a few examples lying around in the forums regarding the approach Mitchel mentions, these are just a few:

 

 

 

 

 

 

 

 

 

Hopefully this helps.

Happy Tweening!

Same than mvaneijgen, as all my blocks are absolute optitionned in front of each other, they have the same scroll position in the page, so, playing with the scroll don't work

[mvaneijgen]

Do you have a minimal demo, so that we can take a look and poke around in the code our selfs?

 

I think still the scrollTo plugin is the way to go, with this you can animate to a scroll position on the page. I know you said they are all at the same position, but you are still scrolling down the page although it looks like you're staying in the same place.

 

Check the following code, this will do the same, but instead of jumping to the spot it will animate with a duration of 2 seconds. (keep in min that the scrollTo plugin is something you have to load for it to work) https://greensock.com/scrolltoplugin/

 

// Replace
scrollTrigger.scroll(scrollTrigger.start);

// with this
gsap.to(window, {duration: 2, scrollTo: scrollTrigger.start});

 

I'm just guessing here, if I could edit the code in a minimal demo I could test it for you and directly give the solution.