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

What is Framer? Join the Community
Return to index
Kyle Hinze
Posted Jul 23 - Read on Facebook

Question for the experts :)

I'm trying to recreate this 3D hover effect with a simple shape. To learn how it's done. http://framer.com/gallery/preview/#apple-tv-icon.framer

I've made it this far but I can't figure out why the layers move to the upper left corner when I hover. Also, the clipping on the shadow layer doesn't happen in my Framer preview so I need to try and figure out what's up with that next.

http://share.framerjs.com/g79uyfy7o561/

Thanks for any help with that. Also, I think I understand how the new x,y coordinates are calculated but don't completely understand how Utils.modulate works.

Thanks!

3 Comments

Jordan Robert Dobson

At some point automatic clipping was removed. Look at the clip property. Enable or disable.

Kyle Hinze

Okay cool thanks I'll try that out. Seems weird it would clip even though I don't have any children layers.

Do you have any idea why all my layers move up when I hover over the hover area? It must have something to do with the calculations that change their coordinates but I can't figure out what.

Rich Zarick

I think there might have been a couple things preventing you from getting to figure out Utils modulate, so I've broke this up into a simpler version of what it was, with commenting inline to help!
http://share.framerjs.com/cr73cfbr645q/

If that helps, check out a tweak that I made for the original example with 3d properties attached to Utils modulate functions.
http://share.framerjs.com/8w7e8p6oe46r/

Read the entire post on Facebook