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

What is Framer? Join the Community
Return to index

October 2014

October 01

Min-Sang Choi
Circular mask isn't working with the newest version of framer. layerA.style.borderRadius = "50%" layerA.addSubLayer(layerB) layerB._prefer2d = true supposed to work with this code, but it's not clipping sublayer after I upgraded my framer project. any idea?
9
Ed Chao
was putting this together for a prototype at work. But figured I'd share it in case people wanted a simple example of radial progress bars. See first comment to download source. Using the new layer.force2d
9
Ayana Campbell Smith
On the Examples page, it looks like the download link on the Google Now - Overview example downloads the Carousel - Onboarding files...
1
Blaine Billingsley
Has anyone worked on a framer project using two-finger gestures like two finger swipe or pinch? Not really sure the best way to go about it and would love to see an example :)
1
Billy Roh
What's the best way to implement a table view with sticky headers for each of its sections?
8

October 02

Gabriel Lovato
I currently include the status bar in protos when working in Studio. However when viewing them trough Mirror+Safari, there are two status bars, the real one and the prototype one. I could put everything inside a superLayer and toggle clipping but I was wondering if there's a already a default global superlayer or I have to create my own? PS. I know Clear Browser has no status bar but I can't get it to load the Framer Mirror URL.
2
Ed Chao
Since it's sometimes hard to find downloadable projects in this stream, I've assembled a collection of my framer prototypes with downloadable source here on my personal site. Will try to keep it updated with new stuff. hope it helps!
12
Svet Denkov
Hi guys. Just stared playing with Sketch and Framer Studio. Quick question about importing. I have a simple rectangle and some text in Sketch. Then I import the opened file via the built-in importer, but see nothing on Studio's iPhone screen. I tried using the importedLayers object, but it highlights red. What am I missing? Do I have to install the separate Framer Generator app? Thanks in advance!
7

October 03

Arron J Hunt
Hey guys, how would I lock a draggable layer on an x or y axis? I can use imageLayer.draggable.speedX = 0 but it seems like there would be an easier way.
1
Blaine Billingsley
are there any addition examples/documentation on ignoreEvents? I'm including it in scenes so listening on hidden elements aren't triggered, but they are being triggered anyway.
2
Guus Baggermans
Does anyone know how to adapt this framer example so that all of the subLayers of wrapLayer become more transparent on drag? http://examples.framerjs.com/#draggable-dribbble.framer
4
Noah Tsutsui
Josh Puckett Any chance you're going to put in FSMirror in the App Store?
1

October 04

Noah Tsutsui
Grid collection with 400+ items is very slooooooow.
1
John Framer
hey fellas, quick q about sketch and scrolling! I have a sidebar UI, that slides in from the bottom when I press a button. I need to be able to to scroll right and left to hit thumbnail buttons that are outside the screen. I know that I can use scrollHorizontal but how do I prepare my sketch file? Do I need to add .Scroll on the end of my group name on sketch? I am using framer generator 3.0.33 which means that I am probably on an earlier version of framers. Thanks, god bless and keep making fuckn cool stuff!!! A framer fan and beginner.
13
Alex Hazel
I am in the private beta for Pixate, Inc. They don't have s*** on Framer. You guys have a much better tool. While Pixate is MUCH better at setting up simple interactions, it completely breaks down as soon as you want to do something that is both dynamic and complex. Pixate is geared more towards a true designer rather than designer unicorns that also know how to code. Keep up the good work Framer. I consider you ahead of the pack when it comes to interaction design.
9
Koen Bok
We just shipped Framer 1.8 with a brand new device preview. We now support orientation, zoom to fit, background images and much more. You can also now easily share your prototypes with the device preview included. For a full rundown read: http://framerjs.tumblr.com/post/98165811612/framer-studio-1-8-device-control Docs: http://framerjs.com/docs/#device
20
Koen Bok
Protip: because the Framer.Device is just built with layers you can easily do cool things like setting a blurred background image. I added it to the docs too: http://framerjs.com/docs/#device
2

October 05

Elliott Kember
Has anybody else noticed that their animations animate a little too far, then snap back to their correct positions? Only just started happening recently.
7
Patryk Sobczak
Hey. Just starting out and ran into an issue - the import tool is grayed out for some reason - is this because I'm running on the trial version?
1

October 06

