Frame and Masking/Cropping help

[mxrio]

I'm attempting to have two large images within boxes undergo transforms but stay within a set of bounds i've placed, ideally half of the screen.
Image 1 shows how it is when the boxes are placed with a frame and separated at the halfway point.
However when I attempt to use a transform on the second frame created, the image ends up filling the whole screen instead of staying within the frame (Image 2).
Image 3 shows how I would like it to look, restricting it so I can move the boxes freely but keep what is actually displayed within the frame. I understand the only reason this one works is because the second frame is built on top of the first. My question is, how do I make it so both the images are only displayed through the bounds of the frame without actually cropping the image itself, so I can use transforms on them at another time.

https://imgur.com/a/brpIo

[Remix]

Though you could use LiveCrop (which updates each time it is drawn) you are probably looking at using a Viewport with the image set as an offset background...

Pseudo code (might need some tweaks)

Code: Select all

screen two_pics():
    hbox:
        frame:
            area (0,0,320,320)
            viewport id "left_side":
                draggable True
                scrollbars None
                add "images/bg 99.png" anchor (0.5,0.5) xpos 160 ypos 160
        frame:
            area (0,0,320,320)
            viewport id "right_side":
                draggable True
                scrollbars None
                add "images/bg 98.png" anchor (0.5,0.5) xpos 160 ypos 160