Explore requestAnimationFrame and Web Animation API

[abdmmar]

Why

• Smooth animation. 60fps

Current Progress

Use Web Animation API:

const toaster = document.querySelector('wc-toast');
const toastContainer = toaster.shadowRoot.children[1];

const first = toastContainer.offsetHeight;

toaster.appendChild(toastItem);

const last = toastContainer.offsetHeight;

const invert = last - first;

const animation = toaster.animate(
  [{ transform: `translateY(${invert}px)` }, { transform: `translateY(0)` }],
  {
    duration: 300,
    easing: 'ease-out'
  }
);

animation.startTime = document.timeline.currentTime

Probably will use requestAnimationFrame for better support and keep the wc-toast size small (no need for polyfill)

Blocker

• First toast run animation perfectly smooth, but when another toast is added to the container, it bounces and makes the distracting animation
• When the toast container changes the position to the bottom of the page (default is at the top) or changes it back to the default, animation doesn't run at all (except CSS animation).

References

• https://css-tricks.com/using-requestanimationframe/
• https://aerotwist.com/blog/flip-your-animations/
• https://github.com/argyleink/gui-challenges/tree/main/toast