Koen Bok
Heads up: I had to change how perspective worked in Framer because it was causing rendering bugs on retina. Perspective is now disabled by default but you can enable it for each layer with layer.perspective, which causes the perspective for all sub layers to change. The advantage of it's own property is that you have more control and that you can now animate perspective too. Full docs: http://framerjs.com/docs/#layer.perspective Only in latest now, get it by File > Update Framer
3
최최보금
I can't see the mirror url. How can I do ?
1
Ben Sauer
Any framer.js hackers in Brighton, UK? We at clearleft.com are looking for collaborators...
2
Stephen Crowley
Just messing around this afternoon and trying to recreate the Apple Watch homescreen- I have the app scaling based on the screenFrame value on dragMove. Curious as to how I should work in the position of the icons based on proximity of each other. The Apple Watch homescreen icons keep a tight proximity and based on this example you can see how it would greatly improve the the effect on scroll.
14
Alex Hazel
Any designers hear of this new software that seems to be a serious contender for Photoshop? --
10
Stephen Crowley
A colleague shared this nice iPhone resolution chart, thought it might be a good reference for other members of the framer community.
0
Godrich Wild Man
Hi, guys! I'm facing some issues with animations in Framer. Most of them are triggered with .Click events and (almost) everytime the project loads on screen, in the first clicks, the animation seems to behave pretty different of what I've initially built. (e.g When I try to animate the "x" property of a PSD object smoothly off the screen, at the first time the animation is triggered, it simply vanish or goes to the other side abruptly). After the second or third clicks, the animations seems to behave ok and everything seems to run right after that. Am I missing something? Is there a way to prevent such behaviors using JS? I'm afraid this might cause a bad impression on a client, since I'm showing a prototype in order to catch his attention in a good sense. Just one more thing... Is there a way to prevent the browser to execute the default animations until the app is totally loaded? When I open a prototype on iPad, all the initial animations that use setTimeOut function were already executed at the moment the browser was loading and I miss all of them. Thanks in advance, guys!
5
Drew Stock
Any ideas why @2x res assets pulled in for iPad Air device view need to be scaled down to half size and repositioned via eyeballing? Assets imported from Sketch.
3
Brian Saunders
Having an interesting problem with an animation stuttering the first time I trigger it with a click event. I have a dialog view with active and passive states, and it scales between 1 and 0 on click. When I view the prototype in-browser using a dropbox public link (in chrome), the animation stutters on first play through only. After that the scale shift animates smoothly. I do not experience the same issue inside of Framer Studio, or when I use the share link that Framer gives me that points to the local server (also in chrome). So what is it about the dropbox public link that is interfering with my animation? Any ideas?
5
Udi Gindi
Does framer studio support plain javascript or just coffeescript ?
5
Erick Mazer Yamashita
Any ideas on how to make a hover event?
3
Benjamin Den Boer
We've completely revamped the Learn and Documentation pages. The learn page has a lot of new content, examples, videos and illustrations to explain Framer in much more detail. The documentation has been overhauled as well, and now covers all of Framer. A great time to start learning Framer. Check it out! http://framerjs.com/learn http://framerjs.com/docs
27
Jorn van Dijk
With the new Framer docs out, let's see if we can get them into Dash. Bogdan, the developer said he would add it if 25 folks drop him a line: [email protected]
31
Angus Zhu
While everything's normal in Framer Studio, I get this when I opened the generated "index.html". Any clues? I am using version 1.8.17
2

October 07

Koen Bok
We now have beta documentation for Dash. Dash is an offline documentation browser with a nice fast search. Download and test: http://cl.ly/3I0M3B352p0V Help improve: https://github.com/koenbok/FramerDash http://kapeli.com/dash
2

October 08

John Anthony Evans
Koen this might be a dumb question but I can't figure it out. If I do something like iconLayer = new Layer, how can I access iconlayer using something like Framer.CurrentContext.iconLayer ?
6
Koen Bok
I'd like to experiment with an open chat room so people can get live help with Framer. We can hang out there during office hours and maybe some of you would like to join us too. Anyone knows a good product to do this? Campfire? Open Slack room? Or just plain old IRC?
16
Shane Brown
I just started the trial for framer today to create an interactive mock-up from my app design in Sketch, but I don't understand how the integration between the two works. When I use the import feature from within Framer Studio, it imports from the open sketch project, but I can't select any objects below the initial folders. For instance, I can select the RoomBg folder and control it, but I can't select any objects within it, such as Music_Notes. These are shown in Framer Studio's interaction pane as objects (pressing ESC) Could anyone help me with this?
3
Koen Bok
Framer Studio 1.8.28 is here. Mostly a bugfix and performance update.
0
Svet Denkov
Hi All! I have been going over the great examples of Ed Chao. However, I am encountering what appears to be a bug: on opening the files in Framer Studio (1.8.17), the code portion is covered in white. Upon resizing the window, the code gets revealed briefly. Has anyone else experienced this?
9
Stella Dou
Hi Guys, my project runs good on my laptop screen, but I'm facing two problems when I reflect it on iPhone4 screen: 1. The size is always larger than my mobile screen. How could I change default size in Framer to properly fit in different devices's screen? 2. The resolution of images are horrible although they are all in high resolution. How could I fix this? Thanks
0
Arlo Jamrog
I'm trying out Framer for the first time, and noticing event.x is returning different values whether I'm in 'present' mode or not. Specifically on a dragMove event- is there a way to get the device-relative X via the event object? Seems it's getting it based on different origins depending on mode.
2
Fredrik Søgaard
Hi Koen Bok, I bought Framer Studio and loving it! But I can't get the Sketch importer to work. The server log says this: http://cl.ly/text/1b2B2t3d3K2J I'm on the newest Sketch version. If I try the Sketch Beta version I can get things to work. Could you please look into this?
8
Ed Chao
anyone notice that hammerJS events seem off after the update? For some reason event.gesture.center.clientX returns a value that is a few pixels more than the actual.
14

October 09

