Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support for animation-fill-mode

See original GitHub issue

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).

Issue Analytics

  • State:closed
  • Created 9 years ago
  • Comments:14 (6 by maintainers)

github_iconTop GitHub Comments

jods4commented, Sep 10, 2014

@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.

julianshapirocommented, Sep 12, 2014

The other @jods4 thread I was referring to:

Read more comments on GitHub >

github_iconTop Results From Across the Web

animation-fill-mode - CSS: Cascading Style Sheets | MDN
The animation-fill-mode CSS property sets how a CSS animation applies styles to its target before and after its execution.
Read more >
"animation-fill-mode" | Can I use... Support tables for HTML5 ...
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile ... CSS property: animation-fill-mode.
Read more >
HTML DOM Style animationFillMode Property - W3Schools
The animationFillMode property specifies what styles will apply for the element when the animation is not playing (when it is finished, or when...
Read more >
The CSS animation-fill-mode Property, Explained
Learn how to use the animation-fill-mode property to keep your animations from resetting at the end of their sequences for a cleaner look....
Read more >
HTML | DOM Style animationFillMode Property - GeeksforGeeks
Output: Supported Browsers: The browsers supported by animationFillMode property are listed below: Google Chrome 43.0 and above; Edge 12.0 and ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found