Timing and easing
Learning paths through this topic
Make a looping animation repeat without a hitch, also backwards
Clouds, spinning coins and bobbing lanterns glitch at the seam, run wrong when time goes negative, or start to jitter after the game has been open for hours. Here is how to turn a growing clock into a clean repeating position, including the back-and-forth kind.
Make a hold-to-confirm button whose ring fills while pressed and drains when let go
Dangerous buttons such as reset or spend all can ask for a long press. A ring that snaps to empty on release feels harsh, and a confirmation that can fire several times in the last frames is a real bug. Here is a ring with clear states that fills, drains smoothly and confirms exactly once.
Draw a loading bar that moves steadily, never jumps back and never lies about finishing
Real loading progress arrives in lumps: nothing for a while, then a big step, sometimes even a lower number after a retry. Drawing it as it comes looks broken. Here is a bar that smooths the lumps, keeps moving gently while it waits, and fills the last stretch only when loading is truly done.
Show a loading spinner only when loading is slow, and keep it long enough to be seen
A spinner that flashes for a tenth of a second looks like a glitch, yet a game that shows nothing for two seconds looks frozen. The answer is two small delays working together, and one of them depends on the other in a way that is easy to get wrong. Here is the rule.
Keep the pause menu animating while the game itself is frozen or in slow motion
If everything uses one clock, pausing the game also freezes the menu that is sliding in, and a slow-motion moment makes buttons crawl. Two clocks fix that, but the slow-motion change itself should not be a hard cut. Here is how to run both and ease into slow motion.
Offer a calm version of every animation for players who get dizzy from motion
Some players feel unwell from shaking, spinning and sliding screens, and their phone has a setting for it that your game should respect. Turning every animation off makes changes invisible and confusing, though. Here is a rule for what to remove, what to keep and what must never be touched.
Come back from another app without animations jumping or timers exploding
On a phone the game is frozen whenever the player answers a message, and when they return the clock says a minute has passed. Animations then leap to the end, particles fly off the screen and cooldowns finish at once. Here is how to separate the time that moves pictures from the time that really passed.
Decide whether a swiped card leaves or comes back, and how fast it moves
Dragging a card sideways to dismiss it seems simple until a short, fast flick should count and a long, slow drag that the player then reverses should not. The finishing movement must also continue the finger's pace. Here are the rules for the decision and the time it takes.
Queue short messages so each can be read, repeats are merged and backlogs shrink
Achievements, pickups and errors can fire at once. Showing them all on top of each other hides every one, showing them one by one makes the last wait a minute, and a message repeated twenty times should not fill the queue. Here is a small queue that merges repeats and speeds up without becoming unreadable.
Show a ripple where the finger touches, even when the player taps wildly
A little ring spreading from every tap tells players the game heard them. But if every tap makes a new ring, frantic tapping fills the screen with rings and slows the phone, and a multi-finger touch can create the same ring twice. Here is a ripple that stays cheap and honest.
Play a tick as a spinning wheel passes each peg, without a wall of noise
A prize wheel or number picker feels real with a click for each notch, but a fast spin crosses several notches in one frame and dozens of sounds stack into a buzz, and a wheel that wraps around can click wrongly or twice. Here is how to count the notches and play only what the ear can follow.
Move platforms back and forth with pauses at the ends and carry whoever stands on them
Platforms that move by adding a bit each frame slip out of step with each other over time, run at different speeds on different screens, and let the player slide off. Here is a way to place every platform from the clock so they stay in step and carry the rider.