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

What is Framer? Join the Community
Return to index

March 2015

March 01

Daniel Fischer
hi! i'm new to framer and want to build a portrait and landscape view of a player. Now i don't really know how to check for screen orientation. what i did find out is with this Events.wrap(window).addEventListener "resize" i can check for a change of orientation, but i have no clue how to read out what orientation it is. I would need like to read out window.height or something... can anyone help me?
0
Alex Yakir
Hey guys, how do I set framer to never render the deviceType on fullscreen even when the device is a phone or a tablet? Thanks!
0
Benedikt D Valdez Stefánsson
Hey there - trying out 'states', but having problems with changing certain properties, more specifically fontSize - I've tried setting it as fontSize directly, and as style.fontSize (like in the current code snippet below) - but although the background color change is applying, the font-size stays the same. Are there limitations to which properties can be modified by states? code = https://gist.github.com/benediktvaldez/e787d4fb0b5e03fe14ce demo project = http://share.framerjs.com/8kbbjmw8w0wl/
6

March 02

Nicolas Russo-Larsson
Just downloaded framer 2 days ago, and wow! I am loving it so far. It has inspired me to learn how to code. Thanks Koen & Jorn.
1
Ray Yip
Is there a better way to do this step by step animation?
1
Alex Diaz
I am trying to create a path animation, by switching states of a layer when clicked , with the Utils.delay, it fires to the next states after a time, but the animation runs forever, how can i stop it?
1
Johannes Eckert
Can I place a button/UI outside the Device view to trigger events in the view (don't want to use keyboard shortcuts)? Kind of what Li Jingyuan did here: http://framer.com/examples/preview/#weibo-apple-watch.framer (although he seems to create the device view himself)—I am using the framer studio device
6

March 03

Cyrus Cheng
hi,guys,actually i want to realize like path animation...Does anybody know how to make it?,I mean the animation about little ball with drag...
3
Cyrus Cheng
Hi everybody!I'm working on a project and facing some problems. Does anybody know how to blend two shapes with framer , like two circles mix together?
14
Christian Selig
Curious (and apologies if it's been asked before) but is there a way to save prototypes on the device for offline use?
0
Johannes Eckert
I'm getting a big 404 content not found when mirroring this prototype (accessing the sharing link works fine and on the mirror site, the prototype selector shows up in the root URL) http://share.framerjs.com/cbcuvoaqpfnr/
10
Johannes Eckert
you can't use maxY in a state? Are there other limitations to what properties are applicable to states?
4
Petter Nilsson
Hey! Is there a way to disable the automatic backup when using Framer Studio? backup.coffee updates every 30 seconds regardless of any changes. Since I have it synced on a shared dropbox it's quite annoying for my coworkers :)
2
Alex Diaz
When you import your PSD or Sketch files, does the hierarchy of your groups of layers turn into sublayers of the group or do you have to write the code for it?
3
Viraj Bindra
Figured I'd share the first project I made using Framer with the community. Studio is awesome, and having this in people's hands has made feedback a lot more focused.
2
Edward Sanchez
Any idea why this won't work? Label.style["text-wrap"] = "unrestricted" I do the same syntax for border cellLayer.style["border"] = "1px dashed #acacac" and it works
1
Neil J Krishnan
Finally tried Framer out, really liking it. This interaction runs smoothly on desktop/web, but is pretty janky on mobile web and the Android Framer app . Anyone have ideas why? http://share.framerjs.com/0lvic9ubcpnt/
5
Jan Schlie
I would like to build a prototype with a resolution of a 27'' display. How can I setup custom resolutions in Framer Studio? Thanks for your help :)
3

March 04

Sudhir Nain
Does sketch export plugin work and are artboards not supported?
0
Arvi Raquel-Santos
Anyone have any prototypes they can share for login?
3
Артем Турчик
Hi guys! Here is the next part of my movie app concept. Now you can find out more about movie details such as trailer, cast, storyline etc. Working with Framerjs is certainly enjoyable. Thanks for shot likes and for your comments on my dribble account. They are definitely significant while mastering Framerjs. (: https://dribbble.com/shots/1956336-Movie-Roulette-App-Concept?list=following&offset=0
4
Koen Bok
Today we're announcing that we raised a round to accelerate Framer. You can read more here: http://framerjs.tumblr.com/post/112608194997/future-of-framer We have big plans for Framer and are comitted to contribute to the next generation of design tools. If you are interested in helping, check out jobs page: http://framer.com/jobs/2015Q1/ Now back to work.
24
George Papadakis
Quick q: Do you plan on implementing promises-like functionality on Framer so that chaining (e.g animations) will be easier? e.g animate ...then( .. ).then( .. )
5
Irfan Mir
Hello, I've been trying to contact [email protected] to obtain an educational license. Is this possible? If not, I'll purchase it out-right; but, I am using it for school.
1
Mordechai Levi
Anyone know if it's possible to use Framer for doing things that go beyond just prototypes? (like building web apps and things like that)
3
Christian Selig
Quick question that I couldn't find an answer to: is there a way to stop a layer from passing touches onto the layers behind it? As in, if I add a full screen overlay, the layers behind shouldn't accept touches if I tap that area of the overlay?
4
Tarun Chakravorty
Is it possible to have framer be setup such that if a layer is at opacity 0, Events don't fire for that layer? When I start I usually set many layers to opacity 0. But sometimes I'd accidentally "touch" a hidden layer and activate its touch event. Has anyone faced a similar issue?
4
George Papadakis
Suggestion: How about having the .on method register an element as "interactable" when the event type is a mouse-based one (click, over, out) so that when previewing the project ALT would display the interactable layers/regions? There are times where you have no idea where to click or hover and this trick could come in handy.
1
Edward Sanchez
Most frustrating part about using framer is how ClientX and Y change depending on zoom size, canvas size (presentation vs regular viewer vs device). And the fact that event.clientX doesn't work on mobile. Can those things be fixed somehow without a buttload of if statements? Can you guys create a RelativeClientX/Y parameter? Thanks!
2
Lukas Arvidsson
Ok! Very simple question. But how do you separate between a click and a drag? I want one action when i click an image and another when it is dragged...
12

March 05

George Papadakis
Suggestion: when importing (e.g from Sketch) it's a bit figuring out what's actually a layer and what's not and how it's named. How about: pressing (for instance) alt+shift when editing in Studio = display all layers (regions) and their name too. Also, while there, clicking on a layer copy its name to clipboard. Not sure if those make sense, if not I could mockup a little something to illustrate my point.
1
Jonas Treub
Would you like Framer project folders to become so called packages which are more easily opened with the Framer Studio app? As a result you will have to select "Show Package Contents" from the context menu to see the contents of the folder.
1
Stephen Boak
Has anyone run into size/scale issues with Framer demos? I've heard people lament that the tool isn't optimized for long multi-screen workflows but I'm actually finding it quite easy, thus far, to trigger screen changes. I think it might even be less work to create a multi-screen demo in Framer than in Invision, which I was surprised about. I'm up to about 5 unique screens with multiple states in each, but that's still pretty small. Has anyone hit a wall?
7
Metin Saray
Hey guys, I'm building a prototype on Nexus 5. I hide my say, "module" at the start, and then i call it on Click. It works on the Framer, but when i share it, the module is always on, in the browser. Is that a bug? Thanks in advance, M.
1
Keith Fraser
Hi all - new to Framer and really enjoying it so far! Is there a way to take individual cells in a Collection Grid and assign events?
5
Antonio A. Asevedo
I'm close, but haven't quite figured out. In with the Framer files is a PDF that outlines what I am trying to do. Obviously I couldn't code my way out of a paper bag, so any help is appreciated.
3
Shane Brown
Is there a good way to counter / accommodate the iOS keyboard pushing the prototype up when entering text? and is it possible to have it use the standard keyboard, rather than with the bar on top? (I don't mean the suggestions, but the bar on top of that) eg. This happening when viewing the Chat Bubbles example (besides iPhone 5 proto on a 6 screen :P )
1
Shane Brown
I was playing with modifying the collection grid snippet to put each cell into a 2d array, but when accessing the array back to control each cell, it only recognises the first column, and then subsequent changes all call the final cell. eg. gridArray[[0][0]].backgroundColor = "red" works as expected gridArray[[0][1]].backgroundColor = "red" adjusts the cell at (2,2) Printing the array contents during creation, there is a separate layer for each cell in the array. Doing the same outside of the creation loop reveals that it is seeing the same layer multiple times in the array I've uploaded the framer file here: http://share.framerjs.com/g3rq4vt5332t/ I feel like I'm making a very simple mistake, but I just can't see it!
5
Alex Diaz
I've started to use scrolling on layers, I've added the content as a sublayer and this is higher, here is a link to my code http://share.framerjs.com/gyof8a1er2zh/ Why is not working?
2

March 06

Harsha Vardhan R
Hey all, I've been working with the awesome framerjs extensively for a short internal project here at ustwo, about re-imagining the instrument cluster in cars. Here are few of the prototypes: http://trials.wormholevision.org/ http://trialsferrari.wormholevision.org/ http://trials3.wormholevision.org/ I guess it is not how framer is supposed to be used but it was fun hacking around some restrictions and getting things like a head tracking prototype working. The blog post is here: http://ustwo.com/blog/cluster/ The code is here for you to hack/comment/play with :) https://github.com/ustwo/autocluster Suggestions for improvement welcome! Cheers
11
Danny D. Train
Hello- I downloaded the trial version of Framer Studio today and tried to import a psd file that I created. However, when I import, it doesn't import individual layers but only as one big image. Is there a way to import psd file with individual layers? Thanks!
1
Daniel Louwe Kooijmans
Made a little prototype today based on Facebook's “Chatheads”.
2
Stephen Crowley
Working on a Apple Watch app concept and found this to be a valuable resource when working through transitions- thought I'd share with the group.
0
Sanjay Raval
Here is my article for "Framer.JS Introduction" https:[email protected]/introduction-to-framer-js-82346f428131
0
Jordan Robert Dobson
Can someone explain how the tolerance option works on the spring-rk4 curves? On the docs page for Spring-RK4 it says this for tolerance: "Minimal movement threshold before we say the spring finished". I took this to mean that the animation will report it is done much sooner than it typically would. My issue is in getting my Event to fire on some spring curve animations. They Events fire about a half second after they appear to be finished. I figured tolerance might help here but it doesn't seem to. So what does tolerance actually do? and how might it resolve this timing problem elegantly if I change the animation? Basically my issue is I don't want other hit detection methods to be called until the animation is complete as they were starting from underneath the touch point, thus triggering immediately. :( Thanks for the help in advance.
10
Matt Wujek
Any way to add attributes or data to elements? .setAttribute didn't seem to do the trick. Any ideas?
9

March 07

Dexter Wang
Is it normal to get a slight freeze on carousels when you change pages? (like this demo http://framer.com/examples/preview/#ios-lockscreen.framer)
0
Stephen Donaldson
Hi All, I am very green at coding. My aim is to make wish prototypes to help communicate with my development team. Any pointers to find a multi screen template for iOS. Is it just a simple matter of draw order and moving objects out of site on the screen bounds ? I am of the current mind that when you tap a button it links to another screen, would this be correct ?
2
Danny D. Train
I am continuously getting error message saying, "ReferenceError: Can't find variable: Mappin_Android_profile_edited" Does anyone know why I am getting this message?? Thanks-
2
Jordi Martinez Ortega
is there anyway I can specify if I want the events to be detected on the 'capturing phase' rather than on the 'bubbling phase'? That's how I would do it on javascript? element1.addEventListener('click',doSomething2,true) the idea is to stop events (TouchEnd, etc) from propagating to sublayers just by capturing and stopping the event at the parent layer level.
4
Garrett Murray
Anyone have a good way to simulate a long press in Framer? I've tried accomplishing it with Touches.Start and Touches.End and some timers and such, but I can't get it to work in that animations still end up firing even if I tell them to stop. I'm prototyping some iOS stuff and a long press gesture is necessary for this item.
6

March 08

Giovanni Caruso
Hi! Scratching my head on getting X/Y values using Events.touchEvent(event): .clientX gives back a different value for X if testing the prototype on framer studio or on my mobile device. This is an example: Framer.Device.screen.width is 640px #print 'red' if touch.clientX below 213 layerA.on Events.Click, -> touch = Events.touchEvent(event) if touch.clientX < (Framer.Device.screen.width / 3) print "red" Is there a proper way to write this?
9
Claudio Guglieri Lillo
Hey there, I just started using Framer and have couple of probably "easy" questions for you guys: 1. Preview on my iphone 6+. I've prepared assets on full hd (1920x1080) and they fit the iphone6+ template device. However when I preview the proto for real in my iphone 6+ they appear slightly scaled down. Any idea why this is happening? What I'm thinking it might be is the assets should be at 1242 x 2208 instead of 1920.. however they still show up fitting the device in the preview. 2. Any idea how to setup the preview of the proto in framer with a nice background behind the device, instead of just the device on top of white? I 've inspected the code and add the css tag to it and it works BUT everytime I refresh the css is reloaded. Any idea how to set it up so it's persistent ? Thanks! See attached my first exploration as a gif. https://www.dropbox.com/s/fjg72iyfpn0f42p/capture1x_003.gif?dl=0
3
Jordan Robert Dobson
I started thinking through a project I've wanted for a while now. I work on vintage motorcycles and most of them don't have an operational speedometer. This is the start of a prototype for the AppleWatch portion of the app. http://jrdn.io/a7ci
0
Benjamin Den Boer
Today, we’re launching various importing improvements, including updates to our editor, the Framer library and the latest Sketch Beta. Now, all of your imported layers are auto-completed. We’ve also worked closely with the Sketch team to tackle all known issues. Alongside these updates, we’re also excited to introduce an all-new Importing Guide. Finally, we’ve created a set of templates to help you set up a new project. They’re organised, labeled and designed for various iOS and Android devices. Including Sketch and Photoshop files. Read more here: http://bit.ly/1A0Ur3V New Importing Guide: http://framer.com/learn/import Download Templates: http://framer.com/learn/import/templates/ Download Sketch Beta: http://www.bohemiancoding.com/sketch/beta/
16
JT DiMartile
I have old code with an animateTo function and passing a function as a callback. but now it seems I can only use animate and Events.AnimationEnd. Is there a way to pass a function to an animation as a callback? What are other ways you like to chain animations?
3

March 09

Cyrus Cheng
HI guys,why there are always little block feeling when i use multiple if condition...like Templates: http://framer.com/learn/import/templates/,when u drag ARTBOARDS to change it stats, i will feel little block...
2
Antonio A. Asevedo
pages = 3 for j in [0..pages] The above makes the content display on all pages, but how can you tell it to only display on a specific page?
1
Rafael Puyana
Are there any known performance issues with animated GIFs in Framer? I am having some weird SuperLayering problems. I am running three animated GIFs looping simultaneously. Need help :S
0
Arvi Raquel-Santos
Stuck and looking for some help. I'm looking to swipe (left and right) and have the info icon modulate between 50% opacity and 100%. What I can't figure out: 1/ Initial state should be, center info icon 100%, all others should be 50% 1/ Swiping to the left makes all 3 icons turn 50% 2/ Swiping to the right should return the icons back to the initial state Should I use modulate in this scenario? Working framer file: http://share.framerjs.com/khbaxavbq0f9/
1

March 10

Koen Bok
In the last couple of weeks, three different commercial Framer courses popped up. They are all good quality, and a fun way to start Framer. Frontend Masters with our own Jay Stakelon https://frontendmasters.com/workshops/framerjs/ Udemy by Adria Jimenez (coupon: framergroup) https://www.udemy.com/framerjs-prototyping-design-interaction-animation/ SketchCasts by @rafaelconde http://www.sketchcasts.net/episodes/prototyping-with-framer-part-1
3
Junhyuk Jang
Hi guys, I have a question. This is a snippet: 'Collection List' Is there a way to find specific cellLayer and add animation? (ex. cellLayer id 1 move to x:100 / cellLayer id 2 move to x:200) thanks.
1
Rich Zarick
Hey guys, anyone else using the new Framer app on android? I've noticed that the toggle switch to disable forward/back swipe doesnt work. Kinda screws up dragging elements on the screen when it can't be turned off.
4
Jacky Lee
Made a simple prototype today, extended one of the new templates provided by Framer. I added a modulated animation when the card is dragged to the left. Hope this can be useful for some people here :)
2
Jacky Lee
Is there a Framer JS slack channel?
7
Koen Bok
Ok guys, which watch apps from the keynote were prototyped with Framer? ;-)
6
Matt Wujek
I needed to change an SVG fill color with a transition in a prototype. If anyone else needs use SVGs in their work, here's a look at how I did it:
0
Johannes Eckert
I'd love to read (or change) a value inside a state (without deleting and recreating a state) but it looks like that isn't supported.
5
Tabris Chen
Are there any workshops / classes in SF for Framer beginners ?
2
Sindu Narasimhan
I am new to framer. I am looking to start with some basic slide animations in framer, on the artboards I built using sketch. Any example which could help me start from there and build on? PS: i did get a chance to look at the framer examples but they were a lot more advanced than what I am trying to do. Thanks!
1
Marcos Navarro
Random question. Is it too hard to make a file.fmr or something that get's recognized by the app. I find the open Framer, look for the folder a little too curve some.
3

March 11

Chris Lee
Updated these material design snippets to use modules: https://github.com/cleercode/material-framer
0
Cyrus Cheng
Hi ,guys , i am newbie about codes,anyone can tell me how can i creat a circle or bezier curve in framer,i mean not import from sketch...any information can offer ,and thanks a lot...
6
Arnaud Le Roux
Hi Everyone, I'm New to Framer, anyone to help me with some parallax on draggable elements ? Here the link of my try : http://share.framerjs.com/9oewxhc02iro/ I want to recreate the Nike Club Training Home screen effect. When you drag an element, it reveal an another behind following the drag position. Thanks!
2
George Papadakis
Any plans on introducing a way to visually “compose” states (keyframes);
0
Feles Daniel
I'm working on an onboarding prototype for Prezi. Let me know what you think. http://share.framerjs.com/0wyshjdt408p/ Also if you have an idea how to turn it to GIF so I could upload it to dribbble, i would love that (quicktime -> mov -> gif works but its pretty laggy)
0
George Papadakis
Is (optionally) importing Sketch text layers as html layers as opposed to image ones doable or planned? Pros: no artifacts, programmatically modifiable text etc.
13
Chad Lonberger
Bumping this here for visibility: Had trouble trying to import npm packages as Modules. Here's the results from the underscore example mentioned in the docs.. attempted this with other packages with the same result. Any ideas? ..link added: http://share.framerjs.com/qfuutl2ac0ck/
5
Benedikt D Valdez Stefánsson
So now I'm dealing with dragging boxes, and said boxes need to be clickable as well. Can think of it like this, if I drag it far enough to the left, action A happens, if I drag it far enough to the right, action B happens, and click, action C happens. My problem is this - Most of the time when trying to trigger A or B, C is triggered as well. Q: Is there any way to detect if my box has being dragged and prevent the click handler from firing only then? In this working demo I'm simply resetting the box position on Event.DragEnd, and toggling between blue and red backgrounds for the box on click. Link to demo: http://share.framerjs.com/eytziaqp790j/
2
Christo Steyn
If Sketch Artboards act like masks, does that mean you need to export an asset if you want to be able to scroll it ? I'm having success in scrolling new layers but not groups inside artboards. Any ideas ?
2
Callil Capuozzo
Wanted to show a little demo I put together using framer + sketch - peep the cute drag to refresh animation. I'm exploring using completely text based interface with lots of subtle interaction + motion touches just for the heck of it. you can try the demo here: http://share.framerjs.com/jneihqxhqqgu/ it will be the best on an iphone 6 if you are viewing it on mobile
4
David Caputo
Has anyone gotten a custom device to work with the included snippet? I've got the screen size rendering correctly but nothing happens when I assign a deviceImage. Are there other settings needed?
7
Jon Arnold
When I mix imported layers from Sketch and generated Layers via code I can't bring imported layers to top. The codebased layers are always on top: That doesn't help: layer.bringToFront() Any ideas?
2
Cyrus Cheng
Hi,it's me ...i found a problem,that when i import a artboard into framer like share blow link, in this case ,aa.list is a long picture,but the aa.list.scroll=true isn't work...anyone can tell me why?thanks very much...
19
Joshua Tucker
Thanks for the modules guys! Glad that it's finally available. Is there a reason why module = require [module name] doesn't work if the first letter isn't lowercase? It will accept a file named "deviceType" but not "DeviceType"?
2
Unn Swanström
Since the update I'm having trouble with the offline screen mirroring mode. Is anyone else experiencing the same issues? When I add /offline.html I just get a 404 error message.
8
Warren Paul Anderson
Just purchased a license, but having an issue registering and downloading Framer Studio. Upon entering name and email address and clicking the download button, the download page gets muted and nothing is downloaded. Anyone else experience this as of late?
5
Marc Bodmer
I've been experiencing an issue when using masks in Sketch. When I import a group with a mask + layer inside into Framer, Framer seems to be stretching the image some amount (2x or 3x times the size)... The way I went around this was to just export the image as jpeg and reimport it into Sketch. I couldn't find any information if this was a bug or not.
3

March 12

Andre Sebastian Tacuyan
Where can I find a loading UI animation Framer example?
3
Parker Malenke
Hi All, Is there a way to re-use an existing share.framerjs.com URL when you update a prototype and publish it again? I'd like to avoid deleting and reinstalling the web app on my phone for quick tweaks. Thanks.
3
Junhyuk Jang
I made side menu animation for fun. I wish you guys enjoy this :) http://share.framerjs.com/72h3jpjtrqjd/ *there are some mistakes or bugs, cause I'm not best coder. if you see this prototype on web browser, it might be poor. ex. Layer blur is not perfect.
8
Benjamin Zanatta
Hi everyone ! Quick question : How can I save offline on my Android phone a Framer project please ? Thanks !
0
Joey Lamelas
Is there any way to return the position of the mouse/tap when you have the device displayed on the browser?
3
Dory Little
Hey guys - whats the best way to calculate the coordinates of a click event. Specifically when viewing within a device frame?
6
Joshua Tucker
For you module peeps: attempting to add a switch statement inside an exports function and it's not working. If I use traditional if, else if, and else, it works fine. Missing something, or bug/issue?
6
Anthony Roscoe
::: FIXED ::: Anyone know a way to change drag speed mid drag without having the layer flicker?
4
Niklas Agevik
**FIXED** Lately I've started to get this error which is preventing me from using Framer at all. Anyone know why it is showing up?
4
Niklas Agevik
Is there any way to embed a Framer prototype into an HTML page, say in a blog post?
1
Tung Chi Vo
Hi All ! I'm using windows 8.1, how can I work with Framer JS ? I've downloaded "Framer Studio-1.10.1" but It doesn't work :(
14

March 13

Raphael D'Amico
Hey y'all. Over the last few months I've been slowly building up a set of reusable versions of standard iOS controls that I use often, and the Modules announcement seemed like the perfect trigger to put them out there. Check it out here: https://github.com/raphdamico/framerKit And a quick little kitchen sink example here: http://share.framerjs.com/85gpnmpy4f17/ Hope these are helpful! Still experimenting with how to make things reusable without getting too unwieldy, so ideas welcome.
10
Benjamin Den Boer
Hey guys! I've been exploring working with Audio lately - and how an AudioPlayer Class could work. I started out with a basic example, highlighting a few native methods and properties, and ended up also creating a Class that contains a few other helpful methods, allowing you to visualize time, timeLeft, calculate progress and more. - On GitHub: https://github.com/benjaminnathan/framer-AudioPlayer - Basic Example: http://share.framerjs.com/mz633vr9l57p/ - AudioPlayer Class: http://share.framerjs.com/pb8ugy1rfbwt/ Hope these are useful! Still a work-in-progress, but curious to hear what you guys think. Contributions are welcome, too. :-) Still looking to improve the scrubbing behavior, to explore forward/rewind functions and to include a customizable play/pause/stop UI within the Class.
6
Jason Lang
Question: I'm trying to create something that has dynamic text content, which I'm inserting in to a layer via layer.html. Is there a way that the width of the layer can dynamically adjust to the content inside of it?
8
Vikar Zhang
Hi dear Framer developers, For some reason, I wrote a drag function myself (using touch events), but found that the target layer can not catch the touchEnd event when I move the mouse out of the iPhone's screen area. But as I can see, the official drag can work even when the mouse is out of the Framer Studio's window. Would you please help to give me some advice about this problem? Benjamin Den Boer,Koen Bok
7
Min Hu
If I want to add a new state with different text on the layer. Do I write layer.states.add("stateA": {html: "textA"}, "stateB": {html:"textB"})? I tried with this and it doesn't seem working. Wondering if I did anything wrong here.
2

March 14

Nick Bewley
Anyone done a swipable segmented control they want to share before I dive in? Will share my results if not..
0
Joshua Tucker
Hello all! I am running an experiment using Framer and Parse and would love your help. The details are provided here. http://joshmtucker.com/gesture-experiment/
4
Jon Arnold
I try to translate my spring animations to be used with the POP (ios) Framework using this script: https://gist.github.com/koenbok/e9a0f7d763ac28eda880 But the values I get are just wrong: » tensionFromQcValue: 1339.4194 » qcValueFromTension: -44.75138121546961430 » frictionFromQcValue: 117625 » qcValueFromFriction: -8.3333333333333348 Please help, I would love to have the same spring curves in the iPhone App, not just within the prototype.
6

March 15

Minh Thang Pham
Hi, is there any way to do smooth transition between two colors in Framer? Thanks.
2
Jacky Lee
Hello all, not sure if I'm doing this right but I just created a module to add some instructions to framer prototypes because I sometimes find it confusing when I'm not sure what to do when I come across a beautiful protoype! The instructions panel can be triggered globally by keyboard shortcut ' ? ' . Note: So far, it requires you to generate that instructions panel from your sketch file, as long as you parse that layer through the module then it should work. I hope somebody here can make this module smarter to take text inputs rather than pre-generated layer and share it with us :) UPDATE: The old link was scaled too big, just updated the overall scale in the new link below Example here: http://share.framerjs.com/yofze9foawuv/
8
Anthony Roscoe
I keep getting "XMLHttpRequest cannot load: Cross origin requests are only supported for HTTP" when using Utils.domLoadScriptSync() Not sure which version it started happening in, but I'm using the latest Framer Studio (1.9.27). I don't think its my script because it happens even when I try to load a really simple script. Ideas to fix, Framer bug, Framer Studio bug? Thanks!
3
Kevin Velasco
Hi guys! quick question, how can I grab every single layer from all artboards from all pages from a sketch import?
9

March 16

Paul Cotton
Curious as to whether I can use an SVG path as a mask / clipping layer. At the moment all masks appear to be rectangular (unless I set borderRadius.) I'm getting around this by giving the non-rectangular forms I want to use as masks rectangular backgrounds, effectively meaning that if I want a triangle as a mask - I must make a rectangle with a transparent triangle cut out in the middle of it. Is this the best / only way?
12
Andy Catch
Hey there, first post/first Framer attempt. After using scrollVertical I noticed there's a gap between my scrollable content and the superLayer. I've set up the superLayer and subLayer according to the examples, I set the superLayer.height to be the device height (in this case an iPhone 5S), but the content scrolls way past it. The relationship seems to be (from doing a few print outputs of the numbers) content.height - superLayer.height = gap size. It seems kind of arbitrary, so I dug through the docs to see if there was some sort of defineScroll method, but I have either missed it or it doesn't exist. Do I need to write a custom function that detects when content is at a certain scrollY? I just sort of thought this calculation was done for you when you set scrollVertical to true. Can anyone shed any light on this? Thanks in advance for any help! http://share.framerjs.com/37ero4ph0itq/
0
Mike Kotsch
This is my latest project – prototyping an interaction scheme for wifi enabled light bulbs (in this case LIFX).
8
Mike Feldstein
Someone had talked about tweaking values on the fly in a prototype recently, and I just dug up a rough ControlPanel module i had written (long before the days of modules, its much easier now). here's an example: http://share.framerjs.com/yjofo5jnxute/ It's nothing special, but it demonstrates a nice easy API for creating a control panel to change values of stuff while you're using the prototype. options = [ {label: "Red", value: "#F00"}, {label: "Green", value: "#0F0"}, {label: "Blue", value: "#00F", selected: true} ] controlPanel.addRadio "Button Color", options, (value) -> button.backgroundColor = value Right now it only allows switching discrete values, but if people want it can easily be extended to have sliders and maybe even text inputs.
10
Chris Camargo
Can anyone point me to an example that shows how I might affect the opacity of one layer based on the scroll position of another layer? For instance, I want to animate "layerA" from 1.0 -> 0 opacity, as "layerB.y" moves from 400 to 100, and vice versa.
2
Patrick Hansen
Does anyone know how to get the current index position of a layer within an array based on a property value - something like this: for listItem in myList if listItem.name == "foo" return listItem.currentIndex
5
Neema Mahdavi
Is there a way to manage all the prototypes I have on share.framerjs.com? What if I want to delete some? Restrict access?
5

March 17

Ken Yiu
Is there any best way to create dial UI in Framerjs
0
Ken Yiu
Is there any plan to release a PC version studio?
1
Ashley Einspahr
hi guys. i'm trying a simple interaction where you drag left/right to switch between pages. it's working fine in the browser & framer studio, but i can't get it working on mobile. i've seen other posts about this, but still can't seem to figure it out. thanks in advance! p.s. - i'm still getting the hang of the language, so if you see something i'm totally overcomplicating, please call me out on it!
8
Benjamin Den Boer
Welcome to Ludovic Galabru, officially our 6000th member! :-)
5
Jorn van Dijk
We'll be speaking in Berlin at SoundCloud with the Sketch team, make sure to sign up today. https://www.eventbrite.co.uk/e/sketch-framer-at-soundcloud-tickets-16181460183
5
Chris Camargo
Is it possible to create custom/arbitrary properties on layers? I'm working on a calendar interface, and would like to be able to read the value of the date from the tapped layer.
3
Allan Grinshtein
Hi Framerers, If you've ever tried to create a draggable list row that reveals options underneath (similar to iMessage), you've probably run into some roadblocks. You're in luck. There's something related on the examples site (http://examples.framerjs.com/#draggable-swipe.framer), but it only works in one direction. The convention on iOS is works in the opposite direction. After some noodling, I found a pretty clever way of accomplishing this drag left stuff. If you've found a better way, I'd love to hear it. http://share.framerjs.com/zsbhyqz9sjai/
0
Juan Sanchez
I'm having an issue with a Layer getting clipped in half when I apply a rotation transform. Any pointers?
4

March 18

Harry Brignull
How do you get the x or y coordinate of a sublayer on the window itself, rather than on the parent layer? thanks!
10
Chris Camargo
Hey Framers! I'm calling states.switch() with a transition on a couple of layers. Once that switch transition is complete, I want to execute a switchInstant, but *not* before the switch transition is complete. Any pointers on how I might go about this?
1
Khalel Dumas
Is there a way to re-download framer? I purchased it and need to install it on my new Mac. Don't see anywhere to login and retrieve a license code. Any help would be great. Thanks
5
Paul Cotton
I've just tried to import a reasonably complicated Sketch file into Framer Studio and hit a couple errors. Given that if I import a simple Sketch file containing an oval into Framer, everything works fine... I'm guessing I've gone wrong somewhere in the more complicated one. The preview window in Studio is blank, and switching visible true/false etc makes no change. Errors are: XMLHttpRequest cannot load Error: Utils.domLoadDataSync: no data was loaded (url not found?) Attached screenshot of what the console looks like. Any clues?
4
Slghtr Khari
Hey guys, I am working on a prototype and I would like for clicking one of my tab bar icons to animate scroll view to revert to it's origin. I do not wish to toggle between states (i know how to do that). I simply wish for the tab bar icon to consistently revert the scrollable content to display the top line -> if the scrollable content is already at the top, nothing will happen. Any ideas?
2
Jacky Lee
Any Aucklanders in the house? Pretty keen to organise some meetups where we can just geek out on this :)
4
Jacky Lee
Hey everyone! Just made another module that automatically rotates an image array equally, this module was a bi-product of this prototype: http://share.framerjs.com/qhoqu1p9urk6/ I wanted a module that will take an image array > lay it out automatically > spit out the rotation angle for me to animate. You can find the module + example project here: https://github.com/aboutjax/framer-equally-rotate-images
3
Josef Richter
Guys, is there a way to different animations between different layer states please? E.g. I have multiple layers with states "one", "two", "three" and I want different animation for one->two vs for two->three. For all layers at once, but potentially also per layer. Any ideas please?
3
Fran Pérez
Hi guys. I'm trying to create a new Layer and make it the superLayer of every other layer in the document automatically (excluding subLayers). Any ideas on how can I loop through something like Window.layers?
9
John Anthony Evans
Before I spend too much time trying to hack it, is there a way to add behaviors to Framer.Device. Specifically I'd like to be able to make the home key work, but also it be great to simply define some hit areas etc. Any thoughts on how to do this?
6
Joe Lifrieri
The humorous error message for while loops is being really aggressive and targeting comments.
8
Slghtr Khari
I find myself writing the same code again and again. this can't be a best practice... How could I shorten the following simple animation?
3
Slghtr Khari
Hey guys, Another question (one of many many more I'm sure): This time it's about importing from Sketch. I've got layers (all in groups as was suggested), I've got artboards, and I have tried with both sketch and sketch beta. Unfortunately when I am trying to access/call my layers in framer I am not getting anything but the first artboard. I am trying to toggle visibility like this: sc = Framer.Importer.load "imported/soundcloud_js_beta" sc["logo"].opacity = 0 I then planned to go through and organize my layers by toggling the opacity between 0 and 1 (for isolation purposes). It ONLY works for the bottom-most artboard. What is going on? I COULD export everything first and do it that way but it would be great to import directly from sketch for a change.
8
Fran Pérez
What is the equivalent in Framer to transform: translateY()?
8
Duncan Crozier
Hi folks, I'm having a slight issue where the 'Share' is getting this error: Upload timeout, try again later.. See the console for more info. On inspection of the console it doesn't give any info, just >> Framer build 0. Has anyone come across this before and if so, did you get a solution? Much appreciated.
3

March 19

Paul Wan
Dose any one known good skills about images load and animation play in framer(like spriter in game)? example: http://share.framerjs.com/qvt962kssujl/ (just my way of thinking about this :P) Thanks!
0
Juan Sanchez
A Pebble Time prototype with an initial take on the animations between App Faces. We made a custom device frame with separate buttons that press in. More to come :-)
9
Slghtr Khari
Hey guys, Back as promised. Let me begin by saying that learning Framer has been a total challenge for me but with genuine success markers along the way. Before framer, the closest i ever got to code was HTML/CSS but now I feel like I've entered into an entirely new code bracket (pun intended -> get it, tax bracket/code bracket!?) Anyway, right now one of my greatest issues is combining the knowledge I have learned into a single project. Last night it seemed like everything I thought I knew took an unexpected turn and I am having trouble combining functions and all over again I cannot make certain things happen. For example: Here is a project I am working on now: http://share.framerjs.com/bmlhulyirizf/ - I want to make a layer scrollable AND reactive to dragging...getting the initial list of songs to scroll and be able to be dragged over to reveal the hamburger tray) - I want to make many different layers reactive to taps but ONLY when visible...(right now I have been reduced to using just one layer (bg layer) because initially i wanted to have ONE tap point be the logo, and then include other tap points. In the past this worked, but right now it's like only one layer can be tappable and it stays tappable even when invisible...so for ease of breezing through what i wanted to show, I made the background the hotspot) - I want to make an item follow a mouse position but also snap to certain points...(the orange marker in the tray) - how to i override states and make a single button consistently repeat an action while leaving the states order intact? (the play button on the full screen view) Doing these things individually isn't a huge issue but when all combined in the same code my errors start having a party! Right now I feel like I am constructing elegant slide presentations instead of interactive prototypes :( HELP!!!!!HELP!!!!!HELP!!!!! Yours truly, Slghtr
0
Harry Brignull
I've written a framerjs script that uses click events on a draggable layer. I've noticed that the click events occur when the user does a drag and releases the cursor. Ideally I'd like a way for the release of a drag to not be detected as a click (i.e. clicks only occur when there is no drag event). I expect I'm just doing something wrong. Any advice?
9
Martinho Oo
hey everyone! where can i find links to working prototypes made with framer, which runs on iphone 5 / 6. Is it possible to view them directly on my phone? THX
2

