Ekin Aydemir
&
Midas Case
Tools used:
Bank Transfer (Wait State)
Figma
Rive
Framer
Please use bigger screen
Video recording
A screen recording of the flow.
See below for interactive components & flow.
Spatial:
Movement
Rotation
Effects:
Opacity
Color
Spatial interpolation can overshoot.
Effects interpolation doesn't overshoot.
Basic Interpolation
Token
Damping
Stiffness
Base spatial
0.9
700
Base effects
1
1600
Spatial movement can overshoot.
Effects don’t overshoot.
Basic duration
Token
Duration
Emphasized
500ms
Enter the screen
400ms
Exit the screen
200ms
Enter and exit animation
Number animation
Set a number to see interaction.
Token
Value
Duration
400ms
Interpolation
Base effects
Animated numbers
Interact
Button animation
Token
Value
Duration
Dynamic
Duration
500ms
Interpolation
Base spatial
Interpolation
Base effects
Button animation
Spinner animation
Token
Value
Duration
500ms
Interpolation
Base spatial
Spinner animation
Combined flow
One directional flow. Refresh page to restart.
How to Rive?
Inspect how rive handles logic inside animations.
State machine where logic lives.
Condition for transferring from “back to 3” animation to “back to 2” animation
Listeners listen for events like pointer enter, click ext.
File explorer, there are animations and state machines inside
Current view mode. There could be numbers, triggers, strings, booleans ext.
Property group to animate view mode changes inside animations.
View modes for different input handling.
Developers can bind to view mode inputs. Less errors, faster production, dynamic animations.
Static designs
GÖZDEN GEÇİR
1
2
3
4
5
6
7
8
9
,
0
Türk Lirası Çek
Yatırım Hesabından
Tutar
₺
100
IBAN
Yapı Kredi (1313)
₺752,15 nakit bakiye
YETERSİZ NAKİT BAKİYE
1
2
3
4
5
6
7
8
9
,
0
Türk Lirası Çek
Yatırım Hesabından
Tutar
₺
1000
IBAN
Yapı Kredi (1313)
₺587 nakit bakiye
ONAYLA
Para Çekme İşlemini Gözden Geçir
Tutar
₺
100
IBAN
TR
11000110101110001100110011
Banka
Yapı Kredi
ONAYLA
Para Çekme İşlemini Gözden Geçir
Tutar
₺
100
IBAN
TR
11000110101110001100110011
Banka
Yapı Kredi
