tj
KPCKevin Powell - Community
•Created by tj on 11/3/2023 in #front-end
Getting a Clip-Path animation to start from the cursor position (like a ripple effect)
Hi, I have this card and I'm trying to have a background circle fill effect on it where the circle expands from where the cursor is, I have a card div and I'm using its
::before pseudo element, first I tried to put a clip-path: circle(var(--size) at var(--transform-origin) on it and control its size and position using custom properties on the parent div which I will use javascript to animate them.
I'm updating the --size and --transform-origin using javascript but since I have to use a default value for --transform-origin to get the clip-path rule to work when the page is first loaded the default value is getting read first and then once you click on the card the --size become 150% and the circle fills the background but the position is starting from the default value and not from where the cursor is, but when you hit the reset button it shrinks back to where you clicked earlier.
- Here's a code pen for the complete code https://codepen.io/x287x/pen/zYeKQwP
- And here's a another approach using position absolute and animating the width instead of using clip-path https://codepen.io/x287x/pen/XWOjwVV
The problem with the second approach is since I'm not using clip-path I have to put a ridiculous width on the ::before element which is resulting in a slight lag when you hit the reset button because the circle has to travel extra distance to be within the card's border.
The first approach would be much better if someone could help me get it to work.1 replies