March 20

Juan Sanchez
Another Pebble Time prototype, but for Uber. We're pretty close to releasing the frame with interactive buttons used to make this.
2
Justin Glaeser
In the "Album Player" example I am not understanding how the green circle animates along a curved path. Can anyone explain this? I believe the key line is the btnplaceholder.animate code
4
Chad Lonberger
Curious what frameworks (if any) people are transitioning their Framer prototypes to when they are ready for production? Both for web and mobile. Currently, for us anyway, it's a pretty big jump with (expectedly) not a lot of reuse.
3
Hu Chen
Hi everyone, just started to try Framer and found that while exporting from Sketch, long feed with in an Artboard got trimmed while exporting. Is there any way to export the layer without trimming to screen size?
3
Slghtr Khari
can someone explain to me how to disable a layer from being clickable after it is no longer visible?
9
Tarun Chakravorty
The download / open links on all my framer prototypes seem to have disappeared, which is making it harder to code collaboratively. Has anyone else seen this issue yet?
4
Juan Sanchez
Here's the Pebble Time device frame we've been working on. It includes the ability to switch between black, white, red, gunmetal, silver and gold frames. Buttons are separated out to receive their own events. There's also a module for getting the current time. Video: https://vimeo.com/122771911 Source: http://share.tackmobile.com/pebble-time/downloads/PebbleTime.framer.zip Thanks to Jordan for his help! Feedback welcome!
0

