Motion
Motion in Joisti is quiet. Things arrive quickly and settle softly, the way something is set down, so the product feels calm rather than busy. One curve and three timings cover everything on the website and in the app. The stickers are the only place motion gets to be playful.
Three habits behind every move. If a new animation follows them, it will feel like ours.
Every move has a reason: to show where something came from or where it went.
Motion guides attention to what matters, then gets out of the way.
The same kind of moment always moves the same way.
Our curve leaves fast and lands slowly. Use it for anything that arrives, moves or leaves, in place of the default easing in your tool. Small things take the fast timing, most moves the base, and big moments like a page or a panel the slow one. With reduced motion turned on, every move becomes a short fade.
The curve on the pieces every screen has: a button pressing, a toggle switching, a menu opening from the thing you clicked, a modal arriving, pictures sliding past. The logo settles into place the same way.
Three calls that come up in almost every screen.
Fade in, then settle on our curve.
Bounce, spring or overshoot.
Show the flame while something loads, and move on the moment it is done.
Hold anyone back so an animation can finish.
With reduced motion on, replace every move with a short fade.
Shake, flash or spin large parts of the screen.