simple rotateZ not working in Velocity js

Question

I want to rotate an element by velocity js but rotateZ not work but some animations like width, height, opacity and so on work correctly.

This is my simple code:

<style>
    #test{
      height: 100px;
      width: 10px;
      background-color: red;
    }
</style>
<body>
    <div id="test"></div>

    <script src="jquery-3.3.1.js"></script>
    <script src="velocity.min.js"></script>
    <script>

        var value = 360; //animate to  
        var steps = 6; //animation steps per frame (1/60sec.) 
        var time = (1000 / 60) * (value / steps); //animation time

        $('#test').velocity({
            rotateZ: "360deg"
        }, { delay: 400, duration: 1000, easing: 'linear', loop: true });

    </script>
</body>

Is there any special point that I ignore it?!

GSSwain · Accepted Answer · 2018-04-23T05:47:56.893

rotateZ is not supported in V2 anymore. https://github.com/julianshapiro/velocity/blob/master/V2_CHANGES.md

This worked fine with 1.5.1. Look at the answer from Rycochet below to achieve this in V2.

#test{
  height: 100px;
  width: 10px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.1/velocity.min.js"></script>
<body>
    <div id="test"></div>
    <script>

        var value = 360; //animate to  
        var steps = 6; //animation steps per frame (1/60sec.) 
        var time = (1000 / 60) * (value / steps); //animation time

        $('#test').velocity({
            rotateZ: "360deg"
        }, { delay: 400, duration: 1000, easing: 'linear', loop: true });

    </script>
</body>

"Broken" implies a bug - it is a very deliberate choice due to the various `transform` shortcuts actually producing bugs in v1. Velocity V1 is no longer supported, so pointing people at it is really not a good idea, especially if they're planning to use something that does actually have unfixable bugs due to the design of it - https://github.com/julianshapiro/velocity/blob/master/V2_CHANGES.md — Rycochet, Apr 23 '18 at 05:24

Rycochet · Answer 2 · 2018-04-23T07:06:51.587

As stated pretty clearly in the Velocity V2 docs, as well as in several answers on here - rotateZ is not valid css, if you tried it with css then nothing would happen, and hence it's not in Velocity any more.

You need to use real css values for css transforms now, and that means using {transform: "rotateZ(360deg)"}. Transform itself also has several issues in browsers, so it's always safer to do forcefeeding, which means giving it both a starting and ending value - {transform: ["rotateZ(360deg)", "rotateZ(0deg)"]}. Finally you've got this doing a full loop - so do you want it to bounce back and forth, or do you want it to just keep spinning the same way? If you actually want an infinite spin then use repeat: true rather than loop: true (which alternates the start and end values).

```

<style>
#test{
  height: 100px;
  width: 10px;
  background-color: red;
}
</style>
<body>
    <div id="test"></div>

    <script src="jquery-3.3.1.js"></script>
    <script src="velocity.min.js"></script>
    <script>

        var value = 360; //animate to  
        var steps = 6; //animation steps per frame (1/60sec.) 
        var time = (1000 / 60) * (value / steps); //animation time

        $('#test').velocity({
            transform: ["rotateZ("+value+"deg)", "rotateZ(0deg)"]
        }, { delay: 400, duration: 1000, easing: 'linear', repeat: true });

    </script>
</body>

```

simple rotateZ not working in Velocity js

2 Answers2