Ok that makes sense , but I'm still in deep waters with the endTrigger element.
I recreated the problem I'm facing in my pen here :
https://codepen.io/mrclstrtr/pen/gOXNmNw
I thought that how it works is that the hero unpins slightly above the last sections center like with the rest of the animations happening above the headlines. But it gets stuck at the end of the third section and I can't wrap my head around why.
Here's the scrollTrigger I use for the hero
ScrollTrigger.create({
trigger:"#hero",
start:"center center",
endTrigger:".section-4",
end: "center +=150",
scrub: true,
pin: true
})
And here's what slightly happens it all of the sections
const tlSection_2 = gsap.timeline({
scrollTrigger: {
trigger: ".section-2",
start: "top +=150",
end: "+=1000",
pin:true,
scrub:true
}
})
.to(hero, { scale:.5 })
.to(hero, { scale:1 });
I've chosen such a big end value to time stretch the animation. Should I better work with an empty tween to achieve this and is this causing the hero not to end up correctly at the destination?