KPC
Kevin Powell - Community•3mo ago
i_lost_to_loba_kreygasm

can anybody help me on how to do this gradient animation? Figma link below

8 Replies
Jochem
Jochem•3mo ago
If you can't find a library to do it, you'd have to layer several gradient backgrounds from a color to transparent, then animate offsets on them
i_lost_to_loba_kreygasm
i_lost_to_loba_kreygasmOP•3mo ago
i_lost_to_loba_kreygasm
i_lost_to_loba_kreygasmOP•3mo ago
the blue is moving like I expect it to but the pink feels alternating
Jochem
Jochem•3mo ago
I think you need to make multiple backgrounds and layer them, you can just comma-seperate background layers in the background property, just make sure there's transparent elements to them
i_lost_to_loba_kreygasm
i_lost_to_loba_kreygasmOP•3mo ago
can you give me an example ?
Jochem
Jochem•3mo ago
so you can layer backgrounds like this in a single element: 
background: radial-gradient(circle at center, #18346d, transparent), radial-gradient(circle at 100%, #D85AD8, transparent), black;
background: radial-gradient(circle at center, #18346d, transparent), radial-gradient(circle at 100%, #D85AD8, transparent), black;
but in this case, I think you may have to layer them in separate elements so they can have offset animations, or see if you can animate the gradients themselves. I'm not sure if you can do the latter
Chris Bolson
Chris Bolson•3mo ago
If you define them as coma separated background gradients as Jochem has demonstrated, you can then define a different background position for each one within your keyframes animation, something like this: 
@keyframes radialShift {
  0%,100% {
    background-position: 0% 0%,50% 50%;
  }
  25% {
    background-position: 100% 0%,0 100%; 
  }
  50% {
    background-position: 100% 100%,0 0;
  }
  75% {
    background-position: 0% 100%,100% 0;
  }
}
@keyframes radialShift {
  0%,100% {
    background-position: 0% 0%,50% 50%;
  }
  25% {
    background-position: 100% 0%,0 100%; 
  }
  50% {
    background-position: 100% 100%,0 0;
  }
  75% {
    background-position: 0% 100%,100% 0;
  }
}
Kevin Powell
Kevin Powell•3mo ago
If you don't mind using registed custom properties, you can move them around in other ways too 😄 - https://codepen.io/kevinpowell/pen/pvJJpRY/27ae06d02a8bae81a5a5ce6bad2d8871?editors=1100 support is getting up there now for @property too 🙂

Did you find this page helpful?