Cyrus Cheng
Dose anyone had try to get a single text without a layer or put layer.opacity=0 except text(layer.html='<p>balabala</p>')? I can't get it...
0
Cyrus Cheng
I had created a QQ group(150609200),welcome everybody get in ,And then we can get more help immediately to our favorite framer prototypes.
0
Emanuele Salamone
This new release is the best one! My project is over 9000 lines (i'm joking, it's around 800 lines) and the old studio was laggy as hell! Now the autocompletion is fast, and it doesn't stop me from typing (which happened before). Thanks, my workflow is much faster now!
1
Ronald Ricket
hi. why doesn't the chaining example chain infinitely when pasted into the studio? it does one cycle then stops? http://framerjs.com/learn/basics/events/ <> # Layer with HTML layerA = new Layer x:0 y:0 backgroundColor:"#FFCCCC" opacity:50 layerA.animate properties: x:200 curve: "ease-in-out" layerA.on Events.AnimationEnd, -> layerA.animate properties: x:100 curve: "ease-in-out"
4
Blaine Billingsley
Hey Framerheads! I am digging into Framer more and trying some stuff. I've been using draggable in place of scroll for a variety of reasons (mostly because there is no "whileScrolling" and there is a "DragMove"), and I'm trying to make this draggable layer have a similar momentum that it would with a scroll event. I'm trying to figure out: 1. How to make the momentum slow as you get closer to the top or bottom of the scrolling element, the way it naturally would on scroll, or 2. How to "intercept" the animation if the momentum takes it way past the limit and animate back to it resting spot. Here's my example project that's about halfway there: https://dl.dropboxusercontent.com/u/12848031/ScrollThreshold.framer/index.html And here's the zipped file: https://dl.dropboxusercontent.com/u/12848031/ScrollThreshold.framer.zip Thanks in advance for any help and apologies for the goofiness of my code!
4
Ben Sauer
How do you include an external CSS file within framer studio? I tried hacking the source HTML to no avail...
6
Kip Holcomb
Has anyone tried using VideoLayers yet? I am having some issues when using Fullscreen in Framer Studio. I'm overlaying some controls on top of the video, and it's hit-or-miss if I can interact with them. It seems to work if I use the device frame/skin, but not in full-screen mode or mirrored on my device. I can't even programmatically change the foreground layers (x position, for example). Any ideas? Thanks. Update: Playing around with it more, the problem goes away if I use the device frame and then change the zoom level to anything other than what it was when the prototype loaded. If I load it in an iPad skin at "Fit" zoom, then change zoom to anything other than "fit," everything starts working. Reload the prototype and it stops working again, until I change the zoom.
12
Kip Holcomb
I was playing with some button animations using touch start+end events (scale down on touch start, scale back up at touch end) and thought I'd share. The touch-down spring animation—although it visually looks like it finished—blocks the touch-up animation from starting. So, I just had to force the previous animation to stop before starting the new one, and it works as expected now. Here's the example code: http://pastie.org/9631675 If anyone has an easier way to do this, I'd love to know it :-)
2
Farbod Faramarzi
Hey guys! Im interested in detaching the preview-section from the code-section and displaying them on different monitors. Is there a option for this? (have not found it). And if not, are you thinking about implementing this?
4
Nynke Schrakamp
hi Koen Bok, Just bought Framer after that I tried the trial version. I encounter a similar problem as Svet Denkov . Over a 100 lines, the code portion is covered in white. Could you please look into this? Alvast bedankt!
4

October 10

Koen Bok
If you are using Yosemite you may have seen jumpy animations. You can especially notice it with slow moving linear animations on non-retina. This is due to a bug in WebKit2. I have managed to find a workaround/hack and put it in the latest Framer. You can help me testing by choosing File > Update Framer. You can get the old behaviour back by doing Framer.Loop.raf = true. Example: http://jsfiddle.net/ux3rqce0/5/ Bug: https://bugs.webkit.org/show_bug.cgi?id=137599
0
David Ehlers
Loving FramerJS - great work. Newbie question - How do I position a scrollingX layer? I move it via layer.x it moves, but the scrolling area is cropped.
3
Billy Roh
Crazy request: Any plans on creating a visual debugging tool, a la http://revealapp.com/? I've been having a few problems with layer hierarchy and things stacking on top of each other, so it'd be really useful to be able to explode views and see how the views are layered.
4
Tyson Rosage
I want to be able to set a border radius to a superLayer and have it mask the child layers within but I haven't been able to get this to work. I've tried using overflow and clip but that doesn't seem to work for me. Any help?
5

October 11

Nin Tendo
hey guys, i'm new to framer studio and could need some help :) i tried to import a sketch file but cannot see the layers as soon as I create folders. does someone know whats wrong ? also i don't know exactly how to target imported layers. the documentation on the website couldn't help.
10
Jungsuk Jay Lee
Hi all, is there anyone who knows how to create a layer that I can draw like this on framer? anyone has experience like this?
3
Guus Baggermans
After seeing the discussion on the Apple Watch framer prototype, I decided to clean up my code and share it with you guys. Any tips are welcome though :)
12

October 12

David Caputo
FSMirror has been a little buggy for me. Has anyone tried the Frame app? Seems like you need a desktop client but I can't find anything on the web or in the app store.
5
Daniel Lin
Hi, I recently started learning Framer! This is my first prototype, and I'd love to know how you think I could improve. Thanks! Inspired by Facebook's Messenger and Min-Sang Choi's example @http://goo.gl/z9GzAy
5

October 13

Andy Cetnarskyj
Newbie question, Is there a way to loop these layers in a function instead of doing it manually? ----- panel1 = new Layer backgroundColor: "#cc9900" x:0, y:0, width:260, height:768 panel2 = new Layer backgroundColor: "#ffcc00" x:260, y:0, width:260, height:768 panel3 = new Layer backgroundColor: "#cc4400" x:520, y:0, width:260, height:768 panel1.superLayer = panelContainer panel2.superLayer = panelContainer panel3.superLayer = panelContainer
4
Juan Sanchez
Here's a prototype we built a while back to explore some navigation concepts.
13

October 14

Benjamin Lehn
My syntax here is wrong, but is something like this possible? layer.draggable.enabled = true layer.states.add ----noDrag: { draggable.enabled: false } layer.on Events.Click, - > ----layer.states.next() the goal is to toggle the draggable state on a layer on click
4
Joel Smith
Trying to edit just the height of a layer, but Framer seems to be constraining the proportions of the images inside, as the image width of the layer increases every time, as well. Anyway to turn this off?
0
Ale Muñoz
Question: am I the only one that finds the 'snippet' term a bit confusing? From looking at the examples, snippets seem to actually be some sort of plugin… We just spent a few minutes trying to figure out how the whole thing works (docs?) and it feels a bit too complex. In other apps, snippets are "dumb" bits of content that get inserted at the cursor's position. Maybe we could have "smart" and "dumb" snippets?
7
Edward Sanchez
Hey, I'm getting this error on an older file (1.7) http://cl.ly/image/0o2d3J312v26 Any ideas?
2
George Kedenburg III
Koen, Is this a bug on the docs page or do I have some weird cached CSS?
9
Koen Bok
Udemy is looking for Framer teachers: https://twitter.com/nupoora/status/522121017011888128 Anyone interested?
2

