The first velocity.js animation is ignored
I have an element that I want to transition to a specific state (transform: scale (1) and opacity: 1) using velocity.js. The initial state is set in css (transform: scale (.9) and opacity: 0).
The first time I do this, the animation just doesn't happen (on first boot). After closing it (setting it back to its original state), the transition works perfectly when I call it again.
I made a codepen as an example: http://codepen.io/IbeVanmeenen/pen/iFwBE
$element.velocity({
scale: 1,
opacity: 1
}
Who can help me?
+3
source to share
1 answer
Velocity.js uses Forcefeeding, so your values in your stylesheet are ignored. See the documentation on force entry for details .
Initial values are passed as the second or third element in the array:
$('.js-info-button-open').on('click', function() {
$(this).next('.js-info-button-content').velocity({
scale: [1, 0.9],
opacity: [1, 0]
}, {
display: 'block',
easing: [0, 0, 0, 4],
duration: 1000
});
});
+7
source to share