Hoshi
KPCKevin Powell - Community
•Created by Hoshi on 12/20/2023 in #front-end
GSAP ScrollTrigger pinning jumps to the end of the container
Hi! I'm having a bit of trouble with pinning in GSAP
I'm using Nextjs 14 and I'm trying to pin an element and it jumps right to the end of the trigger and then it finally pins, not sure what I'm doing wrong, I've been searching and reading docs and I've tried other things, nothing is working 😢
Here's a simplified example on sandbox:
https://codesandbox.io/p/sandbox/serene-williamson-j86cy6
I've also tried this code for the useEffect:
useEffect(() => {
let ctx = gsap.context(() => {}, section);
gsap.to(".maincontainer", {
scrollTrigger: {
trigger: ".maincontainer",
start: "top top",
end: "+=200",
pin: ".titlePin",
markers: true,
}
})
return () => ctx.revert();
}, []);
But none of that works
Thank you! 
1 replies
KPCKevin Powell - Community
•Created by Hoshi on 3/20/2023 in #front-end
Scroll animation overlapping not letting me interact with a button
Hi! I made a scroll animation with GSAP (over a year ago so I might not be remembering something), some sliders that appear and disappear with scrolling.
The thing is for some reason only the last one is reachable, you can only select text or interact with the last one, because inspecting it seems to be above the other ones all the time.
I need to put a button in other slider that is not the last one and I can't press it, I tried adding z-index: 999 to the button but still nothing, does anyone have a solution to this?
Here's a codepen as an example
https://codepen.io/aszuster-dhnn/pen/RwYBweV
Thank you!
1 replies