Inconsistent behavior and documentation of set()?

[kraftwer1]

Current behavior

I enjoy using anime.set() because it allows to set multiple properties at once and makes it possible to set numbers instead of strings like myValue + "px". But I feel there are some inconsistencies.

The doc about anime.set() says that:

Any CSS properties can be animated

However, this is not really true according to the list of MDN Animatable CSS properties, right?

According to MDN, display is not animatable. However, this works fine:

anime.set(myDiv, { display: "none" });

According to MDN, height is animatable. However, this does not work:

anime.set(myDiv, { height: 200 });
anime.set(myDiv, { height: "auto" }); // doesn't work, height is still "200px"

I know that auto itself is not animatable. But I don't even need to animate it, I only need to set it. I've also tried another way to make the element's height go back to its initial value of auto:

anime.set(myDiv, { height: 200 });
anime.set(myDiv, { height: null }); // doesn't work, height is still "200px"

But on the other hand, setting display to nullworks fine:

anime.set(myDiv, { display: "none" });
anime.set(myDiv, { display: null }); // works, falls back to "block"

Even weirder, after height is set without anime.set(), it can't seem to be overwritten by anime.set():

myDiv.style.height = "auto";
anime.set(myDiv, { height: 200 }); // doesn't work, height is still "auto"

Expected behavior

1. The behavior of set() should be consistent (from a consumers perspective).
2. The docs should be clear about which CSS properties are set()-able and which are not (because it seems that anime does not reflect MDN).
3. The docs should explain how specific properties can be unset (to make the element go back to its initial value).

Questions

1. What is the correct way to set height to auto (using anime.set() instead of myDiv.style.height = "auto")?
2. Is there another way to "unset" a property that I've missed?

Version 3.1.0

Thanks I appreciate your fantastic work!!!

[juliangarnier]

Thanks for taking the time to do all these tests.

The behavior of set() should be consistent (from a consumers perspective).

I agree, originally set() has been created only to work with numerical values.

The doc about anime.set() says that:

Any CSS properties can be animated

However, this is not really true according to the list of MDN Animatable CSS properties, right?

True, I might change this to

Any CSS numerical properties can be animated

anime.set(myDiv, { display: "none" }); anime.set(myDiv, { display: null }); // works, falls back to "block"

This works but set() wasn't really intended to be used with non-numerical values. It has been designed to work as a sidekick to anime() to be able to update the animation values without having to create duration: 0 animations, but not to be a fully functional CSS styling function.

I think there is room for improvement regarding 'auto' values types and will see if I can better handle null values too in future releases.

[kraftwer1]

IMHO, anime.set() should become the replacement for using element.style = … because:

1. it allows to set multiple properties at once (as opposed to writing element.style = … numerous times)
2. it supports numbers and the consumer doesn‘t have to concatenate anymore: 14 + "px"

…and therefore it‘d be great if…

3. each value that has been set before can also be unset by passing undefined to set()
4. numeric or not - set() allows all values