How to apply Shimmer Effect

Ask us anything
1

Does anyone know how I can implement “Shimmer Effect” in my web collections?

Examples follow:

2

Hi @Lapola ,

This amazing video of @jptrinh maybe help you :wink:

How to create a skeleton loader on Weweb

3

I’ll try that, thanks

4

Text Clipped Shimmer Animation

For a text clipped shimmer “e.g. Loading…” add this to the header:

<style>
.wave-text,
.wave-text p,
.wave-text span,
.wave-text * {
  background-image: linear-gradient(90deg, #111 30%, #bbb 50%, #111 70%) !important;
  background-size: 200% auto !important;
  background-position: 200% center;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: gradientWave 1800ms linear infinite !important;
  will-change: background-position;
  display: inline-block !important;
}

@keyframes gradientWave {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
</style>

and then add the class tag “wave-text” to your element’s class input field. The “!important” tags override WeWebs styling