Simple rotation not working

[BernhardBehrendt]

Thanks for that great library. Love to work with it because it's soo similar to jquery's animate and very intuitive.
I have a question how to implement a simple rotation animation using velocity.
Just tried to rotate an element this way and it wasn't working.
So for sure this isn't a bug but how is a simple rotation with an centered axis working in velocity?

Thats' my html:

`

`

Thats the js I tried to apply on the div:

oSpinner.velocity({rotate: '360deg'}, {duration: 1000, loop: true});

Thanks in advance for any inspiration how to get this working.

[Rycochet]

Rotate what precisely? It might not be explicitly stated, but if you refer to the docs - http://julian.com/research/velocity/#transforms - you need to use one of the axis to rotate around, such as rotateZ to make it spin...

[julianshapiro]

robin is correct: check the docs. should be using rotateZ

[dxcqcv]

If I only wanna use 2d rotate not transform 3d rotateZ, how do I do it?

[Rycochet]

Use completely normal css - transform:"rotate(22deg)" style...

[dxcqcv]

thanks @Rycochet , but not working, my part of code is

function rotateAndPopup(res) {
  $(window).scrollTop(0);
  var res = res.toLowerCase()
  prizeEl =$(`.prize${res.toUpperCase()}`) 
  var mySequence = [
    // {e: $('#rotate'), p: {rotateZ: [turnplateDeg[res],0]}, o: {duration: 1000,
    // {e: $('#rotate'), p: {transform: `rotate(${turnplateDeg[res]}deg)`}, o: {duration: 1000,
    {e: $('#rotate'), p: {transform: "rotate(360deg)"}, o: {duration: 1000,
      complete(el) {
        $('.mask').show()
        prizeEl.css({top:'3rem',left:'calc(50% - 2.4rem)'}).appendTo('.shareBoxInner')
        // make innerMask over other cards
        cardsTag
          .filter(c => c !== res )
          .map(c => $(`.prize${c.toUpperCase()}`).css({zIndex:3}))
        // change share words
        Object 
          .keys(shareWords)
          .filter(item => item === res)
          .map(el => $('.shareWords').text(shareWords[el]))
      }
    }},
    {e: prizeEl, p: { scale:'1'}, o: {
      begin(elements) { elements.map(el => {
        $('.shareBox').show()
        $('#shareLight').show()
        // $('#shareLight')
        //   .show()
        //   .velocity({rotateZ:value},{duration:time,easing:'linear',loop:true,display:'none',visibility:'hidden'})
        // make rotate z-index under share box
        $('#rotate').css({zIndex: 5})
        // $(el).velocity({
        //   scale:1,
        // })
      }); }
    }}
  ]
  $.Velocity.RunSequence(mySequence)
}

[dxcqcv]

Even not to use it in velocity UI, add transform: 'rotate(30deg)' to velocity does not work too, like:

        $('#rotate').velocity({
          // top: '1rem' // works
          transform: 'rotate(30deg)' // not working
        })

@Rycochet @julianshapiro

[Rycochet]

Sorry - the docs are completely out of date and missing this - for transform you must use forcefeeding - http://velocityjs.org/#forcefeeding

You cannot mix transform and any of the shortcuts (rotate, scale translate) - CSS itself doesn't give access to any of them for reading (see #269).

So it should be -

$('#rotate').velocity({
   transform: ['rotate(30deg)', 'rotate(0deg)']
})

[dxcqcv]

still not working, no any style add to #rotate element with flowing code

$('#rotate').velocity({
   transform: ['rotate(30deg)', 'rotate(0deg)']
})

[Rycochet]

This tracker is for issues with Velocity, not learning how to use CSS - https://developer.mozilla.org/en/docs/Web/CSS/transform

(Sorry for the abrupt tone, but really busy, and this is very simple stuff - I thought you were using examples, and not specific incorrect css)

[dxcqcv]

sorry for again, I think css is right and simple, transform: rotate(30deg), but use it in Velocity is not working, $('#rotate').velocity({ transform: ['rotate(30deg)', 'rotate(0deg)'] })

so it's still Velocity problem, and I think maybe Velocity does not support 2D transform, right?

[Rycochet]

Velocity has nothing to do with CSS values, it simply passes them through. rotate(30deg) is partially invalid as it does not state what axis you are rotating in - hence I linked to a page that lists all the transform properties allowed. rotate is there, but you should be using one of the other properties such as rotateZ which is probably what you are after. Coincidentally I even said that in the first reply on this thread almost 3 years ago.

Learn to use the DOM Inspector (right click on an element and Inspect it), to see what is happening...

[dxcqcv]

thanks again for reply, nothing to add in the DOM Inspector when use $('#rotate').velocity({ transform: ['rotate(30deg)', 'rotate(0deg)'] })

Well, rotate() and rotateZ is different, one for 2D and one for 3D, velocity only support rotateZ but not to support rotate() in my test.

[Rycochet]

FFS... Learn basic CSS - go and find a tutorial somewhere, and listen to what you're being told. Velocity animates values, there is no "supports", either the browser does or it doesn't.