October 15

Chris Lee
Anyone have experience translating spring animations from Framer to iOS implementation?
1
David Ehlers
Can we define a custom device? Like a 1920x1080hd tv?
1
Johannes Eckert
I'm sure there's an easy answer that i'm not seeing: how do I make the layer scrollable again? the content is taller than the mask layer »scroll«, in code: sketch.article.scroll = true does not make the layer scrollable
11
Koen Bok
Framer does not have a built-in way to deal with complex gestures (yet) but luckily you can mix-and-mash with other js frameworks. Here is an example how to use hammer.js with Framer to support a range of advanced gestures: http://eightmedia.github.io/hammer.js/ http://cl.ly/2a1c3x0P1i2U
11
Yap Kwang Yik
How to put the superLayer sendToBack? currently my superLayer is the most top and I can't make it sendToBack. I also can't bringToFront other layers that I want them on top of the superLayer...HELP
4
Marc Krenn
Drag/Pinch/Rotate example for Framer.js v3 in conjunction with Hammer.js v1.1.3 probs to Koen and Tisho! Beware: x/y-position may change after the release of a multi-touch gesture (expected behavior) Hold "shift" while dragging for a fake multitouch-gesture. Demo: https://dl.dropboxusercontent.com/u/7997357/framer/marc/HammerDragPinchRotate.framer/index.html Download: https://dl.dropboxusercontent.com/u/7997357/framer/marc/zips/HammerDragPinchRotate.zip
8
Alessandro Battisti
Trying to make a scrolling feed, but when I use a superLayer, it places the feed content and superLayer above all the UI and other content. I've tried changing the z and z-index of the superLayer but nothing happens. Any thoughts?
1
Anthony Roscoe
Is there a way to see when an animation ends from a state switch?
3
Arlo Jamrog
Possible bug in the docs- under layer.brightness, it says "Brightens or darkens a layer. Brightness is defined with a number between 0 and 100 where 0 is black and 1 is white." What is past 1 in that case?
1
Brandon Souba
It would be great to have a hover state cursor switch function for web prototypes. I figure you could easily incorporate CSS into your framer doc somehow.
3

October 16

Tyler La Haie
Hey Koen Bok I just bought Framer Studio... looks absolutely amazing! I was particularly excited about the mirror feature. However, I can't seem to get it to give me a link. All I get is a blank link in the mirror drop down. See image below:
30
Luis Ricardo La Torre
Is there a way the change the code font on Framer Studio?
4
Loren Baxter
What's the best way to implement spring animations in production HTML / CSS / JS? I'm wondering how to make my nice Framer prototype real, and not finding good frameworks.
9
Kevin Anderson
Hey guys, I'm currently creating a showcase website for Framer prototypes as a side project. I found that the most examples are literally scattered around the web and I'd like to see them all at one place. I also think think it's a good place for people who are just getting started to download examples and play around with them. So I'd like to fill it with some cool examples from the community and people around the web. But, it needs content. And that's what my problem is right now :) I've created a quick landing page with a form so that you guys can send in prototypes I can place on the site. I'm not a big coder and development progress is somewhat slow. So I hope to get the current version I have up and running in about a weeks time (it's 80% done by now). Also, I'm curious what you guys think about this. At this point I've no idea what to expect in terms of response. If you've got any questions, hit me up on Twitter (@kevandrsn) or DM me :) Keep rocking!
10
Rahul Dhyawala
I want to create a prototype having vertical and horizontal scroll on the same screen. In the scrollable examples under the layer.json.js file there is mask something like "maskFrame": { "x": 0, "y": 0, "width": 640, "height": 1136 } In Photoshop I have also created a layer mask around the scrollable content but my "maskFrame" says "null". I am really stuck at it. I would be nice if you can share the PSD or sketch file for the Facebook or Carousel Example. Thanks
0
Mike Meyer
TLDR: it’d be awesome if there was a StackOverflow-like alternative to this Facebook group. Here’s my reasoning: 1. Stuff keeps disappearing: A lot of good resources and good answers become harder to find as time progresses. Comments that are great (“accepted”) answers aren’t always immediately visible and “like”ing them only does so much. Original posters can’t really call attention to the thing that helped them. Lots of good material is getting eaten by the Facebook re-sort algorithm as well. Right now, there are brand new posts buried under stuff from a few days ago. I think everyone sees different posts when they visit this page, which is super weird. Group search is helpful, but it means you’ve got to remember specifics about what you’re searching for. There’s no way to intelligently add metadata to your question so someone can find it in six months’ time. 2. Stuff I interact with in this group is mixed in with _every single other interaction_ I’ve made on Facebook. 3. There is no way to format text or, more importantly, _code_. I have to use these silly underscores instead. 4. Image support is pretty wonky. Images can’t be included inline with text. I don’t think you can upload multiple images. There is no GIF support (which seems like an incredibly intentional decision on Facebook’s part). 5. I have to go to Facebook.com to ask a question about Framer. I lose a whole lot of time every time I come here because of all the red dots with numbers that I have to deal with. Proposed solutions: Option A—propose a Framer (or better yet, Prototyping) Stack Exchange site here: http://area51.stackexchange.com/categories/8/technology. This would be 100% GR8. I’m suuuuper into the idea of a Prototyping™ StackExchange site. It would be a beautiful thing. Option B—Take this poor, unused husk of a subreddit and actually use it: http://www.reddit.com/r/framerjs Seems like the subreddit would be useful for people promoting prototypes that they’ve made, but I think we’d encounter similar issues with stuff disappearing as time goes on. It’d be nice if the subreddit had some Official Lovin’—at least a nice Framer-y background. I’m sure Alex Hazel (/r/framerjs mod) wouldn’t mind. Option C—??? Do people still do forums??? What’s the new hot way to host a community with needs more technical than puppy picture sharing? Am I alone in thinking this?
11

