A11y Animation
This component is to be used for testing animations crafted using CSS. It is specifically being tested to showcase accessibility standards with CSS animations and JS for loading the animation when a specific part of the component is scrolled into the viewport.
This is the default animation we'll be working with. What this animation is doing is using before and after pseudoelements to slide in on the left hand side to give the card an animation. The first issue you'll see here is that the animation is constantly on loop. Let's take care of that first.
The first thing we need to do is take care of the infinite animation. We can fix this in the CSS proper by setting the number of times the animation plays. Currently you'll the code looks like the follow:
animation: animate-text 10s infinite;
As you can see the animation is set initially set to infinite. What we can do to fix this is set the iteration of the element to a certain number. It's suggested that if you go this route, you try to stick to a single animation cycle, but you can set it to other numbers as well. It would be best to only stick to between 3 to 5 cycles. The following code will determine how many times it actively runs.
animation-iteration-count: 2;
This is a step in the right direction but there are vestibular disorders that can cause issues for any sort of animation on a website. This can generally be fixed by toggling certain settings on a computer to reduce or turn animations off. To test this, here's what you'll need to do to switch the settings on for your computer:
- - Firefox: In GTK/GNOME: GNOME Tweaks > General tab (or Appearance, depending on version) > Animations is turned off.
- - In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.
- - In Windows 7: Control Panel > Ease of Access > Make the computer easier to see > Turn off all unnecessary animations (when possible).
- - In macOS: System Preferences > Accessibility > Display > Reduce motion.
- - In iOS: Settings > General > Accessibility > Reduce Motion.
- - In Android 9+: Settings > Accessibility > Remove animations.
- - Once you've turned the setting on, you'll want to refresh the page.
The last thing we'll be focusing on is animations that happen once they scroll into view. This is accomplished by attributing javascript to the animation. What we'll be doing here is, when the container enters view, we'll add the class to the item that causes the animation. Scroll down the rest of the way to interact with the animation and see it in action.
{#
/**
* @file
* a11y animation component.
*/
#}
{{ attach_library('h4h_theme/a11y-animation') }}
{{ attach_library('h4h_theme/basic-text') }}
<div class="animate-wrapper">
<div class="animate-description">
{{ body.par_one }}
</div>
<div class="animate-container">
</div>
<div class="animate-description">
<div class="body-text">{{ body.par_two.desc_open }}</div>
<div class="code-box">{{ body.par_two.code.initial }}</div>
<div class="body-text">{{ body.par_two.desc_close }}</div>
<div class="code-box">{{ body.par_two.code.changed }}</div>
</div>
<div class="animate-container iteration-count">
</div>
<div class="animate-description">
<div>{{ body.par_three.desc_open }}</div>
<ul class="code-box">
{% for item in body.par_three.directions %}
<li>{{ item }}</li>
{% endfor %}
</ul>
</div>
<div class="animate-container settings-toggle">
</div>
<div class="animate-description">
<div>{{ body.par_four }}</div>
</div>
<div id="scroll-delay" class="scroll-delay iteration-count">
</div>
</div>
Lottie
This component is a Lottie animation.
{% include '@h4h_theme/lottie/lottie.twig' with no_controls_no_loop only %}
{% include '@h4h_theme/lottie/lottie.twig' with no_controls_loop only %}
{% include '@h4h_theme/lottie/lottie.twig' with controls_no_loop only %}
{% include '@h4h_theme/lottie/lottie.twig' with controls_loop only %}
Scrolling SVG
This component is an implementation of Scroll Magic with an SVG.
{{ attach_library('h4h_theme/scrolling-svg') }}
{% import '@h4h_theme/scrolling-svg/svg.twig' as svg %}
{%
set classes = [
'scrolling-svg',
modifier ? modifier|join(' ')|trim,
]|join(' ')|trim
%}
<figure class="scrolling-svg {{ classes }}" {{ extra_attributes }}>
{{ svg.get(svg_filename, theme_path) }}
{% if caption %}
<figcaption class="scrolling-svg__caption">
{{ caption }}
</figcaption>
{% endif %}
</figure>