Blog Post

Complex Animations

To more easily animate complex transforms separate out two or more kinds of transforms e.g. a rotate and a scale by adding a wrapper element and performing one transform on the wrapper and one on the child. Generally the first transform on your list should on the parent and the second one on the child. You can also use the new translate, rotate and scale properties. They should work for most needs, however, they have a prescribed order (translate, rotate, then scale) which may not fit your needs and there’s no way to do skew or 3D transforms with the single properties. Lastly you also can’t break up translating x and y directions the way you could with two elements.