Transition
Convert a value between 0 and 1 (often a progress value) to a value between a new range defined by the start and end values.
For example, if the start value is 50 and the end value is 100:
- a progress of 0 will output 50
- a progress of .5 will output 75
- a progress of 1 will output 100
The number wraps when progress exceeds the 0 to 1 range:
- a progress of -.5 will output 25
- a progress of 2 will output 150
Convert a number from any range to 0 to 1 with Progress.
Often used with a Switch and Pop/Classic Animation. See Animation Basics for more information.
Right-click to change the type (ex: number, position, color).
- Output
The converted value.
Related Learn Content
Add logic to your transitions and flows.
Visualize recorded and live audio
Build prototypes using the accelerometer.
An introduction to using Origami Studio.
Add and capture interaction to instances of your loops.
Design for both portrait and landscape modes.
Capture keyboard input in your prototype.
Related Examples
Drag a live camera stream to different corners of the screen.
Drag to control the Instagram straighten tool.
Use Device Motion to check if the device is level.
Animate a photo between conversation and lightbox.
Animate between two states when the screen is tapped.
Pinning playlists and more to the Artist Page.
Transition across three or more states and include logic.
Request and browse photographs from Unsplash.
Swipe up and explore different photo filters.
Related Patterns
Loop and control a linear timebase
Animation using Classic easing or Pop bounce
Present and drag dismiss a bottom sheet
Animate in content and dismiss on timeout
Transition based on pivots and rotations
Create a feedback to increment values
Display a navigation based on scroll away values
Record and input from the devices microphone