CODEWITHSUNDEEP
javascriptjquerycssvelocity.js
Ibe Vanmeenen
Ibe Vanmeenen

Reputation: 948

First animation of velocity.js is ignored

I have an element that I want to transition to a certain state (transform: scale(1) and opacity: 1) with the help of velocity.js. The initial state is set in the css (transform: scale(.9) and opacity: 0).

Now the first time I do this, the animation just doesn't happen (on first load). After closing it (setting it back to the original state), The transition works perfect when I call it again.

I have made a codepen as an example: http://codepen.io/IbeVanmeenen/pen/iFwBE

$element.velocity({
   scale: 1,
   opacity: 1
}

Who can help me with this?

Upvotes: 3

Views: 3323

Answers (1)

dmnsgn
dmnsgn

Reputation: 404

Velocity.js use Forcefeeding, so your values in your stylesheet are ignored. See the documentation on forcefeed for more details.

Start values are passed as a second or third item in an 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
    });
});

Upvotes: 8

Related Questions