Animatable Components using Higher Order Component (HOC) with StencilJS 🙌

animate-component.tsx

import { Component, h, Element, Prop, Host, Event, EventEmitter } from '@stencil/core';

@Component({
  tag: 'animatable-component'
})
export class AnimatableComponent {
  @Element() el!: HTMLElement;
  @Prop() keyFrames: Keyframe[]
  @Prop() options: KeyframeAnimationOptions
  @Event() finish: EventEmitter;

  animateComponent() {
    const element = this.el.querySelectorAll(':first-child')[0];
    
    const animation = element.animate(this.keyFrames, this.options)
    animation.play();
    animation.onfinish = () => this.finish.emit(element)
  }

  componentWillLoad() {
    this.animateComponent()
  }

  componentDidUpdate() {
    this.animateComponent()
  }

  render() {
    return <Host>
      <slot />
    </Host>
  }
}

my-animated-component.tsx

import { Component, h } from '@stencil/core';

import {
  SendMessageButton,
  createAnimatableComponent,
  keyFramesSendMessage,
  optionsSendMessage,
} from './utils'

const AnimatableSendMessageButton = createAnimatableComponent(SendMessageButton)

@Component({
  tag: 'my-animated-component'
})
export class MyAnimatedComponent {
  render() {
    return (
      <AnimatableSendMessageButton
        keyFrames={keyFramesSendMessage}
        options={optionsSendMessage}
        onClick={() => alert('Eureka')}
      />
    )
  }
}

utils.tsx

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

export const SendMessageButton = (props) => {
  return (
    <ion-fab-button {...props}>
      <ion-icon name='send' />
    </ion-fab-button>
  )
}

export const keyFramesSendMessage: Keyframe[] = [
  {
    opacity: '0',
    transform: 'rotate(0deg)'
  },
  {
    opacity: '1',
    transform: 'rotate(360deg)'
  }
]

export const optionsSendMessage: KeyframeAnimationOptions = {
  duration: 500,
  easing: 'ease-in-out'
}