Skip to content

brandon15811/web-animation-recorder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

web-animation-recorder

Using the Puppeteer/Chrome Dev Tools API, this runs CSS animations step by step, and takes screenshots at each step to produce videos.

Requirements

  • FFmpeg
  • CSS Animation or Web Animations API powered animation
    • Javascript powered animations are not supported at the time

Usage

usage: record.js [-h] [--fps FPS] [--index INDEX] selector address

Record CSS animations from a website. Output will be written to output.mp4

Positional arguments:
  selector       CSS selector to record
  address        Website address of animation to record

Optional arguments:
  -h, --help     Show this help message and exit.
  --fps FPS      Frames per second to record at (default: 30)
  --index INDEX  Animation index to choose, try a different index if the
                 wrong animation is recorded (default: 0)

Demos (Click images for full quality links)

Animista

CSS Xbox One Achievement

Cubewave 11

About

Turn CSS animations into videos

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published