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

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

This is my first Framer project, based on what I've learned from Tessa Thornton's CofeeScript for Framer.js book.

Would welcome feedback on the code. Things I know could be done smarter:
- Load and animate the five social media icons with an array
- Place the five social media icons relative to the bubble (superLayer)

Next step is to make the page draggable.

http://share.framerjs.com/i933zbzae0yq/
(Click the share icon)

Thanks!

4 Comments

Jessica Tiao

The animations is simple and awesome. Thanks for sharing. I checked out Tessa Thornton's book, really interested in buying this ebook to learn FramerJS!

Josh Davis

It's a great primer Jessica Tiao. Highly recommend it.

Benjamin Den Boer

Nice work Jesper Garde - your code looks very clean. Here's a few tips/nitpicks that may save you some time:

1. You can use layer.animate instead of creating new Animations and explicitly starting them. It's still possible use .reverse() in combination with layer.animate as well - if you store it within a variable.

2. I think many layers that you've used a separate image layers can also be included within your imported file, which can save you many lines. A nice trick is to position them off-canvas in Sketch, so they're imported with visibility set to 1, are directly available to select and re-position but won't get in the way of your design work.

3. Mini-trick that I really like is using one-line loops in CoffeeScript, for example, you could write: if is_open then bubbleUp() else bubbleDown()

Hope this helps a bit. :-)

Jesper Garde

Thanks Benjamin Den Boer! That helps a lot.

Read the entire post on Facebook