March 21

Koen Bok
Hey everyone. Today we're shipping modules. Modules are a great way to reuse code across projects and teams. They can do pretty much anything and are based on Javascript standards. We can't wait to see how you will use them. Other changes include auto closing character improvements, a new backup system, text selection highlighting, device updates and much more. For a complete list see the blog post. Blog: http://bit.ly/1C4yqYh Docs: http://bit.ly/1MquG4B
39
Joshua Tucker
Anyone been able to use console.error/warn in Framer Studio? If you actually open the console, it will display said error or warning, but it won't update the inspector's display (still shows as "No Errors" in the bottom left hand corner).
0
Johannes Eckert
Custom Device Bug when adding a custom device, according to the snippet I should be able to set a custom device image (presumably in images/) but framer studio will always look into it's own resources according to the device name. when sharing, this happens: http://share.framerjs.com/5z5u36vgewvr/ I guess I should be able to add my own image and have that one uploaded, right?
12

March 22

Josh Ackerman
Hello, How could I restrict the area a user can drag something in? I would like to prevent a draggable object from leaving screen boundaries. I tried something like this (for each edge of screen): layerA.on Events.TouchMove,-> if layerA.x < 0 layerA.x = 0 Thanks.
2
Josh Ackerman
Hello, I am trying to make a draggable layer with another draggable object inside it. It seems easy although I am running into a problem where dragging the sublayer results in both objects moving. Here is a quick demo which shows the strange behavior: http://share.framerjs.com/wqnhye4aslgt/ Is there an easy way to fix this? Thanks.
4
Chad Lonberger
Anyone else having difficulty with the console in Studio 1.11.1? Log flashes/disappears intermittently and I find myself refreshing multiple times to get it back. Looks like something's being lost in a digest cycle. Also tends to steal focus while typing into the code window. Thanks in advance.
2

