Easy Animations using Keynote

If you’re trying to create animated elements for your website, one easy option is to use Apple’s keynote application. It’s a more sophisticated application that you may give it credit for, but it can be used very effectively to create a wide range of animated effects.

The nice thing about keynote is you don’t have to use the standard slide dimensions - you can use custom dimensions to make content of any size and aspect ratio. This means you can make different animations for different devices and then use the visibility options in Blocs to make sure the correct size is displayed at different breakpoints.

When you create an animation in Keynote, you should output it as a video file at the highest quality. The resulting file can then be run through handbrake to reduce the file size and to optimise it for the web.

The final file can be embedded into your blocs project using the standard video bric set to autoplay and loop. Alternatively, you can set it up as a bloc background for creating animated headers.

A simple example of the result can be seen HERE.


Thanks for sharing!

1 Like

You’re welcome Eldar.

Fantastic tip!!! Thanks!

1 Like

Never looked at Keynote that way. Brilliant suggestion! Thank you very much for sharing.

1 Like

Great idea!!



1 Like

Great post.

I use keynote a lot for creating animated graphics for videos which I embed into videos or over lay them. But never thought of using it in Blocs!

Great suggestion as I know keynote well.


1 Like

Cool, I have used keynote animations in announcement videos (great for overlays), but never actually linked the idea with web. Nice. :grin:

1 Like

@AdieJAM @Malachiman Yes, I use keynote a lot for creating animated video overlays. I particularly like the fact that Keynote can export a transparent background video animation using the ProRes 4444 codec. This makes it super simple to add the file as a video overlay without having to dabble with green-screen stuff. I find I’m using Keynote more and more as an animation tool, rather than the presentation maker that it’s designed as.


Fabulous share! Thanks a lot man!

1 Like

I used Keynote for creating quick videos to convert to gifs.

Thank you Hendon.