** Question ** Animate CSS transforms

[zzseba78]

Hi! First of all, congrat for this awesome library. It´s amazing! Great performance, easy to use, and very lightweight. I come from GSAP, and for the tiny size this baby makes magic, really.

I have one question, because i´m learning some basics and i want to have some concepts clear from the begining.

I´m doing a animated bar for testing, the css for it´s very simple:

.bar-left {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 300px;
    padding: 30px;
    background-color: #222;
    color: white;
    z-index: 1;
    transform: translateX(-100%);
}

And i want to animate the bar to translateX 0, so:

var leftBar = anime({
    targets: '.bar-left',
    translateX: 0
});

The bar show, and get the style, but without animation, but if i use:

var leftBar = anime({
    targets: '.bar-left',
    translateX: [ '-100%', 0]
});

It works perfect, so, my question is:

I have to set the initial css value always? It doesn´t take some defined property in css as a starting point? I´m doing it right?

Thanks and congrats again! Sebastián.

[juliangarnier]

Hey,

Yes, in the case of transforms, if the initial value is not 0, you have to use the "from to" style array. Or specify the transform value using inline styles: style="transform: translateX(-100%)".

In v3 you will be able to specify initial styles using Anime, like anime.set('div', {'translateX: -100%'});.

[zzseba78]

Thanks for your response @juliangarnier ! Perfect, and great to add the option to set initial styles 👏

One more question, Anime can deal with different sizes? For example, i have a 100px width box and want to animate it to 100 vw, it change without animation too ( i ask because GSAP deal with this things ). What units can i mix and animate?

Thanks for your work, excellent library!

[juliangarnier]

Unit conversion will work in v3 (you can try it here) :)

[zzseba78]

@juliangarnier Awesome!! When it will be available approx?

[juliangarnier]

It's almost ready! But I need some time to clean up the documentation and redesign the website. I want to release it before the summer!

[zzseba78]

@juliangarnier Amazing!