Variables Examples

34,310
44
2,622
The project contains numerous examples completed using variables and conditional logic.

Akis Ioannou

Extended UI libraries

25,336
3
122
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.

Akis Ioannou

Color Picker

2,591
1
8
Here's a demo showing a basic color picker using a container with 4 states for both the colored star and the color swatches.

Todd Siegel

Get the position of a scrolling container

4,051
2
114
If you need to get the Y position of a vertically scrolling container, create a text box. Then on the container scroll trigger, set a variable that evaluates the numerical callback value from the event (Y position). Then add a callback that changes the text property of the text box by reading from the variable.

Todd Siegel

Twitter Intro Animation

3,117
1
49
This prototype show how to re-create the intro animation of the Twitter iOS app where the bird flings out and the feed flings in. See how it was re-created step-by-step in this webinar video: http://docs.proto.io/videos/re-creating-bespoke-interactive-animations-with-proto-io-2/ Assets also available to use.

Todd Siegel

Parallax - Yahoo Weather

3,501
0
35
Re-creation of the horizontal swipe parallax effect in Yahoo Weather. See how it was created step-by-step in this webinar: https://support.proto.io/hc/en-us/articles/223073307-Prototyping-parallax-effects TAGS: parallax variables variable

Todd Siegel

Expenses Report

3,636
0
37
The list and chart include animations created using states. Design from: https://www.sketchappsources.com/free-source/4505-expenses-report-sketch-freebie-resource.html

17056140-504e-11ed 9221-0e76797a4f7b

Tinder UI

22,149
6
1,214

Keezy App Animation

5,897
1
38
Tap/Hold the black circle to see the 2 state animation of the Keezy sound looping app. A circle of circular buttons spins out onto the expanded black circle that becomes the screen background. Once you're on this 2nd state, tap anywhere to return to the initial state. I recorded a webinar showing how to create this interactive animation: http://docs.proto.io/videos/re-creating-bespoke-interactive-animations-with-proto-io-2/ You can also find the assets here used for the prototype. Enjoy!

Todd Siegel

Next