An as close as possible copy of the IFTTT onboarding experience.
This prototype is also made in 4 other tools (Pixate, Origami, Framer & Form) to compare the differences between them.
More info: http://medium.com/sketch-app-sources/five-app-prototyping-tools-compared-form-framer-origami-pixate-proto-io-c2acc9062c61
Original app: http://appstore.com/IFbyIFTTT
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:
A Simple recreation of the Messenger bubble using Proto.io stock images. Basic functions such as drag/drop to screen corners, drag to the bottom to delete, swipe down to reveal 'contents hidden' to bring the bubble back to the screen and tap bubble to show conversation.
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:
drag and drop
animations on drop