NathanD

I'm having an issue with I cant put my actual project in a code pen because its much too large. So here is an example for the problem I am currently dealing with. As you can see it is scrolling horizontally but the animation will not pin. This is the exact problem I'm having in my project as well. What should I do to make the animation pin and not disappear?

Thanks I got it working. I added in the context and put everything into one layout effect. I cant put my actual project in a code pen because its much too large. So here is an example for the problem I am currently dealing with. As you can see it is scroll horizontally but the animation will not pin. This is the exact problem I'm having I'm my project as well. what should I to make the animation pin and not disappear? https://codepen.io/Nathan-coder/pen/dyqNgjG

In part of my website It turns into horizontal scrolling. I am trying to create animations inside the horizontal scroll but it simply doesn't work. No matter the animation I put it does not scrub and it will just jump 300% in the negative y direction. I understand using 'conatinerAnimation' is the fix to this problem. I cannot seem to get my horizontal scroll animation to be accessed outside of the useLayoutEffect. This is what I currently have but no luck ?> Any ideas?? const panels = useRef([]) const panelsContainer = useRef() const createPanelsRefs = (panel, index) => { panels.current[index] = panel } const [scrollTween, setScrollTween] = useState() useLayoutEffect(() => { const totalPanels = panels.current.length const scrollTween1 = gsap.to(panels.current, { xPercent: -100 * (totalPanels - 1), ease: 'none', scrollTrigger: { trigger: panelsContainer.current, pin: true, scrub: 1.5, // snap: 1 / (totalPanels - 1), end: () => '+=' + panelsContainer.current.offsetWidth, }, }) setScrollTween(scrollTween1) }, []) const homepagePanelTwoTitle2 = useRef() useLayoutEffect(() => { const tl = gsap.timeline({ scrollTrigger: { trigger: '.homepage-panel-two-title-2', start: 'top center', end: '+=4000% center', scrub: true, containerAnimation: scrollTween, pin: true, markers: { startColor: 'yellow', endColor: 'blue' }, }, }) tl.to(homepagePanelTwoTitle2.current, { x: '100%' }) }, [])