Avenues

Thank you so much Cassie! That fixed my issue in my React project as well! I hadn't used refreshPriority before but I'll make sure to read up on it now! Thanks again for all y'alls help!!

Hi Cassie! Thanks for getting back to me! And thanks for sharing the alternate syntax! There are a few other conditionals in my real project I removed for the sake of the demo, but still think that option could be better! Unfortunately, I still experience the bug in the vanilla JS version as well. If you go from one size and cross the breakpoint defined in Match Media then the scroller moves up and across the image slider. Here is a screen recording of what I experience in the CodePen version which is the same as what I experience in the React version too. Thanks so much! Appreciate your help! Nicole

Rodrigo, Thanks so much! That was a silly mistake on my part. With Match Media working, I was able to create a demo of exactly what's happening in my project, which can be found here. You'll see that everything functions as it should until you get to Match Media's breakpoint. Whether going from mobile to desktop or desktop to mobile, if you cross that breakpoint, the horizontal slider moves up into the image slider. If you refresh the page, then it will function again normally, but the breakpoint seems to break any other Greensock functionality on the page. Any help here would be greatly appreciated! Thanks so much! Nicole

Hi Cassie! Thank you so much for your quick response and explanation! My issue only happens within Match Media. I use the gsap.context() in other components that don't require Match Media and it works great! The addition of mm.revert() unfortunately didn't work in the Stack Blitz or my project. I would love to create a more comprehensive demo of the issue I'm experiencing in my project, but the match media won't function in the Stack Blitz either. As you can see here, when I use the context(), the scrollTrigger pins that image div and the image splits apart. But when using match media, the scrollTrigger doesn't work, even with the additional of mm.revert(). I've read the React documentation, but haven't seen any documentation specific to React and Match Media (unless I missed it!). Is there any other there I can review? Thanks again! Nicole

Hi! I am working on a React Project and am having a lot of issues utilizing Match Media. Everything works great without Match Media but as soon as I use Match Media on one of my components, all other components that utilize Greensock on that same page break once the defined breakpoint in Match Media is reached. In attempting to make a minimal demo of the issue, I am having a hard time even getting match media to work. Here is the my Stack Blitz demo: https://stackblitz.com/edit/react-2gtf5s?file=src%2FApp.js. As you can see the scrollTrigger isn't working inside the Match Media. However, if you comment out that useLayoutEffect and use the other useLayoutEffect currently commented out, it works as intended. I figured I would start here to make sure I have the initial set-up inside the useLayoutEffect set-up correctly. Thank you so much! Nicole

Hi! I am currently having an issue within my React project where if I have multiple components on the same page that utilize Greensock's ScrollTrigger Pin functionality, then the animation of the second component breaks and occurs at the same time as the first component. I did a good bit of debugging to narrow down that it's definitely the pin functionality that is creating this issue. If all other pieces remain constant, but I comment out the pin: true on either component the page works as it should. Also if I don't have both component on the page with each other, each component also functions as it should. I've created a CodePen that demonstrates how the components should work. The first component is an image slider that slides apart and then text cycles through the center. The second component is a horizontal slider. While it works great within the CodePen, it doesn't work the same within my actual project. I've attached a video so you can see how the animation of the horizontal slider is actually occurring within the image slider component. I've also put my actual code for my project below so you can see the difference between the CodePen code and the React code. I searched the forums before posting and did find several others who had this issue, but the solutions I saw were to utilize the gsap.context, which I am already doing. GSAP code for the Image Slider: useLayoutEffect(() => { const splitWrapper = document.querySelector('.' + getSplitWrapper) const leftSide = document.querySelector('.' + getLeftSide) const rightSide = document.querySelector('.' + getRightSide) let ctx = gsap.context(() => { if (points) { const splitImagetimeline = gsap.timeline({ scrollTrigger: { trigger: splitWrapper, start: 'top top', end: '+=4500px', pin: true, scrub: true, }, }) splitImagetimeline .to(leftSide, { x: -(window.innerWidth / 6), duration: 1, }) .to( rightSide, { x: window.innerWidth / 6, duration: 1, }, '<', ) points.forEach((point, index) => { splitImagetimeline.fromTo( `.text-column-${index}`, { autoAlpha: 0, top: '110%', }, { autoAlpha: 1, top: '50%', duration: 3, }, ) if (index !== points.length - 1) { splitImagetimeline.to(`.text-column-${index}`, { autoAlpha: 0, top: 0, duration: 3, delay: 2, }) } }) } }, splitImage) return () => ctx.revert() }, [points]) GSAP Code for the Horiziontal Slider: useLayoutEffect(() => { let ctx = gsap.context(() => { const sliderWrapper = document.querySelector('.' + getSliderWrapper) const sliderContainer = document.querySelector('.' + getSliderContainer) let scrollTween = gsap.to(sliderContainer, { ease: 'none', x: () => -(sliderContainer.scrollWidth - window.innerWidth), scrollTrigger: { trigger: sliderWrapper, start: 'center center', end: () => '+=' + (sliderContainer.scrollWidth - window.innerWidth), scrub: true, pin: true, invalidateOnRefresh: true, }, }) setScrollTimeline(scrollTween) }) return () => ctx.revert(); }, []) Any help would be greatly appreciated! Thanks so much! Nicole

Hi there! I added the onRefresh in and no longer see the movement of the sidebar on screen resize! Thank you so much! I appreciate the help! Nicole

Hi! I am new to GSAP and ScrollTrigger. I am trying to create a section for my website that utilizes a horizontal scroll. The section has a sidebar that needs to stay in place as you scroll through the horizontal section. I've been able to set-up this functionality; however, on resize of the window at certain breakpoints, the sidebar moves to what appears to be the true "left: 0" position. As soon as you scroll again it corrects its position. Is there a way to prevent the sidebar from moving on window resize? Or should I approach how to keep the sidebar absolutely positioned differently? Appreciate any and all advice! Thank you so much! Nicole

Thanks again @elegantseagulls that make sense! The unlock was making the containing animation a timeline itself. I wasn't thinking about it that way.

Thanks @elegantseagulls Are you able to elaborate a bit? I believe I understand the idea behind a wrap element but not sure how that changes things since the pin in the scrollTrigger essentially does that for us. The second part is what I am trying to solve for, For example what if my box animation was a lot longer I would still want that to complete before the full tween is considered finished. Is that doable? do I need to set things up in a different way? Not sure If I'm making sense.

Hi, New here and to GSAP. couldn't find an example of this functionality. I'm trying to create a horizontally scrolling section which is very well documented, but then I would like to get the last section to act like an additional "pin" so that the return to the normal vertical scroll happens after the animation completes. So in my example I set up the box that animates in the last panel of the scroll which should play all the way out in the middle of the viewport before the vertical scroll begins. Really appreciate any help with it.