pedromeneses97

@akapowl i forgot to add my * css but you are right. I'm very thankfull for your response as it helped me and my project.

Hello, I've been re-creating an effect like this website: https://solace-store.com/products/funyl-lamp It locks the container inplace and only scrolls images , i did a minimal demo to show my tests. I think the problem is with my calculations, still didnt figure it out yet how they work properly. I think my Y = () needs to be the -scrollheight of the container and end when the scrollheight of the container ends. If i try to add pinSpacing:false, it breaks the section under the pinned section. For more info: x is the Product text galeria is the div holding all the images section is a container holding all of the section. let x = document.getElementById("infoProduto"); let galeria = document.getElementById("scrollGaleria"); let section = document.getElementById("containerAround");

Hello @Cassie ! Minimal demo link: https://codepen.io/pedromeneses97/pen/oNpYyQN Thank you

I have 8 elements on the horizontal scroll that are 500px each and have a margin right of 40px. The pinned section has a margin-left of 120 and a padding of 80. The last element on the horizontal scroll is cutted in half , is there a way to fix it? I fixed it creating a invisible element of 200px (margin + padding) and it worked but it's not a good fix gsap.registerPlugin(ScrollTrigger) let container = document.getElementById("container"); let section = document.getElementById("ContainerInformacao"); gsap.to(container, { x: () => -(section.scrollWidth - document.documentElement.clientWidth), ease: "none", scrollTrigger: { trigger: section, pin: true, scrub: 1, // end: () => "+=" + container.scrollWidth , invalidateOnRefresh: true, end: () => `+=${container.offsetWidth}` // will be updated } })

Thank you, it was the answer i needed!

Hello! I've started recently using gsap and got really interest in the ScrollTrigger plugin. I'm trying to achieve something like this: https://clorova.com/works A horizontal scroll that has no overflow and does not shift layout, i do not care about the parallax effect. I need a heading and description always fixed on top of the slider. It only stays if i position absolute/fixed but i do not want to have to media querie from 2000px to a mobile. How can i achieve this? Thanks.