March 23

Chris Camargo
Anyone here have any ideas as to why layer.draggable.enabled = true is working on my desktop prototype but not in my mobile prototype? Could it be because my draggable object is inside a scrollable layer? My draggable object is a horizontally swiped carousel, but its inside a vertically scrolling portion of the screen.
4
Cyrus Cheng
HI ,guys, does anyone know why it don't work,the code like this: ss=[layerA,layerB...layer10] for i in [0..10] ss[i].on Events.DragMove, -> balabala...
0
Giovanni Caruso
It took me a while but at the end I was able to put together Framer Studio, Arduino UNO + Firmata and Firebase. Nothing special (now I know what to do and how to do it:) ). Next step: controlling brightness via dragEvent.
3
Rahul Dhyawala
On touch devices, if a scroll area has clickable content, when scrolling over a clickable element ,the element gets activated(It is taking scroll as touchevent and treating it as click event). Is there someway to fix it. It is also happening in the framer example :
6
Cyrus Cheng
Hi,anyone can tell me ,why ti's don't work in the project:http://share.framerjs.com/gdyeegk1pnqx/ but when i bring the "tuozhuai[i].visible=true" out of the events,it will work... who can tell me why? thanks very much...
0
Floris Verloop
Hey guys, I could use a bit of help. I have a draggable layer within a scrollable layer. This works perfect on desktop, but on iOS the draggable layer isn't reacting to any interaction. Example: http://share.framerjs.com/4fddh7pr1zwi/ Is there a way to get this to work?
0
Andy Cetnarskyj
Has anyone done a prototype with tabs (for example FB use them here to flick between write post, add photo etc)
0
FX Fuhrmann
Hi everybody. I'm new to JS and new to Framer. Trying to learn as much as possible to get my design beyond flat screens :). I'm trying to build a sticky menu, like the Thumbtack website (http://www.thumbtack.com/). What is the structure to build it ?
8
Joshua Tucker
Aloha all! I put together a module that handles device orientation events for your prototypes (and allows you to smooth values out with a built-in low-pass filter if you so desire). Thanks Jordan Robert Dobson for nudging me to actually finish it! I'll leave the explaining to my README. Hopefully you can find this useful! https://github.com/joshmtucker/OrientationEvents I'm here for questions or suggestions to improve on this module.
12
Amy Casillas
Does anyone else have a problem opening framer projects from share.framerjs.com? I've never gotten it to work. I click "open", a progress bar appears that says "Downloading Project", then I get the error "The zip archive did not contain a framer project." I know others are able to open the same projects. I'm using Chrome on a Mac, and have a licensed, current version of Framer Studio. Is there something I'm missing?
4
Tom Jenkins
Hello, Can you use .subLayers[<index>] and .subLayersByName("name") interchangeably? I get the same Layer object printed by using either, but cannot do anything else with subLayersByName. Bug? Thanks Tom Sample code: wrapperLayer = new Layer width:256, height:256 iconLayer = new Layer width:256, height:256, image:"images/framer-icon.png", name: "icon", superLayer: wrapperLayer # prints - <Layer id:2 name:icon (0,0) 256x256> print wrapperLayer.subLayersByName("icon") # prints - <Layer id:2 name:icon (0,0) 256x256> print wrapperLayer.subLayers[0] # Doesn't work wrapperLayer.subLayersByName("icon").visible = false # Works wrapperLayer.subLayers[0].visible = false
2
Josef Richter
Guys, what's a good general approach to multi-screen prototypes and segues between them? Do you just create a new layer for each, put it off screen, and then move it in place? I'm pretty sure I'm reinventing the wheel here, so I'd appreciate any existing code examples. Thanks!
6
Paul Cotton
Is there a project size limit when using the Share option in Studio? If so, I think maybe I've exceeded it ;)
4
Peter Ng
Noob question but how the hell do I have a button as a child of another button without both events firing on click? Trying to have an action inside a search field where tapping on the search field goes to keyboard but tapping x clears it out.
7
Josef Richter
Another help request, this time it's more about javascript rather than Framer: I have a scrollable layer containing clickable layers, how do I prevent firing the click event when I'm scrolling on mobile (i.e. I have to touch the screen to scroll, which fires the click event). Thanks. Here's the prototype
2
Sudhir Nain
My first prototype, I must say the code is extremely dirty. Would love to learn the tricks so that this same prototype can be done in half as many lines of code. Any resources for becoming better at this? http://share.framerjs.com/w68080gjckn0/
2

March 24

Eli Beitzuri
Is there any way to control the origin point of a scale animation? It defaults to top center, but I would love to be able to pick a different anchor point, like top right.
2
Liudas Survila
Hello, I am using Sketch and Framer for the first time. I have a problem when trying to import mockup from Sketch that has image masked behind rectangle. On Framer it looks not properly sized. Anyone has an idea why? Resolutions for both Sketch and Framer screens are 1080x1920. I will be making a grid of such elements.
2
Lucas Carmichael Lu
Has anyone used Framer to prototype for desktop/web applications extensively? Would love to see what you have built :)
0
Benjamin Den Boer
Hey guys! Here's a little demo of how to use clipPaths to mask images in Framer. Thanks to Kristoffer Lundberg for the heads-up. :-) Check out Clippy as well, to easily create a bunch of different shapes: (triangles, hexagons...) http://bennettfeely.com/clippy/ Demo: http://share.framerjs.com/0qw309wo2yb9/
13
Ondrej Rohoň
Hey guys, is there a nice way how to access console of the device on which I preview my prototype using Frameless? For example I would like to know what more info about touch event that happened on my real device. Position and so on. I can see what's printed on screen using print command, but it's quite hard to read. Thanks.
2
Arvi Raquel-Santos
Has anyone experienced Framer becoming unresponsive? I think it might be due to chained animations...? Anyone know of how I can diagnose where it's slowing down?
9
Nir Benita
Hey guys! Is there a way to move a layer IN RELATION to its current position?
3
Josef Richter
Here's a basic generic TableViewController + NavigationController prototype, i.e. scrollable list of cells, navbar, back button, swipe back gesture, etc. Thanks Framer community for input. Feel free to reuse if you find it useful :-)
1
Dennis Adelmann
Hey there, is there a way to get the „spring-animation-values“ into the following codeline of swift: UIView.animateWithDuration(1.0, delay: 0.5, usingSpringWithDamping: 0.3, initialSpringVelocity: 0.5, options: nil, Thanks in advance and all the best, Dennis
0
Stephen Boak
Koen a frequent problem I run into between Sketch and Framer is that layer groups must have unique names for Events to work. I'm often copying and pasting groups and controls, and even duplicating artboards. This often requires me to de-dupe names to ensure controls continue to work. Are there any plans to address this? My first thought is that controls should only be addressable inside artboards when they exist. This way the same entity inside multiple artboards can have the same name in each. Something like: sketch.artboard['control'].on Events.Click,
2
Harry Brignull
When I use the share feature to create a http://share.framerjs.com/xyz url for a prototype, how do I do it so that the device frame is not shown? At the moment I can see an ipad frame around my prototype, even when I view it on my iPad...
3
Hugo des Gayets
Hi Frameristos, I need help ! I have a horizontally draggable element inside a vertically draggable container. The trick to find is how can we disable the dragging of the container when dragging the child element horizontally ? Thanks
5

March 25

Jason Fong
Love framer studio!
0
Simon Lessing
Hey, semi-n00b here, loving framer! ;) I'm currently trying to get it to play nicely with paper.js. It's working OK in Framer Studio but when I try it on iOS there seems to be a problem with the events. Paper wants them in a certain format, but neither TouchMove or DragMove seems to do it. Is there a way to convert the events or how do I do this? Thanks Benjamin Den Boer & Kai Oliver Reuter for getting me started.
10
Josef Richter
Quick question: any way to set a layer's scroll position? I.e. I want to programmatically scroll a layer to a certain point, but keep it scrollable back by the user... Thanks
3
Joey Lamelas
Is there any way I can run a prototype (with modules) offline?
1
Michał Jarosz
Hi, I'm wondering how to set up this kind of menu. Now we've got 4 verticlal strips (each 25% of width). How to get fluid movement when I rollover something? I mean, when I rollover to one (eg. scale will be 50%) the others will automaticly 16,6%. My file: http://share.framerjs.com/37phipc7u7q4/
3
Ash Adamson
Hey community! Have a shadow problem and not sure if it's framer bugging or I'm not using the right code. See the photo? I'm adding a shadow to an oval that I imported from sketch. If I add a shadow to the oval, there appears a shadow in a box shape around the oval. Very confusing, when I know the layer is an oval. If I remove shadow, and make the layer draggable the oval looks and visually acts like AND oval doesn't have square edges. Here's the shadow code I'm using: mm.Courage.shadowColor = "rgba(0,0,0,0.2)"
4
Harry Brignull
A simple loader animation that other beginners might find interesting: http://share.framerjs.com/b8j087fy22bd/ (Huge thanks to Joshua Tucker for his help learning coffeescript basics)
2
Chris Wang
Hey guys, I'm just starting using framer. I'm a little confused how the Mirroring works. Currently I'm using the Share to generate a link, and type the Url on my phone to view. I'm wondering where's the "Simply connect your mobile device and Mac to the same Wi-Fi network. Select your project, and preview your prototype in full-screen. " ?
1
Ash Adamson
Gradients!!! Is there a way to create gradients in Framer.js?
7
Chase Curry
Hi all, I'm a framer newb learning the basics... when I import a sketch file into framer, I'm having issues with elements scaling improperly (certain elements are coming in scaled up almost 400%). It seems to be specific to masked elements. I've inspected the assets in the /images folder, and they're all sized correctly. So it seems to something in framer sizing them up, but there's no code involved. Has anyone else had this issue?
6
James Morris
Hey guys. First time I've posted here. I've been curious about building an interface that I've had on my mind. I've got this working well when viewing in Studio or in the browser, but it doesn't seem to work as intended on my iPhone 6. The prototype should give you an idea, but it's a simple grid of items inside a container and when this gets the full view, you can then scrub your finger over the individual squares to see them enlarge. But I really want the same thing to work on the iPhone 6, but the touch events don't seem to work. Can anyone shed some light on this and possibly help me out? I'm pretty new to Framer, so excuse the mess: http://share.framerjs.com/erirrcaeyow7/
3

