v.1.5.0 Animating #000 alpha 0.25 to #000 alpha 0 makes the bgcolor to start from white

[adamnorbacker]

Using: VelocityJS.org (1.5.0). Same on both chrome and firefox. Css is already preseted as background-color:transparent;

Animating rgba(0,0,0,.0) to rgba(0,0,0,.25) makes the bgcolor to start from rgba(255,255,255,1) really fast. Which makes the bgcolor blink white once, which looks awful.

It only happens when animating to rgba(0,0,0,.25), not when animating from rgba(0,0,0,.25) to rgba(0,0,0,0)

For example, my issue is when making a menu change bgcolor depending on scroll. if (targetdir.hasClass('topnav')) { targetdir.velocity({ height: 110, backgroundColor: "#000", backgroundColorAlpha: 0.0 }); } else { targetdir.addClass('topnav'); targetdir.velocity({ height: 75, backgroundColor: "#000", backgroundColorAlpha: 0.25 }); }

[Rycochet]

I've come across this before - for some reason the browsers sometimes take a total value of 0 to mean "nothing" and then decide on either white or black (which can be seriously annoying) - have you tried using real values rather than the "shortcut" ones?

if (targetdir.hasClass('topnav')) {
   targetdir.velocity({
      height: 110,
      backgroundColor: "rgba(0,0,0,0)"
   });
} else {
   targetdir.addClass('topnav');
   targetdir.velocity({
      height: 75,
      backgroundColor: "rgba(0,0,0,0.25)"
   });
}

(I'm trying to get people away from the "shortcut" ones as they're no longer required and will probably be removed in a future major version release)

[adamnorbacker]

Hi sorry for the delay. The alternative didn't work as well. I tried that before too. I had to use jquery .animate for the one blinking and velocity on the other.

I prefer without shortcuts so that's good to hear.

[Zelif]

I've had the same problem and the way I fixed it was to animate from backgroundColor: "rgba(0,0,1,0)" to backgroundColor: "rgba(0,0,1,0.25)"

I had this issue mostly only for FF.

Without doing the 1 it will mistake colour 0 for nothing and start at (255,255,255,1) for a split second. It is the same issue as #650 is my guess.

#409 is what helped me.

[Rycochet]

Ugh, think I've hit this with Firefox with css animations before - might be worth making an exception so rgb(0, 0, 0) is translated to rgb(0, 0, 1) transparently...