Angular animation gets hidden behind the other elements

Question

Note: New to Angular Animations

I have the following angular animation which animates (move) the div from source to target coordinates.

Issue 1: Somehow the animation is working but gets hidden when it goes out of the div space. What can be the issue ?

Issue 2: How to create the motion in a curvy manner. Currently the animation is straight movement. I want it to go in a curve manner.

Issue 3: How to handle situation if the target is position: fixed;. When I scroll the page the animations for some items seems like if the target coordinates are somewhere else.

I created a demo. It works well in stackblitz See Here but not in my project.

   const animation = this.builder.build([
      animate(
        '700ms ease-out',
        style({
          transform: `translate3d(${x}px, ${y}px, 0)`,
        })
      ),
      animate(
        '700ms ease-out',
        style({
          transform: `translate3d(${x}px, ${y}px, 0) scale(0)`,
        })
      ),
    ]);