Shimmer Effect with SwiftUI

Arslan Rafique
Daresay
Published in
Jun 18, 2022

Shimmer Effect is the Digital Bread.

Just like the bread is served in fancy restaurants before the meal, we serve Shimmer Effect before the real data.

Shimmer Effect
Shimmer Effect

A single shimmer row in above animation is result of below gist :

Nice that we use both overlay and mask to achieve perfect shimmer.

mask as it sounds, exposes a limited area covering the rest, and that limited area is our overlay.

We animate both mask and overlay with exact same animation and the result we get is a smooth Shimmer Effect.

By tuning in maskViewGradient and mainViewGradient you can create different variations of Shimmer.

It’s that simple!

Ciao!

--

--