ScrollTrigger in timeline.from() doesn't work

[saintjcob]

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?

[Cassie]

Hey there @saintjcob

You can add a scrollTrigger to a timeline (like above) or to a single tween, or as a standalone trigger.

In the second example you're creating it as a standalone and passing in the reference to the timeline you want it to control. 👍

In the first example you're adding it to a tween which is in a timeline and also referencing the timeline, that's not gonna work!

You probably want this option - add to the timeline and then add tweens to that timeline.
 

let tl = gsap.timeline({
 scrollTrigger: {
  trigger: ".product-design-process",
  start: "top 50%"
 }
});

tl.from(".product-design-process__image", { stagger: 0.2 }

[saintjcob]

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

[Cassie]

The scrollTrigger object shouldn't be inside the defaults object.

Can you post a minimal demo? The second one should be working so you've probably got a typo somewhere 

[saintjcob]

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