Kevin Powell - Community•5d ago

need help with radial reveal animation like example

I tried to recreate this radial animation but not able to achive the exact style can any one help me with this please https://codepen.io/Ullas-Kunder/pen/rNXRxgB

Ullas Kunder

CodePen

radial

...

6 Replies

clevermissfox•5d ago

Theres probably a few approaches for this. Could try using it as mask and a registered custom property @property to transition the radial gradient

Choo♚𝕂𝕚𝕟𝕘•4d ago

I made something similar in which the revealed area is controlled by mouse position instead of a predetermined path, but the principle involved is the same. https://codepen.io/chooking/pen/RwEogoe I used mix-blend-mode, but you can also do this by moving a radial gradient mask.

Ullas KunderOP•4d ago

will try that

Ullas KunderOP•4d ago

I saw few example not able to recreate using @property as well: updated added more keyframe but now its smooth like in video https://codepen.io/Ullas-Kunder/pen/rNXRxgB

Ullas Kunder

CodePen

radial

...

clevermissfox•3d ago

Im not seeing a smooth animation , its choppy because Background property is not animatable (its called a discrete property) which is the problem , use @property for the values you need to update and animate those not the whole background-image declaration. Let me find you a KPow video that will show you an example. You'll want @property with a <length-percentage> or you could also use an <angle>

@property --property-name {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 37%;
}

...background-image: radial-gradient(circle at 100%,  #000 var(--property-name), #0000 ....etc
}
@keyframes animateProp {
0%, 100% {--property-name: 66%; }
20% { --property-name: 72%;}
...etc

@property --property-name {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 37%;
}

...background-image: radial-gradient(circle at 100%,  #000 var(--property-name), #0000 ....etc
}
@keyframes animateProp {
0%, 100% {--property-name: 66%; }
20% { --property-name: 72%;}
...etc

https://youtu.be/-VOUK-xFAyk?si=ZUFFra_DAKc-Yh8I

Kevin Powell

YouTube

Create an animated, glowing, gradient border with CSS

Inspired by a codepen by Gayane Gasparyan - https://codepen.io/gayane-gasparyan/pen/jOmaBQK - I took my own attempt to create a rotating gradient border, including a nice soft glow. To do it, I use @property, which doesn't have fantastic browser support, but near the end of the video I look at why that's not really a big deal 🙂 🔗 Links ✅ My f...

Ullas KunderOP•3d ago

will try it

Gaming

Programming

need help with radial reveal animation like example