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

What is Framer? Join the Community
Return to index
Aaron Carámbula
Posted Nov 12 - Read on Facebook

I've started making more lessons for Framer's myriad features. With any code, there's never one way to do things so I'm trying to show not only what a feature does but a few ways to implement it.

The two that I found most informative so far are convertPoint and cycle. Take a look and give me some feedback on how these help and might be improved:

- cycle: http://codepen.io/carambula/pen/izobl
( gist: https://gist.github.com/carambula/7382970 )

- convertPoint: http://codepen.io/carambula/pen/jqlyK
(gist: https://gist.github.com/carambula/7387438 )

Edit:
- style: http://codepen.io/carambula/pen/qnKJm
- view/navigation controller: http://codepen.io/carambula/pen/DlJvK

22 Comments

Aaron Carámbula

copy/paste these gists into the framer editor at:
http://www.framerjs.com/editor/

Koen Bok

Ill try and see if I can make the editor work with gist files directly again.

Aaron Carámbula

That'd be sweet. I'm also seeing text show up as black and have to hack it in the inspector. I just found your existing cycle demo, I should incorporate the .html value display!

Cemre Güngör

Codepen is really cool, I wonder if we could get them to include framer as one of their supported libraries

Koen Bok

That would be pretty great. I'll send them an email.

Cemre Güngör

it's actually possible if you manually enter it as "external library", such as in here: http://codepen.io/cemre/pen/mrhCn

Cemre Güngör

but you have to write a little css, and host it somewhere. would be sweet to be able to pick it from a dropdown.

Aaron Carámbula

Yeah that'll be the only way to get beginners to use it there.

Koen Bok

Yeah if we can get it in the drop down, and hide the HTML and CSS panes we'd be set.

Koen Bok

Yeah ok this works well. I only think the reloading could be faster now and then, and it should remember to keep the html/css hidden.

http://codepen.io/koenbok/pen/GhFid

Koen Bok

I like that you can do coffee script too.

Aaron Carámbula

Added a style one. still doing Gists though I'm happy to move to codepen if that's what we want to collectively do.

aside: when will github ship it's codepen killer? seems up their alley.

Aaron Carámbula

I made a starter codepen for framer use. mostly just brought back the default red view and the checkered background I personally have grown fond of. Fork away:
http://codepen.io/carambula/pen/haIlf

Aaron Carámbula

Updated this post with codepens in addition to gists.
one issue: codepen is a little flakey. Clicking the cycler demo glitches the screen out a bit. I also noticed one demo didn't run properly right away.

Koen Bok

Yeah I noticed this too. Let's see how far I quickly can get with something based on gist and codemirror.

Thomas Aylott

I know the jsFiddle guys. I've used it for Framer stuff before.

Aaron Carámbula

I added on for view/navigation controller, ios style. I've been meaning to do this for a while. You should be able to use this code to take any set of views and navigate to any of them from any of them, and back through the history. If you use it, please share back your prototype!

Craig Murray

Aaron Carámbula what do you mean by "view/nav controller"? Not sure I follow.

BTW - thanks for setting up this codepen.

Aaron Carámbula

Try out the demo, it's really meant to be reusalbe code for simulating ios style view navigation. pushing new views from the right, pushing left for back. It tracks your history and manages the view positions and order and disables while animating to prevent button mashing bugs
http://codepen.io/carambula/pen/DlJvK

Craig Murray

Ahh. I see now. Very cool. Thanks for this.

Aaron Carámbula

Oh yeah that was confusing, i did a bunch of utility demos and then just a design pattern demo.

Read the entire post on Facebook