Search code examples
javascriptvelocity.js

Velocity.js - rotation around center

I'm using Velocity.js for animation.

What's the proper way to move an SVG image, while rotating it around the center at the same time?

Solution

  • You do not need to do per frame animation if you can define the motion using combination of rotations and linear movements.

    As it comes out, your issue is that you are not able to fully manage the origin of rotation.

    NOTE : The following is applicable to not only velocity but all css transformations in general.

    The origin of rotation is the top-left corner of the item to be rotated

    Now, if you want to move the object without moving the origin, you can use the translateX, translateY properties. eg

    .velocity({ translateX: "+=200", translateY: "25%"})

    In order to move the object as well as the origin, you need to set or move its x and y position parameters. eg

    .velocity({ x: "+=200", y: "25%" })

    Rotation around center

    As an example, if you want to rotate an object on its center,you need to

    • Translate the object by -w/2 and -h/2 where the width and height is w and h.
    • Rotate the object

    Rotation around an external point

    In case where you need to rotate the object around an item, simply first translate the object away from its origin by a suitable distance and then rotate it.

    This PEN shows both examples where the green rectangle is rotated around its center and the blue one around an external point by combining translation and position correctly.