March 26

Harold Kim
On iOS, you can add a prototype to your home screen to remove the chrome-- this doesn't seem to work on Android. Is there a URL I can use to force-remove the chrome? eg. localhost:8000/Project.framer/noframe My org's wifi network doesn't allow devices to find each other, so I'm just previewing on device over USB using Chrome's port forwarding. Thanks!
0
Cyrus Cheng
Hi ,everybody, i creat a project and want to realize that reseting array position when u drag one of layer in array,the project in blow: http://share.framerjs.com/p09kfepcbr68/ but it alway had some problem in it,who can tell me how can realize it in a right way.
8
William Song
Is there an example of integrating Hammer.js events into Framer?
5
Arvi Raquel-Santos
Is there a way to change the background color of the canvas (outside the phone) from white to black?
1
Alex Diaz
Hello guys, I'm still learning Framerjs, I want to dynamically create elements like inputs inside a layer and pass the values to another layers html property. I noticed in the web inspector the layer objects have methods like _insertElement , and _element , why the underscore ? could you explain what they are for? Thanks
2
Koen Bok
Cool piece about prototyping tools, usage and pain points.
3
John Grendon Enderby
Benjamin Den Boer I decided not to hijack Cyrus's question anymore ;) I have tried to do what you suggested with the Sketch file I am working on and I get an error coming up in the console. I have uploaded the coffeescript to a gist here: https://gist.github.com/johnend/7e6fa72d736638e3c548 For some reason I am getting an "Uncaught TypeError: Cannot read property 'draggable' of undefined" in the console. I'm not really sure why because based on the coffescript used for the example you sent me it should work?
2
Sudhir Nain
Does Framer generate a new URL for every time I update a shared prototype?
3
Alex Bystrov
Hey everyone, need a little help here. I have a quite large amount of layers, some of them are nested in sublayers or even in several levels of sublayers, some of them are imported from Photoshop. For imported layers I used this to be able to address them directly: contentLayers = Framer.Importer.load "imported/content" for layerGroupName of contentLayers window[layerGroupName] = contentLayers[layerGroupName] Here is the tricky part: I need to put ALL the layers into one superLayer to transform the whole app. Can't figure out an easy way to accomplish this because: 1. I need to address a list of first-level layers only (to save the existing sublayer structure); 2. If that's not possible, I can do it manually, but I have no idea how to change the loop that I use for imported layers (above) to nest them all inside my new superLayer too. Any suggestions?
2
Jason Valenti
Hi Everyone! I find Framer to be so incredibly useful in my design process. I used framer to quickly prototype a new tweet feature for Twitter on android. I wrote a story on how I used Framer to accomplish this. You can check it out!
3
Tabris Chen
Hi, I'm a beginner to Framer and have some questions regarding device viewer, thanks for your patience before hand :) I. Is there a way to create a new device viewer for Nexus 6? 2. If I want the project to show up in the right proportion in full size on Framer for Android on my Nexus 6, what is the size of the screen I need to design it in Sketch?
0
Chris Camargo
Hi Frameristos! Question for the community. My work with Framer has been getting noticed at the office and I've been asked to help put together a few lessons to help teach Framer to others who are interested. I've never taught this stuff before, and even consider myself to be a beginner, so I'm like 0_0 Do you guys have any pointers, or ideas about curriculum and how to present this stuff to newbies? I can certainly run them through building a few things, but I'd like to offer them something a bit more foundational first, and build on top of that. Any thoughts? Anything helps! :) Thanks in advance.
7
Joakim Wimmerstedt
Hey, is there a list of modules people would like to see? I've got some time to kill and I want to make modules, but I'm having a hard time figuring out what to do.
7

