Possibility of allowing multiple transform keyframes per property
See original GitHub issueInstead of just a to
and from
for each property, would you consider allowing multiple ‘keyframes’ in an animation?
Something like this perhaps
anime({
targets: 'div',
translateX: '13rem',
rotate: [{
value: 90,
duration: 750,
easing: 'easeInOutQuad'
}, {
value: 180,
duration: 750,
easing: 'easeInOutBounce'
}
],
scale: {
value: 2,
delay: 150,
duration: 850,
easing: 'easeInOutExpo',
},
direction: 'alternate',
loop: true
});
So each part of the rotate array would happen in sequence. This just allows more complex animation curves to be created. Keen to make a PR if you are interested.
Cheers
Issue Analytics
- State:
- Created 7 years ago
- Reactions:6
- Comments:7 (6 by maintainers)
Top Results From Across the Web
Multiple CSS keyframe animations using transform property ...
You cannot animate same attribute ( here transform attribute ) more than once, on a same element, the last one will overwrite other,....
Read more >A deep dive into CSS individual transform properties
In this post, we'll review and compare CSS' current transform property with the new individual transform properties.
Read more >3 Ways to Use Independent Transform Properties - Dan Wilson
I figure there are three main ways we can break out the individual transform functions (such as translate and scale) from the transform...
Read more >How to create high-performance CSS animations - web.dev
Use the transform and opacity CSS properties as much as possible, and avoid anything that triggers layout or painting.
Read more >Use roving property keyframes in Adobe Animation CC
Right-click (Windows) or Ctrl-click (Macintosh) and choose Insert Keyframe > property type from the span context menu. Animate adds property ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
(Not sure on the etiquette of commenting on closed issues, sorry!)
Awesome! I don’t see the value being an array to be an issue. If I’m not mistake, the current behaviour is that if you pass a value, it will animate from its current value
to
that new value? And if you pass a (2 element) array it will interpolate from the first to the last? So, I think it will still be the same logic.It might even be possible to simply flatten the object in some way, where each element in the array becomes a new property but with altered delays.
That would allow you to use the same logic for total animation duration, playing, etc.
Would you accept a PR for this or would you rather take a look at it yourself once it’s a priority?
Yes this is definitively something that can be useful. I’m not sure how it will fits in the current API, because the
value
property can also accept an array. This is something I’ll consider 👍