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

What is Framer? Join the Community
Return to index
Danny White
Posted Jul 17 - Read on Facebook

Is it possible to simply "chunk out" portions of your code into modules? Basically just cleaning up/minifying the main .framer file.

I'm seeing a lot of posts that are vaguely on this subject, but I can't wrap my head around how this works. Especially how objects & classes work in the Framer world.

Possibly a stupid question, but I think it would be useful to know, and avoid having to scroll constantly through the code for a prototype that's even semi-intricate.

Some posts from here that I've tried & failed to grasp:
https://www.facebook.com/groups/framerjs/permalink/709177452542662/
https://www.facebook.com/groups/framerjs/permalink/708775342582873/

CC some people who've been involved in these posts:
Chris Camargo, Jordan Robert Dobson, Pete Schaffner, Adria Jimenez, Benjamin Den Boer

Thanks a bunch

18 Comments

Jordan Robert Dobson

Sure. Have you explored the module file yet that framer gives you? There are examples there.

Danny White

Yep, given it a red hot go. The construction/syntax is what throws me. E.g. your example from another post, attached here:
http://jrdn.io/byQR/o

Jordan Robert Dobson

Basically you can create and store an object. A layer is an object... In your modules. You can store anything really. What parts would you like to store?

I think my video I'll release today will help as well.

Danny White

Oh sweet. I'm re-creating this example, and would like each 'page' to be in it's own module:
http://framerjs.com/examples/preview/#if-onboarding.framer

Jordan Robert Dobson

So that class is something I made in the main framer file and then moved out to a module to reuse on a few projects. You're not seeing the full thing though.

I'm basically taking what Layer already does and adding my own functionality on top of it.

Jordan Robert Dobson

So each page is a layer right?

Danny White

that's right, but they're all part of a pageComponent called "page"

Jordan Robert Dobson

So move each layer out to your module...

Jordan Robert Dobson

Instead of page1 = new Layer ...

Jordan Robert Dobson

exports.page1 = new Layer

From inside the module.

Jordan Robert Dobson

Start simple. Fail small. Let's get any layer to pass over. :)

Jordan Robert Dobson

Then read the comments in the framer provided module and add the code to your main app.coffee to bring it in.

Danny White

got it! Thanks! You're right, I was tackling way too much at once. One thing I noticed though is that layers work without the "exports." before layer = new Layer

Jordan Robert Dobson

I think you'd need to do exports to have an easy way to pass over the reference to your main coffee file.

Jordan Robert Dobson

One simple way to encapsulate a lot of logic is to also place it inside a function in your module file.

Let me know if you have more questions I'm glad to help.

Danny White

Right. This example is making a lot more sense now. Thanks again
http://framerjs.com/docs/#modules-interactions-example

Jordan Robert Dobson

Woo!

Jordan Robert Dobson

Read the entire post on Facebook