Disable property when value is 0

[Cornetto]

Hello,

 

I have a fromTo tween. like this:

gsap.fromTo(
  slide, {
      x: 20,	
      opacity: 0
  }, {
      x: 0,
      opacity: 1,
      duration: .2,
  }
);

In this case the x value of the from is 20. 

But another time the x value is 0, so i only want to animate the opacity.

That is going well, but the only thing is. The x property is also set, when its 0.

 

The question is: How can i use the same tween but with other values.

Do i need to make an object with the, from values and, to values?

I can write an if else statement but i think there is a quicker and cleaner way.

 

 

I would like to hear what the best solution for this is.

 

Thanks in advance!

[ZachSaucier]

Hey Cornetto and welcome.

 

2 hours ago, Cornetto said:

the only thing is. The x property is also set, when its 0.

This is expected. GSAP will continue to set the value of properties affected in the animation even if the value is the same as the current value. The reason for this is because sometimes multiple things affect the same elements and it wouldn't make sense for GSAP to constantly check to see if needs to change the value or not. So when a tween updates it always sets the values to what you're telling it to be at that time even if it's already what you're telling it to be.

 

2 hours ago, Cornetto said:

How can i use the same tween but with other values.

The only way to have the same tween but with other values is to:

1. Use function-based values for a given property and return different values per element.
2. Use the modifiers plugin to affect values after GSAP has updated them.

But neither of those is really what you're trying to do. What you're trying to do is optionally apply certain parts of a given tween based on the current value, which doesn't work that way because of the reason I explained above.

 

2 hours ago, Cornetto said:

I can write an if else statement but i think there is a quicker and cleaner way.

If you really don't want the values set, an if/else or other conditional logic is the quickest and cleanest way. 

 

I'm thinking that perhaps this is an overly reduced test case of your actual situation? If so, maybe some context might be able to help us suggest another alternative. But most likely using if/else is still your best option.