October 17

Blaine Billingsley
Sup Framesters! The example linked to below is a list which lets you "star" people in the list. Then I want the list to reorder with the starred people at the top. Right now I am basically blowing up the list and then rebuilding it. This causes some problems with generally flashing, and also it totally ruins Koen Bak's awesome dragging layer thing. Any advice on how to do this in a better way? Anybody have any examples that are similar? Here's the zip file: https://dl.dropboxusercontent.com/u/12848031/rolodex.framer.zip Thanks!
0
Florian Schulz
I created a Sketch plugin that copies the name of a layer, a default state, animation options and basic interaction boiler plate code to be used in Framer. This is the first draft, so feel free to modify the plugin as you like. I just wanted to show how it can be done and hope that it will be helpful for some of you! :) https://github.com/getflourish/Copy-and-Paste-for-Framer
1
Dae Hyuk Yoon
Here are features request for Framer Studio :) 1. Shortcut key to highlight the whole line (e.g. CMD + L) 2. Shortcut key for unindent. 3. Ability to search & replace words.
5
Dae Hyuk Yoon
Do I still have to use "Short cuts for Framer" to make layers global in Framer Studio?
2
Arsen Batyuchok
Hey guys, just started playing around with the tool and recognized that I am probably having some issues with importing a mockup from SketchApp to Framer. So, the problem is when I import my mockup, the left side of it looks a little bit cropped. I used iPad Landscape Orientation mockup (2048x1536). My mockup seemed to be well scructured according to the Docs. Do you know what could be the root of the problem? Also, when I use Landscape Orientation mode using Viewer->Device->iPad Air - it just turns black. Providing screenshots for better understanding. Sketch Original Mockup: http://i.gyazo.com/e5323cb317f8612e2220f8d0c196c488.png When imported to Framer.JS: http://i.gyazo.com/e39c11c62d8c775383d52f19314dab5e.png iPad Air: http://i.gyazo.com/7b16e5d57a425413b580d74794db0f51.png Thank you in advance.
2

October 18

Benjamin Den Boer
Hey all, We're getting an increasing amount of people, companies, academies and universities approaching us to start teaching Framer. We just launched a dedicated page for them. Check it out, and let us know if you're interested in teaching Framer! Featuring a shot of Tisho Georgiev from the Framer Meetup too. :-) http://framerjs.com/teach
11
Blaine Billingsley
I found a weird glitch in this file i made recently that only happens in a browser, not in Framer studio - If you click subscribe before ".com" is in the text field, its supposed to shake to indicate the email isn't valid. It all works fine unless you've been through the success flow once already, in which case the timing for the shake gets messed up somehow. Any thoughts? Is this a known hiccup?
3
Koen Bok
I'm doing a round of small fixes on the text editor, mostly shortcut keys. So far I fixed option-arrow to jump between words to account for punctuation. What else would you wish the text editor did?
19

October 19

Shane Brown
How do I get an object to endlessly animate? I have tried using the AnimationEnd & AnimationStop events to retrigger but they don't seem to work. eg. layerA = new Layer() animationA = new Animation({ layer: layerA, properties: {rotationZ:360, time: 10} }) animationA.start() animationA.on Events.AnimationStop, -> animationA.start()
2
Luke Warda
hey guys, does Framer support accelerometer for updating positions layers? I'm able to print out data accelerometer data but can't seem to use them to update the values for my background and foreground. Any clues? Cheers!
5

October 20

