Dynamic Width Rectangles inside another square

Hi,
I’m currently developing a shop-like system where different textures can be bought for the player to be used. The way the sprites to be drawn is when its selected its in the middle. If i go to the right, all textures go to the left and during the transformation period the sprites will only get drawn inside the square as shown in the picture below.
I have issues implementing the way the dynamic width will work for the squares that is currently being drawn.
The green one is somewhat easy with the code being
int width = greenBox.X - blacksquareBorder.X + blacksquareBorder.Width;
But i cant really get the grip around how the dynamic width of the purple box will work since it will have to decrease but from the right. I assume i have to change its origin and calculate the X and widths values from that but im not really sure how that works.
The arrow indicates which way the textures will move

pseudopicture

Managed to somehow miss this https://gamedev.stackexchange.com/questions/4399/clipping-a-spritebatch-draw-in-xna when searching for answers / tips. This is now done

Or use a viewport. Anything outside the viewport will not be drawn

Keyword:
Carousel

GitHub: