Jump to content
GreenSock

kaungkz93@gmail.com

How to create default values for gsap timeline fromTo()

Recommended Posts

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.

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×