Transitions and Animations Chapter 13
The syntax of the Velocity function is as illustrated:
Velocity( elementToAnimate, propertiesToAnimate, [options] )
Other syntaxes are possible, but we will stick to this one.
In our call to this function, we passed our paragraph element as the first argument; we then
said that the opacity should change from 0 to 1 and, at the same time, the element should
move from a starting position of 200 pixels on the x axis toward its origin. As options, we
specified that the animation should last for two seconds and that we want to ease the
animation near the end.
I think everything is pretty clear maybe except how we are passing the opacity and
translateX parameters.
This is what Velocity calls forcefeeding--we are telling Velocity that the opacity should
start from 0 and go to 1. Likewise, we are telling Velocity that the translateX property
should start at 200 pixels, ending at 0 pixels.
In general, we can avoid passing arrays to specify the initial value for the properties;
Velocity will calculate how to transition.
For example, we could have had the following CSS class:
p {
opacity: 0;
}
If we rewrite the Velocity call as follows:
Velocity(el,
{ opacity: 1 }
)
The car will slowly appear. Velocity queried the DOM for the initial value of the element
and then transitioned it to 1. The problem with this approach is that since a query to the
DOM is involved, some animations could be slower, especially when you have a lot of
concurrent animations.
Another way we can obtain the same effect as force-feeding is by using the begin option,
like so:
Velocity(el,
{ opacity: 1 },
{ begin: () => { el.style.opacity = 0 } }
)