[How to create default values for gsap timeline fromTo()]

47 minutes ago, ZachSaucier said:

Hey kaungkz93 and welcome to the GreenSock forums!

 

It's not possible to pass in default values in the fromVars and toVars - defaults just get passed to the toVars. So you could set it up like so where the duration is inherited.

const tl_shapes = gsap.timeline({ defaults: { duration } }); // { duration } === { duration: duration }
 
function step_shapes_animation () {
 return tl_shapes
      .fromTo(".step-2 .shapes img:first-child",
        { x: -200, opacity: 0 },
        { x: 0, opacity 1 }
      )
      .fromTo(".step-2 .shapes img:last-child",
        { y: -200, opacity: 0 },
        { y: 0, opacity: 1 },
        "-=0.4"
      );
}

If you have more properties that you have a lot of properties that are shared in a lot of fromTo tweens, you could use object destructuring:

const fromVars = { opacity 0, y: -200, x: -200 };
const toVars = { opacity: 1, x: 0, y: 0 };

tl.fromTo(myElem, { ...fromVars }, { ...toVars });

However, most the time you don't need .fromTo() tweens. You can just use relative tweens like .from() or .to() which makes it easier to change values around. It's one of the tips to animate efficiently in my CSS-Tricks article on the subject.

Thanks for the solutions, I am using for the case where I personally think fromTo is most suitable to use. I tried with object destructuring method and it works since I have more shared values for fromTo tweens.

[Do you need GSAP to animate .from() when the div enters the screen?]

I personally use Intersection observer + gsap to create animation when user has scrolled to the targeted element.

[How to create default values for gsap timeline fromTo()]

I am trying to add a defaults values for my fromTo(), I tried putting defaults: {} inside gsap.timeline({}) as below

const tl_shapes = gsap.timeline(

  { defaults: { opacity: 0 } },

  { defaults: { opacity: 1 } }

);

 

function step_shapes_animation () {

 return tl_shapes

      .fromTo(

        ".step-2 .shapes img:first-child",

        { x: -200 },

        { x: 0, duration: duration }

      )

      .fromTo(

        ".step-2 .shapes img:last-child",

        { y: -200  },

        { y: 0, duration: duration },

        "-=0.4"

      );

}

 

I am not sure if this is the right way to do it but second element doesn't seem to work and it starts with initial opacity: 1 and I guess it is because fromTo() has 2 objects and I can't put 2 objects for defaults. I am wondering if there is a right way to do it.