March 27

Nick Bewley
It looks like if you create a new Layer variable within an Event, that you cannot access that variable within other events.. How do people handle this? _______________ For example: button1.on Events.Click, -> exampleLayer = new Layer button2.on Events.Click, -> exampleLayer.animate properties: ..... Results in an error "Can't find variable: exampleLayer" ... _______________ I realize that I can create the exampleLayer before and hide it, but are there any other approaches here?
2
Josef Richter
Guys, when I share a project from the Studio, i.e. it's on share.framerjs.com can I take it down anyhow? Or does it expire? Shared a project with someone and don't want them to have access anymore. Thanks.
2
Ondrej Rohoň
Is there any way to disable swipe from edge of the screen to go back gesture in frameless? I am prototyping UI with swipe gesture across whole device screen and it gets quite annoying every time when you swipe close to left edge of the device and it gets to index page of your projects in frameless. Thanks guys :)
2
Stephen Crowley
Just started tinkering and playing with a menu toggle animation and thought I'd share:
0
Constantin Jacob
Are you planning on adding the ability to open modules in Framer Studio? Using a different text editor is a little annoying...
0
John Grendon Enderby
Hi guys! Does anyone know if it is possible to change the state of something while being dragged over another object/layer? i.e. something gets smaller when dragged over something else...
15

