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

What is Framer? Join the Community
Return to index

May 2014

May 01

Garen Checkley
Hey Framer Folks! I love the ability to hold shift and slow down the motion, makes it really easy to communicate exactly what's happening. However I'm getting an error: "Uncaught Error: Bezier: too many values". How many is too many? Is it because I'm using delays? THanks!
2
Propeller Katapulsky
i am fanscinated by framer! being a motiongraphicsdesigner, by now most of my javascript knolledge was limited to photoshop/aftereffects scripting. as i discovered framer recently by using the framerPS script to get my work out into a website i get really interested in the "web-side" of javascript so, i have my big new javascript book on my table, surf through selfthtml, framerjs,... and... am a little confused :) for example, i can read out all names of layers in photoshop but i have no clue how to do the same in js. with my views, what do i have to know about css/html to understand framer? is there a in depht manual of framer beside the good information on framerjs.com that i am missing? also i am wondering if there is a forum where i can ask questions and maybe help others with my photoshop scriptin experience? framer is really cool!
19

May 02

Craig Murray
Anyone know likelihood of Framer's springs easily mapping to FB's new Pop engine? I'm curious to know and could see that helping iOS prototyping workflows.
3

May 03

Ale Muñoz
Good Morning / Afternoon / Night (depending on your timezone :)! This is a quick message to let you know that Sketch will switch its scripting backend from JSTalk to CocoaScript in the upcoming version 3.0.2. As a result of this change, sketch-framer has stopped working in the latest 3.0.2 beta. This is a known issue, and I'm currently fixing the migration-related issues, but I just wanted to give you all a heads-up: if you are using sketch-framer with a Sketch beta, please refrain from updating to the latest version until I've fixed it :) If you've updated already, the old beta is in your Trashcan ;) I'll update this post with my progress. Sorry for breaking your toys, but this is for the best in the long run :)
3

May 04

Luka Marčec
Amazing tool!
18

May 05

Propeller Katapulsky
is there a way to adjust the smoothness of the mouse wheel when scrolling a scrollview? at the moment it is very jumpy.
1

May 06

Luka Marčec
[WINDOWS USERS] — Framer.jsx Koen told me yesterday to start a new post here about Framer.jsx problems that you came across while you were using it / trying to use it. Any feedback would be nice.
6

May 08

Thomas Aylott
I'd love to see a little more Disney style Illusion of Life in our software. http://www.theverge.com/2014/5/7/5690166/watch-this-the-12-tricks-of-disneys-trade Challenge accepted?
3
Propeller Katapulsky
dear Koen, is there a way of adding video to framer? i hoped that i can link an imageView to a videofile but this does not work. could you recommend a simple method of adding video to a view? this again would be awesome.
1

May 12

Dave Feldman
Just discovered Framer, and I'm intrigued! As a designer with some JS skills, my ideal prototyping tool is a hybrid of design and development workflows. A few questions: (1) I don't see source for the Framer app on Mac...is that available somewhere? I'd like to add a keyboard shortcut, and also to poke around with other layer-name-driven automation. (2) Suppose I want to add a non-Framer element like a text field inside of a view. How do I get the DOM node for a View? Or, is there a more appropriate method for adding a non-Framer node and treating it like a subview? (3) Similarly, is there a standard way to extend Framer, e.g. to create new View subclasses? Thanks!
5
Soudea Forbes
How do I determine what y value the view containing my scrollView needs so that I can scroll all the way to the bottom of the scrollView?
0

May 13

Cemre Güngör
Hey Frameres! We just released the common library of codes we use at Facebook on github: https://github.com/facebook/shortcuts-for-framer Include library.js before app.js and you'll get access to a bunch of handy functions that are explained in the readme.
9
Koen Bok
Help test Framer 3 We are finishing up Framer 3 and are looking for people that can help spot the last issues. Basically that means playing around with it and look for things that are broken or don't behave well (and file an issue). I'm pretty excited about this release. It's basically a complete rewrite with a ton of long requested features and issues fixed. The code is here, along with a big overview of what is new: https://github.com/koenbok/Framer/tree/framer3 https://github.com/koenbok/Framer/tree/framer3#framer-3-changes You can download the project templates for each build here: http://builds.framerjs.com A list of todo's and current issues can be found here: https://github.com/koenbok/Framer/tree/framer3#known-issues The Photoshop exporter is still in the works, but I'll post a Framer 3 version of that soon too.
6
Jorn van Dijk
A prototyping toolkit - Built for designers to turn static mockups in to prototypes with animation & interaction. This group is to share Framer prototypes and ask questions.
0
Koen Bok
Just finished Framer Generator (Photoshop and soon Sketch) for Framer 3. You can help test it below. Click download latest. http://framergenerator-update.s3-website-us-east-1.amazonaws.com/archive/
6
Koen Bok
For everyone asking: the Sketch generator is close, but they ran into a snag for which they have to update Sketch. They are working to get it to you asap :-)
2

