Tippy js custom animation not working

I have create a tooltip using Ngx Tippy wrapper which a angular version of Tippy.js. I have created a custom animation for the tooltip but it is not working as expected.

Question 1 - For the first time when tooltip is showing, custom animation is not working. From the 2nd time onwards the animation is working.

HTML -

<div class="sidebar">
  <ul>
    <li>
      <a
      href="javascript:void(0)"
      ngxTippy
      data-tippy-content="Home"
      tippyClassName="custom-tooltip"
      [tippyProps]="tippyProps"
      >
        <span class="icon-home"></span>
      </a>
    </li>
    <li>
      <a
      href="javascript:void(0)"
      ngxTippy
      data-tippy-content="About us"
      tippyClassName="custom-tooltip"
      [tippyProps]="tippyProps"
      >
        <span class="icon-about-us"></span>
      </a>
    </li>
    <li>
      <a
      href="javascript:void(0)"
      ngxTippy
      data-tippy-content="Blogs"
      tippyClassName="custom-tooltip"
      [tippyProps]="tippyProps"
      >
        <span class="icon-blog"></span>
      </a>
    </li>
  </ul>
</div>

Typescript -

import { NgxTippyProps } from "ngx-tippy-wrapper";

public tippyProps = {
  arrow: false,
  placement: "right",
  animation: "custom-tooltip-animation",
  hideOnClick: true,
  inertia: true,
  offset: [0, 5],
  popperOptions: {
    strategy: 'fixed',
    modifiers: [
      {
        name: 'preventOverflow',
        options: {
          mainAxis: false, // true by default
        },
      },
    ]
  }
}

CSS -

.custom-tooltip{
    border-radius: 20px !important;
    background: #3E3F5E !important;
    line-height: 0 !important;
    overflow: hidden;
}
.custom-tooltip .tippy-content{
    padding: 0 12px !important;
    line-height: 25px !important;
    height: 25px;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    text-transform: capitalize;
    font-family: 'Rajdhani', sans-serif;
}
.custom-tooltip[data-out-of-boundaries] {
    opacity: 0;
    transform: translate(10px, 0px);
    visibility: hidden;
}
/* Right */
.custom-tooltip[data-placement^='right'][data-animation='custom-tooltip-animation'][data-state='hidden']{
    opacity: 0;
    transform: translate(10px, 0px);
    visibility: hidden;
}
.custom-tooltip[data-placement^='right'][data-animation='custom-tooltip-animation'][data-state='visible'] {
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
}

atomiks / tippyjs

Tippy js custom animation not working #870