Skip to content

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 &gt;"
    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.

Edited by Olivier Goulet