Animations
A few, commonly used animations are included in hgrid.
File location: sass/animation/_*.scss
(multiple partials) (GitHub)
You can exclude individual animations from the CSS output by changing their Sass variables with the
@use
rule. Example: $include-spinner: false
. See the full list of variables
on
GitHub.
Donut Spinner
It comes in four sizes. .small
, .large
,
.xl
and the default.
<div class="donut-spinner small"></div>
<div class="donut-spinner"></div>
<div class="donut-spinner large"></div>
<div class="donut-spinner xl"></div>
Out of the box, the donut glaze picks up the primary theme color you set
when customizing hgrid. Add .inline-block
or
use flex if you want to place it next to another element.
Rotate
Rotate any element once (on pageload) with .rotate-once
. Default rotation speed is 0.8s. Refresh page for demo.
Sale!
<h5 class="rotate-once max-content text-red">Sale!</h5>
We use the max-content
utility to reduce the size of the wide h5
element to the width of the text.
Otherwise the center of the rotation would be at the center of the wide element instead of at the center of the text.
Rotate any element indefinitely with .rotate
. Default speed is 60 rotations per minute.
<img class="rotate" src="/assets/img/icon.png" alt="rotating icon">
Transition
Applying the CSS class .transition
to an HTML
element creates an overlay that covers the entire viewport. With
JavaScript, hide this overlay by applying .vanish
when the page has finished loading.
Place the overlay and its script right after the opening
body
tag:
<body>
<div class="transition"></div>
<!-- Add '.vanish' when the page content has loaded: -->
<script type="text/javascript">
window.addEventListener('load', () => {
document.querySelector('.transition').classList.add('vanish')
})
</script>
<!-- page content comes here -->
</body>
The effect can be seen by refreshing this page.
Flashing Element
Add the class .flash
to any HTML element to animate it.
<!-- Flashing outer element -->
<div class="blinker f-center flash">
<div class="inner"></div>
</div>
<!-- Flashing inner element -->
<div class="blinker f-center">
<div class="inner flash"></div>
</div>
<!-- Pulsating rings -->
<div class="pulse-ring f-center flash">
<div class="inner flash"></div>
</div>
<!-- Flashing triangle -->
<div class="triangle f-center flash">
<div class="inner f-center">
<span>!</span>
</div>
</div>
// These examples are not part of hgrid.
.blinker {
width: 2.6rem;
height: 2.6rem;
border: 2px solid #ff5f5f;
border-radius: 100%;
.inner {
width: 1rem;
height: 1rem;
background: red;
border-radius: 100%;
}
}
.pulse-ring {
background: #98d1ff;
border-radius: 100%;
padding: 0.8rem;
.inner {
width: 1rem;
height: 1rem;
background: #42aaff;
border-radius: 100%;
}
}
.triangle {
width: 0;
height: 0;
border-left: 2rem solid transparent;
border-right: 2rem solid transparent;
border-bottom: 3.2rem solid #ff0000;
position: relative;
.inner {
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 20px solid #fff;
top: 18px;
position: relative;
span {
position: relative;
top: 11px;
font-weight: bold;
font-size: 17px;
right: -0.2px;
}
}
}
Fade
Fade elements in and out from a hidden state.
<div class="bg-gray-darker radius-6 hide fade">
<span class="x-close text-white fr pointer">×</span>
<p class="text-center text-white padding-20">I'm fading in and out</p>
</div>
The element to be faded in and out requires the .fade
class
and is invisible with opacity: 0;
by default. If you prefer to
remove it entirely from the document, add .hide
.
Manipulate .fade-in
and .fade-out
(and optionally .hide
)
with a JavaScript snippet, for example like this:
(() => {
const fadeTrigger = document.querySelector('.demo-fade-trigger')
const fadeElem = document.querySelector('.fade')
const x = document.querySelector('.x-close')
if (!fadeTrigger || !fadeElem || !x) return
fadeTrigger.addEventListener('click', () => {
fadeElem.classList.add('fade-in')
fadeElem.classList.remove('fade-out')
fadeElem.classList.remove('hide')
})
x.addEventListener('click', () => {
fadeElem.classList.remove('fade-in')
fadeElem.classList.add('fade-out')
setTimeout(() => {
fadeElem.classList.add('hide')
}, 400)
// Keyboard event omitted for brevity
})
})();
Scroll
This "animation" depends on browser implementation of the CSS spec. It's typically used as <body class="scroll-smooth">
and
controls the scroll method between anchor links. Available variations:
.scroll-auto { /* CSS default */
scroll-behavior: auto;
}
.scroll-inherit {
scroll-behavior: inherit;
}
.scroll-smooth { /* hgrid default in _base.scss */
scroll-behavior: smooth;
}
.scroll-unset {
scroll-behavior: unset;
}
← Previous: Typography
Next: Accessibility →