saintjcob

I must've had a typo then, I tried it again today and works perfectly. Thank you so much for your help, Cassie!

Thank you so much for this answer! Much appreciated. But how can I implement ScrollTrigger to timeline with some defaults (as above)? I tried this: const productDesignProcessTL = gsap.timeline( { defaults: { opacity: 0, autoAlpha: 0, y:'+=100', duration: 0.6, ease: "power3.out", scrollTrigger: { trigger: '.product-design-process', start: 'top 50%' } } } ); and also this: const productDesignProcessTL = gsap.timeline( { defaults: { opacity: 0, autoAlpha: 0, y:'+=100', duration: 0.6, ease: "power3.out", }, scrollTrigger: { trigger: '.product-design-process', start: 'top 50%' } }); but neither works. Right now only the standalone variant works properly for me

Hello, I am kinda new to GSAP and I'm trying to do a simple animation that fires with ScrollTrigger, but i encountered a problem. The code I wrote at first didn't work: const productDesignProcessTitle = document.querySelector('.product-design-process__title'); const productDesignProcessImage = document.querySelector('.product-design-process__images'); const productDesignProcessTL = gsap.timeline( { defaults: { opacity: 0, autoAlpha: 0, y:'+=100', duration: 0.6, ease: "power3.out", } } ); productDesignProcessTL.from(productDesignProcessTitle.children, { stagger: 0.2, scrollTrigger: { trigger: '.product-design-process', animation: productDesignProcessTL, start: 'top 50%' }}) .from(productDesignProcessImage, {stagger: 0.4, delay: 0.5}, '-=80%'); The ScrollTrigger doesn't work this way properly - it only shows content that is hidden in CSS via visibility: hidden but I can't see any transforms happening. But then this code works as intended: const productDesignProcessTitle = document.querySelector('.product-design-process__title'); const productDesignProcessImage = document.querySelector('.product-design-process__images'); const productDesignProcessTL = gsap.timeline( { defaults: { opacity: 0, autoAlpha: 0, y:'+=100', duration: 0.6, ease: "power3.out", } } ); productDesignProcessTL.from(productDesignProcessTitle.children, { stagger: 0.2}) .from(productDesignProcessImage, {stagger: 0.4, delay: 0.5}, '-=80%'); ScrollTrigger.create({ trigger: '.product-design-process', animation: productDesignProcessTL, start: 'top 50%' }) Which is basically the same code, but with separate ScrollTrigger initialization and I wonder why the first code doesn't work? I have another timeline created before this one (without ScrollTrigger) which works well. It seems like in the first case my second timeline plays simultaneously with the first one and it just shows content on scroll without any transforms. What am I doing wrong?