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