Hi, I had a question, the same as another post a while back. I have some parallax sections I'm using the scrollTrigger on. When the user scrolls into the sections, the background pins into place and the blue foreground box with text keeps scrolls til it's about center viewport then the pin releases and they are able to scroll to the next section.
I'm having a problem with the pinned background jumping on fast scrolls when it moves into place. It doesn't happen with slow scrolls, only fast scrolls.
The code is below.
<script type="text/javascript">
gsap.registerPlugin(ScrollTrigger);
gsap.to(".blue-sec-editorial-1", {y: 500, duration: 3, ease: "circ.out"});
gsap.to(".blue-sec-editorial-2", {y: 500, duration: 3, ease: "circ.out"});
gsap.to(".blue-sec-editorial-3", {y: 500, duration: 3, ease: "circ.out"});
const storytl = gsap.timeline();
storytl.fromTo(".blue-sec-editorial-1", {y: 500},{y: 0, duration: 5});
const storytl2 = gsap.timeline();
storytl2.fromTo(".blue-sec-editorial-2", {y: 500},{y: 0, duration: 5});
const storytl3 = gsap.timeline();
storytl3.fromTo(".blue-sec-editorial-3", {y: 500},{y: 0, duration: 5});
ScrollTrigger.create({
animation: storytl,
trigger: ".panel-1",
start: "top top",
end: "bottom top",
scrub: 1.5,
ease: "none",
pin: ".panel-1",
anticipatePin: 0,
toggleActions: "restart reverse restart reverse",
})
ScrollTrigger.create({
animation: storytl2,
trigger: ".panel-2",
start: "top top",
end: "bottom top",
scrub: 1.5,
ease: "none",
pin: ".panel-2",
anticipatePin: 0,
toggleActions: "restart reverse restart reverse",
})
ScrollTrigger.create({
animation: storytl3,
trigger: ".panel-3",
start: "top top",
end: "bottom top",
scrub: 1.5,
ease: "none",
pin: ".panel-3",
anticipatePin: 0,
toggleActions: "restart reverse restart reverse",
})
</script>
