Get the position of a scrolling container

3,593
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

Hide Navigation Bar On Scroll

4,659
4
177
This is an example of a Navigation Bar that disappears on any downward scroll and re-appears on on any upward scroll.

Akis Ioannou

Google Inbox - compose animation

10,292
5
286
The recently released Google Inbox app is a re-thinking of the email inbox experience that beautifully demonstrates Google's material design interactive animation language. This prototype focuses on the compose button's animation. Click the + to reveal a new state where a wave of buttons and labels float up, and the + becomes a pencil icon. It uses two states, with staggered animations.

Todd Siegel

BiblioTour

1,552
0
Prototype of an appa that commemorates the ITESM Library

dcbe71e0-504c-11ed 9221-0e76797a4f7b

Apple Watch using native UI library

32,218
6
264
Created using Proto.io library of fully interactive, native watchOS components.

Akis Ioannou

Diffy (iOS)

1,237
0
Shaping the classroom with constructive feedback.

9645a9f9-504e-11ed 9221-0e76797a4f7b

Twitter Intro Animation

2,825
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,058
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

Next