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

What is Framer? Join the Community
Return to index
Rafael Lüder
Posted Oct 08 - Read on Facebook

Today I spent a couple of hours playing with Framer and was happy with the results for the short amount of time I put in it. I do however have some questions related more to the concepts and uses of Framer:

1. How easy is it for developers to implement (iOS or Android) transitions and interactions created on Framer? Would they have to spend some time looking at the source code to understand what's going on or would it be mainly based on how it feels when they look at a prototype and trying to replicate it as close as possible on their native language?

2. Spring physics does look/feel really cool but I think it's being slightly over used (not everything behaves like a spring in the real world). Are there plans for extending the physics that can be applied to objects? For example, allowing objects to have "weight" or collide? Would this even be possible? A quick google search brings up some existing JavaScript physics engines:

http://jonobr1.github.io/Physics/
http://box2d-js.sourceforge.net/
http://wellcaffeinated.net/PhysicsJS/

3. The current workflow is based on using Photoshop or Sketch as starting points. I was wondering how easy it would be (or if it'd make sense at all) to be able to integrate something like http://goratchet.com/ in the workflow. In my simple prototype today I needed a basic table (headers, columns, striped rows, etc.) and Sketch is not easiest tool for creating it. Being able to add small self-contained snippets (html/css) can be easier and quicker depending on what's needed.

Awesome tool, thanks for all your hard work!

11 Comments

Koen Bok

1. Yep you can replicate transitions and re-use across all your projects and share it with others. Ed posted a nice simple transition example a few days ago.

2. This is very possible. I have some basic example working with Box2d and p2.js. The hard part is to wrap an api around it that is made for designers and not scientists. Much like I did with spring physics.

3. It shouldn't be hard to use both. You can insert any html into a layer with layer.html. You could also try to replicate some of these items in pure Framer and re-use them.

Koen Bok
Rafael Lüder

Awesome, thanks for sharing. I can imagine collision being quite useful, you could knock objects off the screen by dragging on another object. http://schteppe.github.io/p2.js/demos/collisions.html

Ee Venn Soh

Koen Bok I am trying to integrate a physics library with Framer.js for experimental purposes. I am wondering if you have any basic examples of Framer.js working with Box2d, p2.js that I can look at? I tried adding the library in the index.html manually but the generated Framer layers are sitting above everything and I am not sure how can I draw objects within the Framer canvas area instead of creating a new separate canvas area.

Koen Bok

Ee I did this about a year ago with p2.js. It's not so hard. I'll check if I still have it somewhere.

Ee Venn Soh

Koen Bok Thanks Koen! Another question, do you know if there is a way to query select an element that is not yet in the document tree? I know Framer has this handy layer.querySelector api. Is there a vanilla JS way to deal with this? I am looking at selecting elements that is generated by other JS libraries.

Ee Venn Soh

Figured this out (:

Melissa Cameron

Koen Bok Ee Venn Soh A little late, but I'm also wondering if one of you could provide a basic example with p2.js working! Running into similar issues :)

Ee Venn Soh

It is not too hard. I will reply on this once I am back home.

Ee Venn Soh

The trick lies with using Framer querySelector and p5.js .parent()

p5canvas = new Layer({
width: 360*4,
height: 640*4,
background: ‘transparent’
});

p5canvas.html = "<div id='p5canvas'></div>";
var sketch = p5canvas.querySelector('#p5canvas');

function setup() {
var cnv = createCanvas(360*4, 640*4);
cnv.parent(sketch);
}

Ee Venn Soh

This is pretty much how u will integrate with other libraries. Be in p5.js or any other libraries.

Read the entire post on Facebook