Skip to content

Add time-travel flag to enable optimizing CSS animations when time travel features are disabled #19

@pirate

Description

@pirate

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}`

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions