CODEWITHSUNDEEP
javascriptanimationvelocityvelocity.js
Jp Arcilla
Jp Arcilla

Reputation: 83

Velocity js for scale 1

I literally just started learning jquery and velocity at the same time for animation purposes. I was reading the velocity.js docs and trying to manipulate the "scale" of my box and ran into some trouble. Basically I have this code: 

HTML:
<div id="box"></div>

CSS:
.box {
   background-color:red;
   height:300px;
   width:300px;
   transform:scale(0.3);
}

Velocity JS:
$("#box").velocity({
   scale:1,
   }, {
   duration: 800
});

The idea is that the box would appear small(30% of its original size) at first and when the Velocity JS triggers, it scales into its normal size at 800ms. Problem is that when I'm setting the scale, it completely ignores the transform:scale(0.3) portion of the css. For example, if scale in the velocity js code was at 2, the animation starts of from 1 -> 2 in 800ms.

Any help is greatly appreciated. Thank you very much!

Upvotes: 1

Views: 1589

Answers (1)

Rycochet
Rycochet

Reputation: 2938

Bearing in mind that the velocityjs.org website docs are out of date (they refer to Velocity V1 which is no longer supported) - instead go to the Velocity Wiki and read on there.

In general the transform property is not simple to use, the browser changes the nice-to-read "scale(1)" into a "matrix(...)", and Velocity doesn't (currently) try to parse it (it's very easy to get that wrong, so we've been avoiding it).

Instead you should use ForceFeeding - this means you supply both the start and end values to Velocity, so it doesn't need to guess what you're actually meaning.

In addition the entire shortcut part of Velocity V1 has been removed because the premise itself is too broken (ie, there is no longer any scale property) - you need to use the transform property directly -

$("#box").velocity({ transform: ["scale(1)", "scale(0.3)"], }, { duration: 800, });

It should be relatively clear there that the ForceFeeding is an array with a "[to, from]" layout. Potentially you can also add specific easings in between them, but check the documentation for more information.

Upvotes: 3

Related Questions