5

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?

Sara Mote
  • 236
  • 2
  • 7

3 Answers3

1

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).

Pang
  • 9,564
  • 146
  • 81
  • 122
danicotra
  • 1,333
  • 2
  • 15
  • 34
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

Moltres
  • 600
  • 4
  • 21
-3

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

fabianmoronzirfas
  • 4,091
  • 4
  • 24
  • 41