Alter animation based on a prop/value

[NickWoodward]

Hi all,

Similarly to how you can use matchMedia to change the animation that plays based on browser width, is it possible to change the animation that plays based on a property passed to a component? for example if a Header is passed the prop `dark={true}` it would animate to white instead of the usual black.

Is it just as simple as conditionally assigning a different timeline/animation to a variable? Something like this?
 

export const Header = ({dark}: Props) => {

	const tl = dark?
      gsap.timeline... :
      gsap.timeline...;
    
    useGSAP(() => {
      ...
      tl.play(0);
    });
}

Thanks

Nick

[Rodrigo]

Hi,

 

Nick, you can use useGSAP and pass the prop value as a dependency and use revertOnUpdate: true in order to revert everything when that value changes and run your own conditional logic to run the animation or not. Also I strongly recommend you to not create your GSAP instances outside the scope of useGSAP. Maybe something like this:

useGSAP(() => {
  const tl = gsap.timeline();
  if (dark) {
    // Add instances for truthy
  } else {
    // Add instances for falsy
  }
}, {
  scope: container,// if any
  dependencies: [dark],
  revertOnUpdate: true,
});

Another option would be to not use revertOnUpdate and use the clear and invalidate methods:

const tl = useRef();

useGSAP(() => {
  if (tl.current) {
  	tl.current && tl.current.clear().invalidate();
  } else {
    const tl = gsap.timeline();
  }
  if (dark) {
    // Add instances for truthy
  } else {
    // Add instances for falsy
  }
}, {
  dependencies: [dark],
});

The code inside the hook will run when the dependency is updated but the instances inside of it won't be reverted.

 

Those would be my approaches in this case. If you keep having issues, please post a minimal demo that we can take a look at.

 

Happy Tweening!

[NickWoodward]

12 hours ago, Rodrigo said:

Hi,

 

Nick, you can use useGSAP and pass the prop value as a dependency and use revertOnUpdate: true in order to revert everything when that value changes and run your own conditional logic to run the animation or not. Also I strongly recommend you to not create your GSAP instances outside the scope of useGSAP. Maybe something like this:

useGSAP(() => {
  const tl = gsap.timeline();
  if (dark) {
    // Add instances for truthy
  } else {
    // Add instances for falsy
  }
}, {
  scope: container,// if any
  dependencies: [dark],
  revertOnUpdate: true,
});

Another option would be to not use revertOnUpdate and use the clear and invalidate methods:

const tl = useRef();

useGSAP(() => {
  if (tl.current) {
  	tl.current && tl.current.clear().invalidate();
  } else {
    const tl = gsap.timeline();
  }
  if (dark) {
    // Add instances for truthy
  } else {
    // Add instances for falsy
  }
}, {
  dependencies: [dark],
});

The code inside the hook will run when the dependency is updated but the instances inside of it won't be reverted.

 

Those would be my approaches in this case. If you keep having issues, please post a minimal demo that we can take a look at.

 

Happy Tweening!

That's perfect, thanks Rodrigo - one day I'll ask the 'why' of why reassigning doesn't work, but I don't think my React knowledge is there yet!

RE: creating the TL outside the useGSAP - I could've sworn I saw that in a code example last night (I usually create it in the useGSAP, but thanks for the correction!)

Thanks again!