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.
(Click the share icon)



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