Support for animation-fill-mode

This is a suggestion / idea.

When force-feeding a value, it would be nice to have a way to set property values before a delayed animation actually starts, similar to CSS animation-fill-mode: backwards.

Here’s my use-case: $("div").velocity({ opacity: [1, 0] }, { delay: 500 }). If the div is not already at opacity 0, it would flicker or stay visible during the delay. So I ended up doing this: $("div").css("opacity", 0).velocity(...). Having an option for that would be nice.

BTW: my real use-case was in fact more complicated: $("div").velocity("transition.bounceIn", { stagger: 75}). During the delay induced by stagger later elements would not be properly hidden (have opacity force-fed 0).

[jods4]

@julianshapiro yes, calling $.elem.css("opacity", 0).velocity() is equivalent to setting the start value of animation before it actually starts (the backwards fill).

Now real life is always a little bit funnier: (1) say I’m not using opacity but animate things from the left edge of the screen (add several items and some staggering and we have exactly this issue). I would probably use Velocity hook API instead of jQuery .css(), because Velocity knows about translateX and can compose it with others such as scale, whereas jQuery only knows about transform (yes, it’s still doable. It would probably just look weird). Also I need to duplicate all my constants: $elem.css("transform", "translateX(-300px)").velocity({translateX: [0, -300]}) which is not very nice, versus: $elem.velocity({translateX: [0, -300]}, {fill: "backwards"}).

(2) I am using Promises a lot and for me Velocity built-in support is a big plus. But I have to use $.Velocity API, so it doesn’t chain nicely with jQuery call.

I agree that although this is a convenient future, it’s required only in specific cases (you need both a delay and a starting property value that would make a visible difference) and can be worked around.

[julianshapiro]

The other @jods4 thread I was referring to: https://github.com/julianshapiro/velocity/issues/248