JoshPS

Thanks again for your reply, I managed to resolve this - I actually had left 'transition: all 0.6s ease' on the element I was moving which was causing it to drag slowly then skate from position A to position B!

Hi @Cassie, Thanks again for previously for your help - I've hit another problem! For some reason my elements are 'skating' from right to left, not during the scroll. For example - Similar to my codepen above, where the divs are changing colours, I am having an image start at -30% then as they enter the viewport, I want them to move to 0%, What I have so far works BUT I am getting a skating effect so they just seem to slide from their starting position to end position. Hope this makes sense? const sections = gsap.utils.toArray(".meet-the-team div.member"); let maxWidth = 0; sections.forEach((section) => { maxWidth += section.offsetWidth; }); /** * Horizontal Scroll for Team Members */ let memberAnimation = gsap.to(sections, { scrollTrigger: { trigger: ".meet-the-team", start: 'top top', end: () => `+=${maxWidth - window.innerWidth }`, scrub: 1, }, x: () => `-${maxWidth - window.innerWidth}`, ease: "none", }); /** * only animate when the img comes into viewport */ gsap.utils.toArray( 'img.member' ).forEach(el => { gsap.to( el, { scrollTrigger: { trigger: el, containerAnimation: memberAnimation, start: 'left 85%', end: 'center 20%', scrub: true, }, x: "-30%", ease: "none", }); });

Hi Cassie, Thanks for your quick response. This is exactly what I needed, I have updated my Codepen and posted it below; Thank you very much! https://codepen.io/Josh-Millard/pen/MWQqQKp

DrawSVG is a premium plugin and you must join Club Greensock. DrawSVG will only work on Codepen or localhost unless you purchase the above.

Hi, I am having a few issues with Horizontal Scrolling and then detecting when an element comes in sideways. https://codepen.io/Josh-Millard/pen/MWQqQKp What I am trying to achieve with my codepen is when the next '.panel' comes atleast 15% into the viewport via horizontal scroll I want the '.inside-panel' to turn red. I have found examples similar but they only show examples using vertical scroll. Similar posts but using vertical scroll. Thanks all