Photoshop Question posted in
The official user guide can be found here.

Can you record a css keyframe animation and save as a gif? – Photoshop

Has anyone ever successfully recorded in-browser animation?

My goal is to somehow save or export keyframe animations as a gif to showcase fun projects in online portfolios where only images and text are supported.

I tested RecordIt, but it’s not quite up to par.

Aware that animated mockups can be built in After Effects or even Photoshop… but it’s pretty tedious matching them up to the live keyframes. ( However, if anyone has a good tutorial for this… bring it on! )

Crazy or possible?

Tags:

3

Answers


  1. 0

    You can install Camtasia and record the gif. Then you can directly produce it as a gif (which I’ve never tried) or produce it as a video and then convert it into a gif using Photoshop

    Login or Signup to reply.
  2. 0

    You can try to export your composition with github.com/davidderaedt/after2css

    AfterEffects CSS Animation Exporter

    This After Effects script exports compositions to CSS keyframe animations.

    Limits & known issues

    Nested compositions are not supported.
    – Expressions are not supported and should be converted to keyframes before exports.
    – Only position, scale, opacity and rotation transform animations are supported.
    – Anchor points are converted to transform-origin but cannot be animated.
    – Linear easings are converted to linear, other easings are converted to default ease. Cubic bezier curves are not supported at this point. Hold keyframes are simulated and should work as expected.
    – Position animation use top/left properties where tranlations would provide better performanc

    Login or Signup to reply.
  3. 0

    As you ask of recording the animation I assume you are already aware you can’t simply save them from the browser so far.

    That said, depending on the OS you are on you can use LICEcap (MS Windows or Apple OSX), GifCam or ScreenToGif (MS Windows only), Byzanz or Peek (Linux only).

    The process is quite straightforward with very few easy steps.
    For a LICEcap example see VividD answer to similar other question here on StackOverflow; the principle is the same for every other mentioned software.

    Finally, I think you might find this interesting also (example involving use of GifCam + Photoshop).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search