Bolt v2.8.0-beta.1 Released! 🎉

New Web Component: <bolt-animate>

​
Incredibly flexible animation possibilities come from this new web component. Wrap it around any other component or HTML and easily set animations on them.
​

<bolt-animate in="fade-in-slide-up">
  <h2>This heading will fade in and slide up when triggered</h2>
</bolt-animate>

​

• Has 3 animation stages: in for "build in" that control how it appears on the page once triggered, once completed it goes to the idle animation stage (could be a subtle pulse), and then an out animation can be triggered for "build out" animations like "fade out slide down"
• Each of the stages can set the duration, easing, and delay
• Events emit upon the completion of these stages for easy integration into a wide variety of circumstances
• Multiple <bolt-animate>s can be used together for orchestrating complex multi-step animations by specifying the order of either the in or out animations; see example below:
  ​

<div id="my-animations">
  <bolt-animate in="fade-in" in-duration="1000" in-order="1">
    <h2>1st fade in</h2>
  </bolt-animate>
​
  <bolt-animate in="fade-in" in-duration="1000" in-order="3">
    <h2>3rd fade in</h2>
  </bolt-animate>
  
  <bolt-animate in="fade-in" in-duration="1000" in-order="2">
    <h2>2nd fade in that happens in parallel to below</h2>
  </bolt-animate>
  
  <bolt-animate in="fade-in" in-duration="1000" in-order="2">
    <h2>2nd fade in that happens in parallel to above</h2>
  </bolt-animate>
</div>

​
To trigger the animations of the above markup, use the JS below:
​

import { triggerAnimsInEl } from '@bolt/components-animate/utils';
​
const animationWrapper = document.getElementById('my-animations');
​
triggerAnimsInEl(animationWrapper).then(() => {
  console.log('All animations complete');
});
​

​

Micro Journeys web components collection

​
A collection of web components that help to explain an individuals journey to solve an issue by communicating with others. What does that mean? Well, it includes these components:
​

• A vertical tab panel that shows different steps along the way
• Characters that have different expressions and are connected to other characters
• Supporting components like dialog boxes around those characters
• Heavy usage of the <bolt-animate> component to animate these components in a way that tells a story
  ​
  Take a look at a bit of it in action to get an idea:
  ​
  ​
  ​

Editor

​
A next generation editor for authoring portions of web pages using web components brings many exciting opportunities! Once Web Components from Bolt (or other places) have been registered in the editor, it's possible to drag and drop them around, select them to alter their attributes to change appearance, update text and much more. The Micro Journeys, Editor, and Animate component have been part of a bigger goal of creating custom experiences that aren't one-offs and this is really exciting. The Editor will grow to be able to work with much more than the Micro Journeys as more of Bolt is added. Here's a quick sample:
​