Advanced 2D to 3D Window Animation

[random siren]

Hello Figma community,

I am working on an isometric 3D window design for my portfolio and I wanted to ask you guys what the best approach would be!

There is a certain visual requirement I am trying to replicate and it is as follows:

• The initial window design looks flat with no visible 3D elements
• When user hovers over the window, there is a transition animation from flat 2D to a fake 3D isometric visual
• Must use shadow effect to make the 3D visuals pop out from the background
• Must have flexible sizes which the elements inside the window drive the size
  - Cannot use Figma Make for this design

My current implementation looks like this but I am running into problems of my own and I haven't really seen anyone else try to make this on Figma.

Some problems I am personally running into:

1. An effective way to either mask or clip the 3D visuals while maintaining 45 degree triangles on the corner (no stretching)
2. When using clipping method, the shadows effects could be compromised
3. Odd flickering issues occur during transition animation (layers and effects are setup the same)

[upper stump]

I can help with this! The flickering is likely caused by overlapping hover states between your nested frames during the transition.
Quick question: Are you using variants with "While hovering" interactions, or are you animating the skew/rotation properties directly on hover?

[random siren]

For my implementation, I tried both "while hovering" and "hover effect" for Sites. They both seem to introduce their own visual errors that are different. Mine has no skew or rotation animations either!

I am just more curious of how other people would approach this design!