May 14

Drew Stock
Fun with Framer (click anywhere on dialog to start animation)
1
Florian Pnn
Hey guys! I'm currently building a quick prototype of an app with Framer and PhoneGap (it works like a charm!). I'm encountering a problem when, accidentally, a tester opens the notification center or control center I get a red warning javascript error, how to get rid of the error into the mobile environment?
3
Aidan Simpson
hey guys! Quick question about the .html variable. I am trying to insert a div (so I can use the Google Maps API instead of a giant map image). When I use view.html = "<div id="map-canvas"></div>" I get an unexpected identifier syntax error... Any suggestions on how to do this?
1
Alexis Morin
Will the Framer 2 documentation stay available?
1
Propeller Katapulsky
i downloaded framer3 and have a question regarding the included example: why does the on click only work using my finger on the touchscreen and not when using my mouse?
5
Juan J. Ramirez
Is there any estimate on when the Sketch support is going to be available? I know you guys are working on it. Thanks for the hard work! :)
1
Koen Bok
Framer 3 is out. Congrats and thank you everyone. http://framerjs.com
21

May 15

Daniel Jimenez Nassar
Loving framer.js. A lot faster to learn than Quartz composer (I still need to try Origami though...). Currently playing with some parallax, opening and closing a map froma list view (Foursquare style) working great but now I want the list to be draggable to open the map. Anyone knows why setting a draggable object is not working for me. Kangoorooos in Australia will take you ; )
4
Arron J Hunt
Hey community, I'm looking into FramerJS' license. Is it licensed under MIT open source?
1
Dimitri Kanis
Just installed the latest release, anyone else having photoshop reexport every frame rather than just the changes? Windows & PSCC
0
Cemre Güngör
Hey everyone! We have a Framer3 version of "Shortcuts for Framer" up for grabs. Help us test before we publish it :)
1
Propeller Katapulsky
i created a new view and tried to make a textinput out of it which worked doing view.html = "<input type = Text>". how can i make it bigger? i tried using .style but this did not affect it. i want the font bigger and the height of the textfield. again, would anybody be so nice and push me into the right direction?
3

May 16

Juan J. Ramirez
Does anyone use Framer with jQuery or other framework simultaneously? What is your experience? Any interesting synergies?
2

May 17

Nathan Manousos
Is there a way to capture the current state of a layer as a state? I tried layer.states.add('original', layer.properties) but when I switch to that state, the layer becomes hidden.
6

May 18

Johannes Eckert
I am trying one of the examples with dynamic state properties… layer.states.add __one: ____x: -> layerA.maxX __two: ____x: -> layerB.maxX seems to accept functions as properties, but I could not get this work with animationOptions (I created a looping animation with next() and I would like to change the animationOptions with each cycle) layer.states.animationOptions = __curve: "spring" __curveOptions: ____tension: -> variableA ____friction: -> variableB ____velocity: -> variableC does not throw an error, but the console shows that the state from where it originates is NaN: Animation.start ____x: NaN -> 635
15

May 19

Propeller Katapulsky
me again with a question regarding the bounce function in the framer2 template: how could i achive that i only can click and bounce each element once and if i click it a second time to get an alert ("already had me bouncing!")? i suppose this is pretty basic javascript but at the moment my brain does not help me :)
1

May 20

