In transitions flicker at start

[jods4]

Let's say that I just added element to my DOM with javascript code and I want to do a nice 'in' animation, e.g.: $(element).velocity('bounceIn').

I noticed that when doing so, the element can flicker briefy on the screen before the animation starts. It's as if the bounceIn sequence doesn't set opacity = 0 immediately but waits for a tick or two.

I worked around that in two ways. If I always animate the entry of a CSS class, I put opacity: 0 or display: none in my stylesheet. It doesn't feel right, but it works.

Sometimes I don't always animate the creation a my CSS class, so I end up doing this:
$(element).css('opacity', 0).velocity('bounceIn')
But that's awkward, the transition call should take care of that for me. Especially since opacity: 0 is force-fed by the sequence, but it still flickers :(

[julianshapiro]

This only makes sense. Velocity doesn't run immediately upon page load; JavaScript compiler execution time, among other things (like your own JS), consumes some time upfront. So, of course you have to ensure your element starts at opacity: 0 (or simply display: none). It would be the same for any animation that attempts to bring opacity from 0 to 1.

Unless I'm missing something?

[julianshapiro]

I will be implementing this feature into the UI pack this week.

[jods4]

Nice. This will really make the common use-case described above easier to use!

[julianshapiro]

Done. Coming up in the next release.