Velocity.js - Feature: Transforms

index.html

<p>
  Refresh this page to re-run the demo.
</p>

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
</div>

script.js

/* jquery.js */
/* jquery.velocity.js */

// Animate two separate transform properties: rotateZ and translateX.
$("div").velocity({ 
  scale: 1.5,
  translateX: 150
}, 2000);

style.css

body {
  font-family: "Helvetica Neue", Helvetica;
  width: 90%;
  font-weight: 200;
  letter-spacing: 1px;
  margin: 25px auto 0 auto;
  background: rgb(234, 235, 235);
  color: rgb(25, 25, 25);
}

div, p {
  margin: 0 auto;
}

p {
  color: rgb(125, 125, 125);
  font-size: 0.85rem;
  text-align: center;
  margin-bottom: 17px;
}

div {
  width: 500px;
  overflow: hidden;
}

Velocity.js---Feature:-Transforms.markdown

Velocity.js - Feature: Transforms

A Pen by Julian Shapiro on CodePen.

License.