Jayaprasad Mohanan
I was astonished by what I could do with Framer JS in 10 days. Thank you Framer JS, Koen Bok and everybody involved with FramerJS for helping me to visualise my mockups. Behance project link: https://www.behance.net/gallery/16920383/SPI-Cinemas-Mobile-App-Concept
0
Benjamin Den Boer
We just updated the Framer Examples site! The biggest new feature is a custom mobile browser. We now filter the examples that work really well on mobile browsers and only show these. On Mobile Safari, the address bar is hidden by default, and if you bookmark an example to your homepage, only the status bar will be visible. Let us know what you think! And if you find any bugs, please let us know in the comments. :)
5
Sarah Doody
Hi everyone!! Really excited to try and incorporate Framer into my UX design process. H-E-L-P!!!!! Really basic question here, but I have no JS experience so I'm following along with this video (http://vimeo.com/74712901) trying to do what he says to do :) At 18:20 he shows how to identify a specific object in Photoshop and set it to visible / invisible through this in JS: PSD["yourLayerGroupName"].visible = false The goal is that this will then hide a specific layer group in your PSD. BUT, when I do this I get this error, any idea WHY I'm getting this error?
19
Vinh Phuc Dinh
I was bored of slicing out elements from flattened app screenshots (png) just so I can animate them in Framer.js. So I built this little iOS library that generates a psd file whenever a screenshot is captured on an iPhone/iPad (power + home button). If you're building iOS apps, you might find this helpful too. https://github.com/vpdn/MMLayershots
2
Propeller Katapulsky
dear Koen, i spent the last two months with framer and i want to tell you how great framer is. i am having a break for a week and leave a desktop wallpaper here as my gift for you. one suggestion: it would be adorable, if framerPS would also export layers from photoshop that are invisible and simply set them invisible in app.js.
1
Sarah Doody
I'm having trouble understanding how to call sublayers from Photoshop. I looked at this documentation and I don't follow it: http://framerjs.com/docs.html#layers&hierarchy Here is a screenshot of what I am trying to do, but I'm getting an error: 'undefined' is not an object (evaluating 'PSD["hexYellow"].on'
3
Luis Ricardo La Torre
Is anyone getting this when trying to update Framer Generator?
1
Eric Sargent
Finally getting back to prototyping with FramerJS. I downloaded the new files today. I couldn't get many of the examples to run on chrome 35. Also when I ran the FramerPS.jsx there was no index.HTML created. Did I miss the memo, do I generate the index files by hand now?
2
Florian Pnn
Hi everyone, Is there a way to get the status of an animation? Like 'running' or 'inactive' ? I'm trying to stop an animation as soon as DragMove event is triggered but if the animation isn't running, the animation.stop(); give me a JS error. Any workaround? Also what you guys think about a #Framer channel on Freenode IRC for this kind of quick question and help?
3
Stephen Crowley
I am using Framer.js and Sketch to build prototypes. One issue I have is taking real user data and putting it in my prototypes, it's incredibly tedious when comparing outliers. I would like to use a method similar to Data Merge in InDesign but do it in Sketch. Does anyone have a method where they can import data from json or csv?
5

May 21

Dae Hyuk Yoon
Hi everyone, I was able to create prototypes from PSD files, but couldn't figure out how to setup a prototype that doesn't require PSD file, something like this, http://examples.framerjs.com/#Animation - Basics.framer Also is there a way to show syntax errors while editing codes in Textmate 2?
0
Pasquale D'Silva
We talked about framer a little bit on our new podcast:
6

May 22

Juan J. Ramirez
Noob question. I'm trying to simulate a drop-down menu but I can't define a way to toggle the visibility. If I remember well in jQuery you can do this by just invoking a toggle method but I don't seem to find anything similar in Framer. What I'm trying to do right now is just writing an if statement to handle this but it's not returning the expected result. This is what I have: var layerB = myLayers["Dropdown Menu Opened"]; var layerA = myLayers["Dropdown Menu"]; layerB.visible=false; layerA.on(Events.Click, function(event, layer) { if(layerB.visible==false) { return layerB.visible = true } else if (layer.visible==true) { return layerB.visible = false } }); Can anyone help me to figure out this?
6
Masato Miura
Sketch3 Beta with sketch framer plugin suppose to work now? I followed instruction here (https://github.com/bomberstudios/sketch-framer) but it produces blank file...just me?
2
Rob Jones
I'm working through this great Draggable tutorial (https://medium.com/building-potluck/2e405d50b600). It was written in Framer 2, and I'm trying to make it work in Framer 3. I have not been able to get the drag constrained to the Y axis with this: cell.on(Events.DragMove, function() { cell.y = 0 }); The syntax still looks correct for Framer 3 and the logic makes sense... ideas? Thanks
12
Abhishek Kumar
Need help troubleshooting this masking issue. I am trying to create a clipping mask (rounded corners) for an image to be replace during runtime when a button is clicked. I have tried a couple things. 1) In the attached image with nested folders, the Framer Generator does not even output a masked image for some reason. No way to try mp_aa_clip.clip = true; to see if that works. 2) When I remove the mp_aa_item folder and simply move the image inside mp_aa_clip folder, Framer Generator creates the right mask. Unfortunately, when I use "mp_aa_clip.image = '/images/next.jpg' to replace the image in runtime, the mask no longer works. what gives?
2
David Caputo
Really loving framer so far. Is there any documentation on filters? I see it mentioned in the animations but have not been able to locate any examples.
4
Tarun Chakravorty
is it possible to append html to a framer layer? I have a simple square layer and I'd like to insert html into that layer div using jquery / vanilla js.
10

