Vector animations

The basics

You can now include vector animations in your prototypes using our Vector animation UI component that can be found in the Basic Components Library. At the moment Proto.io lets you use animation files in JSON format. You can use Adobe After Effects animations exported as JSON files with the Bodymovin plugin, or also check out the animations available to download from the online community LottieFiles. Furthermore, Proto.io has a new Vector animation Icons library for your convenience.

Vector-animation-element.png

Once you drag a Vector animation UI component to your canvas, you see this where you can preview the animation by clicking on the Play button (bottom-right):

Screen_Shot_2017-11-24_at_2.18.53_PM.png

Vector animation components have these new properties:

Animation-source-file.png

You can change the animation source file, by choosing one from our icon library, or by uploading your own files in Asset Manager.

Screen_Shot_2017-11-24_at_2.53.30_PM.png

Alternatively, you can just drag and drop an animation file (JSON format) onto your Proto.io canvas and a vector animation UI component will be added.

You can control your animations to start/stop and pause/resume whenever you like.

You can also set relevant properties from the beginning through the Inspector (Autoplay, Loop and Animation Playback Speed). Autoplay and Loop are initially checked so that you can preview the animation in Player.

Playback_options.png

If you want the vector animation itself to be interactive, you can drag the interaction wizard and drop it on the animation itself. You’ll get a dropdown menu with actions to be executed “On Tap”.

Actions-on-self.png

You also have the option to Play, Pause and Stop Vector animation in interactions you set up in different UI components. Moreover, there is a new interaction trigger event available, specifically for these animations: “On animation complete”.

vector-animation-end.png

New Vector Animations icon library

You can find a vast collection of animated icons, by Eddy Gabb and Salih, ready to be used directly in your project.

Screen_Shot_2017-11-27_at_10.32.12_AM.png

Have more questions? Submit a request