Template for Next Level UI Prototyping & Animation, June 2024

I made this illusion based on the Tusi motion method, which takes his name from Nair al-Din Tusi, a Persian astronomer from the 13th century. The principle established by Tusi states that: If a circle with diameter A rotates on the inner boundary of a circle with diameter 2A, then a point on the circumference of the inner circle traces a straight line. As you can see, any ball in the inner circumference is following a perfect linear movement. This is created with 8 Containers where the balls move linear in a loop. The delay between balls must be always the same as the speed of the animation. An ease-in-out cubic-bezier(.4, 0, .6, 1) animation is required to get the circular shape.

Recreation of the animation from: https://www.sketchappsources.com/free-source/1978-whiskey-jack-daniels-app-sketch-freebie-resource.html with a snap carousel

This simple prototype demonstrates how have a container expand and collapse while moving adjacent content in sync.

This Splash screen prototype shows a vector animation of a headphone made in After Effects. Use the Bodymovin plugin that exports a JSON file and can be dropped right into Proto.io.

A simple implementation of how to simulate a Dynamic List which the user can manually increase or decrease using a single Container, a List component and States.

This prototype is a simulation of one part of the Pandora iPhone app. I have chosen to simulate the part of the app where the user selects a Pandora radio station and then proceeds to select that station. What I have demonstrated is how how the radio station animates from a small entry on a list to a large full screen entry and vice versa. If you would like to see how I created this prototype, please watch this video tutorial here: http://docs.proto.io/videos/pandora-tutorial-part-1/

This is a prototype that demonstrates you some of the capabilities of Proto.io. You are welcome to import this project and use these interactions in your prototypes. In this prototype you will see the following interactions: Tap to rotate Tap to zoom in/out Tap and hold to transform.