GSAP horizontal scrolling pin is jumping on start and end

[julianlbch]

Hey there,

im pretty new to GSAP and ScrollTrigger but i tried to animate the Columns in the video to scroll horizontally by scrolling down. Im facing a weird issue while scrolling down, the Pin jumps on start and end as you can see in the Video. I did not add any margin to the Sections.

Below you can find my JS Code.

Thank you!

 

$(window).on("load resize", function (e) {

events()

});

 

function events() {

 

$('.events').each(function () {

let $this = $(this),

wrapper = $this.children('.events-wrapper'),

height = $(window).height(),

events = $(this).find('.event');

 

$(wrapper).css("min-height", height);

 

let duration = 4,

sections = gsap.utils.toArray(events),

sectionIncrement = duration / (sections.length - 1),

event = gsap.timeline({

scrollTrigger: {

trigger: wrapper,

pin: true,

scrub: 0.3,

start: "top",

end: "+=1000",

}

});

 

event.to(sections, {

xPercent: -50 * (sections.length - 1),

duration: duration,

ease: "none"

})

.to({}, { duration: 0.5 });

})

}

 

 

 

[Cassie]

Hey there!

 

Welcome to the GSAP forums. We can usually help more effectively if you provide a minimal demo, codepen is great for this.

 

[GreenSock]

Like Cassie said, a minimal demo is necessary to effectively troubleshoot but one problem I noticed in your snippet was that it looks like you're setting up two event handlers for "load" and "resize" which keep creating new timeline/ScrollTrigger instances over and over again (but never remove the old ones). So you're stacking things up that are all trying to control the same elements. That's definitely not a good idea

 

If you want to remove ALL ScrollTriggers, you can do ScrollTrigger.getAll().forEach(t => t.kill())

 

Your "start" value for ScrollTrigger is invalid too - it's supposed to have two values, one for the element and one for the scroller, like "top top". 

[julianlbch]

Hey there, thank you both! I will try to only set the Event Handler once, maybe this solves the issue. Also the start definition! If it does not solve the Problem i will create a CodePen!