May 23

Rob Jones
This might be more JS than Framer, but I was looking at the animation chaining example on the site and was curious about why the "return" labels were added: return hingeAnimation.on('end', function() { return notification.animate({ properties: { y: 768, rotationZ: 45 }, curve: 'cubic-bezier', time: 2 }); }); The example works fine without them... just curious
1

May 24

Davis Hammon
hello everyone. Framerjs is seeming to be just the ticket in prototyping out great mobile apps. I'm impressed by how mature its become and how quickly. A couple of suggestions. When viewing the prototype on a browser on the iPad or iPhone, is there a decent way to hide the navigation bar at the top, even if it requires jailbreaking? And, how close is the Sketch export coming?
5
Omer Frank
Hey, anyone knows when the sketch generator should come in?
2
Moaaz Sidat
Hey folks! Worked on my first prototype with Framer last night. Needless to say, it is an awesome tool for prototyping. Had a question with regards to masking. I generated a mask for my main group and wanted it to act as a "maskingFrame" (which appears in the layers.json and layers.json.js files generated in the "imported/project" folder), but it does not appear to be behaving the way I expected. It assigns the null value to the maskingFrame. What change in the PSD file would reflect that change in the .json files? Thanks!
2

May 26

Luka Marčec
How can I center one certain layer? So X and Y should be something like 50%X and 50%Y of the screen. Koen Bok, Josh Puckett, Jorn van Dijk, Benjamin Den Boer
8

May 27

