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 time-travel flag to enable optimizing CSS animations when time travel features are disabled #19

Open
pirate opened this issue Aug 19, 2018 · 0 comments

Comments

@pirate
Copy link
Member

pirate commented Aug 19, 2018

When messing with the speed of time is not needed, we can greatly increase the efficiency of many animations by allowing CSS to render them naturally, instead of using the negative time trick to step through them on the CPU with JS.

With time-travel enabled, we must use the -{delay}ms paused to step through the animation on each frame:

const css_animation_str = ({name, duration, curve, delay, playState}) =>
    `${name} ${duration}ms ${curve} -${delay}ms ${playState}`

But with time-travel disabled, we can start the animation on the GPU and let it run normally without -{delay}ms paused:

const css_animation_str = ({name, duration, curve, delay, playState}) =>
    `${name} ${duration}ms ${curve}`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant