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

What is Framer? Join the Community
Return to index

August 2014

August 01

Lorenzo Fernix Ferrante
Made a litte Google Search app animation with Framer. All the animation is made with layers, I haven't imported any Sketch or Photoshop files. Here you can watch the video I made : http://quick.as/WAPrT5w1 Here you can download the file: https://www.dropbox.com/s/xvlw0z7ldqqlscm/google.zip Let me know what you think. Thanks!
0
Chad Lonberger
Is Framerjs suitable for "larger" prototypes? Ideally I want to prototype entire products (or portions of products) to use during customer interviews/usability studies. Any thoughts on this? Thanks in advance.
23
Felix Wang
Hey guys, Been using Framer for a bit now. It's a really awesome tool and actually forced me to be a better coder. Thanks Koen & Co! Is there a good way to mix in layers done in framer and layers imported from a sketch file? I'd like to change the background on something on touch and I wanted to have stuff I generated in sketch to sit on top of the new Layer.
1
Cemre Güngör
?????
0
Benjamin Den Boer
Hey guys, New example! People often request simple examples of common mobile interactions. I've just added a simple draggable swiping example. Some nifty little things in this example: - maxDragFrame - Prints distance dragged - Animates second layer based on distance dragged Download .framer for Framer Studio: http://cl.ly/WP2S View it in your browser: http://examples.framerjs.com/#draggable-swipe.framer Happy prototyping! :)
7
Luis Ricardo La Torre
There is a bunch of awesome tips by Cemre Güngör but everything got messed up when started using Framer Studio? Anyone.
13
Kyle Sollenberger
Added multiple view support & cleaned up some animations (still feel a bit fast, though). Does anyone have the correct curve values for material? https://github.com/iamkyle/framer-material-ui
3
Elliott Kember
This is an ApplicationStateMachine class I built for longer prototype workflows. If you're working in the browser, this will let you stay at a particular part of your flow when refreshing. Which helps.
1
Tyrale Bloomfield
Can you trigger an animation at the end of a state? For example after "stateB" runs I want to run an extra animation. But not following "stateA" or "stateC". Basically I want .on 'end', to work with states. Thanks.
5
Elliott Kember
Here's another recent project: https://gist.github.com/elliottkember/d714f2bfc8fde24c5406 - this lets you have different transitions between specific states.
0
Hilla Wahnishe Jacobs
Hi! I am trying to use Framer Studio to prototype a swipe between two layered pages. I placed each 'page' on 2 separate artboards but am unable to find the elements of the 2nd page when I click 'generate'. I can only see some elements of the 1st page (background for example is missing). Anyone knows how to import this correctly? I also tried to place each page on a separate sketch file and 'generate' each file - in that case, I can see all elements, the second page is practically behind the first page but when I try to set it to: Page2.x=640 (to enable the slide mechanism) I keep getting an error on that and any function that calls out Page2. Any help on this would be greatly appreciated!
0

August 02

Travis Rogers
I'm noticing that framer is attempting to load layers from my Sketch file that are in folders named with an asterisk at the end. Shouldn't adding an asterisk at the end of a folder name in Sketch flatten the contents of the folder? For example, I'm getting a list of about 20 errors in the console stating 'file:///Users/travisrogers/Dropbox/MGO/MGO_VxD/Mobile/iOS/2.0/iPhone/Prototypes/Media%20Details/Movie%20Media%20Details/Framer%202/movie-md-2.framer/imported/movie_media_details/images/Add_icon_2-C0D5F8E4-C0E3-4564-9E48-77A6DE36A075.png?nocache=1406933813336' Failed to load resource: The requested URL was not found on this server. -- The layer 'Add icon 2' is 2 folders deep inside of a folder called 'nav*'. Fortunately this doesn't seem to be affecting the performance of my build, but it is making it difficult to see my log calls in the console. Is there a better or new way of specifying which folders should be flattened in the communication between Sketch and Framer Studio? Thanks in advance!
0
Mark Johnston
Playing around with Framer Studio and importing from Sketch, something doesn't make sense to me. The structure that is built into my Sketch file of nested layers seems to be lost when it is in Studio with al of the layers accessible from the root. Wouldn't it be advantageous to keep the hierarchy? As in this simple Sketchapp hierarchy example: Layer1 - Layer1Child In Framer Studio I would access the layers as: Layer1Variable = filenameLayers.Layer1 Layer1ChildVariable = filenameLayers.Layer1.Layer1Child As opposed to: Layer1Variable = filenameLayers.Layer1 Layer1ChildVariable = filenameLayers.Layer1Child
7
Joey Cordes
Just switched over to Framer Studio, can't figure out how to toggle the device on/off when I'm viewing my prototype on web. Used to be spacebar. Any tips?
4
Hugo des Gayets
Quick question about license, can I install it on every computer devices I've got, like 3 ? Thanks
2
Ed Chao
Noticed Min-Sang Choi used the HammerJS library with Koen Bok's integration (http://qcnoodling.com/tapandhold.framer/). Any pointers on how to get this lib included specifically in a framerstudio project? I'd love to be able to use some of those sweet touch events. (ANSWER: include it manually in the index.html file as a script)
4
Mike Chung
Does anyone know why vanilla javascript does not work in framer studio ?
7
James Muirhead
I'm having issues with the isMobile() function. Just gives an error. Anybody had any luck implementing this function in Framer Studio?
3
Min-Sang Choi
I have strange bug on safari iOS8. which blocks all touches when I "added to homescreen" and open with full-screen view from homescreen. Launching from safari app has zero problem. but I need this. have any of you guys experienced this? any workarounds? (I'm using iOS8 beta 4, if this is against NDA of iOS Dev program, I'll delete right away ;) so let me know that too)
5

August 03

Benny Chew
Any ideas how to create a card flip animation in Framer? I’ve tried rotationY but this resulted in a rather (lame) non 3D look. I’m looking to create something like this: http://jpinghu.com/flipcardjs Thanks!
8
Benjamin Den Boer
We've just uploaded all of the Framer Event Talks on Vimeo! Watch Koen Bok, Colin Dunn, Tisho Georgiev and Noah Levin talk about the state of prototyping & interaction design tools. Read the blog post: http://framerjs.tumblr.com/post/93493763112/framer-meetup-2014-by-benjamin-nathan-on-july Watch on Vimeo: https://vimeo.com/channels/framer
5
Marc Krenn
Can't get CSS3 gradients to work and therefore I'm wondering if they're implemented yet? Thanks.
4
Marcus Gellermark
Is it just me or is it impossible to set rotationZ to a layer at the get go? rotationX and Y is working fine though. example: myLayer = new Layer x:0, y:0, width:40, height:40, rotationZ: 45
7