Jayaprasad Mohanan
That awesome moment when you get featured on all popular blogs and get your video have more than 15,000 views on YouTube and counting. Thank you Behance, Koen Bok and Framer JS and all the people who are involved with Framer. It's just awesome :) Behance - https://www.behance.net/gallery/15682545/Healthbook-App-(iOS-8)-Concept Conceptsiphone - https://www.youtube.com/watch?v=q0HkWgmeIlc iDownloadBlog - http://www.idownloadblog.com/2014/05/26/healthbook-demo-video-ios-8/ Redmond Pie - http://www.redmondpie.com/test-drive-ios-8-healthbook-app-using-this-interactive-demo-on-your-iphone-right-now/ IClarified -http://www.iclarified.com/41035/new-interactive-concept-shows-the-rumored-ios-8-healthbook-app-in-action-video PhoneArena - http://www.phonearena.com/news/This-demo-of-Apples-expected-Healthbook-app-is-too-awesome-to-pass_id56503 Macitynet - http://www.macitynet.it/simulatore-healthbook-online-pagina-web-interattiva-virtualizza-iphone/
0
Florian Pnn
Hi everyone, I struggle to understand how the 3d rotation is working, especially that I don't get the same effect I would want to have. If you open the inspector you can see the effect I want to have but it seems to not be how the layer reacts. Any idea how to fix it? https://florianpnn-prototypes-framerjs.s3.amazonaws.com/mbrace-foldable-card/index.html
6
Isaac Sanchez
Hi guys, I'm trying to show/hide the sub navigational bar on scroll, similar to facebook's wall (iOS app), I couldn't find a resource similar to that action in code pen, this is what i've got so far (that doesn't send me an error code), any help would be great! http://codepen.io/isaacfifth/pen/fsBmb/
1
Luke Warda
Hey guys, I seem to be getting an error when using Cactus and Framer templates for cactus. Any suggestions?
4
Johannes Eckert
Do you have any idea why the spring curves are springing like crazy when changing the browser tab to the prototype — just all of them, not even when clicking them. Gives me nausea. Have seen it happen on devices some times, too.
4
Rob Jones
Removing the address bar on mobile Safari... I just discovered that: <meta name="viewport" content="minimal-ui"> removes the address bar on iOS7.1. Pretty handy for prototyping.
1
Johannes Eckert
I just found out some weird behavior that helps me a lot: I am using layer.on Events.Scroll, -> log.html = "y: "+y to read the scroll position. On mobile, this only updates when the scroll ended, just like I expected in mobile safari. but, when I add an event listener, layer.on Events.Click, -> console.log "clicked the grid, event needed for scroll update" I get instant updates of the scroll position. Can we use that to our advantage to have better scroll events on mobile?
3
Rob Jones
Just beginning to preview my prototypes on devices. Here's a few of my observations: Adobe Edge Inspect Works fine, but having to start up Edge Inspect on the browser *and* phone *and* start a server locally is kind of a pain. Unfortunately, Edge Inspect does not feature any kind of Live-reload functionality. Dropbox Someone in here mentioned using Dropbox, but (on iPhone) opening up a Framer index.html file inside Dropbox does not work, and I don't see any way open it from Safari on the phone. CodeKit 2 This works fine for previewing on devices.There is some wonkiness with Live-reload; it tries to lint the app.js file and chokes on syntax like "Layer". If I turn off linting, it does not seem to see changes in app.js and does not reload on changes. Cactus I downloaded Cactus; I can see how it's made for kicking out static pages from templates, but it's not totally clear where to put the framer files. Should they just go in "pages"? Also, what's there a way to get rid of the address bar and toolbar on Safari on the phone? BTW still lovin Framer! Other folks here at work are starting to get interested as well :)
10

May 28

William Hutter
How do you simply remove the blue background when you create a new Layer ?
5
William Hutter
Is it possible to create a transition from one colour to another (including css linear-gradients)?
1
Rob Jones
Where should we put feature requests for Framer?
2
Rob Jones
We need to start creating "plug-ins" like this for Framer. http://labs.ideo.com/2014/05/27/avocado/
2
Rob Jones
Feature request: When you use Generator, put the names of all the Layers in a commented section in app.js so that we don't have to keep going back to PS to get the names. Cemre Güngör's library.js added my second request.. a way to access layers directly by their names (as opposed to myLayer["layername"])
2
Hayden Schoen
I have been using Hammer.js for swipe and drag gestures with Framer 2 and it was working great. I can't seem to get it to work with Framer 3 though. Has anyone else had any luck integrating it into their workflow? Here is an example of me trying to use it in my app.js: A = Framer.Importer.load("imported/MyFileToLoad") //Make something drag Hammer(A.GroupMover._element, options).on("drag", function(event){ A.GroupToBeMoved.y = initialY + event.gesture.deltaY console.log("I am dragging") })
1

May 29

Samuel Pushpak
Hie! Trying to implement scroll. The PSD dimensions for an iPhone mockup are 640x1136. But the image with the feed content has dimensions as 640x2800. So photoshop actually clips the longer layer. So is it required for the psd file to have longer dimensions ?
3
William Hutter
Not sure if I seen it here, but how do I copy a layer (and also change a couple of parameters) ?
2
Kostantinos Frantzis
any updates for the sketch 3 plugin?
1
Tisho Georgiev
The latest update to my Framer templates includes a fix for the full-page bounce on Mobile Safari, which I'm sure has annoyed many of us. You can grab an updated version of the templates from here: https://github.com/tisho/framer-templates. In case you don't want to use the full template, but would still like a drop-in solution for your bouncing problems, I've broken out the script into its own separate repo: https://github.com/tisho/framer-prevent-bounce. You can see an example of it in use here: http://tisho.co/framer-prevent-bounce/example/index.html (load this on your iPhone). Thanks to Jay Robinson for finally making me come up with a solution to the bouncing issue.
9

May 30

Johannes Eckert
Is there a way to mute framer animations output in the console? My own logs are pushed away by the many animation details
5
Jay Walter Robinson
Koen Bok, almost all of the examples on CodePen have a black screen because http://framerjs.com/static/js/framer.js is 404. http://codepen.io/tag/framer/
3
Jan-Frederik Stieler
Hi, framer is probably mostly for app prototyping. But I'm looking for an proper workflow for prototyping websites with sketch. Have anybody from you make an websiteprototype with framer? There are a little different standard problems on websites to apps like normal links and slideshows or else. How did you solve these things with framer or do you thing it is the wrong tool?
1

May 31

Ale Muñoz
Hi there! I'm still looking for examples of scrolling content in PSD and Sketch format, so I can test if the upcoming version of sketch-framer works as expected : ) So, please share your PSD / Sketch files + exported projects, so I can play/fight with them. Thanks in advance!
11
Giles Perry
Just getting started with Framer JS. I've got some questions about how you control positioning of layers. I've worked out how to create a left aligned layer that is fixed when the rest of the page scrolls: myLayer = new Layer({x:0, y:0, width:40, height:40, image:"images/fixedimage.png"}) // Set the CSS position property to fixed so the layer does not scroll myLayer.style = { "position":"fixed", } How do you create centre and right aligned layers?
1

Monthly archives

2017

2016

2015

2014

2013