Hoshi
KPCKevin Powell - Community
•Created by Hoshi on 1/15/2025 in #front-end
Horizontal Scroll Snapping with Framer Motion
Hello! I'm following an example of a sticky horizontal scroll with NextJs and Framer Motion as a base to make something for my project
https://www.hover.dev/components/carousels#horizontal-scroll-carousel
here you can see the complete example code
And here is a stackblitz I made for reference of my code:
https://stackblitz.com/edit/stackblitz-starters-za3gl9zd?file=app%2Fpage.tsx
The thing is I need them, being full screen to snap scroll between cards and I'm trying different things but I can't make it work, it seems Framer Motion is not working with snap-x and snap-mandatory from tailwind, I'm trying on mobile using every card on full screen
I'm looking for something similar online but I can't find any
Thank you in advance! ❤️
1 replies
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