Luquatic

Hi, I solved it by combining my first two code snippets: const handleImageAnimations = (): void => { const mm = gsap.matchMedia(); mm.add({ isTablet: '(min-width: 768px)', isMobile: '(max-width: 767px)', }, (context) => { const { isTablet, isMobile } = context.conditions; tl.fromTo('.stacked-image-title-text__image-container:not(:first-child)', { opacity: 0, scale: 2, }, { duration: 0.6, opacity: 1, scale: 1, stagger: 1, scrollTrigger: { pin: '.stacked-image-title-text__images-container', scrub: 0.1, start: isMobile ? 'top top+=90px' : 'top top+=265px', end: () => { const contentHeight = content.value.offsetHeight; return isMobile ? `+=${contentHeight - 400}` : `+=${contentHeight}`; }, }, }); }); }; Thank you for the help!

Thanks for the fast reply! I'll try to create a small code pen when I have more time. Does that mean I should move my fromTo code inside the matchMedia().add? For clarification I'm trying to adjust the start and end positions in the scrollTrigger based on the device and make it responsive. Currently my animation works as intended but breaks when I change the viewport. So for mobile it's: start: 'top top+=90px', end: () => `+=${content.value.offsetHeight - 400}` and for desktop: start: 'top top+=265px', end: () => `+=${content.value.offsetHeight}`,

hopefully someone can help me out because I'm a bit confused. could someone point me into the right direction and tell me what I'm doing wrong? as far as I know the default behavior should be the code defined inside the function and that should be overwritten by the gsap.matchMedia() right? thanks in advance! const imageScrollTriggerOptions = { [Device.MOBILE as Device]: { start: 'top top+=90px', end: () => `+=${content.value.offsetHeight - 400}`, }, [Device.TABLET as Device]: { start: 'top top+=265px', end: () => `+=${content.value.offsetHeight}`, }, }; const mm = gsap.matchMedia(); // add a media query. When it matches, the associated function will run mm.add('(max-width: 768px)', () => { // this setup code only runs when viewport is at least 800px wide gsap.to('.stacked-image-title-text__image-container:not(:first-child)', { scrollTrigger: { start: 'top top+=90px', end: () => `+=${content.value.offsetHeight - 400}`, }, }); }); const handleImageAnimations = (): void => { tl.fromTo('.stacked-image-title-text__image-container:not(:first-child)', { opacity: 0, scale: 2, }, { duration: 0.6, opacity: 1, scale: 1, stagger: 1, scrollTrigger: { pin: '.stacked-image-title-text__images-container', scrub: 0.1, start: 'top top+=265px', end: () => `+=${content.value.offsetHeight}`, }, }); };

Hi there! I'm trying to target each individual block inside the horizontal scroll so I can, for example, update the background-coloronce it's snapped into the viewport. The problem now is that all the blocks are being targeted and not the one coming into the viewport. Hopefully someone can help me out.