Use div to mask slide in animation

Question

I have div that contains an image that is animated to slide in from the right.

How can I use the div to clip/mask things so that the viewport for the animation is only within the div.

See example below, where the ball animates in from the right and is visible outside of the border of the div.

I would like the ball to only become visible as it starts to enter the div, i.e. use the viewport of the div for the animation mask.

https://stackblitz.com/edit/angular-ivy-cfsqev?file=src/app/app.component.ts

Any ideas on how to acomplish this?

Answer 1

so obvious...

overflow: hidden; 

on the parent element...