August 04

Benny Chew
Just noticed clipping (masking) with non-rectangle shapes (border radius) are not supported. Is this correct? Is there any way to get this to work?
2
Riccardo Zecchini
Trying to combine framer with a Mapbox map. In framer I successfully added a layer with the div I need, then, inside the index.html I load the scripts and draw the map. Everything is fine, now I’m trying to figuring out how to add interactions between framer layers and the map (e.g. I click on a framer-layer and the map changes its view / I click on the map and a framer layer changes its content...). Is there a way to access and control the framer layers outside app.coffee? Am I taking the wrong approach? Thank you!
3
Greg Jang
Since framer studio is out, does that mean the sketch 3 plugin won't be developed anymore? thanks
0
Min-Sang Choi
I need to animate a layer determined by other layer's scrollY. but I think there's delay on returning value when I scroll fast on mobile (desktop's fine). Is there a way that I can get scrollY without delay?
11
Eugene Morozov
Few notes about the Framer Studio editor. When typing in the value, it autosuggests the longer one, i.e. if I have variables "section" and "sectionNumber" it will auto-suggest sectionNumber, and when I press Enter, wanting to go to the next line, it will insert sectionNumber. :-( I'd prefer to specifically select suggestion rather than having it inserted by default (i.e. by not pre-selecting an option in the drop-down list). Another suggestion, would it be possible to auto-refresh the coffee source file when it's saved in the external text editor, i.e. TextMate? And, to go with that being able to hide the text editor in Framer Studio? Don't get me wrong, I love the product, it's great for idea sketching.
1
Marc Krenn
I'd like to share this fairly simple project with you guys - maybe some beginners may find it helpful. It's a tilt-effect similar to the one seen in Facebook Paper. Demo: https://dl.dropboxusercontent.com/u/7997357/framer/marc/PaperTilt.framer/index.html Download: https://dl.dropboxusercontent.com/u/7997357/framer/marc/zips/PaperTilt.zip
3
Benny Chew
I'm prototyping a tile based game (Bingo). Any ideas how to create a button event for let's say 25 tiles and being able to retrieve their ID (number from 0 to 24) on click. Not having to create separate 25 functions. I've tried a for loop, it worked, but I couldn't manage to retrieve the ID. I need this ID for an array I have. I couldn't find this in the examples, also searching was tricky to find. Thanks!
8
Harish J Simha
Koen Bok I have recently bought framer studio and I was just wondering why the autosuggest is not closing even after i hit esc or select a value. Is this a known bug ? Can you please help me ?
2
Ed Chao
new prototype example using touch/hold with HammerJS library (post includes link to interactive version). happy monday folks :) https://dribbble.com/shots/1669801-Signal-Interaction
7
Chad Lonberger
Am trying to use FramerJS Studio but having some issues with code completion out of the box. Anyone have any fixes? Wasn't able to find anything via search. Thanks in advance.
3

August 05

Andrea Ristori
I have a bit of a beginner question. I understand Framer was created as a prototyping tool... So what libraries do you guys use when moving to production? Do you just complement Framer with others at runtime or do you carry everything over to a different library? Don't you lose a lot of the features and work by switching libraries? Thanks!
0
John Anthony Evans
I cannot get the Generator to work for the life of me. I think there are some permissions issues somewhere because when I run the generator I get the following error: Failed to load resource: The requested URL was not found on this server. When I manually look for the file it's trying to open there is nothing actually there. The path looks something like /var/folders/00/1tc7r000h01000cxqpysvccm0079hz/T/336114CC-4096-4EA2-9149-978A01A00FB3-39869-0000288BA9F9A0B9/imported But there is nothing in it at all. Any thoughts on as to why? Framer Studio Version 1.0.181 (277) Sketch Version 3.0.4 (8054) (Downloaded from Sketch website)
2
Tyrale Bloomfield
What is the specific difference between "stop" and "end"?
2
Stephen Crowley
Has anyone integrated Hammer.JS w/ Library.JS? When combining the two Hammer events stop working. (https://github.com/facebook/shortcuts-for-framer)
3
Dennis Zhao
Hello! I've been playing around with Framer Studio recently to prototype an iOS app. I'm having some difficulty animating through multiple states but only using one transition. I want an intermediate state between the first and the last but for the transition between to be governed by one timing function. I can listen for the state change but by doing so transitioning to the next state becomes its own animation. Is there any way we can specify intermediate frames, like with CSS @keyframes?
10

August 06

Billy Roh
[Feature Request] For Framer Studio, it would be great if there could be indicators for mouse events in the preview! (Eg. The circle cursor indicator could pulse on mousedown, and pulse again on mouseup. Screencasting software does this usually.) This would make demos much simpler in that the visuals would indicate what the presenter did, as opposed to presenter narrating each action they take. ("I've now tapped on this card...and now I'm dragging...and now I let it go.")
2
Angel Ceballos
I'm new to Framer, and it seems I have this consistent error regardless of any examples I download off the FramerJS website. I'm using Safari, and keep getting this error. Thanks in advance for your help, and I attempted to debug this, but I've had no luck so far.
2
Ed Chao
I've always been curious why Framer studio defaults content to 100% but the phone is 50%? (As opposed to both being the same scale). Any thoughts?
0
Sabato Urciuoli
[EDITED] Hello. This is my fourth day on FramerJS and Javascript. I'm trying to understand better programming just for prototyping some interaction's ideas. Today i'm working on simple open/close interaction. Any suggestions for improve my code? Thanks
4
Sabato Urciuoli
[EDITED] Hello. This is my fourth day on FramerJS and Javascript. I'm trying to understand better programming just for prototyping some interaction's ideas. I workedg on simple open/close interaction. Any suggestions to improve my code? Thanks P.S I can't the possibility to upload on previous post the example. Delete I it?
0
Jacky Lee
Hello everyone! How do I prevent triggering the click event on a particular layer when it is sitting behind another layer? Currently I can trigger a click event on a button when it is actually sitting behind everything...
6
Florian Pnn
Anyone know why this is not working? I can see the 'songList' layer but can't access it in the code.
2
Jordan Robert Dobson
Where would I find best practice documentation on creating layers using HTML vs PSD/Sketch? For example I want to bring in some components I've already built in a style guide of common elements. Is there a way to add those to the document and then reference them when creating a new Layer?
3
Morgan Tucker
anyone have any ideas on how to tie into the accelerometer using CoffeeScript/Framer Studio? trying to pull something like this off: https:[email protected][email protected]6d6
17
Rafael Puyana
Framer is not letting me generate from Sketch (3.0.4). It reads "Sketch Beta Not Running" even though I have a Sketch licence. Any ideas about what to do here? Thanks.
3
Jordan Mauriello
Hey everyone, hope you are having a good Wednesday. I would just like to invite you to submit any cool original, creative projects to howww.com for an Honorable Mention or Case Study of the Week award. Our team would love to showcase your work!
3

August 07

Noah Levin
With the latest build I'm running into something weird when trying to set style.pointerEvents = "none". It seems if I have any event on that layer, it turns it back to "auto" for me, which is not what I want. For example: Page.style.pointerEvents = "none" Page.draggable.enabled = true # also happens if I write a click event attached to Page This resets Page to have pointer events set to auto... is there another way you recommend blocking clicks for invisible elements while keeping animations working nicely? I find using visible instead of pointer events gives me less control over opacity animations, and these were working fine for me earlier? EDIT: Looks like if I set pointer events to none after these events it works, but not sure why order should matter here.
7
Ray Yip
Hi, i just getting started with FramerJS today. Anyone know how to create a loop animation? i want to make a breathing white circle scales between 0.2 and 0.8 and stop after 5 secends, it's a loading effect. Thanks for help!!!
4
Noah Levin
With Utils.mapRange, is there a way to make sure it doesn't overshoot the bounds? e.g. Utils.mapRange(dragY, 0, 200, 0, 1), when it gets past 200 the return value keeps going past 1... I guess I could wrap it in a min / max function, but surprised mapRange behaves in this way?
7
Elliott Kember
Tired of traversing Framer.Importer objects? Here's a little layer browser plugin I built for viewing layers imported from a sketch file / PSD.
11
Marc Krenn
Can someone help me out on this one? Download: https://dl.dropboxusercontent.com/u/7997357/framer/marc/zips/Universe.zip It's about creating an array of layers - you'll find more info within the code. Yes, I still haven't figured it out, Tisho :( I feel so ashamed and stupid but almost all descriptions & documentations of array-functions and comprehensions seem to be completely irrelevant to what I'm trying to achieve. Thanks!
3
Poohdish Rattanavijai
How do you guys go about implementing the feature as demo into native app? I'm testing Framer JS out right now and try to gauge if the team liking it or not. One thing that get brought up is Origami for its ability to use the configuration directly into the app via Rebound/Pop. Is this something possible or in the scope of Framer? Tingling to get just right animation is time consuming, and giving designer ability to fine tune it to their heart content seems like a great idea to all parties.
0
Billy Roh
Feature Request: A More Complete Autocomplete I've noticed that I do this a lot more than I'd like: look up which parameters certain functions take and what properties an object has. I initially thought that an Xcode-style autocomplete could be great for this situation, where when you autocomplete a function, it gives you the list of parameters it takes with labels for each one. (And when you press escape after an object, it gives you a list of its properties and the functions you can call on it.) But given that most parameters are optional in Framer, I'm not sure how this would work. Maybe a shortcut to launch snippets, and a more exhaustive list of snippets could solve the problem? Or attach descriptions to autocomplete, with a list of parameters and properties?
2
Gabriele Cirulli
Hey everyone! Just a quick question: I remember reading that Framer Generator allows you to auto-generate scrolling groups by setting the group name in Sketch, but I can't find information about that feature nor instructions on how to use it. Is it available in Framer Generator or only in Framer Studio?
2
Harish J Simha
Why is Javascript not working in the editor for the latest 1.5 release ?
1

August 08

Roman Kornikow
Hi guys, I want to make a prototype of the entire application but on any screen hidden buttons continue to work. How to make inactive (untouchable) hidden or below the other layers? Example:
2
Riccardo Zecchini
mmm super basic question here: how can I click on a element and have a layer to scroll n pixels? I tried setting the layer.scrollY = value but it doesn't work (probably I can only read values with that?). Obviously working with the layer.y position doesn't work because it totally changes the layer position. Thanks a lot!
5
Flip Sos
I found a little, very annoying problem. As soon as you have scrollable layer that contains objects, these objects are not draggable ob the phone anymore. I think the problem lays in the way iOS handles touch input. The touch is "used" for scrolling the main layer and not the actual objects within it. Here's an example with main.scrollVertical = true https://dl.dropboxusercontent.com/u/3142787/draggableBug.framer/index.html An here without https://dl.dropboxusercontent.com/u/3142787/noBug.framer/index.html They both (of course) work fine on desktop but not on mobile. Any workaround?
4
Farhad Ghayour
I've been using Framer for the past day and I am absolutely lovin' this product. What's the best way of building out larger mockups? E.g. multiple files that can be referenced/imported, etc. Looking forward to learning and contributing to this awesome product :)
0
Koen Bok
Often you want to start a little web server to preview your project on mobile or somewhere else on the network. I tried to simplify that and I need some testers. This file is called "server.command". You can just copy it to any Framer project and double-click it. It will start a small web server and open your browser for you. If this works well, I'll add it to the default project template. [EDIT] There are issues with the way osx saves files. We're figuring out how to solve it.
16

August 09

Gwen Brinsmead
Is there any way to rotate the device in Framer Studio? For example, I'd like to use a iPad mini in landscape instead of portrait.
9
Lorenzo Fernix Ferrante
Hi, how can I refresh the page by clicking a layer? I've tried : myLayer.on Events.Click, -> location.reload() But this didn't work! How can I do it? Thanks in advance
2
Gabriele Cirulli
Loving framer studio! Quick question: is it possible (or is it gonna be possible in the future; if so when?) to use JavaScript instead of CoffeScript in Framer Studio?
2
Mike Feldstein
What is everyone's workflow for running prototypes on their devices? I'm working on a tool that lets you easily run prototypes on your phone, live-update when you change the code and install prototypes to the home screen to work offline, but if there's already a better existing solution I'd love know about it. Let me know how you guys do it currently, and if you want to beta test please let me know. I don't think I can distribute it widely since it's hard to distribute iOS apps but hopefully I can get it to some of you.
8

August 10

Moaaz Sidat
So wanting to try out the studio but brushing up on my CoffeesScript skills before I commit to studio's native editor, I started playing around with CoffeeScript on Framer. Running into two problems: a) An external app.coffee file won't compile using the core compiler (http://coffeescript.org/extras/coffee-script.js) added as a script tag in the html and forces me to write all my CS inline. b) For external app.coffee files, running 'coffee -c app.coffee' works pretty nicely, but being a prototyping tool, I would appreciate not having to run that every time. 'coffee -w app.coffee' would have solved the problem but returns "ReferenceError: Layer is not defined". (where Layer is the native Framer Layer object) A solution to any of these (preferably (b)) would be highly appreciated. Also, please point out if I'm doing something wrong in my setup (I am a CoffeeScript newbie). Thanks!
1
Johannes Eckert
so many awesome people posted so much good stuff here of visually inspiring applications of Framer code. I wanted to collect them all, and examples.framerjs.com cannot just hold them all, so I started by own personal pinterest board. I don't know if that feels right because of attribution and such (I assumed that by posting it to this public facebook group it can be collected somewhere else, too). What do you think? I was trying to find a way of visually capturing small pieces of code and be able to browse through them. Is there a better way? Is it worth it?
4
Ed Nepomuceno
Is there a way to attach html content to a state in the states machine?
7

August 11

Édouard Urcades
Hi everyone, super quick Q, figure this would be the quickest place to ask: How do I loop imported .gifs & videos?
8
Thomas Aylott
Who wants an After Effects to Framer generator? I can help. I helped Koen with the Photoshop to Framer generator. The ExtendScript code that powers some of that lives in my node-photoshop project. Now I'm adding After Effects support. If you want to build an After Effects generator for Framer, I can help. https://github.com/subtlegradient/node-photoshop#jsonify-manythings https://github.com/subtleGradient/node-photoshop/tree/master/lib/ExtendScript
15

August 12

Wilson Miner
Playing with draggable.calculateVelocity() to rotate cards based on how fast you drag them around. Using Utils.modulate (https://github.com/koenbok/Framer/blob/master/framer/Utils.coffee#L255) to map the x/y velocity to rotation values while limiting them to a maximum rotation so they don't flip around when the velocity spikes. Pretty impressed at how responsive it is in a web view on an iPad!
21
Skitz Stewart
Greeting all, I am a designer with web experience but new to actually coding both Coffeescript and Javascript. Any advice and good resources to get me started? I've browsed a ton of stuff but while some introduce elements, nothing really talks about how to bring it together.
4
Koen Bok
Just pushed a new version of Framer Studio with fixes for everything that slipped through the 1.5 release. We also reset the trial so you can use it for another 14 days if you ran out.
5
Chris Lee
Anyone else experiencing Framer Studio folders not copying cleanly in Finder? It only partially copies the files over. I don't see this behavior for any other kind of file/folder. :/
0

August 13

Johannes Eckert
if I just want to quickly test an assumption or simply see where a view is positioned while writing code, in the browser I entered layer.x into the console. in Studio, the console does not know about these objects. what's the easiest way to debug this way?
6
Jorn van Dijk
A bunch of you have asked how to create GIFs. Here's a short post explaining how to make them:
9
Benjamin Den Boer
New post on the Framer Blog: Prototyping with Video. We've recreated an example from Android to demonstrate how to include videos in your prototype. http://framerjs.tumblr.com/post/94631883997/prototyping-with-video See the example live: http://examples.framerjs.com/#load-and-display.framer
0
Dae Hyuk Yoon
I want to place few layers outside the masked main view and slide them in on click event, but anything outside this view are cropped and gone. Any idea?
5
Albin Ekblom
Is this possible to recreate using Framer? http://www.peperzaken.nl/wp-content/uploads/2014/07/Material-design-calendar-peperzaken-gif.gif
5
Noam Elbaz
I want an element to rotate relative to its drag distance from origin. (the farther the drag, the larger the rotation). How would I begin thinking of this issue?
5
Alex Hazel
There was no subreddit for Framerjs on reddit so I went ahead and made one! Please subscribe to the subreddit! Now we can save articles, search for content, use a better commenting system, and raise more awareness for framer!
1
Mike Feldstein
Differentiating between a click and ending a drag: It looks like Events.Click is just a "mouseup" event. This triggers a click even when i just drag a layer around and stop. Is there a way to not trigger the Events.Click event after a drag?
6
Alex Hazel
Can someone help a super n00b? So far I was able to dynamically generate 5 rows with this code: rows = 5 accHeight = 42 accWidth = 320 accMargin = 4 [0...rows].map (a) -> accordions = new Layer x:0 y:a * (accHeight + accMargin) height:accHeight width:accWidth But for each row, I want it to display a unique name from an array on each line. For example: 1. Text 2. More Text 3. Another new one 4. So on and so forth. Am I on the right track so far? And what would be the proper way to cycle through the array and apply the names to each row? Thanks!!
12
Édouard Urcades
Is there a simple way to center literally everything in the browser preview? I'm wanting to mask & center this guy right here http://publicservices.co/Framer/Bee.framer/index.html
3
Johannes Eckert
I was thinking of this: — it looks like Chrome supports alpha video (http://simpl.info/videoalpha/) — for some complex animations, you may want to prepare sth. as a video (e.g. an icon animating when pulling down the page) — create a transparent video of the animation in AE — use as the new VideoLayer and set currentTime of the video to a value (using Utils.Modulate on the drag) — have the video scrub forward/backward depending on the drag motion however, it looks like currentTime cannot be set so often, in fact in my simple example it does not work when I set it during DragMove. You can click on the video to set the video to the time defined by the DragMove, but the DragMove itself does not seem to be able to change the video position. why is that?
17

August 14

Sukwan Lee
When I press ESC, I get a blueprint-like overlay of all the imported objects. Is there a way to disable this? Thanks!
1
Mike Feldstein
Does anyone know of any good references for FramerJS performance tips? Any big things to not do that will kill performance?
6
Noam Elbaz
what does ._prefer2d = true do ? I googled it. but I only found mention of it on Koen's github. (I'm looking at the examples page - Material Response
2
Ed Chao
Anyone heading out to the SF Dribbble meetup at dropbox? Would love to meet some of you guys if you do.
5
Oscar Alonso
Hi! Does anyone know how to export a prototype with the device frame, as in the present view in Framer Studio?
2
Dae Hyuk Yoon
how do I put delay on a code such as "layer.visible = false"? I want this this line to execute after fading out animation, but it ignores the fading animation even if I place it at the end.
3
Jon Gold
Any interest in a meetup?
13
Koen Bok
We just shipped Framer Studio 1.5! A new native editor, fully Yosemite ready, updated look and much more. Enjoy!
30

August 15

Alex Hazel
What is the keyword "scrollFrame" used for? What is a good example?
0
Dae Hyuk Yoon
How do I set CSS properties of text in Framer? I could only find examples of fontSize, textAlign, lineHeight in the examples section.
3
Alex Hazel
Your Card Feed example on your framer.js website is broken and not displaying anything in both Chrome and Safari on Mac OS Yosemite Public Beta
1
Ed Chao
Weekend framer using Koen Bok's ScrollView (https://dl.dropboxusercontent.com/u/38521264/FramerProjects/ScrollViewBest.framer%203.zip). "Tweeting from the bottom." Should start hashtagging this stuff #weekendframer. https://dribbble.com/shots/1678935-Tweet-from-the-bottom
6
Jorn van Dijk
Prototyping with Framer, a workshop from Jay Stakelon. This is great material if you want to get started! http://framerjs.tumblr.com/post/94808091517/prototyping-with-framer-jay-stakelon-workshop
8
Chad Lonberger
Can anyone help me understand maxDragFrame? Trying to build some basic vertical/horizontal scrollable areas (running on a mobile device) and am unclear on how to constrain the scrolling so layers don't scroll off the page in either direction. Ex: A vertical news feed that stops scrolling when you reach the bottom or when you scroll back up to the original position. Thanks in advance.
6

August 16

Ed Chao
We're using framer at Guidebook to create short onboarding snippets. Here is an early prototype. https://dribbble.com/shots/1686844-Onboarding-Snippet?list=following&offset=0
1
Samuel Pushpak
In Framer Studio, a white border appears on the top and the right edges of Nexus 5 at 25% zoom. Does this happens with everyone or its just on my screen ?
3
Jens Nikolaus
A work in progress. I am using framer to learn about so many things: Animation, timing, CoffeeScript (My code is horribly repetitive at the moment, but I can make it work). In this prototype I just played with transitions for an application we are hacking right now. This I will translate into the actual design. Will keep you posted if there is interest. :)
0

August 17

James Caruso
I'm experimenting with with dragging and overlapping. Does anyone have any examples of animating a Layer when another layer is dragged on top of it? Sort of like the Draggable example, only instead of the dropTarget changing at the end of drag, it changes if it and the bobble intersect or overlap.
4
Koen Bok
We just sipped Framer Studio 1.5.10 with better autocomplete and more small improvements.
7
Mike Feldstein
Anyone in San Francisco willing to beta test my new Framer iOS app? Would love to get more eyes on it and nail these last few problems before it hits the app store.
21

August 18

Jorn van Dijk
A new post/example with work from Ayana Campbell.
1
Garrett Murray
Anyone ever have an issue where the importer in Framer Studio seems to cache its results? I accidentally imported an SVG into Sketch and it had a wonky layer name containing a %. When I tried to import my Sketch document back into Framer Studio, the import was invalid and it only captured a few images until it hit that layer name. So I delete the layer with the offending name, but now Framer Studio can't import the Sketch document... it just keeps importing the broken stuff again, even though the file is different. It's like I somehow tricked Framer Studio into using a cached version of the Sketch file. Quit FS, quit Sketch, etc, no luck.
1
Joshua Dern
Hey... Does anyone know how to grab the coordinates of the touch event? I'm trying to use clientX and clientY but they seem to be behaving oddly - the coordinate i get back is way off from the actual event and I want to calculate the distance of a swipe. Is there a better way to get this? Otherwise I'm thinking I'll just use Hammer JS to get a swipe.
11
Mike Feldstein
Should we be batching layer changes into a requestAnimationFrame callback? I noticed this comment in LayerDraggable.coffee: https://github.com/koenbok/Framer/blob/master/framer/LayerDraggable.coffee#L118 If we're doing our own dragging should we be doing the same thing?
1

August 19

Hugo van Heuven
Hey guys, I'm trying to animate in a titlebar after scrolling down a bit. The animation stutters because of the if else statement that checks the scroll position everything time. Is there a better way to do this? scrollView = new Layer width:320, height:568, y:0 content = new Layer width:320, height:1140, y:0, image: "http://goo.gl/gpEHNR" superLayer: scrollView titlebar = new Layer width:320, height:40, y:-40, backgroundColor:"blue" scrollView.scroll = true scrollView.on Events.Scroll, -> if scrollView.scrollY > 100 titlebar.animate properties:{y:0} curve:"bezier-curve" curveOptions: "ease-in-out" time:.2 else if scrollView.scrollY < 100 titlebar.animate properties:{y:-40} curve:"bezier-curve" curveOptions: "ease-in-out" time:.2
9
Alex Hazel
FYI --
1
Samuel Barbosa
Hello Everyone, I wanted to fire a changing of state (like layer.states.next() ) when a state has finished to animate his properties. I have search on docs and played few hours but i'm still stuck. I wanted something like: layers["Background"].on Events.Click, -> layers["Icon Bar"].states.next() # layers["Icon Bar"].states finish animation then fire layers["Foo Bar"].states.next() Has anyone an idea on this ?
2
Godrich Wild Man
Hi guys! I was wondering how you guys do to test your prototypes on real devices? I'm trying to use Framer to present some cool animations of our new app for a client, before give it to our engineers to build the app. As I haven't an Apple development account yet, I'm assuming I'm unable to install the prototype locally in the Homescreen of my iPad, am I right? What I'm doing is placing the project's folder on Dropbox and open the link on Safari and then install it on my Homescreen, but the initial animations are taking an eternity to start, since they depends of internet connection (even if I use setTimeOut function, it doesn't work properly). Am I missing something? I appreciate if you guys could share your workflows with me. Thanks!
7
John Framer
Hey guys, How do I constrain movement along an angled line? I want to have a slider in 30 degrees angle. Thanks
1
Elliott Kember
Happy birthday Koen! 🎂
0
John Anthony Evans
Anyone know if it's possible to get a callback when a property of a layer is changed? Something like aLayer.on Events.x A basic example would be super helpful
5
Jonathon Toon
Is there a function that can be called or an accessible object that contains information about the device you are building your project for? For example, I want the height of my parent layer to scale based on whether it is being viewed on an iPhone5 or an iPhone4.
2
Jordan Robert Dobson
Is there a way to tie animation options to a state? I often want something to toggle between two states but with the in & out states having different animation speeds / distances / springs / etc...
8

August 20

Jonathon Toon
Is it possible to chain event functions to multiple layers with a single instance instead of writing the same function multiple times? Eg: (layer1, layer2, layer2).on Events.TouchStart, ->...
2
Chad Lonberger
How might one prototype something with nested views/states in FramerJS, such as a Tab-bar controller? Can nested layers be controlled by a layer's state? The following expectedly fails... tabBarMenu.states.add option1: {option1ContentArea.opacity: 1.0} option2: {option2ContentArea.opacity: 1.0} option3: {option3ContentArea.opacity: 1.0} Or perhaps a subLayer's state? tabBarMenu.states.add option1: {option1ContentArea.states.switch("show")} option2: {option2ContentArea.states.switch("show")} option3: {option3ContentArea.states.switch("show")} Or can a "View" be defined that governs multiple layers states? For example, how AngularJS's UI-Router library flexibly nests states? ...excluded opacity:0 and switch("hide") type statements for brevity. Thanks in advance!
6
Wray Bowling
Trying to use states to manage the visibility of sublayers. Is that possible?
1
Svet Denkov
Hey folks! Just getting my feet wet with Framer.js. Awesome tool! Aside from this resource (http://framerjs.com/docs.html#events), is there a page which captures the complete "API"? Thanks in advance!
7
Adam Deher
Hey, i'm wondering why framer studio is trying to connect to realclearpolitics.com on startup?
2
Samuel Pushpak
Hello! Is there a way to achieve this kind of line animation ?
4
Elliott Kember
Happy birthday Jorn!!!
3
Alex Hazel
Sharing is caring! This might help people in their prototyping process. It's like Twitter's Bootstrap but focued on quickly setting up a multi-device web app development enivronment --
1
Johannes Eckert
idea for Framer.js: when changing superLayers, I'd wish there would be a way to keep the object's absolute visual position (layer.screenFrame?) the same. I tried to use convertPoint but it wasn't apparent to me how to use that. Could there be a method like changeSuperLayer(destinationLayer, keepPosition) use case: when dragging a layer with an object, after some threshold I want to not move the object anymore (but still drag the frame), so I put the object outside the layer I'm dragging, but I need to re-position it to the same place as before, creating some furious math to make this happen. or is there just a clever trick I'm not seeing?
13
Jordan Robert Dobson
I'm a Mac user working at Microsoft with opportunities to bring Framer JS into the office design process... but I have a few questions / issues. I'm working with a few designers there but have run into the following uncertainties... 1) What is the level of support for Windows Phone? Your site states you support it but I'm having a few layout issues (I believe the transform property is the main issue). Also, is there a webkit browser you support for windows? 2) Is there any sense of a timeline for the generator on Windows? I see that being a key thing from helping designers move from a PSD easily into framer and understanding how the layers work.
11
Elliott Kember
I just discovered that if a layer is clipped by its parent layer in Sketch, it imports with a blank image. Is that expected?
2
Lincoln Doyle
My team has expressed alot of interest and wants to use Framer as well. But since we're a windows shop... I'm still working with // FramerPS version 1.5 (c) on Windows, and I was wondering if someone could point me towards a copy of the old docs or a new .JSX script to match the current ver. ? Thanks
6
John Anthony Evans
Hi. I wrote about this a few weeks ago but nothing seems to fix the issue on the machine I use for work. Basically the Import from Sketch command is broken. Here is the console output. The issue seems to be that coscript has signing issues? Either Way it works on another machine with the same setup, as well as a colleague's machine. I've tried nuking everything and starting again with no luck. Running 1.5.12 (376) of Framer Studio and 3.0.4 (8054) of Sketch. FWIW the framer sketch plugin works when run from Sketch, but it's rather frustrating to manually copy everything for each small change. Any hints on something to do?
8

August 21

James Caruso
Is anyone else having issues with SVG or PNG text exported from Sketch and used in Framer? The text seems to be cut-off roughly 25-30px on both the height and width, creating a bounding-box effect. It's pretty strange.
0
Rohan Dang
I'm trying to build a simple list of items that scrolls within a container (vertically), and each item can be swiped left or right. The problem is, it works fine in the preview within studio, but on mobile Safari the vertical scroll on the parent container doesn't allow me to swipe the individual items within it left or right (I've set draggable.speedY=0 on the items and the container has scrollVertical=true). Anybody else having trouble with this? :/
6
Benjamin Den Boer
Hey guys, We're working on improving the Learn page of Framer, and we'd love to hear your thoughts and ideas about how we could improve it. http://framerjs.com/learn.html If you've been recently introduced to Framer: how helpful was the current Learn page to you? What content did you miss? What did you like about it? Feel free to share any new ideas you may have too, we'd really appreciate it!
23
Thomas Werres
Hi, just a question from an absolutely beginner. When I start scrolling a layer I would like to execute something. Trying this code to run doesnt work: PSD["content"].on Events.Scroll, -> PSD["activity"].visible = false The console shows the error "Uncaught SyntaxError: Unexpected identifier" Thanks a lot in advance!
2
Noah Tsutsui
I'm working with imported 640x1136 imported files. I get that I can change the Content setting to 50%, but new layers with .center() actually center respective to 100%. How can I fix this?
1
Thijs De Mooij
This prototype works when the preview reloads after a code change, but breaks when pressing the reload button. After some tests it looks like it has something todo with a videoLayer in a mask. All other prototypes work fine... Here is a screencast, or try the prototype itself: https://www.dropbox.com/s/bolehx1u1tqcjvb/Reload.zip
6
Daesung Kim
I was trying the example in the picture with Framer Studio. As you can see, the html text in the Studio is positioned at far left, although I expected it to be in center. The code in the Studio is identical to the one in example site. Why does this happen?
7
Comést Savatino
The thing that trips me up most when using FramerJs, is knowing when to use =, dot notation, bracket notation, or just indentation. Is there a general rule of thumb?
0
John Anthony Evans
Out of interest where should one comment about things that need improving? For example the text editor selection doesn't work as it should, cmd + left/right arrows don't respect . syntax so the selection just jumps from the start to the end of 'words' e.g. this touch.states.animationOptions is a pain to navigate with a keyboard. Anyway the main point was where should things like this be put, this group or somewhere else like Git/Issues?
2

August 22

Koen Bok
Last call. If you recently ran into importing issues with Sketch and Framer we'd love to hear about them. We're going to sit down with the Sketch team tomorrow to try and fix all of them. If you know one, uploading a Sketch file with a small description of expected results would help us out a lot. Ideally before/during tomorrow. The main ones we know about are around masks, extra padding and cutoff images. Our full list is here: https://github.com/bomberstudios/sketch-framer/issues Even if yours is known we can always use more examples to test on so send your .sketch anyway.
5
Edward Sanchez
How can I continuously track the position of an animated layer? I can get the X Position as a variable when I have an event like DragMove, but once I release I no longer get it. Would I have to do something like setInterval to poll the position every few milliseconds?
3
Alex Hazel
Has anyone come across this before? Incredibly useful resource for CSS animations!!
0

August 23

Ed Chao
a tiny pull to refresh for #fridayframer
4
Kyle O'Reilly
Hey there! New to framer, and my favorite command so far is "visible = true/false", as I'm generally just importing my design elements from Sketch, then showing/hiding them with various Click events. I haven't yet figured out how to toggle a show, however. For example, clicking the same expand/collapse button should show or hide the elements below it. Once I get an element to show, I'm not sure how to hide it again (I've tried using "if element.is(":visible")", but that doesn't work). I know framer.js is much more powerful than this though, so I'm open to other ways of skinning the same cat. Thanks!
5
Godrich Wild Man
Hi, guys! I have more two questions :-) How do I prevent a draggable object to move in other directions? I copied the example of the Potluck splash screen (http://examples.framerjs.com/#potluck-onboarding.framer) and, while it works ok on my prototype, it still allows me to drag the object to up, down or any other direction, rather than only enable to drag it from the left side of my screen. The other question I have is regarding masks. I have a folder with some images that I want to click and animate them in my prototype. So I simply created a mask in the parent folder (PSD) in order to ensure that images don't come out of the screen when animated, but it doesn't works. Am I missing something here? Thanks in advance! You guys has helped me a lot.
3

August 24

Noah Tsutsui
FS feature request: Select a word and pressing " should put quotation marks on both sides of the selection, not replace the selection with ".
6
Tomáš Hanáček
Hi, one thing that I miss with Framer is simple preview on mobile devices. So I try to resolve my need with dropbox based iOS app. This is first preview: https://www.dropbox.com/s/61ohkwp7orh0ok8/framer-preview.mov https://www.dropbox.com/s/1puk5tpa2jwp7lt/framer-preview-dropbox.png What do you think? :-)
4
Benjamin Den Boer
New tutorial on the blog: Masking Layers with Rounded Corners. We've seen people run into this issue here quite a few times already, so we decided to highlight the issue and present a workaround. Have a look!
1
Comést Savatino
Noob question, but what does the three parameters after spring(200, 150, 0) represent?
4
Kiran Adimatyam
Can we run the prototypes directly on the iphone?
9
Ning Chen
Hi everyone, I am new to this prototyping tool and it looks good. One questions, I am confused by default size of iphone screen (the one when you open a new file). It seems the size is less than either 640*1136 or 640*960. How can I adjust the size of the screen? Also, for the black iphone image, I'd like to make it into white... Thanks!
6

August 25

Koen Bok
I added a way in the latest Framer build to get rid of the "new" keyword. That means that where you used to type: myLayer = new Layer width:200, height:200 You can now type: myLayer = Layer width:200, height:200 If it has no weird side effects I will make this the default. You have to enable it by hand for now, just add this to the top of your document: Framer.Extras.OmitNew.enable()
20
Florent Gosselin
Hi there :) Trying to order my different views with index but it has no effect. 2 questions : - How the index property work? Which type of value I should give? - Should I use style property with z-index instead? Thanks a lot for help !
4
Noah Tsutsui
Koen, here's a good one: If you try to save a document into a dir you don't have write access to (i.e., /Library/WebServer/Documents), the write will silently fail and then the FS preview will just turn white and the app will give you an error.
1
Nick Bewley
Having a problem with Framer Studio 1.5.12 on Mac 10.9.4 2.3GHz Intel i7. Have downloaded multiple times restarted closed other apps, etc. Every time I open the suite it will crash. I cannot edit anything or use the studio whatsoever. The app pauses and spinning cursor ensues. Still on trial version.. Framer Generator works fine, however. Strangely works fine on my team members' machines, only difference is they are on 2.7 GHz intel i7.. Anyone faced this problem? Hoping to get this working and integrated into our workflow. Thanks!
3
Kevin Cannon
Hey guys, quick question about buying Framer Studio. If we buy now, will we get version 2 upgrade too?
7
Noah Tsutsui
Regarding auto-completes: Can the "." in "Event." trigger a drop-down with all the possible events (Click, Touchstart, Mouseover, etc)?
2
Nick Bewley
Not sure if this has been asked already, apologies if so. What degree can we integrate coffeescript into objective C? It would be nice to re-use the code as much as possible when designing for iOS. Some googling has led me to JavaScriptCore, which allows you to integrate Javascript into objective C, but I have never used it. Any thoughts / experience on this? Thanks for your input.
4
Jonathon Toon
Does anyone have a standard or foolproof way to create a horizontal scroll view with paging?
4

August 26

Pantalones Gigantesca
greetings koen & noah! i'm one of noah's coworkers lurking under my anon FB acct. first, thank you for all of this. second, as this group is now expanding into the thousands, perhaps a livestream of questions isn't the best method of Q&A? Have you considered other options, perhaps a more stackoverflow type approach?
2
Teodoro Mylonopoulos Labella
Hello! I'm new with Frame JS and I'm realising it is so powerful to treat all the stuff in a easy and live way. So far, everything is ok but, I'm trying to import the layers from a PSD file into Frame and the option seems to be unavailable. I followed all the instructions as well as checking the compatible version (I'm using Photoshop CC 2014) but nothing works. Could anybody help me out with it? Thanks so much
9
Koen Bok
Framer Studio 1.6 is here with improved Sketch support, a revamped import sheet and much more.
9
Alex Hazel
CoffeeScript 1.8.0 released. Check the change log in the Table of Contents for release notes:
1

August 27

Edward Sanchez
So my project works perfectly on Framer Studio but when I export to JS and load it on a browser or Mobile phone I get errors on some on the events. Some NaN error. And some stuff doesn't work. What do you do in cases like these? How do you debug?
2
Jay Wong
Hey guys, I'm trying to add a pulsing ring animation to one of my layer groups. I've added the css for the animation in a css file that I've included in my index.html head, but when I add the animation style property in my framer.js file, it doesn't work. Anyone have any ideas as to why it's not working? Is it a specific detail with Framer that prevents customized animations to be added to a layer group? Help would be great! =)
9
John Framer
Hey guys, Why do different layers have different coordinate systems? I send layerA to position 0,0 and it goes to the top left corner of my screen, as expected. I send layerB to position 0,0 and it goes to some random position in the middle of the screen (not even at the point where it was exported from sketch). Why is that? THANKS
6
Daniel Alvarez
Hi guys, maybe it's not related to the group but I want your opinion. I'm planning to get a Mac to do some UI/UX work, maybe a MBA. Do you think it can handle design work? I'm planing to use Photoshop, Sketch, Illustrator and Framer Studio. My second option is a MBPr 13". My budget is $1500 usd.
15
Stephen Crowley
Anyway to disable Autocomplete?
7
John Anthony Evans
Can anyone point me in the direction of a framer example that shows how to do text input?
7
Koen Bok
If you ever needed multiple shadows on an object, there is an easy trick: just create multiple transparent layers with different shadows. Here is a simple example: http://cl.ly/2z1H1z2c1A1Z
3
Eyal Shahar
Anyone knows how to change orientation on Framer Studio?
1
Koen Bok
Nice new prototype and talk by Jay Stakelon: Designing with Code. http://framerjs.tumblr.com/post/95902865392/designing-with-code
1
Nick Bewley
Context: I want to move the position of a layer (call it "image") that lies behind a layer mask (lets call it "mask"). I put the two layers into a group to import to framer. But how can I target the "image" to move it behind the "mask"? Trying something like myLayers.theGroup.theLayer doesn't seem to work.. Splitting the images up into two groups removes the mask functionality. Thanks for any input
19

August 28

Daniel Lin
Hi! How do I start using FramerJS to prototype for desktop experiences? What if I don't want to design within an iPhone frame?
3
Nick Bewley
Sorry to blow up this wall with issues, but for some reason importing from sketch is appending a weird string to my assets in framer: You can test the file for yourself here: http://cl.ly/3j293r353I1Z
1
Phil Hammel
Hey guys. Would there be a reason that, when viewing a prototype on my Galaxy S4, it is much bigger than the screen and gets cut off. Even though the prototype is using screenshots from the same phone?
3
Kyle Sollenberger
Progress on a custom tabbed action bar. Want to get swiping in yet.
3
Yap Kwang Yik
Anyone tried implement http://blurjs.com/ to get the background blur filter works on header?
7
Kostantinos Frantzis
Hey all, 2 quick questions. 1) I want a layer to stop being draggable beyond a line. I am setting draggable.speedX and speedY to 0 beyond that line and it kind of works but it is flickering when I pass that line. Is there another way? remember having seen a maxdragframe property (or something like that) somewhere before but cant find the documentation. 2) I have two layers sitting on top of each other. bottomLayer and topLayer (with alpha). Is there a way for a touch event to propagate to the bottomLayer? So i can listen for events on the bottomLayer without having to place it in front. Cheers, Kosta
2
Mathias Alstadsäter
Hello, sorry to ask but I can't find the answer... Is it possible to animate the layer.style properties (css), using framer and where could I find an example of this?
0
Peter Dijkgraaf
I've made a little loader for the TravelBird app in Framer. Feedback is always appreciated! Keep up the great work guys! I absolutely love Framer!
6
Kevin Cannon
Hey guys - Didn't spot this elsewhere. Is there a nice way to do relative values? Right now I'm doing this, but it's great for reability. properties {x : header.x+100}
9
Noah Tsutsui
Koen, here's another text editor request: In most editors, Options+ delete only deletes words, but FS, it will delete anything not separated by a space. For example, take "goop.center()": IMO, four option+deletes here should output (respectively): 1. goop.center 2. goop. 3. goop 4. However, current functionality is it deletes the whole line.
1
Noah Tsutsui
Hey guys, can someone help me out with this?
0
Chad Lonberger
Image preloading? I'm using Studio 1.6 to import from Sketch3 (working very well). Unfortunately prototypes are fairly large and not preloading all images needed to present on the device. Painful over slow connections and animations don't appear for assets that aren't fully loaded. Anyone have a quick solution to force Framer to preload all image assets? Loading progress indicator a bonus but not needed. Thanks in advance.
2

August 29

Tyrick Christian
Is it necessary to use Coffeescript with Framer or can the same effects be achieved with Javascript?
7
Rich Cornish
Is there any way to keep the IDs of DOM elements consistent between Framer page refreshes, so that we can jump down into the guts so we can integrate HTML5 canvas drawing? Seeing as it's "just JavaScript" it should be possible but Framer's helpers obstruct this as far as I can see. I was hoping to animate a layer along a circular path (canvas) while using spring physics to speed up/slow down the orbit.
3
Peter Ng
good way to deal with density? positioned everything at 1x and now i want to go to 2x =(
1
Noah Tsutsui
When using a For loop, how do I individually name layers?
2
Nick Bewley
GPU Panic error when using FramerStudio on Mac 10.9.4 intel i7. Anyone else or just me?
0

August 30

Noah Tsutsui
plz halp! :)
1

August 31

Johannes Eckert
why is "print event.y" NaN on mobile safari when running inside Events.DragMove, (event) -> it works fine on chrome/safari on the desktop
18
Ed Chao
we should start putting together a public snippet library.
5
James Caruso
Probably a silly question, but would anyone have an example of how to create a superLayer with subLayers and animate between them?
0

Monthly archives

2017

2016

2015

2014

2013