Studio Web
Switch Design System theme
Betclic / Clickbet
Shortcut : MAJ + T
Switch theme mode
Light / Dark
Shortcut : MAJ + D
Ripples
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/_components/_css/_common/_animation/_ripple.scss
JS : Universes/_common/_js/_animation/_ripple.js
Ripple effect
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.
In list
-
No ripple effect because it's not clickable
-
Click me to activate ripple effect
-
Click me to activate ripple effect
-
No ripple effect because it's not clickable
-
Click me to activate ripple effect
-
Click me to activate ripple effect
In button
Be careful before using the ripple effect, sometimes, like on odds buttons (containing betting trends) the button absolutely must have an 'overflow:visible', so the effect will not work in this case.