Feedback animations like ripple effect are used to provide visual feedback to the user when they interact with a component. This helps to improve the user experience by making the interaction more engaging and intuitive.
CSS : DesignSystem/_tactics/_common/_css/_components/_animation/_ripple.scss
JS : Universes/_common/_js/_animation/_ripple.js
To implement the ripple effect on any element, add a HTML span tag with the class ripple as a child of the clicked element. Once the ripple component is added to the DOM, it must be assigned CSS properties that are calculated on click (top, left, width, and height). Among these properties, here is the calculation to perform to create a perfect circle :
- Diameter : Greater width or greater height of the clicked element
- width : [diameter]
- height : [diameter]
- top : [Y coordinates of the cursor] - [offset top of the clicked element] - [diameter]
- left : [X coordinates of the cursor] - [offset left of the clicked element] - [diameter]
The animation is made by CSS with a keyframe animation of 750ms duration. You can recover this duration by using the CSS variable --rippleAnimationDuration.