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

What is Framer? Join the Community
Return to index
Koen Bok
Posted Jul 01 - Read on Facebook

New Beta Feature: Animating Shadows

Edit: Added three examples:
http://examples.framerjs.com/#shadow-elevate-states.framer
http://examples.framerjs.com/#shadow-dragging.framer
http://examples.framerjs.com/#shadow-mouse-lightsource.framer

Google Material relies a lot on animating shadows to elevate layers after a touch. I added the properties shadowX, shadowY, shadowBlur, shadowSpread and shadowColor to layers. You can animate these properties like you animate anything else.

To test it get the latest Framer from the builds page, or if you are in Framer Studio simply open a project and select File > Update Framer.

17 Comments

Koen Bok

Here is the example project from the video: http://cl.ly/2v3Y0f1r1K0L

Min-Sang Choi

I tried on this actually. :-) thanks koen!

Stephen Crowley

Very helpful! We are exiting a drag and drop feature. I'll post result.

Patrick Wong

wow, this is awesome! Thanks Koen & team!

Johannes Eckert

Two of the three examples work on android phones, you may want to add them back to the drop down menu

Noah Levin

Awesome!!! This will be super helpful ;-)

Koen Bok

Noah I got the elevation states from the Material previews. Should be handy for you ;-)

Noah Levin

Yessss! I'll start posting on our internal groups about it and make sure everyone is aware. This will be huge for us.

Tim Roth

I just recreated the effects by making a second shadow layer and independently animating it. This is much cooler, of course.

@ Koen

Tim Roth

Another question.. Can the animations from bounce.js somehow be used with framer? I am using framer studio..
They just look so cool.

Andreas Wahlström

Tim Roth it's pretty easy to recreate bounce.js animations from scratch using Framer. Here's an example: http://codepen.io/aw2/pen/fAFEr?editors=001. But if you want to use bounce, just add the export to the external style.css and use imageLayer.classList.add("animation-target") to call it

Tim Roth

Andreas Wahlström - Many thanks. I was actually trying to recreate the bounce.js animation called "splat". Any ideas :) ?

Andreas Wahlström

Tim Roth Try this: http://codepen.io/aw2/pen/wroaj?editors=001 Bounce.js has a nice "sway" animation that basically returns the animation to its original value. In framer, you need to use two separate animations for this and chain them together using on "end".

Tim Roth

Andreas Wahlström - > THANKS! I am playing around with the variables a bit an learned a lot from your example! I din´t know "midX / Y" and how to loop an animation as well.. great!

Koen Bok

cc / Jorn Movie: Loop an animation and maybe one about midX midY etc.

Brandon Souba

So good.

Read the entire post on Facebook