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 style objects in AnimateKeyframes

See original GitHub issue

Is your feature request related to a problem? Please describe. The API to define styles is different in AnimateKeyframes compared to Animate. While Animate supports an object with key/value as styles, AnimateKeyframes only seems to support a string, making it harder to compute and manipulate.

Describe the solution you’d like It would be nice if AnimateKeyframes would support the style object, too.

Perhaps keyframes could look like this:

[
  {at: 0,   style: { opacity: 0 }},
  {at: 100, style: { opacity: 1 }},
]

Additional context Putting the animation index (%) into a property instead of being the object key itself would help interoperability from other languages that compile to JS, but aren’t as dynamic.

Issue Analytics

State:
Created 4 years ago
Comments:11 (10 by maintainers)

Top GitHub Comments

1reaction

bluebill1049commented, Jul 22, 2019

@pangpang1987 I have tested the feature branch works great 👍

however this is not workingkeyframes={[{ 0: {opacity: 0}}, {100: {opacity: 1}}]}

I will publish what you got with a minor update first, we can patch in the next release

1reaction

bluebill1049commented, Jul 18, 2019

i think it’s better to support both, then it’s not a breaking change @pangpang1987

Top Results From Across the Web

animateKeyframes(withDuration:delay:options:animations ...

Creates an animation block object that can be used to set up keyframe-based ... class func animateKeyframes( withDuration duration: TimeInterval , delay: ...

Element.animate() - Web APIs - MDN Web Docs

It returns the created Animation object instance. ... animate(keyframes, options) ... Implicit to/from keyframes are supported. Full support.

UIView.animatekeyframes skips all keyframes except first

I have done some refactoring and no longer use a 'ToastViewModel' (which was an unnecessary class used to hold data) Below is my...

Adobe Animate - Keyframes and Motion Tweening - YouTube

Four Basic Ways to Use Tweens to Animate Objects in Adobe Animate CC. Weisbrod Imaging. Weisbrod Imaging. •. •. 48K views 5 years...

Animations in Swift - Medium

AnimateKeyframe creates an animation block object that can be used to set up keyframe-based animations for the current view. class func ...