Add typewriter-effect JS animation to Solstice Assets
We currently have two typewriter effects on eclipse.org:
- eclipse.org/events
- eclipse.org/research
This typewriter effect will be more present when we undertake the eclipse.org redesign.
The research page and events page have different implementations. The research one is more primitive and only uses CSS, whereas the events page is more polished and reusable and uses the GSAP animation library.
How the animation is used
We should plan to migrate the eclipse.org/events version of the typewriter effect:
<p class="typewriter-effect" aria-label="Community: it's in our code">
<span
class="typewriter-chunk"
data-text="community >"
aria-hidden="true"
>
</span>
<span
class="typewriter-chunk text-quaternary"
data-text="it's_in_our_code"
aria-hidden="true"
>
</span>
</p>
When migrating the effect over, do not forget to grab the css for the animation. It is not entirely in JS.
The CSS we care about is the border-right
and display
properties.
Organization & Documentation
We should consider adding the following directory to organize our JS animations:
js/
animations/
eclipsefdn.typewritter-effect.js
We should also add a new storybook category for animations, as we will be introducing more animations into the future.