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

What is Framer? Join the Community
Return to index
Poamrong Rith
Posted Jul 07 - Read on Facebook

Trying to recreate this shooting effect that I saw on dribbble. Close, b not exactly there... suggestions?

http://share.framerjs.com/sljapgylqxqu/ thnxx

8 Comments

Anton Jarl

The drop shouldn't slow down before it hits the "ground" so start with removing the ease-in. And also, as you see in the still image above, the circle starts expanding as soon as the "drop" hits the ground, but you still have a lot of tail on the drop. So the circle is actually quite big before the last part of the tail disappears behinds it. Also the start of the circle animation could be a little bit faster, but thats not the main problem I'd say.

Stephen Crowley

Whipped this up really quick: I"ll screen cap the the Sketch File layout: http://share.framerjs.com/v6sl85cksp2e/

Stephen Crowley

Stephen Crowley

Created a mask layer so the "lazer" disappears. Add the card and stacked the circle with an icon layer inside. You'll see that I added the delays and included a cubic-bezier so the lazer gets the velocity increase towards the end of the animation.

Stephen Crowley

Sorry, timing was a bit off- here is an update: http://share.framerjs.com/b95bhdnx9246/

Anton Jarl

I couldn't help but playing around a little bit with yours, and I also borrow the lazer bezier-curve from Stephen Crowleys project above. It's far from 100% but slightly closer and since you wrote it you might recognize the code: http://share.framerjs.com/tbuqtehfil9b/

Anton Jarl

Added the dumbbell icon as well: http://share.framerjs.com/js9qqt2go1lw/

Poamrong Rith

so amazing. best community ever

Read the entire post on Facebook