Perspective rotateY doesn't transition and stays there

[pnpetroff]

Hi, first awesome awesome plugin, but you've heard this a lot already I think.

Playing with it I discovered something that I don't know if it's a bug or I'm not doing it correctly.

I have an element that is rotated in advance at 90 degrees horizontally. Wanting to do a simple "door closing" effect with velocity I rotated it at 0 deg but there isn't transitioning animation and after it's "rotated" at 0 deg it goes back to 90.

You can see the demo here: http://codepen.io/pe6o/pen/xEKyp

[julianshapiro]

Thanks for the kind words.

Fixed:

$('button').on('click', function(){

  $('.element1, .element2').velocity({
    rotateY: [ 0, 90 ]
  },{
    delay: 0,
    duration: 1000
  })
})

Read the docs on transform: http://velocityjs.org/#transform

[pnpetroff]

@julianshapiro Who, thanks for the fast answer. I feel a little stupid for not reading that..

However after the animation is finished the element disappears. The moment it becomes 0 deg.... pop.. it's no more.

[julianshapiro]

Right, that's an implementation detail relating to auto-removing hardware acceleration. Remove your CSS class altogether. If you want to set a transform value upfront, Set it with velocity using a duration of 0.

[pnpetroff]

Like this I guess: http://codepen.io/pe6o/pen/JDoxE

Are there any clever ways to remove the initial flickering of the element? Better than visibility js switching: http://codepen.io/pe6o/pen/Lxlwq ?

[julianshapiro]

I think the flickering is only apparent due to CodePen's code processing delay. Try a local copy or host it as a normal website.

You can also just hide the element to start then make it visible later with display: "auto":

$('button').on('click', function(){

  $('.element1').velocity({
    rotateY: [ 0, 90 ]
  },{
    delay: 0,
    duration: 1000,
    display: "auto"
  })
});

[pnpetroff]

@julianshapiro If there are more things to load on a local site it also causes flickering.

The problem with display: none is that it removes if from the document flow. Strangely display: "auto" didn't work, display: block worked on the other side. Why is that? http://codepen.io/pe6o/pen/aoFDl

So I guess the best way is using opacity, like this: http://codepen.io/pe6o/pen/HCofJ

[julianshapiro]

auto seems to work? Maybe CodePen was using an out of date cached velocity version before.

Out of curiosity, why are you passing delay: 0?

[pnpetroff]

It just was left from some initial test that I was doing. It doesn't have any purpose.

It would be cool if there is an option beside display like visibility so an element can be hidden without removing it from the document flow.

[julianshapiro]

I agree. I should finally add this. Haha. #9

As for your original question, I agree there should be an easier way... I might implement something in the near future. Stay tuned.

Thanks for all your good Q's. Sorry about my shitty answers.

[julianshapiro]

Thanks to you, Mr./Mrs. @pe6o, I will actually be implementing the visibility switching tomorrow. Keep an eye on: #9.

[pnpetroff]

Mr :D
Great, great! Then I will concentrate and other things on my project and wait for this. I think it'll make the code a lot more cleaner!