Why does GSAP need a from value (sometimes)?

[katerlouis]

"from filter blur(20px)"

 

I figured gsap can scan that there is a number in this string and manages to tween this one number, as long as it is only one. 

So I made a demo and tried it out.

Variant 1: tween the element itself from filter: "blur(20px)"

Variant 2: tween obj.val from 20 with custom function onUpdate.

 

To my surprise Variant 1 worked after Variant 2 was initiated at least once.

Meaning Variant 1 changed to "fromTo" filer: "blur(0px)" > "blur(20px)" works.

So my initial assumption on gsaps capability to find an integer inside a string was right. 

 

My question now is: Why does GSAP need a from value?

I mean: when there is no initial blur to go back to, why doesn't GSAP assume it should go to zero. That's the most logical assumption in my opinion, when there is no initial value. This would be a better behavior than waiting the tweens duration and then flash to zero anyway.

 

I never applied a border-color, and yet the third button can tween from a red borderColor.

 

See the Pen KmBjVz by katerlouis (@katerlouis) on CodePen

[OSUblake]

Look at the function I posted in your other thread. That is what tweening is based on.

 

Although a tween might have an extra parameter, which you would divide to get the progress.

// t: current time, b: beginning value, c: change in value, d: duration
function linearTween(t, b, c, d) {
  return b + c * t / d;
}

function lerp(start, end, progress) {
  return start + (end - start) * progress;
}

 

 

So there has to be a definite start and end. And we can't assume 0 to be the initial value. If there is no initial value, what you're trying to target might not even exists. That happens to be case for a lot SVG attributes. Some properties and behaviors do not get initialized until an attribute is actually placed on the element.

 

And I really can't think of too many things that I would actually tween to or from 0. Opacity, x, y, and rotation are the only ones that I can think of at the moment.

 

And the border tween works because there is a border color. It's yellow. GSAP looks at the computed style for values to tween from/to.

 

[Jonathan]

Hello @kreativzirkel

 

Regarding your question, Why does GSAP need a from value?

 

Just keep in mind..

 

That when using a from() or staggerFrom() tweens should at least have the ending value defined, meaning you place the element with your defined CSS where you want and it will animate from the values, in the from() tween, to your already defined styles in your CSS or using a set().

 

When using a to() or staggerTo() tween you should ALWAYS either have the initial staring value defined in your CSS style sheet or use the GSAP set() method to define that initial CSS value. But that should be standard best practice so your starting initial value is always defined before animating with any type of to() tweens. So your initial value is always defined either by your style sheet or via JS using the GSAP set() method before running the to() tween(s).

 

Since GSAP has no way to know what your initial value might be since any animation project could have the element or object start at any value not just 0.  When GSAP would try and lookup a specific CSS value especially that is not defined, the value could be undefined since it is not defined in the DOM properties style property. Not all CSS values have an initial value of 0 or none.

 

For example CSS filter() that are not defined have an initial value of none. So you cant animate a keyword value of none since it is not a number, but a keyword. If GSAP had to keep track of every CSS property and their initial value, it would bloat the CSSPlugin quite a bit in file size.

 

So either way you should always define your starting initial value in CSS or set() for to() or staggerTo(). Or define your ending value in CSS or set() for from() or staggerFrom() tweens.

 

Dont leave it up to the browser to report back a proper initial starting or ending value. Define it yourself

 

If you don't like to define your starting value when using the to() or staggerTo(), from(), staggerFrom() tween, then just use a fromTo() or staggerFromTo() instead and you can define both starting and end values in the same tween.

 

Resource:

GSAP set() https://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

 

Happy Tweening