March 28

Patrik Makrai
Anyone tried playing a sound in their proto? Do you have any tips for it?
3
Ian McClure
Does anyone know why this is happening? Is it a weird thing with scope? Here is a link to the project for people: http://share.framerjs.com/kgas6ylwbkb7/
2
Jon Arnold
Koen Bok Jorn van Dijk Folder names with germanic umlauts (ä ü ö) seem to cause problems when sharing a prototype. In Framer Studio it works fine. By the way, great update! It's getting better everytime!
4
Josef Richter
Speaking of modules, is there anyone who'd be able to clean up this code and turn it into reusable module? I'm not that proficient with javascript.
2
Callil Capuozzo
Quick little tip I've found useful that might come in handy for some people. When dealing with layer.html content, sometimes it's hard to get your variables working properly for whatever reason. To help you can wrap your variables like this #{result.attributes.url} then insert them into the string without having to separate everything out. example: link.html = "<a href='#{result.attributes.url}'> #{result.attributes.title} </a>" kudos to Ed Chao I think I ripped this from his chat demo.
2
Blaine Billingsley
Hey Framesters! One thing that has stumped me is how to generate layouts that are text-based without hardcoding the heights. For example, I have a list of posts that each have varying lengths. How can I get each post to be the proper height for the text?
9
German Bauer
New to FramerJS : where is the best place to read up on the new modules syntax and best practices?
4
Alex Diaz
I am trying to use inputs and pass the values to another layer on click, similar to the chat messaging app on one of the examples, what am I missing here? http://share.framerjs.com/3lhlly2sofyr/ I learnt today that when you copy a layer, the html property is not copied, it would be nice if someone could write a module involving inputs and that Thanks guys!
1
Patrick Rushton
Hi, I'm new to Framer but have been prototyping for a while using other tools (cough - axure - cough). If I look at the examples on the Framer website, they seem to be entirely focussed on microinteractions and specific transitions and gestures. Is anyone using Framer to prototype full products? i.e. mapping out extensive functionality so that the prototype can replace a spec?
11