Ed Chao
Experimenting with document previews alongside iOS tableview. dribbble & source: https://dribbble.com/shots/1771949-Mobile-Doc-Preview#weekendframer
4
Shane Brown
Hi, I'm getting a pretty serious glitch in my prototype that has only just started in the past day or two, and I've attached a video so you can see. It seems to be occurring in both the browser and in Framer Studio, although I've noticed in FramerStudio it is inconsistent with when and how it will happen (generally much more subtle). I tried to record it in FramerStudio via Quicktime but when doing so it glitched out 100%, and when not recording it was generally fine (still little glitches though). I've also tried it on mobile (Chrome on Android) and iOS8 (iPad with both Chrome and Safari), and this glitch is occurring badly on there too. I'm on the latest build of Yosemite (as of posting) with FramerStudio Version 1.9.0 (585) I've uploaded the file here that you can look at (its far from complete!). http://spacebarkid.com/framer/explorePlay_Settings.framer/ Trying it on Mavericks with Safari 7.1 I don't seem to be having any issues at all. Any help is super appreciated :)
9
Patryk Sobczak
Hey. What is the best way to handle a tabbed navigation? Toggling the visibility of content layers? Also, two more questions: 1. As for the tabs themselves, I'd like to have a different font / icon color between the active and regular states, and have the green background change it's x position depending on which tab has been tapped. The easiest way would be to import the text and icon as vector / SVG elements and change the color in code as the tabs state changes - however, importing and modifying SVGs isn't supported, is it? Am I stuck with having to toggle static images? 2. Does framer support something like the html image map feature which would allow me make only a certain area of a layer tapable? Thanks!
5
Irwansyah
Hi Guys, I've been using Famous and then came across with Framer. I see that Framer is using Coffee script and is simpler to use. Unfortunately, framer is not design for building application. I wonder if there is any plan or are there anyone who has been using Framer for building an app?
2
Koen Bok
I noticed some people are experiencing rendering issues after some changes I made to the animation loop. I added some settings so you guys can help me better understand what matters where. If you have rendereing issues can you play with the following two settings on top of your document and report which ones fix or cause problems for you? Please include your device and browser too. Make sure you update to the latest Framer with File > Update Framer Framer.Loop.delta = null Framer.Loop.delta = 1/60 and Framer.Loop.raf = true Framer.Loop.raf = false --- Longer technical explanation: There are two settings that have an influence on how your loop renders. 1) Framer.Loop.delta (<number> default null) If this is set, Framer will use the value as a fixed time between every rendering step, rather than the actual time that passed. Beacuse requestanimationframe gets called more or less dynamically based on what you are doing (tab in foreground, etc), I suspect this might mess up the timing and cause animation glitches. Example: # Make the time ticks a "fixed" 1/60 of a second. Framer.Loop.delta = 1/60 2) Framer.Loop.raf (<boolean> default depends on browser) There is a bug in WebKit2/Yosemite that causes pure raf animations in combination with 3d transforms (2d seems fine) to stutter. I filed a bug and Apple knows about it. The simple workaround seemed to be to add an extra delay after requestanimationframe is called. # Include workaround for a WebKit2 browser bug Framer.Loop.raf = false Bug: https://bugs.webkit.org/show_bug.cgi?id=137599 Source: https://github.com/koenbok/Framer/blob/db9ffd11500b18b71aa375481329df71e750f244/framer/AnimationLoop.coffee
3
Farbod Faramarzi
Hi, im using states to move a image in x. Is there anyway to make the image "repeat" itself? I want the image to "restart" itself after I hit the last state. But I do not want it to "rewind" to the beginning. Any ideas?
5
Koen Bok
Just shipped Framer Studio 1.9.9. This should fix most bugs with the Mirror feature and improves editor navigation (option arrow).
4
Luke Warda
Hi guys, does Framer support custom fonts?
8
Koen Bok
Framer Studio 1.9: The Yosemite Release. Today we ship our best release yet. Updated looks, but mostly huge performance increases across the board. We use the new WebKit2 engine in Yosemite to get up to 40% better JavaScript performance, and to run projects in a separate process, eliminating all lag while editing projects. And we added an in-app documentation browser. To get the latest release select "Check for Updates" in the app. Remember that you need Yosemite for WebKit2, 10.9 will fallback to WebKit1. Enjoy! http://framerjs.tumblr.com/post/99925684062/framer-studio-1-9
28

October 21

Cemre Güngör
Any tips on animating on an arc? I'm trying to make something "jump" in the Z dimension.
7
Phil Salesses
A few best practices questions. I'm trying to prototype an app that's a few screens in Sketch and Framer. 1) Should each screen be a separate artboard or a separate folder/group within one artboard? 2) For ease of animation, what's the best approach for moving common elements around and how would you structure your framer file? Any other best practices would be great. I'm using Framer but I'm trying to explain to an interaction designer how the file needs to be structured for it to work, and I can't find any resources online that explains this in detail. Any help would be awesome. Thanks.
2
Phil Salesses
If I wanted to create an app with a scalable number of screens and animate between them, how could I best structure this? Last week I prototyped an app with maybe 30 screens with custom animations between them. At first, for each screen, I would have a setup, animateIn and animateOut functions. But the functions can vary depending on which screen you're animating from or to. This is where all complexity comes from. I ended up writing specific functions for animateScreen1toScreen2Out. I'd ideally like to use a state machine for variables, but it seems like I can only do this per layer and I'd need an array to keep track of each variable for each screen instead. Which makes code more complex in the end.
1
Juan Sanchez
I'm getting 'undefined' returned for event.x during a DragMove in this example when testing on my device: http://examples.framerjs.com/#draggable-swipe.framer Any ideas why? I was referring to this example for something I'm working on.
2
Cemre Güngör
Anyone getting this cross origin problem with Yosemite? It happens the second time I import a file. So weird.
9
Darin Dimitrov
I'm experiencing a conflict between DragEnd and Click. I'm trying to recreate the amazing Lettepress by Loren Brichter just for fun. Each time I start a drag, a click is also detected, and DragEnd and Click are supposed to do different things in this workflow. Any ideas?
6

October 22

Jay Stakelon
Question for you Framer aficionados: in the past I used Clear Browser on iOS with great success to view prototypes, but I've had problems previewing from Framer Studio with it. Does anyone know of an alternative, chromeless iOS web browser?
4
Christy Yang
Also, another bug: I use the event.touchstart to trigger a video to play, and tried various ways to make that video disappear / move out of the way when it ends. ( I chose layer.destroy) It took me more than half a day to realize that the framer studio preview locks up once a video is done playing, but it works when I preview on a browser. Any ideas why?
1
Greg Washington
Is there a way to listen to the direction of a scrolling object?
1
Regi Ellis
Kenny Chan posted a article for getting people started with Framerjs. I decided to do a more idiomatic re-coding of his codebase, check it out, let me know what you think. https:[email protected]/creating-your-first-prototype-with-framer-c39221da7668 *Note, you have to use my include sketch file; I have made changes to more match the rendering of Hotels Tonight http://cl.ly/0a0i3u2N0u0F
0
Aj Mihalic
Great news guys! Google just released material design templates for Sketch.
0
Seoh Char
http://codepen.io/seoh/pen/cEfgH?editors=001 When scrolling slowly down and up, sometimes happends like image. It seems like floating point issue of -webkit-transform:scale, not ours. somebody knows exactly why did happened? or workaround?
2
Regi Ellis
Will additions be added to better support for previews for Android Devices? As of now we only have the Nexus 5, it would be nice to see the Note, S4 and S5 and maybe even the Nexus 6.
1
Shane Brown
I'm having trouble getting animation to work. In my prototype I want the change in fan speed mode to change the rotation speed of the fan icon, but I've found that it either glitches out (slows-down and stutters) or just doesn't respond and eventually stops (despite being set to repeat: 10000) . I set this up outside of the project into a clean file and screen capped it (attached), switching between different animations by turning on and off the animations I had for the layer, which you can see doesn't function as I'd expect. I've also tried with adjusting the time (rather than rotation speed) which has a similar effect. How should I be doing this? code is pasted here: http://pastebin.com/knLaY2vn
2

