Meet Animatable, a tiny Web Component to use WAAPI as a Component 💫

#stencil #webcomponents #stenciljs #html

Web Animations API is the other way to animate any HTML element using JS instead of CSS, if Animate.css is familiar for you, Animatable is the sequence of the animation series you’re looking for! 🌟

<animatable-component
  autoplay
  easing="ease-in-out"
  duration="800"
  delay="300"
  animation="zoomIn"
  iterations="Infinity"
  direction="alternate"
>
  <h1>Hello World</h1>
</animatable-component>

As you can see we’re using Web Animations API in a declarative way (Using an HTML element like any other), we can say that Animate.css is to CSS as Animatable is to JS 💅

If you are using VanillaJS (No Framework Integration), you only need to import the scripts before:

As we can see it’s like Animate.css but with superpowers because we can keep the last state (opacity, transform, etc) of a previous animation before to create another one, without adding and removing classes to the elements.

There’re default animations instead of using keyFrames directly here 👋

And if you want to include other amazing animations you can submit a Pull Request from the repository or create an issue with the keyFrames of the new animation, we're always happy to be more animated! 🆒

We can set the animation property to none to clear the keyFrames of a previous animation.

Also there is a list of the most common easing functions here 📈

We can set the easing property to a custom function like cubic-bezier(0.25, 0.1, 0.25, 1), that value is equal to ease.

The Magic here is you can customize the duration, delay, number of iterations and any other configuration of Web Animations API of each animation of your elements by using attributes/properties, and we’re opened to add new cool animations because is so easy and sexy, thanks to TypeScript!

Framework Integration

Ok, It looks great working with HTML elements, but… How can I use it from Angular, React, Vue, etc as another component? 🤔

This Web component was created with StencilJS, therefore integrating the component is very easy:

Angular

Enable Web Components from your Modules, check here.
Import Web Components globally, check here.
Using the component

<animatable-component autoplay [animation]="myAnimation" [duration]="300">
  <h1>Animate it</h1>
</animatable-component>

React

Import Web Components globally, check here.
Using the component

<animatable-component autoplay animation={myAnimation} duration={300}>
  <h1>Animate it</h1>
</animatable-component>

Vue

Import Web Components globally, check here.
Using the component

<animatable-component autoplay v-bind:animation.prop="myAnimation" duration="300">
  <h1>Animate it</h1>
</animatable-component>

As you can see we have Universal Components here, yay! 👏

Bonus: Using Higher-Order Components (HOC) from StencilJS

One of the best strategies to reuse logic from React is by using HOCs, in this way we can extend behaviors, reuse components and improve the maintenance of our code ✍️.

With StencilJS is also possible to use this concept working with Functional Components! 🙌

function createAnimatableComponent (
  WrappedComponent: FunctionalComponent
) {
  return (props) => {
    const { keyFrames, options, onFinish, ...rest } = props
    return (
      <animatable-component
        keyFrames={keyFrames}
        options={options}
        onFinish={onFinish}
      >
        <WrappedComponent {...rest} />
      </animatable-component>
    )
  }
};

Do you want to see an example using Types? Check the utility function we have in Animatable here! By using createAnimatableComponent HOC you can create your own components and simply wrap them with Animatable to share your common logic and animate multiple components! 👽

Check other good example here.

I hope you find this component useful for your projects, and let’s continue improving our Universal Components with StencilJS, check more resources here! 😊