stepped-animate.ts

const title = document.querySelector<HTMLElement>('.toolbar-content-stub');
const toolbar = document.querySelector<HTMLElement>('.header-footer');
const transformState = toolbar.style.transform.match(/matrix\(([\d\,\s\.\-]+)\)/);

if (transformState == null || (Array.isArray(transformState) && transformState.length < 2)) {
  console.warn('[LoginPage.resetToolbarTransform]: Unrecognized transform value, doing nothing', toolbar.style.transform);
  return;
}

try {
  const transformMatrix = transformState[transformState.length - 1].split(',');
  const scaleYValue = Number(transformMatrix[3]);
  const translateValue = Number(transformMatrix[5]);

  // console.log('[before]', transformMatrix)

  // if toolbar is not fully shown then animate to it's initial ui state
  if (scaleYValue < 1) {
    from(steps)
      .pipe(
        concatMap(step => timer(10), (step) => step),
        tap(step => {
          const nextTransformMatrix = [1, 0, 0, step, 0, translateValue + Math.abs(translateValue * step)];
          // console.log('[next]', nextTransformMatrix);
          window.requestAnimationFrame(() => {
            toolbar.style.transform = `matrix(${ nextTransformMatrix.join(',') })`;
            title.style.opacity = step.toString();
          })
        })
      )
    //   .subscribe()
  }
} catch (err) {
  console.warn('[LoginPage.resetToolbarTransform]', err);
}