A Sample project used in various official Proto.io tutorial videos. It contains various design patterns commonly found in popular mobile apps.

Shopping cart using variables to calculate selected item amount, and total costs using variables. Project also includes a thumbnail gallery

Swipe to see some Porsche models. Tap on a car to get more information on that car. The project is using States and State animations

A simple project that changes the route of the Google Maps embed code using the HTML component found in Proto.io using states. Use the menu below the map to navigate to switch to another route or another map format. Format 1 changes based on menu selection using Google Maps. Format 2 changes based on both menu and route on map using images.

An extended collection of fully animatable UI libraries like triangles, stars, arrows and more, let you bring your idea to life all within Proto.io.

Spoon is a dating app concept aiming to make online dating more efficient, and fair. The concept has the following main characteristics: 1) Gender equality ⁠— the app decides who makes the first move; 2) Time efficiency — no need to put in hours of work to meet somebody; 3) Incremental steps towards a clear goal — no limbo states, no endless/goalless swiping; 4) Fairness, respect, and accountability for its users — choosing someone means you commit resources to that person, no second thoughts allowed; 5) Match exclusivity — chat with only one person at a time; no competing for one’s attention; 6) Fast and fluid interactions — chat while both users are online and active, no offline messages. I hope you like it.

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

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

A starter project to practice UI animation and microinteractions

A very basic Calendar example project using Containers a few states and 1 variable to track the year.