How to use Micro Animations

  • 1

    Get Micro Animations

    Make your purchase, download and unzip the animations.

  • 2

    Open your preferred tool

    Any program that supports gif - InVision, Keynote, or even Powerpoint will do.

  • 3

    Happy prototyping!

    Load the desired gifs into the program. For a more detailed process, view the FAQ section below.

Micro Animations x Proto.io

Facebook Twitter Google Plus

More tutorials following soon.

Frequently Asked Questions

If the gifs are transparent, why does background matter?

The way transparency works with gifs is that a pixel is either fully transparent or fully opaque.

For example, take a static image showing a circle on a transparent background. At the edges of the circle where the circle blends transparently to the background, there are usually pixels that are semi-transparent to smoothen the transition. This smooth transition can’t fully be reproduced with gifs – resulting in ugly jagged edges.

To avoid this, the gifs are saved with a ‘background matte’ for all those semi-transparent pixels. This means those pixels that are not fully transparent get their color calculated as if they were on top of the background color. A gif saved with a white background matte will therefore look best on a white background.

The Micro Animations are packaged with white matte (#fff), grey matte (#ccc) and black matte (#000). The closer your background is to any of these, the better the gif will look.

If you want to save them to your exact background color (recommended for brighter colored backgrounds), choose the UI Professional package and save your gif with your custom matte. See the video below for a step-by-step guide.

What is included in the download?

The Entrepreneur:

Includes all gifs for either light, medium, or dark backgrounds – depending on your selected theme. All animations also come with the relevant static png starting and ending state images, to further smoothen your prototyping process.

The Designer: 

Includes all gifs for all themes: light, medium and dark. All animations also come with the relevant static png starting and ending state images.

The UI Professional

Includes all gifs for all themes + the original Photoshop files. This allows you to create gifs with a custom matte color, or add other changes to the animation. Of course, they also include all the relevant static png starting and ending state images.

How do I get started?

The templates come as a .zip file. Decompress the file on your Mac or PC, then open them in your favorite design tool and load them onto a new canvas to create your animated prototype.

For a more detailed explanations, find step-by-step guides for different prototyping tools at the top of this page.

A lifetime of free updates, how does it work?

You will receive an email notification when new updates are ready, and the link in your original purchase confirmation email will always get you the latest version of the toolkits.

Which license comes with my purchase?

All gif animations and png images are royalty-free, which means they can be used in final apps and sites if desired, as long as you don’t re-distribute the Micro Animations with your app/site.

Is there a trial version?

There is no trial version, because all animation bundles come with 60-days money back guarantee. Get them and try them out, and if they don’t work for you for any reason, contact me for a full refund.

I’m not a designer, can I still use the animations?

Absolutely!

If you know how to use any design or prototyping tool supporting gif (even Keynote or PowerPoint), you’ll be able to use the animations without a problem. No Adobe or Sketch required.

Get Micro Animations Now

60-Days Money Back

Try Micro Animations absolutely risk-free. If you are unhappy with your purchase, you'll get a full refund.

Free Lifetime Updates

New animations will be added continuously and when you make a purchase, you'll receive all updates for free, forever.

Royalty Free

Use Micro Animations directly and freely in your commercial apps.