March 29

Joshua Tucker
Hey all! I put together a module that calculates a scaled layer's properties based on its new dimensions. Some of the stuff I applied in here will be used in another upcoming module I'm working on. Enjoy!
1
Minh Thang Pham
Hi, how would you animate a layer in a perspective? Something similar like in this example: http://lab.aqro.be/fb_btn_concept.html. Thanks for the help!
10
Jordan Robert Dobson
iOS Status Bar Module http://jrdn.io/aODo A status bar module for iOS prototypes. You can have light or dark text and choose a solid background color for the status bar or leave it clear if you prefer. When your prototype is setup as a standalone app on your iOS homescreen, the status bar is ignored and uses the iOS native status bar. It should also stretch to fit any width device. Let me know if you have any suggestions. A few things I'm considering adding to this: 1) ability to hide and show it 2) toggle from light to dark 3) switching to 24 hour time so it's not just for us AM/PM people http://jrdn.io/aODo
22
Jake Sawyer
Hey guys, I currently design my mockups in Sketch so that they're in points (414x736), and export at @3x for my iPhone 6 plus. Sketch mirror knows to scale the artboards up to 3x, I was wondering if there's a way to set the import scale in Framer! I was having a very difficult time trying to find out what the object exactly is that is created when you import from Sketch, and was disappointed to find the renders blurry when upscaled (via a parent layer). Thanks for any help anyone can offer!
2
Rıza Selçuk Saydam
I just published an article in Turkish about prototyping using Framer including this Apple Watch notification example! http://webmagazin.co/framerjs
5
Benny Chew
Are there any tricks for importing Sketch files with many sub layer groups, without manually flattening or upgrouping them? Lets say I have MyLayerGroup and within this I have a lot of sub layer groups, which I don't want to convert to Framer layers. Can I do something like MyLayerGroup* (just an example) to make all sub layer groups flat?
2

March 30

Cyrus Cheng
who know how to realize the animation that like arrange apps order on the iOS home screen with framer??thanks for any information can afford...
0
Josh Ackerman
Hello, I am trying to make a "custom" cursor, one that I can control and animate. The setup works perfectly, although whenever the layer (which represents the cursor) goes near a draggable object, the positions stop updating, and the layer freezes on the edge of the draggable object. Why is this happening? Here is a basic project showing the error:
1
Jérémy Jones
Hey guys, I'm looking for a tutorial/article/everything on how to make a module on Framer. Thanks :)
0
Joakim Wimmerstedt
I made a (very) small module for placeholder images. https://github.com/cupofjoakim/framer.placehold
9
Wendy Lim
I am brand new to Framer.js Just downloaded it today. I'd like to show an advert scrolling down the page, when user scrolls past a certain point. I think it would be a conditional statement and y property, but am struggling to pull it together. Are there some existing examples that would help with this?
7
Liudas Survila
Hi, If you copy a layer using 'copied = layerToCopy.copy()' and then move copy by y, like 'copied.minY = layerToCopy.maxY', SUBLAYERS of 'copied' and 'layerToCopy' will have same y values, when you try to access them, even tho on screen copied is below layerToCopy as expected. Is this an expected behaviour or a bug (having same values)?
0
Daniel Leinerud
I made a little module that mimics an iOS notification when using the phone (so, not a lockscreen notification that is). http://share.framerjs.com/090yu5ay4ban/ It's customizable with App name, Timeago text, Message, and App icon. "showNotification = ( appname, timeago, message, imagepath )". So you can make push notification from multiple applications within the same Framer project. I tried my best to make it look as real as possible, but free online PSDs and screenshots from my own iPhone 5s, perhaps didn't fully do the trick. But for a prototyping perspective, I guess it will work fine. This is my first Framer JS and Coffescript experience so please be gentle (UX designer at heart and wannabe developer). For now, it works best on iPhone 5 (and 4 I guess), looks bad on iPhone 6, and terrible on iPhone 6+. I will save that for a rainy day, or please feel free to add that support yourself here: https://github.com/leinerud/framer.iosnotification
4
Sneha Pai
Hello! I'm brand new to framer - was wondering if it's possible to incorporate clickable animated gifs?
2
Josef Richter
Would anyone else find it useful to have some "code quick look" button on share.framerjs.com, next to open and download button? I usually don't need to open the whole prototype in Studio, just curious about one or two crucial lines of code maybe. Going to Inspector isn't ideal either.
0
Jordano Moscoso
Hi, i have a problem, Why 'Framer.Device.width' does not work when im using to set mi header's width?
3

March 31

Cyrus Cheng
how to creat a linked list for a array in framer?anyone can give some information?...
2
Bert Timmermans
I have been experimenting with Framer.js for just 2 weeks now. And I am already using it for client work. Here is an example including some modules I have written to make it work nicely. http://share.framerjs.com/hgzr4de2d1ri/
10
Ash Adamson
Hey guys, I made a color theme randomizer that makes a color theme based on where you slide your finger on the white square Y-axis. I would like to make random color themes based on triadic color theory. I'm in over my head because I'm a beginner but I wanted to ask for help from the community. I'm not sure how I can take input from the events.DragMove and use that to generate color codes AND create complimentary colors. Should I be using a module? I have been looking at tinycolor.js and colorflow.js but have no experience with modules.
0
Cyrus Cheng
why i use move animation like this: layerA.animation properties: x:a y:b but the layerA.x is not really change to "a" when i use layerA.x="a", it's x change to "a",but it will not have any animation. dose framer have any way to add an animation to a x or y propertie change? by the way ,i know the way layerA.states.add...,but this can't resolve some question...
10
Koen Bok
Just to be sure; did everyone discover that since the last update you can hold command and click any image or module to reveal it?
8
Jason Ogle
Unless I'm not seeing it, there's not a lot of documentation about accessing sublayers within Photoshop imports. Any advice here? The Framer code works for Mobile, but what about Mobile > Mobile Icon (see PS layer)?
3
Jordan Robert Dobson
I've seen quite a few people asking about Carousel views lately so I figured I'd whip up a quick example as it's something I'll need soon as well. If you have any suggestions on how this could be improved, let me know and I'll do what I can to make improvements. http://jrdn.io/aIEx
22
Joey Lamelas
So, I encountered something a little strange. I'm trying to implement something similar to the search bar in the Google Chrome app: search bar is in the middle and when you tap it, it moves to a different part of the screen and you can type in it. The way I do it is attach an input element to the search bar layer, disable it, and turn it on when it is tapped. This works just fine in the browser on my desktop and on any web browser on my phone. But when I add the link to my iPhone's home screen through Safari and open it up using that link, it doesn't work. (Can't share what I'm working on at the moment!) Is there something that changes when switching between using mobile Safari and opening up a link via the home screen?
0
Koen Bok
Framer Studio 1.10.66: Bugfix release and some great new editor features like improved autocomplete, clickable media strings and better drag and drop.
1
Jitendra Vyas
Getting this when I open Framer Website today
1
Joakim Wimmerstedt
Hey, what design patterns are people using for framer? Complex prototypes get messy so easily...
22
Brandon Souba
I prototyped the new Dropbox document previews using Framer. Here is the final mega-prototype I built during the design process:
6

Monthly archives

2017

2016

2015

2014

2013