October 23

Jonno Riekwel
Hey guys, been trying Framer since last week and I absolutely love it. Gone are the days of just having ideas stuck in my head. I have set a goal for myself. Publish one prototype a week on here and on my site (will need to update my site though, sigh). So I'll start here. First up, Music for Designers. That's just the working title. It's gonna be a Reddit music player. Check out the source and let me know what you guys think and how the code might be improved. I have barely any JS skills so the code is not as clean as it could be. And it's not done yet Much more to do. Source: http://cl.ly/0C1N3q352Y3j
1
Giovanni Caruso
Hi! Is it possible to add sound FXs to animations?
2
Juan Sanchez
I've had this idea for a while now and finally have a chance to explore it using Framer. I call it drag to post, which basically means you pull a content area down to reveal some posting actions. While dragging vertically, you can also drag horizontally allowing to make a selection. If you pull down far enough and release while an action is selected, you go to a screen that allows you to perform that action. This example is a little rough still, but I was happy to see it come together. I think it could be especially useful on larger devices because you can pull down from anywhere on the screen and access the option you want without too much strain.
17
Farbod Faramarzi
Hi, is there anyway to animate a x position and have it to animate continuously when triggered with mouse-over? Now I got the problem that the speed decreases after time and when I get close to the x value I have specified. Heres an example of how I don't want it to work :)
3
Guus Baggermans
Hey guys, I'm a bit stuck. I'm trying to determine which row is being dragged, so I can remove this row when it's dragged to the edge, as well as move all of the ones below one row up. I tried to look at the rowNumber variable in the loop, but somehow it always gives me back the length of the array as the rowNumber. *update*: Solved Find the code and demo here: http://www.guusbaggermans.nl/generative-gradient-layers.htm
16
Ed Chao
wrote this on the train this morning. in case anyone wants a super barebones push segue function. You can attach this to any click event: push(direction,currentLayer,nextLayer) https://dl.dropboxusercontent.com/u/1916165/edchao_segue.framer.zip
7
Nelu Cebotari
Hi guys! What do you think, it is possible to learn framer in one week, without knowing javasript? I am planning to learn it anyway, but I have to make some prototypes for an app in a week. I could make them easily in sketch and import in framer. Developer recommends Axure (have to make prototype from scratch) but i'm not really sure if it's worth learning a new tool for just one project...
6
Venkat Reddy
Just trying this out. Why does the opacity of the layer keep changing?
2

October 24

Alejandro Cámara López
Is it possible change a myLayer.style inside myLayer.states.add 'stateA', ? Because if I write as I would when creating a new layer it shows me some errors.
4
Victor Tolosa
Hey folks, Any way to get framer to scale with android chrome nicely? I'm testing on a Galaxy S5 and it seems to scale well until I "save to home screen" and open up the browser as a web app. It's a small issue but I'd like to view the prototype in fullscreen. anyone else experience this issue or got a fix?
4
Paul Knittel
Hey guys, Are there any best practises & techniques to deal with multiple artboards in Sketch 3? I would like to create some cool animations between different screens. Thanks in advance :)
0
Luke Warda
Hia, i've tried to see how this example feels on the phone and it doesn't seem to work. It does in Framer but not in safari on iPhone http://examples.framerjs.com/#scrolling-parallax.framer. Any clues?
0
Mo Vibes
Hello, I just found out about Framer today and went over to take a look. Not sure if this is supposed to work with Firefox...but it's not working for me....Just a FYI
0
Marcos Navarro
How do you feel when you run your first framer prototype on your phone.
0
Paul Russo
I'm trying to replicate a basic gallery with swiping to use in a Walkthrough, any examples on how to chain together the images. Primarily being able to peak at the next image without swiping all the way. Nothing fancy pretty standard stuff.
2

October 25

Thibault Maekelbergh
Just started using Framer today to prototype some animations for a school project. It's a bar which fills with another color when you click it, however the bar animates in from origin (0,0) and I would like it to take up the whole height of the black bar and animate the width to 100% instead of animating in from the corner. GIF: http://imgur.com/YPtRbmX Code: http://cl.ly/text/1K1e3B2M150w Any tips?
3

October 26

Venkat Reddy
hey guys...I am trying to play around with FramerJS...For some reason designs which were all SVG in Sketch and look sharp on retina mac look pixalated when I preview them in FramerJS. Any ideas why? posting examples
5
David Caputo
I'm trying to make a card flip over to reveal content on it's backside but whenever I use the rotationX property the card gets cut off and hidden beneath the layers below it. Can't seem to find anything on codepen or in the docs specifically dealing with this.
9

October 27

Rahul Dhyawala
How to mimic 1)layer.draggable.speedX 2)layer.draggable.speedY 3)layer.draggable.calculateVelocity for the scroll Event?? I want to switch b/w tabs needing the direction and speed of scroll.
0
Metin Saray
Hey guys, 2 quick questions 1) How do you make Translucent Blurry Background in Framer. When importing from Sketch, it does not work. 2)How to reverse Staggering animation in CoffeeScript. (e.g reversing the for count in [1..6] myLayers("item" + count)) Basically i want to handle the items by starting 6 to 1 Thanks in advance, M
4
Christy Yang
Hi all, Are any of you getting a huge loading / animation lag when connecting your Android device mirroring for Framer Studio? Everything looks incredibly smooth on the computer both on browser and Framer Studio, but as soon as it's on Android it starts jumping around. Please help! Koen Bok
0
Giovanni Caruso
Hi! Is it possible to apply the same animation (i.e. scale on Click event) to a set of layers inside a list? Did some test with a for loop but I can't understand why the only layer who actually responds to the event is the last one of the list (whatever is the layer I click on).
2
Nick Bewley
How can I target DragStart, Click, and DragEnd individually? All three events are fired whether I am clicking or dragging.. Check out this codepen to get an idea of what I mean: http://codepen.io/nickbewley/pen/isnfr?editors=001 Thanks a ton for any ideas!
1

