Bounce
The bounce transtion will animate a bounce effect when displayed.
Usage
The bounce should be used whenever content should be prominetly shown to the user, some common usages are:
- Alert boxes
- Cookie overlay
Each element should have a class slb-bounce.
To show and hide the element dynamically add and remove the class slb-show on the element.
Accessible attributes
| Accessible attribute | Description |
|---|---|
aria-hidden |
This is a boolean value set on the hidden element that should be true when hidden and false when it is not |
JavaScript Support
| JavaScript Support class name | Description |
|---|---|
slb-bounce |
Default behaviour of the bounce to invisible |
slb-show |
Display the bounce animation |
transitions\transition-bounce.hbs
<div class="slb-cookie-overlay slb-bounce slb-show">
<p class="slb-cookie-overlay__text">Standard Life websites use cookies to ensure you get the best experience. <a href="#" class="slb-cta slb-cta--regular slb-cookie-overlay__cta" title="Read our Cookie Policy">Read more or update your settings.</a></p>
<button class="slb-cookie-overlay__button">OK</button>
</div>
Source:
components/_transitions.scss