feat(button): added ripple button, issue #300

[AE-Hertz]

I am attaching a working video-

Screen.Recording.2024-10-07.112547.mp4

Please review it as its my first project working with storybook, i dont want to break your application by any means.

I have also made this in react here is the github repo - https://github.com/AE-Hertz/Mouse-hover-effect

Closes #300

[hari]

Please fix the TS error, you will need to cast the element.

./animata/button/ripple-button.tsx:40:14
Type error: Property 'style' does not exist on type 'Element'.

  38 |       const y = event.clientY - rect.top - size / 2;
  39 |
> 40 |       ripple.style.left = `${x}px`;
     |              ^
  41 |       ripple.style.top = `${y}px`;
  42 |       ripple.classList.remove("ripple-enter");

[AE-Hertz]

I fixed the casting issue, please check.

[github-actions]

🚀 Preview deployed to: https://f7f39c8b.animata.pages.dev

[hari]

@AE-Hertz Please use tailwindcss.

[AE-Hertz]

@hari i am facing some issues and i am unable to figure out the reason -
the working component need to have this much inline-css (working properly) -

.
.
Here is the tailwind extend (not working properly) -

issue facing (after removing keyframes and animation from inline-css) -

Screen.Recording.2024-10-08.232955.mp4

If you can guide me on this , that would be great. Thank you

[AE-Hertz]

@hari attaching a screenshot below, this much inlinecss is must to make this effect work, please let me know what can i do.

[hari]

@AE-Hertz could you push the lastest changes so I can run it locally?

[AE-Hertz]

@hari yes i did, please check

[github-actions]

🚀 Preview deployed to: https://8e9bf933.animata.pages.dev

[hari]

@AE-Hertz There is a bug when moving the mouse quickly. The ripple gets stuck.

Screen.Recording.2024-10-15.at.3.40.59.PM.mov

[AE-Hertz]

@hari i tried to resolve and after researching i found its actually the issue with react onMouseLeave() , read many article like this - https://stackoverflow.com/questions/29981236/how-do-you-hover-in-reactjs-onmouseleave-not-registered-during-fast-hover-ove its an old issue but i did not able to find any solution.

If their is something with your knowledge please share with me , i will implement it.

[AE-Hertz]

@hari please check i think this method to handle mouse event by checking the state is more consistent.

Screen.Recording.2024-10-17.125536.mp4

If everything is fine, Please merge my PRs

[github-actions]

🚀 Preview deployed to: https://02756ac4.animata.pages.dev

[hari]

@AE-Hertz instead of state you can use ref to track the hovered state.

[AE-Hertz]

@AE-Hertz instead of state you can use ref to track the hovered state.

yeah , actually. should i change it then?

[hari]

@AE-Hertz sure, why not?

[AE-Hertz]

@hari hey i implemented it with useRef but its not as consistent as this version(useState), thats why not pushing that code(useRef) .

see clip.

Screen.Recording.2024-10-17.212747.mp4

[AE-Hertz]

@hari well, i used both useRef and useState for better consistency, sending PR .

[github-actions]

🚀 Preview deployed to: https://20a1cd8e.animata.pages.dev

[sudhashrestha]

Looks good @AE-Hertz