October 28

Metin Saray
Hello, Quick question; When i import my design from Sketch to Framer, my canvas gets imported a bit smaller than the iphone. My canvas is 640x1136 which is the Sketch template, but i don't get why it imports smaller. Thanks.
7
Dean Broadley
Hi Guys, I've started using Framer and it's awesome! Really improving my workflow. I've been having trouble with one thing though...Im trying to limit a layer's draggable direction on the x axis. I've managed to limit the layer from dragging to the left, but i need to do the opposite, limit it from dragging to the right. Any ideas?
8
BJ Clark
Two questions for everyone: 1. How do folks share prototypes with others in your company. We were using Invision previous to switching to Framer, but they don't support Framer.js prototypes (if you use Invision and want them to support Framer.js, email them please :). Dropbox doesn't seem to serve up HTML anymore. Other options? 2. Is it possible to reuse the same imported Sketch element over and over? I can't seem to figure out how to "duplicate" it to use multiple instances.
21
Nick Bewley
Is there a way to create states that would be a combination of other elements' states..? If I had a dog and a cat, for example, and wanted to position them at different locations throughout an interaction, it would be much easier to say something like: playing.states.add __fighting: {cat.y: 1120, dog.y: 220} __barking: { cat.y: 333, dog.y: 31221 } __etc... rather than: cat.states.add __fighting: {y: 1120} __barking: {y: 333} dog.states.add __fighting: {y: 220} __barking: {y: 31221} Thoughts?
3
Henry Freel
has anyone figured out to change the color of the status bar on safari iOS 8? Its defaulting to white...I want it to be Black. I've tried all possible variations of: <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="default">
5
Greg Washington
Hey guys, I created a prototype on my computer and zipped everything for a coworker. She tried to open the index.html file in Safari but got the attached error message. Any thoughts on why this happened?
3

October 29

Jordi Martinez Ortega
so, does Utils.domLoadScriptSync work? I can't make it work
5
Shane Brown
This is my first prototype ever and my first FramerJS prototype for a uni project. The video's a bit long because the project got really glitchy towards the end, most likely in large part due to the snow-balling of my patchy coding and diving into framer pretty deep without quite knowing what I was doing. haha. Thanks for all the help :)
4
Jonno Riekwel
Hey Koen Bok, I was wondering why I can't zoom in when I've set "Viewer" to "fullscreen". I'd love to be able to mockup a web page while working on my Macbook.
5

October 30

Arlo Jamrog
Quick test for a corner button with a submenu. Source here: http://cl.ly/2e070I1w3F2I
2
Juan Sanchez
Playing with LayerVault for hosting our Framer prototypes —
2
Rafael Lüder
What would be the best way of loading a html snippet from an external html file inside of a layer? Something like: myTable = new Layer myTable.snippet = "snippets/table.html" The snippet would have all the html and css needed to structure and style the table (layer.snippet obviously doesn't exist). Another solution would be to turn the html snippets into images with something like http://html2canvas.hertzen.com/ and then simply use layer.image to load the generated image inside the layer. I'm probably over thinking things but the main idea is to quickly structure and style elements using html and css (using bootstrap, polymer, etc.) instead of having to create them on Photoshop or Sketch first. It'd also keep the .js file clean by avoiding the inline html that might get quite complex for anything more than a simple div. Thoughts? :)
1
Jordi Martinez Ortega
I found if I set a perspective on a Layer and make it scrollable Safari on iOS doesn't render 3D anymore. any way I can work around it? Thanks
2
Giovanni Caruso
Hi! Working on a keyboard prototype and I'm looking for a solution to implement the "writing" mechanics. My elements: - keys are imported layers - letters to be printed are imported layers as well - no need to concatenate letters: Key A = LetterA; Hitting a new key, erase the previous letter. I was considering to use a switch statement but I can't figure out how to implement it properly.
2

October 31

Ed Chao
was talking to Brandon Souba yesterday, and we discussed states for states. Here's a first pass at storing sets of states in an array.
4
Ed Chao
was working on a swiping view at work last night, simplified it for anyone who might need something similar. Use case: if you have a string of images or cards that you swipe to set incremental points, this sets all of your animation points so you don't have to do them one by one.
4
Arlo Jamrog
Is there a wildcard selector type of feature for quickly selecting or iterating on layers with similar names? For instance, if I had col1, col2, col3 something like columns = Layers['col'+*]?
4
Ed Nepomuceno
I'm having trouble getting the code for "Enter" to work with http://examples.framerjs.com/#event-keyboard-shortcuts.framer document.addEventListener('keydown',function(event) { var key, keyCode; keyCode = event.which; key = String.fromCharCode(keyCode); switch (key) { case '13': return myLayer.states.next('max','menu'); break; }; }); Any insights are much appreciated. Thanks.
4
Koen Bok
Framer 1.9.24 bugfix release.
0
Ed Chao
The very talented Ryhan Hassan inspired me to write a primitive particle generator. This is probably not performant at all. But meh, it's festive. Happy Halloween! (source in comments)
3
Blaine Billingsley
Could anyone share an example of how to create a snippet that adds some coffeescript and/or updates the CSS file of the framer project? I just don't get it! Any help is appreciated!
5

Monthly archives

2017

2016

2015

2014

2013