Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add playbackRate #818

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

xaviergonz
Copy link

@xaviergonz xaviergonz commented May 19, 2022

This PR adds a playbackRate option to anime, which allows an animation to play faster/slower than originally intended.

Rationale:
I have some css animations with keyframes with a user overridden duration, like this:

@keyframe 0% {...}
@keyframe 23% {...}
...
animation-duration: CHOSEN BY THE USER

Since animeJs does not support % keyframes, but only durations, in order to be able to override the duration I'd need to either:
a) make a function that generates the animation by multiplying each duration by some amount
b) make a function that goes over the animation object and multiplies durations, delays, endDelays, time offsets and so on keys by this amount.

Option a is not possible since animations need to be serialized and loaded from a JSON.
Option b is possible, but annoying

Although perhaps the preferable way to solve this issue would be to allow keyframes to express their durations and delays in "x%" in addition to msecs, this PR would solve it by allowing an animation to have a "playbackRate", which would solve my case by making all the base animations 1 second, each % keyframe "0.%" seconds, and setting the playbackRate to the user overridden number of seconds he wants the animation to last.

@xaviergonz
Copy link
Author

@juliangarnier FYI

@juliangarnier
Copy link
Owner

juliangarnier commented Nov 6, 2022

This will be possible in V4, but I'm thinking about using a similar concept as the pitch control on oldschool turntables https://en.wikipedia.org/wiki/Pitch_control (where 0 = no change of speed)

@juliangarnier
Copy link
Owner

I went with animation.setPlaybackRate() and animation.setFrameRate() in the current V4 beta.
Also globalTimeline.setPlaybackRate() and globalTimeline.setFrameRate() to affect all animations timings.
Will share soon !

@d4rckh
Copy link

d4rckh commented Dec 19, 2022

This will be possible in V4, but I'm thinking about using a similar concept as the pitch control on oldschool turntables https://en.wikipedia.org/wiki/Pitch_control (where 0 = no change of speed)

There will be a V4?

@juliangarnier
Copy link
Owner

Yes I have everything ready for an early access, just need to finish the documentation and a migration guide.

@d4rckh
Copy link

d4rckh commented Dec 21, 2022

Yes I have everything ready for an early access, just need to finish the documentation and a migration guide.

That is great

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants