If you have ever tried to do a card-flip animation, you probably saw a weird cutoff when the rotating layer "cut-through" the layer behind it. Much like you saw in old video games walking through a wall. It is a Safari only bug and pretty easy to work around by adding a transparent wrapping layer. Here is an example: http://cl.ly/2d1w3t0a083l/download/Rotation.framer%202.zip

Koen Bok

Posted Jul 08 - Read on Facebook

If you have ever tried to do a card-flip animation, you probably saw a weird cutoff when the rotating layer "cut-through" the layer behind it. Much like you saw in old video games walking through a wall.

It is a Safari only bug and pretty easy to work around by adding a transparent wrapping layer. Here is an example:

http://cl.ly/2d1w3t0a083l/download/Rotation.framer%202.zip

11 Comments

Koen Bok

Woops and it seems I just leaked an upcoming feature ;-)

Jens Nikolaus

\o/

Jordan Robert Dobson

Nice!

Wilson Miner

Much better than my previous solution of setting a high z-position to keep it from intersecting the background!

Koen Bok

Wilson: yup and the added benefit of being able to separately control the 3d perspective.

Josh Puckett

This is a nice 'Preview' of your solution ;)

Jakub Foglar

I just found a use for this today, thanks! I guess this behavior won’t be fixed since it’s Safari’s fault right? (I’m not running the prototype in Studio)

Koen Bok

It might get fixed, but I'm not sure they consider it a bug.

Baisampayan Saha

Koen Bok this example is not working anymore...and I could not find any work around for this!

Koen Bok

This is a lot easier now: http://share.framerjs.com/hldr390g8nqm/

Baisampayan Saha

Thank you... :)

Read the entire post on Facebook