greenshift example

The Greenshift example works perfectly. Below I do some experiment. For all images I have setup the following options in the Infinite tab of CSS Transform:

  • Easing and Transition time: Creative Bezier 0.5
  • Time for animation: 5
  • Easing: Linear
  • Reverse mode: On

Below each image you can find the specific settings:

  • Shift Y: -30px
  • Rotate Z: 20px
  • Rotate Z: 350
  • Scale: 1.5

Rotate and Scale work perfectly. And Skew X, Skew Y and Opacity work fine too.

So only the 3 Shift options, for some reason, don’t work as expected and as they actually work right here, in the same page, in the same website in the Greenshift example!

BUT…. I’ve just realized that if I manually change the Shift Y values in the Greenshift example, the animation stops. For instance, if I put my hands on the sidebar and change the value of the Shift Y setting for the fourth image to -20, suddenly the image go back to the original position and it stops!!!

So it looks like there be some strange bug I can’t guess which prevents the user to manually set the values of Shift X, Shift Y and Shift Z… In fact, if I can change Rotate value and the Shift movement still works but I can’t change the Shift value: I can only set it to null and in this case the other settings work fine.