This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Bart Simons
Posted May 03 - Read on Facebook

Hi guys, I've been experimenting with Framer's VR Component but there's something I keep running into. I'm prototyping a VR interface where a certain item gets larger upon looking at it. This would mean that during the animation it overlaps some elements next to it. However no matter what I do the item keeps 'scaling' behind the other elements. I've tried a ton of stuff by changing the index of the layers, playing around with elevation/heading etc but I can't get it fixed. If I swap the animated layer to a layer thats previously 'on top', it also gets pushed back during the animation.

Here's a quick prototype that shows the issue. If you look at the blue layer it gets bigger, but only behind the other layers. I want it to be on top of the rest. What can I do to fix this?

4 Comments

Patryk Adaś

you should play with the "z" property of the layer

Jonas Treub

Instead of using scale you can also animate the distance of the VRLayer. This way you can be sure it will be in front of the sibling layers. Here you go: https://framer.cloud/QewFx

Jonas Treub

I also added an if statement to check if the VRLayer isn't already animating to the state you wan't it to be in.

Bart Simons

Managed to build the following prototype after a lot of trial & error. https://framer.cloud/pDNQK/

Really pleased with the results. I'm still pretty new to Framer but it's the first time I'm able to build a real interactive VR prototype. Definitely going to experiment with the VRComponent a lot more.

Read the entire post on Facebook