A basic animation created by using the Proto.io HTML Component with HTML and CSS. No additional images were needed to be imported to create this animation. The HTML and CSS used was found at: http://codepen.io/ajerez/pen/EaEEOW

7/12/17. Second live mockup. Based on usability evaluations from 6/14-6/21. Currently includes home screen and history tabs (captures and ideals)

An example project which allows the user to designate the number of times the Star component Spins. Simulating a conditional animation loop according to the input of the user while using a total of 2 variables and a container with 3 states.

Using variables on a slider to control the Brightness and Hue of a light bulb

This app allows you to call loved one and the emergency services in to clicks. If you travel overseas this app is for you. It tells you tips of what to do in certain situations and you are able to enable GPS so the emergency services are able to see where you are.

Music App project Design Credits: https://www.sketchappsources.com/free-source/2847-apple-music-app-sketch-freebie-resource.html

Drag and Drop an avatar over a target area that animates when in the drop zone. When released outside the target drop zone, it returns to the original location. Uses a variable to define the target drop zone, that then triggers animations in the zone and when dropped. See how it was made step by step in the webinar video: https://support.proto.io/hc/en-us/articles/115000637591-Advanced-Scrolling-Dragging TAGS: drag and drop dragging variables variable animations on drop animation

Using simple 'Animate Item' and 'Show/Hide' interactions to have the boxes disappear and realign accordingly. Can be used as a base on how you can build notifications or lists to realign themselves.

This prototype showcases a new Proto.io feature called Gradients, it’s a new way to create and animate gradients straight in Proto.io. You can now make your UI pop with vibrant linear or radial colors, and bring to life with beautiful animations.