Hello, guys.
I tried to reproduce this bug on codepen, but I couldn't.
Then I tried to apply all your hints. Non of them helped(
Then I found one more option:
onLeave: function (self) {
let start = self.start;
self.scroll(self.start);
self.disable();
self.animation.progress(1);
ScrollTrigger.refresh();
window.scrollTo(0, start);
}
In first I thougt this is it! But after ScrollTrigger refresh all the animations below are disabled.
To be honest, I can't imagine what the problem could be. Maybe I'm doing something wrong in the first place?
I have two separate blocks inside the section, which alternately play their pinned animation.
When the first one is played, this block goes up, the second block appears from below and plays its animation. Then also swipe.
So I have two timelines for each block:
const scrollTriggerCurtainConfig = (trigger) => ({
trigger,
start: 'top 10%',
end: '+=100%',
scrub: .2,
pin: trigger,
pinSpacing: true,
anticipatePin: .3,
repeat: false,
})
const curtainTimelineOne = gsap.timeline({
scrollTrigger: scrollTriggerCurtainConfig(curtains[0]),
})
const curtainTimelineTwo = gsap.timeline({scrollTrigger: scrollTriggerCurtainConfig(curtains[1])})
curtainTimelineOne
.to('.about__curtain-anim1', getPos(null, -250, 2))
curtainTimelineTwo
.to('.about__curtain-anim2', getPos(null, -250, 2))
That's all...
Please ignore encapsulation. This function (getPos) simply moves up element y: -250, with duration: 1.