DEV Community

Cover image for Meet Animatable, a tiny Web Component to use WAAPI as a Component ๐Ÿ’ซ
J.D Nicholls
J.D Nicholls

Posted on • Updated on

Meet Animatable, a tiny Web Component to use WAAPI as a Component ๐Ÿ’ซ

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

React

  • Import Web Components globally, check here.
  • Using the component
<animatable-component autoplay animation={myAnimation} duration={300}>
  <h1>Animate it</h1>
</animatable-component>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
    )
  }
};
Enter fullscreen mode Exit fullscreen mode

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! ๐Ÿ˜Š

Supporting ๐Ÿป

I believe in Unicorns ๐Ÿฆ„ Support me, if you do too.

Made with โค๏ธ

Juan D. Nicholls

Top comments (3)

Collapse
 
brooksforsyth profile image
Brooks Forsyth

Awesome! This could be a real time saver!

Collapse
 
jdnichollsc profile image
J.D Nicholls

I'm glad to hear that!

Collapse
 
tayebali profile image
ELTAYEB ALI

ohh!!, I like it thx for nice share :)