What output format from AE to produce animation on web page?

[John_Allred]

Some time back, I created an animated gif for use in a web site header, using PS. I've since recreated it using After Effects, and I like its animation much better. Is there a way to have it automatically run in my page header each time the page is accessed or refreshed? What format would I save it to?

Thanks,

John

[John_Allred]

More info: My goal is either a "video" or an animated gif/png with a transparent background. My animation is simple, with a simple fade-in, a line that grows along a path, and some elements that turn "on" at certain points.

What I've learned:

1) The HTML5 Video tag will accept mp4, OGG, or WebM. I'm unfamiliar with the other two, but mp4 is not going to allow transparency. So, no go with mp4/HTML5.

2) Animated GIF will allow transparency, but the bits are either on or off. So, no go with Animated GIF.

3) I have no clue yet how, or whether, I can output an APNG file with AE, or whether such a file might "play" in my browswer the way an animated GIF does. Still working on it.

I would really appreciate anyone who could shorten my learning curve here.

Thanks!

[Roland Kahlenberg]

Look at Lottie -

Lottie Introduction

https://lottiefiles.com/what-is-lottie

Lottie Extension for AE, to export Lottiefiles

https://lottiefiles.com/plugins/after-effects

List of Supported AE Features for Creating Lottiefiles

https://lottiefiles.zendesk.com/hc/en-us/articles/900000997203-When-I-render-my-animation-in-the-plu...

[John_Allred · Accepted solution]

I didn't emphasize that one of my primary goals was having a transparent background for my animation. The reason was, I wanted to have the background color of the animation blend with my site's CSS color. 

If I didn't misunderstand everything I read, I could get transparency on a static GIF, but not with an animated GIF or an MP4 video. 

Previously, I had used an animated GIF on this site, but I could never get around the caching problem. The animation would only play for the user the first time, and the cached version would not be animated. That was what steered me toward embedding a video. My final solution was to match the CSS background color with the video background color. The match was better than I expected. 

For anyone curious, here's the result on my test site: https://test.aptmaps.us/.

There's a static image that loads before the MP4 has fully downloaded. I'd be curious to know if the video fails to "play" for anyone after no more than, say, 30 seconds. The video loops every 10 seconds.

Thanks.

[Roland Kahlenberg]

Animated GIFs have Alpha Channel support. However, its Alpha Channel can only be either Full On or Full Off, with no intermediate levels of transparency.

On repeating the GIF, if you use PS, you have to enable the Repeat Forever checkbox. HTH

[Rick Gerard]

Any animation you create in After Effects can be converted to an animated gif. The trick is to create a comp that has no duplicate frames. 

Let's say you want to animate a square into a circle and have it change colors as it changes. You want the transition to take a half-second, then the square to stay where it is for 20 seconds, then the square turns into a circle over the next half second and stays there for 20 seconds before it changes back to a square.

A good frame rate for an animated gif is 10 fps so set up a 10 fps comp that is about 10 seconds long.

In your timeline, you start with a Rectangle shape layer and animate the roundness from 0 to half the size of the square over 5 frames. Also, animate a color change for the rectangle fill over the first 5 frames. move forward 1 frame and set another color keyframe, then move 5 frames and change the color and add a new keyframe for roundness. Move forward 1 more frame and animate roundness from half the size of the rectangle to 0, set the out point of the work area to the last keyframe, trim the comp to the work area, add the comp to the render cue and render using the Lossless with alpha preset. 

Open the rendered movie in Photoshop. You should get the timeline and every frame has a duration. Set the 6th keyframe duration to 10 seconds, then set the last frame to 10 seconds and export a looping animated gif. You'll get something like this. The file size will be very small, there will be no duplicate frames, it will have transparency, and it will loop forever changing from a square to a circle and a circle to a square every 40 seconds.  If you only want the animation to run once, just turn off the loop forever.

If that does not work for you then we need a very detailed description of your design and possibly some screenshots.

[Warren Heaton]

A few things to make note of regarding this topic:

• If you use Best Settings - Lossless with Alpha in the After Effects Render Queue, Photoshop will use the alpha for Transparency when you choose File > Export > Safe for Web (Legacy)... to create an Animated GIF.
• Photoshop has a limit of 500 frames when saving an Animated GIF. If your video file is longer than 500 frames, it will be trimmed in the exported Animated GIF file. There's nothing in the Photoshop Timeline Panel nor in the Save for Web Window that alerts users to this limit. You just have to be aware of it.
• While Adobe Media Encoder has Animated GIF as a Format, it does not provide the options a user needs for creating a GIF like Photoshop does. Also, there's a known issue with white (#FFFFFF) shifting to off-white. The color table issue can be corrected in Photoshop if you've already exported an Animated GIF from AE via AME.
• If you need to create Animated GIF files from After Effects frequently, I highly recommend GifGun for After Effects. https://aescripts.com/gifgun/