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

What is Framer? Join the Community
Return to index

June 2016

June 01

Junhyuk Jang
Quick question. I made video layer that has screen width & height, and using player.webkitenterfullscreen(). player.play() perfect on iOS, but doesn't work on Android - video controls are not visible. It just full screen play only on Android. Is there a way to fix this issue?? Where can I find documents about this problem?
2
Danny White
NYC Peeps: We have the man himself, Koen Bok, joining us for a special edition of Framer Sessions at ustwo next week!! Team Framer may or may not also be giving 20% off Framer Studio to anyone that attends...
0
Salvar Þór Sigurðarson
I keep seeing people talking about using Framer for desktop work, but I cannot for the life of me figure out how. When I try to user Framer for desktop prototypes, this is what happens: 1. In Framer Studio, I create a custom device with the desired resolution. 2. I import some assets, and see parts of them in great detail in the preview window. However, I cannot pan to see all of it, or change the zoom level from 100%. This makes the preview window nearly useless. 3. When I refresh the preview window, I can see the entire screen for a few milliseconds before Framer Studio automatically expands it to reach 100% zoom again. Sometimes, if I refresh really often in a row, the stretching doesn't happen. Until I refresh it again. 4. I give up and wonder how people do this. What am I missing?
4
Vishal Iyer
I struggle to understand when the syntax is capitalized or not. For eg, its Framer.Defaults.Animation, but layer.states.add. I'm sure there is some underlying system, but I don't see it yet. Can someone explain?
1
Chris Wang
If I tap on a layer and it's animating, then I tap it again before the animation ends, should it start over or just ignore the tap event? currently in framer it will jump right to the end and breaking the current animation. Also when I do a swipe gesture, is it continuously firing new swipe event as I'm swiping? I had to check if the current layer animation is animating in this prototype
2
Anders Tolborg
How do you organize your framer code within framer studio? I would really like to break stuff into components in separate files etc. Any thoughts?
3
Javier Eduardo Treviño
guys how can I preview a project that was designed for a bigger screen on a smaller phone? is there a way to scale it quickly?
4
Henrique Gusso
I've been looking for a project to experiment with VRComponent, and when some friends asked me to create a color picker for something they're building I thought this would be a good start. http://share.framerjs.com/zw4t05a17rzz (best experienced on a phone) In this prototype you are inside a 360 color spectrum, and whatever color you're targeting is selected when you tap it, and projected on the environment as a history of selections. The initial idea was to select colors on tap and project swatches onto the environment only with a long press, and snap the target to them when you're close enough so you can select them again. Still working on that. Thanks Jonas for the fantastic component 👍 I generated the cubemap using this tool, which was crazy helpful: http://jonaszeitler.se/cubemap-toastmap-generator
6

June 02

Aalok Trivedi
hey all. Not sure if this is a bug or expected behavior for animationEnd, but I can't figure out why this is happening. I have a layer (recSmallContainer) change states (opacity: 1) when the collapse icon is tapped and on recCardContainer animationEnd. I want the reverse to happen (default) when recSmallContainer is tapped. However, for some reason it's still listening for the .animationEnd event from above and changing state again. Why is this happening? http://screencast.com/t/hwKjeSKw http://share.framerjs.com/sok8bhayjeb3/
2
Chris Wang
Is this a bug of GUI editor or it's me not using it correctly?
2
Aalok Trivedi
Pretty annoying user experience I've noticed: Whenever you want to add a new layer, state, event, snippet, etc... it automatically inserts it at the very bottom of your code. It should be inserted to wherever your cursor is
1
Markus Smet
Listening to Koen Bok tell us about some cool new stuff in Framer. Very nice :-)
1
Giovanni Caruso
Dumb question: is it possibile to use 360 videos (i.e. by embedding youtube contents) inside the VR Component? Jonas Treub
2
Louis Currie
Experimenting with the VR component (best experience on mobile) Swipe up to zoom, hold button to capture. Sorry for the shitty video quality. Framer: http://share.framerjs.com/49jix6xqruva/
1
Logan Merriam
If I create a layer in a function, then call the function, then try to reference the layer in the code (say, calling an event on it) it can't find the layer: ReferenceError: can't find variable: layerName I can see the layer, but javascript can't. Why is that?
14
Danny Nathan
Hey folks, hoping someone can help me figure out the (probably simple) step I’m missing here. I have a list of topics with a search box at the top. I’m aiming for the search box to be hidden under the layer above it until the user drags the grid down far enough to reveal it (So the position is -80 until the user interacts with it). Proto is here:
2
Jonne Frankena
Hi Framers! I'm using an array and a for loop to make like a list of layers, which have an offset to each other by using y: i * (heightOfLayer + offset). However, I now want to be able to give a layer an increased height and let the other layers reposition themselves to maintain the offset between them. Does anyone know how to do this the "clean" way, that is, not hard-coding? See this example: http://share.framerjs.com/dpbbx68lybgt/. Thanks in advance!
3
Stephen Boak
Started on a new Framer project today. Imported a Sketch file, and tried to wrap an imported artboard in a scroll component. With no scroll the layer imports fine, but once I turn on the scroll component it breaks spectacularly. Bug?
2
Raul Perțe
Experimenting a new feature of Aerium with Framer. Kinda happy with this quick result -> http://share.framerjs.com/6d9v98tavt5i/ * messy code of newbie here. keen to learn, though.
0
Sergey Voronov
Hi everyone, I used amazing module by Marc Krenn, to connect Framer to Firebase. Example prototype is recreation of google allo group chat. you can try it live here http://tr.im/GoogleAlloFramer desktop webkit browser only
9
Richard Burton
If you’re in San Francisco on Sunday, fancy hacking on some Frames, love Game of Thrones, and enjoy a Silicon Valley cringe-fest, this might be for you:
0
Danny Nathan
Is it possible to define a click event based on a layer name? For example, I have a grid of items created in a loop and then each layer named via an array. I want to make it so that if I click on Box1, go here; else if I click on Box 2, go there. For example, what I'm trying to do on line 118 onward, here:
2
Adrián Mato Gondelle
Hey, guys! I'm trying to use 'loop' to create an infinite loop for a quick rough prototype, but it's actually making Framer crash every single time I write it down in the editor. Any suggestions? Thanks!
7
Tyler Young
Hi Framers! I have a crude prototype working that swipes between three pages, each page scrollable using the PageComponent method. On the third page, I have a layer that when triggered, scrolls up to cover the page from the bottom of the screen, using the layer.animate method. Everything works great. But I'm stumped on how to make that new layer scrollable. Using the new ScrollComponent on the new layer seems to kill the layer.animate method, and the new layer won't scroll up into view, let alone scroll. First question: is this description too convoluted to effectively communicate my problem? Second question: how can I target the new layer and enable scrolling for it without impacting the other 'pages'?
2

June 03

David Townsend
I had a slightly simple question: How would I create a loop where a image is duplicated when a user clicks on a button and then the image is duplicated bellow an existing image in a scrolling list. But the copied image can be deleted when user clicks on a different button? I know I need a layer that contains all my elements that I need to duplicate Then create a layer with the image I want to use Create two button layers that are a child to container layer One button that on click will Copy the container layer One button that will Delete the container layer above it. How would I make sure that the layers would not over lap in a loop? Could I just make a function of the container layer I want to duplicate?
1
Bud Sigur
Hello everybody, I'm back with another question. I want to change visibility of certain layers for each page of the pageComponent. I tried using an if/else statement and currentPage, but it doesn't work. For this specific example, I want to remove a button from the screen when I swipe to the next page. Here is my code: if pager.currentPage != contentMySamples button.visible = false Thanks :)
28
Stijn Eversdijk
Hey guys, We are using Modules for certain fixed UI-components. How can we target layers that are generated by the module in the rest of the prototype? For example: we can see the name in the layerlist, but we can't interact with it in the code. Thanks!
5
Jochen Leinberger
Hi, when running my Frame Prototype in Win7 x86 with an Touchscreen, onTap allways fires two touch Events. Using the same App an Monitor with OSX on a Mac doesn't cause any problem. Any ideas what could be reason for that behavior?
2
Isa Bison
Any way to flag things for the auto-completer?
6
Koa Metter
Is there an easy way within Framer of creating a global listener that waits for all images / assets in a project to load before starting?
5

June 04

Rich Zarick
Hey framer folk! Next week, Eyeo Festival is happening in Minneapolis and I thought it would be cool to see if anyone else going wanted to hang and talk interaction prototyping. Give a shout out if you're down!
2
Rick Waalders
Hey, when I try to share a project I get an "upload failed" error. In Console.app I see it mentions my own AWS credentials file, the one that is located in ~username/.aws/credentials. I'm guessing Studio tries to use those credentials instead of the Framer credentials and fails when trying to connect to S3. Is there anything I can do to fix this without removing my own AWS credentials?
3
Markus Smet
The new NavComponent enables rapid prototyping of complete user flows! Now, is anyone playing around with the new NavComponent? If so, let me know as I don't seem to be able to get it to work... would love to get some basic usage instructions!
1
George Kedenburg III
Anyone in Orlando wanna hang out?
0
Sergey Voronov
yo guys, as i understood nonworking hours are best to get Framer support)) there is a bug that exists also in beta - http://share.framerjs.com/78l56dy3iqau/ if u use parent in pagecompontent to assign layer to page.content - it doesnt slide to last slide, if u switch parent to superLayer - works fine
0
U-Kyung Kim
I practiced more Framer.js and prototyped the statistics view for Jog Station, a pet project of mine! :) I was so thankful it was possible to add an event listener on the currentPage of the PageComponent! Share: http://share.framerjs.com/jeojyg2vgk13/ Dribbble: https://goo.gl/NG5BM1 Jog Station Music Component (from previously): https://www.facebook.com/groups/framerjs/permalink/866128180180921/
7
Danny Nathan
Basic question, I’m sure, but I’m trying to use an array of objects to define aspects of a pagecomponent. I’m having trouble pulling the correct value into the loop and getting the page components to flip correctly. Can anyone help clarify where I’m going wrong here?
1
Dave Orian
Hi Framers! I am looking for someone who could help me with Framer (call it a tutor, mentor). This would obviously be paid. I have been learning framer as a designer, and I often run into dead ends that seem to be technical challenges. I am not technical (I am a non-technical designer), and would love help with this via TeamViewer/Hangouts screenshare. If this sounds like it is up your alley, please message me and let me know your hourly rate. Thank you! - Dave
1
Danny Nathan
If I'm using a loop to create a grid, what's the best way to define events on specific grid items?
2
Peter Michael
anybody know of a snippet or any sort of support for an android wear device in Framer studio?
1
Isa Bison
@tempListener.contact is a variable...
5

June 05

Nicolas Tilly
Hi all, i'm searching for very simple Framer exemples with conditionals (if else if else). Any idea ? :)
10
Kai Daniels
How would I stop a series of utils.delays due to an outside event? I'm trying to prevent the delayed animations from firing if there is some scrolling action going on.
1
Javier Eduardo Treviño
are all the jobs at Framer on site or you do also hire remote developers?
2
Mason Lee
Hi all - I have layers in Sketch that has blending mode set to overlay. When it's imported to Framer, those layers have white background on it. Does anyone know why? You can download the Sketch file here. https://www.dropbox.com/s/3tbkcr8rj5sgzpw/overlay.test.sketch?dl=0
3
U-Kyung Kim
I practiced more Framer.js today and made a simple running sprite animation! Thank you for checking it out! :) Share: http://share.framerjs.com/im6s2svyvcns/ On Dribbble: https://dribbble.com/shots/2749179-Running-Animation Also, if anyone has any advice on how to refactor this part copied below, that would be great! :-)
7
Edward Sanchez
How could I trigger an event when a video layer is at a certain time? So, when the video time is at 1 second I want framer to fire an event. Thanks!
1

June 06

Ali Sanaknaki
Hey guys I want to bump my question again :$ I am trying to get a Dribbble invite if anyone has any to spare I'll be really grateful to you :) Dribbble account : thegoogleintern
1
John Lee
Hey fellow Framerz! I'm stuck on something, that is (probably not too difficult) using standard images, but I'd like to use gud ol' svgs, and hipster-functions to intensify the geekiness. I'm making a simple star-rating proto. The desired behaviour is to click a star and then based on that index, fill the color of all the stars less than that star (that's how a normal rating works!). If I decide on 3 stars, stars 1 + 2 will also get selected. The behaviour should also be reversible (click to select, click again to deselect). Here's my diarrhoea'd code: http://share.framerjs.com/cvqyred3so1d/ You can sort of see what I'm trying to do, but I don't understand how to pass values between functions from inside loops. If you just want to pass me off in the right direction for a partial answer, then I'm happy to slave away at my laptop for another infinite period of malnutritional days without sunlight. Thanks :)
3
John Lee
Straight off the bat – I'm a n00b! Can someone give me a good explanation or point me in the right direction to learn about these differences: layer -> __something layer = -> __something layer = () -> __something layer = () => __something layer: () -> __something Not sure the last one is actually correct (object maybe), but if there are more combinations, then I'd love to get my head around all the differences. A Framer example of each would be awesome! Love this community
3
Nikola Durkan
Anyone else having problems with ignoreEvents? It doesn't seem to work at all for me. I made a simple test and it fires the click event every time I click on it. http://share.framerjs.com/5jdy6iugs4so/ Any suggestions?
5
Justin Young
I had two problems come up this morning after changing my Sketch file that I couldn't seem to find a solution for. First, I moved the position of artboards around and made a few tweaks to the designs, but nothing that I thought would effect Framer. When I imported the file again, a lot of layers were appended with a number, like "menu1" or "item3". In the original Sketch file, the names are "menu" and "item". This of course broke the prototype. I figured out a workaround but I'm not sure why the layer names changed during import. The second problem I noticed after importing the Sketch file was that any layer that I had rotated in Sketch, was positioned very incorrectly in Framer. The position was correct in Sketch, and Framer's inspector highlighting showed the layer in the correct position, but it was not rendered in the right position. I had to un-rotate the layers in Sketch to fix the positioning problem, which was different than how I wanted my design, obviously. Any ideas? The only thing I did before changing or importing the Sketch file was to add a license to Framer Studio, as it had been a trial version before that.
7
Stanislas Chaillou
Hi Framers! I am stuck with my prototype. It works this way: You can click on a square in the bottom right corner to create a blue dot. This dot can me dragged anywhere on the screen and will on DragEnd go automatically to the center of the screen. When it reaches the red circle in the center it disappears and is sent to a menu bar that we can open by clicking on the upper right corner. I want the blue dot (you ll see it in the prototype) to go to a menu bar at the end of an animation. I am using 'layer.off' to prevent framer from endlessly repeating the command, because AnimationEnd seems to be triggering my action again and again otherwise (task1.off(Events.AnimationEnd)). But my problem is that I want my blue dot to be able to go to the menu bar again, if it would reach again the red center. Here is my prototype: http://share.framerjs.com/qhzhbvlpqmov/ How can I keep listening to AnimationEnd and not have the my action being repeated again and again?
2
Henry Latham
Need a bit of help on this drag & drop prototype. I'm essentially trying to say that isDropped = true when the profile image on the right is dropped on or within 150px of the blank hexagon on the left. Not sure of the correct syntax. The commented (#) section is the one that needs correcting:
3
Johan Sjöstrand
So I'm using onTap on an object in a scrollable list.. but when I scroll it and let go it still fires the onTap event. I don't want it to fire when I'm scrolling the list. I've also tried onClick but I guess they are the same. onTap behave like I would expect onTapEnd to behave. I'm using it together with the Viewcontroller module to switch screens on the tap event.
3
Damiano Gui
Is it possible to have an element of my framerjs prototype link to an external url (e.g. open another web page with a different framerjs prototype?)
2
Victor Nogueira
Worked on the Apple Watch springboard this weekend, just for fun. Really love how unique this UI is, so thought it would be cool to try and rebuild it. I don’t even have the watch, so keep in mind the animations/behavior are not 100% accurate. Demo here: http://share.framerjs.com/rm1qcwj5x4h4/
8

June 07

Sayid He
Hey Guys, I found a not very friendly part, when I Import a wrong sketch file and then I delete the import code, but the layer information still retains in Insert > State / Event, and my version is V63
1
Koa Metter
Anyone have any demos with draggable objects that are "flingable"?
1
Nicolas Tilly
hi, it's me again ;) In this exemple, i try to make this: when i tap on circles in an precisly order: left to right (red, green, blue and violet) it show a button. I'm searching helping on that, and i want to understand conditionals :D
2
Jon Madison
Hi! Anyone care to share prototypes using voice as input? I have some ideas on how to achieve it, but wondering if there are some "standard" ways of doing so that people have come up with?
3
Jitendra Vyas
Best article ever :-) Read till end
7
Anton Jarl
I have a simple question. When I click (and select) the layers, I want the images on the right to change. To a check mark in the end but just changing it to a solid color would do for now. Anyway, I can't figure out how to clicking one layer could affect children or siblings in a for loop. I tried with childrenWithName but couldn't get that working. Any ideas?
3
Eli Showalter
Hey guys, I'm working with Jordan Robert Dobson's awesome textInput Module. I've been looking for a while but can't see to find an answer: how can i force a .blur() on the input to collapse the iOS keyboard? Obviously .blur is already a Framer object and so when I try to use that it throws me an error.
3
James Ryan
Hey guys (Koen Bok and friends), Any plans to introduce support for base64 data urls? Would be particularly useful here :) Anyone else come across a need for it? I can see Clint Andrew Hall had a go here but not sure how far it got http://framergroup.com/posts/633025340157874.html Cheers
5

June 08

Sayid He
When I create a Sketch file and import to Framer, but it always have white background, does anyone know how to hide or delete this white background?
2
Micka Tld
Hey Guys, Check out my colored rebound from Ed Chao Demo inside!
1
Ee Venn Soh
I am wondering is that possible to add an event listener to a layer and then have it trigger an event? eg: a button that will trigger a SwipeRight event? Something like elem.dispatchEvent(event);
2
Edwrd Han
Hey guys, I've got a very basic question but am having a difficult time finding a direct answer via web search...basically, I've created a bunch of layers, arranged them along x-y coordinates, and set their superlayer to the scroll.content layer I've created but when I scroll, they just bounce back to the original position. Any ideas? much appreciated from a struggling noobie...
19
Junhyuk Jang
I accidentally delete my email that include framer studio license. Where can I check my license ?
1
Holle Wilson
5 Excellent #AngularJS Tools That’s Barely Known. #WebAppDevelopment
0
Javier Eduardo Treviño
guys is it possible to use HTML and CSS in Framer Studio instead of Sketch layers?
7
John Marstall
Hey Framer folks. I'm trying to allow a module to call (when a layer is clicked) a function from the main app.coffee. The function would be up to the user to customize. I've read that this can be done by passing the function as an argument to the module. I'm very new to modules and so I'm not clear how or where this fits into the module constructor. I've created a pastebin with the relevant bits here: http://pastebin.com/svUN2JYP I know it's wrong. Any help would be appreciated. Thanks!
2
Eric Wyman
Working with Kevyn Arnott's iosKit and having trouble determining how to update the properties written in the modules. For example, if I change the rgba values for the NavBar backgroundColor directly in the module I can make the color anything I want. But can I do that right in framer?
4
Wei Pan
Hi friends, anyone experienced the same issue as I did that I can't mirror my prototype with either Frames or Frameless. Frameless can detect that I have Frame Studio running and asks for the connection, but connection fails. Any clue on how to solve this? Thanks! I'm using Framer Studio V63. Also tried connecting with USB, but no luck either.
1
Patrick Arminio
Hello everyone! For some reason require is not working for me, I get this error: https://up.kibakoapp.com/RCiyrJ9br2 I tried to check the generated code and there's this strange thing here: https://up.kibakoapp.com/szEwYoTyn3 which is basically the function which throws the error, but I can't understand why window.require has that code.
11
Chris Wang
Is Shift + Tab not available in framer studio?
2
Matias Seijas
Hi everyone! The project I've been working on all year for my master's thesis is finally complete. Tailor, the smart closet, automatically tracks your clothes and gives you smart outfit suggestions based on your preferences and the weather. I'm super excited to be presenting it tomorrow at the IoT Media Mash organized by the NYC Media Lab. Thank you all for your support and helping me get here :)
3

June 09

Hyengjoo Nam
Hey guys, I made a simple “downloading” animation working with SVG Paths in Framer. I hope this will help, enjoy it :-) http://share.framerjs.com/7m8ant4xaud6/ I studied SVG paths through below article! Thanks Josh Puckett. https://medium.com/framer-prototyping/working-with-svg-paths-in-framer-43d3c2d08adc#.38jyotjbd When it comes to bounce effect, I got a inspiration from Chris Gannon's work in dribbble. https://dribbble.com/shots/2154221-Download-Dot-Bounce-Success I’m a newbie here! so If you have some suggestions with better codes feel free to advise me :-)
15
Sayid He
Hi, need to help again. How to know if Layer is on which states?
1
Ee Venn Soh
My prototype has generated layers and layers created with code. I am trying to arrange the order of them. However I am having trouble trying to arrange them. Eg: An image generated despite having an index of 10 still sit behind a coded layer of index 5? It seems that coded layers can either sit above generated layers, behind generated layers but not in between?
1
Nate Sanders
Quick question about possibilities within Framer. Is it possible to change the text from a sketch import with JSON?
1
Damiano Gui
Hello again! Is there an easy way to detect if a tap happened outside of a layer, for example to close a side nav? I tried with a transparent layer covering the rest of the screen but it messes up with other tappable elements underneath, and showing/hiding it every time doesn't seem optimal.
2
Ces Cortez
Just wanted to share a layered animation demo: http://cesperson.github.io/framer-layered/ https://github.com/cesperson/framer-layered/blob/gh-pages/app.coffee And a little bit that I wrote about making it: http://franciscortez.com/framer-layered-animation/ Pasquale's video I referenced: https://vimeo.com/101885482
4
Preston McCauley
Are there any plans to provide an easier way for a developer of ios, web app etc to see the animation groups, or get the code snippets? This is one big thing we are missing across the whole prototype community. It's very important to streamline the communication.
1
John Marstall
Setting a simple boolean in a module -- how? My module exports a boolean in the constructor: @options.gloss ?= false exports.gloss Then uses that to set a layer's visibility. But changing the boolean from app.coffee has no effect. (Simple sample project attached)
10
Philippe Côté
Hello group, I'm trying to use AudioPlayer Module with the latest version of Framer and as soon as I make the progressBar appear, audio playback is stuttering. When I open one of the included examples -without- updating the libraries, audio plays fine. When I reopen and update libraries, audio stutters again. Is anyone having the same problem? Is there an easy way to fix this? Thank you very much.
4
Arash Lowni
How do I parse substring from two strings and add them together? e.g - string1 = "£1.50" string 2 = "£1.50" add them together to get... stringTotal = "£3.00" Thanks.
5
Nate Sanders
Anyone have any good ways to prevent a parent scroll component from scrolling when a child scroll component is scrolling?
7
Juan J. Ramirez
Hey Framers! Any good ideas to on how to open the native iOS mail client from a prototype. I tried: topBar.onTouchStart -> window.open("<a href='mailto:[email protected]'>John Frank</a>","_self") but that doesn't seem to work. Is there a UIWebView configuration that I need to pass?
3
Evan Knight
I have a prototype built, imported from Sketch with multiple artboards that are 640x1136. But I would like it to fit on all devices when I run it in Frameless. Right now it only fits on 5's. What do I need to do in order for the prototype to work on all devices? I tried making each artboard larger, with the content centered, and then ran Framer.Device.fullScreen = true, but the proportions are still off. Is there a way to use percentages rather than static pixel positions so the views will fit in each device accordingly? Attached is screenshot of what it looks like on 6+ (don't fit), and what it looks like on a 5 (fits). Thanks!!
8

June 10

Anders Tolborg
Hi chicks! What's the EASIEST way to animate an element to scale 1.5 and back to 1 when tapped?
2
Karol Piwowarczyk
Hello! Today when I am saving a Sketch file, I must back to Framer and click to import button. I would like automate this process. CMD + S in SketchApp should automatically import the file into the program. Do you have any ideas? Gulp, WebPack?
1
Raphael Dirr
Hey guys, I wanna do some routing stuff. Location dot is fixed in the center and onClick it will generate a new stop dot. The map in the background is moving and the green route between the dots should be animated from point to point. Any ideas for a smart solution?
3
Jon Arnold
What is the best way to make a ScrollComponent stop scrolling at a certain scrollY and make it stick to fixed value? I want to build a pull-to-refresh animation with the ScrollComponent
10
Isa Bison
Hm.
4
Bud Sigur
Hello everyone! Can anyone tell me why is scrollComponent on page three (Profile) misbehaving? When I try to scroll it It always goes back to initial position.
2
Márcio Ribeiro
I'm using Frameless to test my project and getting this error a lot. Any clue on how to avoid it? Prototype is also taking a lot of time to load, any tips on how to get better performance on this issue? Thank you!
2
Brian Byle
Hello Framers! Between beers I decided to post a lingering question: - I want to create a component - for example your standard row in an email app - it would contain a background, subject line, sender, time stamp. Standard stuff. - I want to create a new Framer project and add them as needed. My end goal is to create a set of components to speed prototype creation. I have limited knowledge of modules but understand how they work. Are modules the best approach? Ideas? Thx in advance!
4
Danny White
Know anyone (or teams) in NYC who'd like to speak or get involved in our Framer Sessions? Please let me know! We'd like to have more planned keynotes & topics.
0
Lee Jungyoung
Hi, after update V64, layer inspector pannel went disabled and couldn't get it back. Anybody same problem here?
6
Chris Keith
are there any good examples floating around of using a JSON file to populate data into a framer prototype?
2
Chris Keith
is screen.width and screen.height acting weird for anyone else? i feel like that value used to be defined by the device chosen but now it seems to be reading the value of my actual monitor
2
Patrick Rushton
Is there a keyboard shortcut to move a line of code (or a selection) up or down a line in the Framer Studio editor? Something like the Swap Line Up/Down keyboard bindings in Sublime Text.
4
Nate Sanders
Any ideas on best ways to stop a particular scrollComponent from scrolling at a particular Y position?
2
Sergey Nikishkin
Hi guys! This is a search concept with the text input module by Adria Jimenez and the first try of reasonable Framer JS using. prototype - http://share.framerjs.com/so0fjpg0ikb4/ dribbble - https://dribbble.com/shots/2747203-Search-Concept-for-Fashion-Store module on github - https://github.com/ajimix/Input-Framer
2
John Marstall
Setting variables in a module: Here's a simple project example that doesn't work as I'd expect. AFAICT, the console should print "external value" but it prints "internal value only". Any tips?
1
Javier Eduardo Treviño
how can i make an image take the entire screen? I wanna start working with images because importing my layers from Sketch gets too messy
2
Javier Eduardo Treviño
I am a beginner at Framer, So i'm just learning the essentials. My question is, Why if this Layer is set at .maxY, it doesn't go right to the bottom of the device?
2

June 11

Jinn Rong Wang
Hey Framers, can anyone help me with "mouseover" event inside "for" loop, right now it only response to the last dot while hovering all other dots. Check the source here(http://share.framerjs.com/7ahaxjgg69li/) if it would help, many thanks!!!
2
Alex Escalante
Hello I've been working with Framer the last few days without issue. Suddenly, today, after I added a new module from GitHub (ajimix/Input-Framer), Framer stopped loading any of my modules. I even removed the new module and still get the same error: Error: Module x.y can't be found (FramerStudioViewer.js:3090) The file framer.modules.js is not building, it only has the comment: // This file will contain generated modules from the project/modules directory Any ideas? I was running v64 when I stumbled on this, and then found out v65 was released. Even after updating, same problem…
4
Javier Eduardo Treviño
guys what is the correct Artboard size for the Nexus 5X
4
Jivan Shrestha
Just did "Hello World" in Framer, I will be blown away if there is any posibility to re use these code in real development.
3
Chris Keith
got some weirdness goin on with CSS in framer. if I implement CSS inline, the text-align works but if i pull in CSS from an external sheet the text-align doesn't seem to do anything. The rest of the CSS styles work fine though. anyone know of any work arounds for this? or is it just a bug?
1
John Grendon Enderby
Anyone getting delays when switching context from the prototype to the code? It's not unworkable, just noticeable. Seems to be since the code folding update.
1
René Galindo
Beginner question - I'm trying to design @1x in Sketch but when importing to Framer its too small for the Device. Is it possible to resize the device in Framer or should I design at a bigger resolution in Sketch?
1
Nikolay Kuchkarov
Is there any way to set a color for SVG image?
1
Javier Eduardo Treviño
what do you guys think about using Framer Studio by its own to design both visuals and motion and leaving Sketch altogether?
5
Brian Byle
Hello all. It's the weekend and the brain is a bit tired. Can you help clear something up for me? Created a class with custom properties: class Beer Constructor: -> @type = "IPA" @price = 5 myBeer = new Beer print myBeer.type This returns "IPA" as desired. If I remove the "@" symbol before each property it returns UNDEFINED. Why? Also is this the correct way to create a custom class with custom properties? Thx in advance!
2

June 12

Jinn Rong Wang
Hello Framers, I've been practicing Framer recently and really enjoy how it allows designer to compile thoughts into real prototypes! Just experimenting hover effects this afternoon and want to share with you: https://dribbble.com/shots/2770970-Dots-Hover-Effect Special thanks to George Kedenburg III & Jordan Robert Dobson for helping me earlier. http://giphy.com/gifs/26BRCi0NVIwRSF2XS?status=200
1
Jordan Robert Dobson
Hello Seattle! Join Moz, Stephen and Me in Seattle for our 13th monthly meetup where we'll peek at new features, see lightning demos, learn coding basics, and walk through advanced code with mentors. We’ll have local craft beer, food and fun prototypes to explore. Framer JS Seattle Event Page - facebook.com/events/896609417150985/
5
Jonathan Bowman
Wow! This program is amazing!
1
Josh Ackerman
Hello, I programmed a quick and simple fractal example in FramerJS, but the program seems to go into an infinite recursive loop. Since this should be such a simple program to write, as a sanity check, I successfully programmed this in python. So I am guessing that I am either missing some really easy bug in my CoffeeScript implementation that I subconsciously fixed in my python implementation, or there some strange CoffeeScript behavior that I don't know about. Here is the example. To see the bug you will need to uncomment the recursive calls in the drawHFractal function. Any help would be appreciated.
3
Vishal Iyer
Sketch import question- I typically import multiple artboards each with content height greater than that of the screen. Is it sufficient if the artboard is the screen height, or is it still needed to create a masking layer with the screen height?
4
Daniel Maniés
Hey guys! I wanted to try the MIDI Component, but something went wrong. This error occurs everytime I press a key on my MIDI board. What can I do to fix this? Thanks in advance!
5
Sarvagya Vaish
Hey! Is there a way to import Sketch mockups without using Framer Studio? Thanks :)
1

June 13

Evan Knight
Is it possible to draw-on a circle using a line/border? Trying to recreate this gif. http://i.imgur.com/XoABaGP.gif
25
Sanghyuk Jung
Hi Framers :) Above all, I really impressed with all of your artworks, appreciate to all. I have a basic but quite important question about the works. Which way you use to perform best productivity with Sketch? I have looked around some plugins in Sketch plugin market, not sure what makes better workflow though. Please share your workflow of Framer with Sketch :)
1
Ade Adegoke
morning all I have just finished my project on framer, how do I or where do I load it up to the web for my lecturers to mark it
1
Anton Jarl
Hello, A have a row item, which have a couple of states: "default", "expanded" and "selected". I can select the rows by clicking them, and expand them by clicking a button on the row. Problem is that when I deselect an item I set it's state to "default" which also makes it collapse into it's original size, even if it was expanded, because the default state also defines it's size. How would you solve this?
0
Joohee Park
Hi, Framers. I have a couple of beginner questions. I am struggling to align layers because I don't completely understand the concept of relative position in Framer. First, I want to set every layer's x position into center. so i set x position of 'card' layer to Align.center but it seems not working. Second, once I tap a 'card', it is not flipped at the first action but it is automatically left-aligned to the parent layer 'perspectiveLayer'. I guess this problem is associated with my first question. Third, in line 185, I had to add a repetitive statement to update the y value. If I delete the statement, y value is not changed. Anyone knows what mistakes I make?
1
Jenessa Johnson
Quick question, I am trying to create a swipe menu on my feed cards (specifically the first card 'Gizmodo') and I can't figure out the syntax for creating a colored card underneath 'Slider1'. I'd like it to reveal yellow, when the card slides left, still showing the icon underneath, and when it slides right, revealing another color like orange with the viewable icon. Does anyone have a solution?
1
Claire Goetschel
Hi there, I'm having trouble importing a Sketch file in that I'm getting an error in the inspector, "Layer or Artboard names cannot start with a number." Nothing in my Sketch file starts with a number. After I import, only 2 of the 16 layers show up in the code but not in the previewer. I can't share the files since it's confidential but has anyone experienced this? Also, I notice some other people have issues with layers positioned incorrectly in Framer when imported. I'm getting this as well. Thanks!
3
Javier Eduardo Treviño
guys is there a way to apply margins between scroll layers?
5
Ray Yip
#WWDC I think it's possible to prototype on iPad soon, maybe we can even write a Swift library with the same API as FramerJS then "import framer.swift"
1
Brian Byle
Good day Framers. I can create a layer with an html property to create basically a text layer. Easiest way to control size of text? Color? Font? I thought this would work but it does not: fromText = new Layer html:"First Last Name" color: "red" fontSize: 48 Thx in advance!
2
Chris Keith
has anyone done a module to get the dominant color from an image similar to this:
1
Joseph Kim
For this weekend, I've practiced framer to make this prototype :) just added fancy ideas beside emogy tap. Hope you enjoy! http://share.framerjs.com/hbrsn00o1djc/
5

June 14

Stanislas Chaillou
Hi Framers. Problem with my prototype. The video says it all. Once the 2 dots are stored in the menu, when I drag one of them back on the screen and I close the menu, the dot goes back to the menu instead of continuing to move towards to center. Also, the other dot is 'broken': won't move anymore. Help and explanations more than welcome^^ http://share.framerjs.com/mcq2co8o3lt0/
3
Rafael Conde
Can anyone help me with this? I wasn't aware there was a limit 🙃 Is there any way for me to *reset*?
3
Chris Keith
Is there a good resource for learning how to make my own modules? Most of the tutorials ive found assume you understand all of the syntax being used and im still relatively new to this stuff and have no real experience with javascript. like if i wanted to make a module that could add a circle shape layer to the center of my screen and had options for size and color that i could call within the framer prototype. looking for something basic to grasp the fundamentals a bit more clearly.
4
Sergey Voronov
long night for framers for recreating everything that was showcased at ios10 )
1
Jiaxin Chen
Please use SF Mono instead of Roboto Mono, it's amazing beautiful 💯
1
Javier Eduardo Treviño
really enojying framer, how do u animate something on load , a la jQuery
1
Ade Adegoke
When is the next Framer JS meet-up?
4
Mauro Sicard Salcedo
Hey there! Sorry if this is a nooby question, but here it is: When you prototype with Framer JS for example an app for iOS/Android, can you export that animations to XCode/Android Studio or something like that? Thanks to all!
8
Nicolas Tilly
Hi all :) is there a better way to do this : http://share.framerjs.com/q73sywe5t0eb/ My idea is that when you press long the images move and so they reproduce a movement. But I think use a lot of images (one hundred). Thanks !
2
Carlos David
Hey guys by any chance there exist a module for Framer that do this?
1
Javier Eduardo Treviño
how do I get a layer to stay still while I scroll my main section?
14
Gideon Carstens
Hey all! How do I get what in javascript would be 'document.getElementById('').clientHeight? Framer's 'height' property doesn't provide that. I want to make an expandable container and need to to know what the actual content's height is. In my sample (resize the window) - the printed height never changes even though some of the text gets cut off.
1
Eric Wyman
Having some trouble targeting a sublayer in an animation. There are several sublayers named "preview" across different groups. What is the best way to target them. Have an action navEmail.right.onTap -> that opens a set of checkboxes and should move all layers named "preview" as well.
1
Koen Bok
WWDC is always a great time for Framer because the WebKit team has been doing an amazing job improving Safari, and those changes will automatically land in Framer with the next macOS update. Apart from general improved JavaScript and graphics performance, I'm excited about these specifically: Improved inspector UI: https://webkit.org/blog/3574/web-inspector-interface-changes/ Way faster JavaScript: https://webkit.org/blog/5852/introducing-the-b3-jit-compiler/ Timeline improvements: https://webkit.org/blog/3996/introducing-the-rendering-frames-timeline/ Improved memory debugging: https://webkit.org/blog/6425/memory-debugging-with-web-inspector/ Improved breakpoints: https://webkit.org/blog/5435/breakpoint-options/ You can try some of these features today with the Safari Tech Preview: https://developer.apple.com/safari/technology-preview/
5

June 15

Chris Keith
2 questions: 1. how do i make it so that clicking on listItem switched the state of touchDot and 2. how do i write my if conditional to check that when i touch a new dot to change states, it makes sure that if there is another that's already changed, it reverts it back to default when i change states on the currently clicked one basically only one dot can be blue at a time
4
Kevyn Arnott
In honor of Google I/O last week, I started working on a kit to help make material design easier to incorporate in prototypes. It is still really early on in this kit's development, so there's a lot more to come. https://github.com/k-vyn/framer-material-kit So far it has: status bars, app bars, nav bars, snack bars, dialogs, banners, dynamic text layers, floating action buttons, raised buttons, flat buttons, material-styled ui for video layers, ink effects, and the entire material icon set & color palette. Enjoy!
16
Anders Tolborg
Is there some clever way of moving a layer relative to itself? Something more clever than doing "layer.x = layer.x + 10"?
1
George Kedenburg III
This will probably be huge for anyone who prototypes for iOS with video...
5
Kamal Nayan
What is the best way to scale prototypes to support multiple resolutions? If I'm working with 3x (Nexus 5x) in Framer Studio, I can't view the prototype in Nexus 6 (4x). The content leaves black space in sides. Thanks in advance.
3
Stevo Di Donato
newb question here. So I bought the Framer Book recently and eventually got to the variables sections. When would someone need to use string contatenation or interpolation when doing UI prototyping for an app?
1
Jiaxin Chen
V65: animation's time and curve has a clash. time doesn't work.
1
Javier Eduardo Treviño
How do I get the Artboards Template to listen to tap events instead of swipe
2
John Marstall
When using on.mouseOver, and the mouse rolls over a sublayer above, how do I keep Framer from considering that a mouseOut?
3
Marty Laurita
Hey all! Ember, the bluetooth coffee cup, posted an indiegogo video in which they briefly showed a brief mockup of their app: https://www.indiegogo.com/…/ember-temperature-adjustable-mug I really like this product and I wanted to create an original prototype concept. I have been working with the tap+hold+move interaction lately and this seemed like a great use case for it. You can find the dribbble post, as well as a link to the framer file, here: https://dribbble.com/shots/2759566-Ember-Concept Feel free to play with it, leave me your thoughts in the comments below, and hit that "L" button if you like :]
0
John Marstall
CofeeScript and scoping in modules -- If I make a call to Utils within a @ function, it seems to change the current scope. Can I call out to Utils while keeping the same scope?
2
Bud Sigur
Hi guys! Can anyone tell me how can I add a fade transition to the navigation bar on top? I'd also like to know what would be the best way to add a page indicator, so that clicking on a certain icon in the bottom navbar takes you to the corresponding tab? Thanks guys. :)
1
Koen Bok
Hey Intercom people, this is the text example I just made for you in the workshop here:
1
Juan Llerena
Good afternoon to everyone i have 2 invites
8
Francois Jordaan
Hi guys, I've used Framer for all of 2 hours now, and have an incredibly simple question. How do I contain one layer visually inside of another layer? (Equivalent of the parent layer having CSS overflow:hidden) In the "See how Framer works" video, the top and bottom toolbars are cropped by the iPhone canvas and disappear when they move off-screen, but I can't see what code is doing the cropping.
2
Todd Calvert
How can I move a background image in 200px increments? My code isn't resetting the X position of the background image. I am making a Dpad to slowly move a camera feed image. The arrow buttons are using states to show a hit state. I am using an animation with the the x position of camera feed image as a starting point and adding 200px. The animation fires once and moves the image from 0 to -200. The second time I click the arrow buttons the x position doesn't move to -400. It stays at -200. rightAnim = new Animation layer: cameraFeed properties: x: cameraFeed.x + 200 delay: Utils.randomNumber(0, 4) rightBTN.on Events.Click, () -> rightBTN.states.switch("default") rightAnim.start() print cameraFeed.x rightBTN.onAnimationEnd -> rightBTN.states.switch("inactive", time: .5)
1
Ehren Miller
Did a little project that uses a lot of 3d animation (RotationY, RotationX)--it works fine in the browser, but it was a pain because 3d objects disappear when viewing in Framer Studio (I'm using v.65). 1) Any idea why this is happening? It appears to be on ALL projects that use 3d. 2) Any feedback on the project? http://share.framerjs.com/l3o0iioo426g/
3
John Marstall
Can I reset a Utils.delay, or otherwise create a timer and reset it before it expires?
5
Brian Byle
All, Anyone know of any Framer training sessions near Boston in the near future? Thx
1
Jiwoong Lee
Sometimes when I need to resize layer to fit relatively to some text, it was bit frustrating, so I made simple function on the commute bus. :) Hope this is useful for someone here. http://share.framerjs.com/aoau0ez83eeq/
2
Brett Moody
Trouble with ScrollComponent. Hi everyone, I have three items in a scrollComponent and none of them are scrolling. Two of the items are supposed to be clickable. I have the scrollComponent set as a superLayer for all of them and I have scroll Horizontal disabled (I want them to scroll vertically). Any Ideas why this isn't working? Here's my code: The items Valencia, Papalote, and Liberties should be scrollable.
3
Francois Jordaan
Another simple question, if I may. How do I set the cursor position? I want a statement like if cursorY > 420 cursorY = 420 Obviously the 2nd line won't work, but I want to somehow set the cursor Y position to 420 so that I "trap" the cursor from going below that point.
4
Zichao Dai
I met an issues that, when i import Sketch files into Framer, if there is any ungrouped elements in Sketch (say, a label), these elements will appear in a random position rather than the its setup position in Sketch. Is there any nice plugin that you will recommend to use which can automatically group ungrouped items in Sketch to make the import process earlier? Thanks
0
Martin Halík
Hey, we are looking for a designers to join our team of 2 designers on Kiwi.com (with 2 designers on 100 developers is little bit hard)... #remote possible (visits required), paycheck 3k $/monthly (if we won't find anyone we will have to offer more), #analytics full access, #responsibility big part of it, #friend with developers and experience with real product + real Framer prototyping. #illustrations #prototyping #visual #analytics. Let's call it Full Stack Designer. Please message me on [email protected] – or just post here a link to your portfolio if you're interested. I'll try to respond here to. In the beginning of 2015 we were 30 employees and now we are over 600 and growing. We're based in Czech republic. P.S. Pssst we might be the next Booking.com :))) P.S.S. I know the salary is not SF level, but you know let's see if there is anyone who would be interested. Koen Bok I'm looking forward to post things like this on framer.com we would pay for it :))
0

June 16

Joshua Bradley
I'm unable to get Device.contentScale to work on actual devices. This makes it a bit impractical for demonstrating prototypes to clients, as devices that don't match the width of my sketch artboards won't display using the full screen width. This kind of thing: artboardWidth = 750 Framer.Device.contentScale = (Screen.width / artboardWidth) Works great in the Framer editor preview panel, but not at all when previewing on a device (whether in a Framer iOS/Android app or on a mobile browser). Am I missing something obvious here?
4
Arvi Raquel-Santos
Anyone out there have code that simulates a timer either counting up or down?
4
Ee Venn Soh
Can you use Framer's states to control a state of another element? layerA.states.add({ select:{ visible: false, layerB:{visible: true} } }); Something like that? Or it is not possible as states only refer to the element's own properties.
1
Wouter Walmink
Hey framers, I expected (Framer.Device.)Screen.width to take the phone's orientation into account. So for e.g. the iPhone6, it Screen.width would return 1334 when the screen is in landscape mode at the moment the value is read. Instead, it gives me 750. Is this expected behaviour and, if yes, is there any better solution to this than storing my own screenWidth and screenHeight that is updated whenever the phone orientation changes?
4
Brandon Souba
I'm trying to get the x & y position of the mouse when it hovers over an object. Any tips?
6
Anders Tolborg
Have you considered adding a wildcard option to the childrenWithName method? That would really help with lists of layers imported from Sketch.
4
Sean Alling
FEATURE REQUEST: Can we get .framer folders be arranged as .framer document packages! This would allow executable/bundle-like behavior for a framer "file" while maintaining the current package contents structure/hierarchy.... This applies to macOS of course... I made a framer file icon as an example (I can provide a .sketch app of this icon if necessary).
5
Jordan Robert Dobson
FramerJS Seattle Class Basics
7
Jelle Tuinhout
Does anyone have a good example to make a (http) post request in framer? Trying to connect a dynamic interface to an API to make a more convincing demo ... :)
2
Brent Riddell
Might seem like a dumb question but is there anyway to rig up the back button (or area the back button is in) for a tap/click event in the browser device in Framer Studio? I would make my own event for it, not expecting it to magically work as an actual back button or anything. I tried placing a layer under it but I guess since it's outside of the 'screen' it can't be interacted with? I'm making a site prototype for some user testing and a simulated back button would be good to have for the particular test. If it's not possible because of the screen limitation, I suppose I could make a custom device container and put a browser header image inside of the screen area, sort of recreate the current look, so then I can place a layer over it for the event, unless there is an easier way? :) Thanks!
1

June 17

Arvi Raquel-Santos
I have the same properties for a few elements. I assume I can write an array that will apply the same property to a number of elements? If so, how would I write that? I tried this but doesn't work... myLayers = [layer1, layer2, layer3] myLayers.opacity = .5 Any help would be great, thanks!
18
Jason Nelson
Hello. Question for the group. Is there a way to reference layers created within a function without storing them in a variable that was already declared? It's easy enough to reference layers if you just create them "manually". However, once you start creating them within a function you can't just reference them by "name". If I want to reference a layer created within a function, is there a way to do it without storing the reference to the layer in another variable that is able to be globally referenced? See abstracted example: http://share.framerjs.com/0oy6hy81pbgt/ TIA!
1
George Kedenburg III
There's still a couple of seats left for this workshop tonight if you're in the area! Come hang out! 🙌
1
Blaine Billingsley
Is there a way to receive keyCode events for command and alt/option keys? It seems that framer uses those for itself.
3
Marc Krenn
Hey guys, what's the best practice for classes with nested properties? The following appears to work but, idk, it looks kinda wrong to me: http://share.framerjs.com/6t247ful81ot/ Any suggestions?
4
Eelco Lempsink
Hey all! We just released version v63. For the full release notes see: http://framer.com/releasenotes/#v63 This is a bugfix release with minor feature additions: • Support for PDF and SVG image dropping • Visual feedback on JavaScript issues in the browser or on mobile • Fixed multiple undo issues with the editor • Improved looks for auto complete window
13
Jeppe Reinhold
I'm new to Framer JS, and I'm having trouble. I've created an artboard in Sketch with the iPhone 6 size (375x667), imported it to Framer Studio, and worked with it for a while. It scales fine in the preview, and in a browser, but when I go to the URL on a mobile (Nexus 5), It only fills up a quater of the screen, and the elements that are suppose to be outside the screen is visible. What am I doing wrong? I'm using: Framer.Device.deviceType = "iphone-6-silver" Framer.Device.contentScale = Screen.width / 375 thanks in advance!
6
Ethan Miller
Anybody else have problems working with asset files in a Framer project folder while the project is open in Framer? If I'm in Finder and try to open an image from an open Framer project, I often get System Error -1407. I don't get the error if I open the image using Photoshop's "open file" dialog, but i do get the error if i drag the file from Finder into Photoshop or Sketch (or anything else). I've noticed the error on a co-worker's machine too. Seems like a relatively recent issue. I'm on El Capitan.
3
Jon Madison
ouch. framer's "blow out entire directory and recreate on every save" cost me a prototype. :( Granted i was doing something "nonstandard" (moving directories from command line while prototype was open in Studio) but still. ouch.
5
조경준
Hi guys, I made a simple loader with floating animation in Framer. Hope you enjoy! http://share.framerjs.com/pgclfapizjb5/ I was inspired by Vitaly Silkin's work in dribbble. https://dribbble.com/shots/2651843-Fire-loader and I studied floating animation through below module. Thanks Jordan Dobson!! http://framerco.de/post/124353078989/video-walkthroughperiscope-heart-animation-module
4
Robert M
Hi fellow Framers, A few months ago, I linked to a personal challenge to build 100 prototypes in 100 days. Long story short: I built 50 prototypes in 50 days. I didn't stop halfway, as much as it might seem that way. Instead, I started prototyping video games. Since these take a bit longer, I ended that blog post, and started a new one: http://rmion.com/framer-for-games Feel free to follow along, download the prototypes, and especially offer new ideas for games or game mechanics to prototype. I will publish a new article each Thursday as long as I have something to build.
3
Sergey Voronov
anyone get experience connecting framerjs to node? i want to connect framer prototype to get input from one device and using node.js based module to pass data to external device using node.js compatible js library. i read about npm stuff itself, but as i understand u can only package modules, not the node.js itself thanx)
1
Alex Escalante
Framer creates a default .gitignore file inside the project directory. This file doesn't ignore framer.modules.js or manifest.txt, which are generated… shouldn't these files be ignored?
3
Blaine Billingsley
Framerinos! In practicing module creation (and with the help of sigurd mannsaker) I am making progress on a tooltip Module. I am having a problem with bugginess in the destruction of the tooltip. currently, I am animating out and destroying the tooltip on Mouseout of the parent element, however if your mouse leaves via the tooltip itself, it just sits there and doesn't get destroyed. Any advice on a more fool-proof way to dismiss them?
2
Joshua Bradley
Is there a way I can use the preview pane, hierarchical layer list and linting of Framer Studio, but write the code in a separate client like Sublime or Atom?
3
Ainee Sheikh
Developers community who like to share code snippets and get/give feedback. Join this :)
0
Jinn Rong Wang
Hey Framers, any idea how to separate the preview panel in Framer Studio? I'm working on a web project and can't view things on the right(i.g. x: screen.width * 0.8) in the preview panel(switching back and forth from "Present" is quite annoying). Appreciated!
1
Shaun Mosley
Question about layer names: In Sketch, my file uses dashes in the name, ex "PD-1" or "PD-2". Issue is, when I type "sketch.PD-1" it thinks I'm doing a mathematical operation. Is there anyway to make framer read the layer names as strings? Want to try other routes before fixing everything in Sketch.
4
Vishal Iyer
I swear I couldn't find information about this online, so asking here. I'd like to add my own snippets to the dropdown attached, but don't see a way to do it. I did see that you can add a .coffee file to the snippets folder, but that's a few steps longer.
1
Giel Cobben
Hey guys, Today I worked all day in Framer and Code Folding is awesome! I just wanted to drop a quick idea. I'm sure you already working on something similar but wouldn't it be nice if you could fold code inside folded code, I made a quick mockup. Keep up the good work!
2
Donald Pinkus
Hey guys - any thoughts about making a FramerJS stack exchange? There's been 6 questions posted to this group in the past 24 hours - and I'm assuming most questions I'd be asking as a beginner have already been asked here, but FB search can't find them :P
1

June 18

Andrey Yanovskiy
Recreated 3D Touch👇🏼 using Framer. This is kinda my first project, so the code is a mess, and logic isn't logical at all. But anyway, it works (at least on iPhone6S 📱) If anyone have the latest Macbooks 💻 with ForceTouch — please test it and tell me if it works. Special thanks to Sergey Voronov and Krijn Rijshouwer.
2
Andy Fuchs
After the update FramerStudio stopped making backups... Anybody?
2
Saber Khan
Hi everyone, I'm a noob with Framer while I play with one of the gallery projects, 'Sign-up Flow by Djorde Vanjek', but my tag-line image is getting cut-off and I can't figure out why. Any ideas?
1
Carri Craver
Anybody in Dallas using framer and have 1-2 hours this weekend to tutor me? I need help getting better with Framer. Want to show lots of interactions. Willing to pay market rate. I'm a UX designer with solid HTML & CSS skills but my javascript is rank beginner.
3
George Kedenburg III
=== 3d touch v2 === the reason i chose a doodle app for the first demo was because i was having latency issues polling the changes in force pressure... webkit normally only updates the "touchmove" event when the touch is actually moving (i.e. dragging). the doodle app forces you to move your finger, so problem solved initially. in order to recreate the app icon pop action, i needed to figure out a way around that so you get realtime force updates without having to move your finger. edit: heres the code (http://share.framerjs.com/7kzv1zm66l4k/) i think i commented it pretty thoroughly but lmk if you have ?s
10
Márcio Ribeiro
I’m trying to play an audio after shake my phone. The odd thing is: - audio with shake only play after I click the red button in Frames. - audio with shake plays on Frameless, but then Frameless refresh the prototype. - it works on safari too, but I can't use it because I can't control the native status bar color from iOS. Anyone would play a solution? Link:
0

June 19

Márcio Ribeiro
Hey guys, I’m trying to create an event based on shake. I use Frameless to test and the problem is that even when I set the shake-to-device off on Frameless settings, the app still refresh my prototype when I shake it. Anyone can help me?
1
Chris Chen
【 Make your Framer prototypes responsive 】 Hi all! Just want to share with you guys, what you can do to make your Framer prototypes responsive :) ! The idea was quite simple. All you need to do is to create a parent container and then parent your layers to that parent container, then do some ratio scaling :). Any other ideas and suggestions are welcome ! The article is originally written by 張哲維 , I just translated it into english.
6
Yao Jueyi
Hello, everyone. I'm searching for a mirror app for Framer Studio, which can reflect your design on your iPhone. Is there any app you recommend ?
1
Wez Elliott
Hi guys I'm fairly new to framer... quick noob question. When I import a sketch file into framer no matter how simple (see attached). The parent object doesn't appear to respect the name of the child objects... it appends a "1" to the end of the original name. It's like every object needs a unique identifier regardless of parent item Artboard1 > maincontainer Artboard2 > maincontainer1 Why is this? Is there a way to prevent it? Thanks in Advance
4
Tarun Chakravorty
Question on using animation states - If I want to execute a few statements after a state finishes, what would I need to write? Another way to frame this question is - how would I use "AnimationEnd" with a state?
1
Konrad Kolasa
Hey, I try to switch state for sublayer of some layer, but I get still the same error. At first, I tried to do this in loop for more layers, but simplified the code to maximum (I guess), but still the same error. Anybody know anything about this case? I can only add, that two state exist there.
2
Sergey Voronov
can error behaviour be changed a little? for example i am writing loops, doing identing a level, but because i havent written anything - i get error in indention, and this is not allowing me to insert code by clicking buttons on top, which is strange) i want to insert layer on this stage, so ending up writing by hands
2
Jay Stakelon
Hey iOS-using Frameristadoras - there's a new version of Frameless in the App Store and I would love your feedback! There are a lot of changes in this version. Generally, the whole thing is a bit more opinionated towards our use case as a companion app for Framer Studio, from the App Store copy to the feature set. Specifically, this release includes history + an easy way to access the last Framer Studio project picker, swipe down or up for controls, shake-to-refresh, a frameless:// URL scheme, a couple of usability enhancements, design refreshes and bug fixes. Please have at it and let me know your thoughts!
28
Zoltan Ray
Is it possible to use Framer's bezier interpolation to apply curves to Utils.Modulate? I'd like to dampen the mapping at one or both ends, similar to how you'd ease an animation.
3
Brent Riddell
Playing around with a game prototype (just for fun) and wondering why this loop only destroys every odd child, leaving only the even numbered ones and not all of them? If I print world.children[i] in the loop, it finds all of them, so I'm confused why it can't destroy all of them :/
5
Jorn van Dijk
We just released Framer V64 with Code Folds! Code Folds help you organize big projects and make managing a lot of code easy. Select a piece of code, right click and fold it away. Its a huge productivity boost. More details → http://blog.framerjs.com/posts/code-folds.html
31
Javier Eduardo Treviño
guys is there a way to prototype an app where the phone controls your mac tasks/views? i wanna be able to experiment with bluetooth or ip or something to be able to prototype an idea I have
2

June 20

Noam Elbaz
whats that button (to exit folds --> command + ? )
3
Brian Byle
Just a shout out to the creators of Framer. It is literally the only application I even THINK about using on Saturday and Sunday. (dare I call it "fun"?!) Kudos guys on the great work!
1
Charlie Lim
Hi, Framers! I've made a prototype for zooming a character. You can directly zoom with Pinch, ForceTouch, DoubleTab on the character and also it can be scaled with the slider. Can the knob of slider be moved as I pinch the character?
1
Jiaxin Chen
The connection with Frameless & Frames is very unstable, will it be improved?
1
Sindu Narasimhan
I have a layer, which should be draggable over a circular path, like this. Im looking for what draggable constraints need to be set to achieve this. Does anyone know of examples that I can reference?Thanks in advance.
6
Bud Sigur
Hi guys! Can anyone tell me how can I add a fade transition to the navigation bar on top? I'd also like to know what would be the best way to add a page indicator, so that clicking on a certain icon in the bottom navbar takes you to the corresponding tab? Thanks a lot.
0
Jins Kaduthodil
Hey fellow framers, Ive been trying to search for this for a while but still struggling. Looking to use a framer design I've been making and embed it into my website, but just the UI screen. How would I go about doing this?
3
Hugo des Gayets
Hi Team, Quick feature request: Ability to move the device in the view. When working on a tiny interaction on an edge, rendering at 100% always show the center of the device... Problematic for small displays :( Thanks!
2
Jason Nelson
I'm having an issue with 3D rotations conflicting with parent container layers. I have a (very hacky) 3D carousel that is invisible if I make the parent layer visible. Essentially the Z coordinates of the carousel all fall behind the parent layer. My question is, is there a way to mask this 3D space in a container such that I don't have to worry about the Z coordinates of everything else in my prototype? See this example: http://share.framerjs.com/onme4svvpmfx/ You'll just see a black box. Make it transparent to see the actual 3D carousel. What I'd like is for the carousel to live within the parent layer without having to worry about the parent layer's Z coordinates. Is this possible? TIA!
4
John Marstall
How can I store a variable in a module such that app.coffee can reference it? @options.myVar ?= true will be available within the module and can be overwritten during initialization, but I can't see how to query it from app.coffee afterward.
8
Jacek Stryk
Can I use variables to access imported Sketch layers? Example: Artboard 1 Layer A Layer B layerArray=["Layer_A","Layer_B"] layerIndex=0 sketch.layerArray[layerIndex].style.outline = "1px solid red" Currently, when I try to do that I get a TypeError: undefined is not an object (evaulating 'sketch.layerArray[layerIndex.style] When I'm trying to do is to dynamically change layer's outline when users press a key.
4
Saber Khan
Anyone Framers in NYC available to tutor me tomorrow with a Framer project?
3
Hendrik Kleine
Prototype of upcoming analytics app. I've been struggling a bit with charts in framer. Typically, as in this example at the end, I have multiple layers, which I want to animate in the same fashion, in sequence. For example, the first bar in the chart is: sketch.SR_Bar1.opacity = 0 sketch.SR_Bar1.animate properties: opacity: 1 delay: 3 the second sketch.SR_Bar2.opacity = 0 sketch.SR_Bar2.animate properties: opacity: 1 delay: 3.05 Terrible solution, I am sure :) Any suggestions on how to loop over many layers and perform the same animation, with a time gap between each layer? Any constructive feedback welcome. Thanks!
4
Poojan Jhaveri
How can I share framer prototypes over 50MB ? Can I just load it up on any website ?
1
James Hall
I've enabled pinchable on a layer, but if this were to be used on a multitouch table, can it support multiple pinchable layers at the same time?
1
Peter Gr
Hello friends - do you know if it's possible to make this html display a zero before the numbers 1-9?
5
Ethan Miller
It would be great if layer.copy() copied styles as well. Not sure what the rationale is for not copying those, but it would be super useful! We're working on a project that has a page layout engine with dynamic text, fonts, etc, and we occasionally need to copy pages around.
7
Lennart Schoors
The move event isn't triggered when using scrollToPoint. Is that intentional, and if so, how do I get around this? (I'm moving a logo when you scroll a layer, and clicking the logo scrolls the layer back, but the logo doesn't move back to the original position too.)
2

June 21

Hasque May
I'm new to framer and I was wondering how I would create a add/remove button. (ex: default state -> pressed state -> selected state -> selected state pressed -> default state)
2
Joshua Bradley
Hey, I'm sorry for the following potentially idiotic question... If I have an object which stores a set of dimensions like x or y, and their values, like 50 or 100, how could I loop through the object applying the dimension variable to layers (and applying a calculation to set new values)? This might be clearer with a bit of code. for layer in ƒƒ() originalCoordinates = x: layer.x, y: layer.y for dimension, value of originalCoordinates layer.dimension = value * scaleRatio The last line doesn't work, and I don't have the experience to understand why. If I swap that last line for 'layer.x = value * scaleRatio' it works fine. If I console.log 'dimension' it correctly displays 'x' or 'y'. This leads me to believe that there's some kind of variable 'type'. But how to change from one type to another?
3
Peter Gr
Hey everyone. I'm trying to sync a progress bar to the current time of a video. Does anyone know why this error is happening when I try to add an event listener to the video player?
3
Ben Ole
Hey everyone, If you are like me and can't wait for the new navigation component to release you can go and copy my little snippet and start today. https://gist.github.com/ben-ole/73be02ef3dedb853276a1bb49115680a
0
Javier Díaz
Two weeks ago, I was coding a prototype which involved using the Page component, and adding side arrows (next / previous) to it. I decided then I'd prepare a small example on how to approach that and pagination (both feats I missed in the Page component by default) Here's the small example. Also, sometimes, the side arrows don't work as expected, I think it has to do with how Framer handles the snapTo functions right after manually swiping the page. Is there any recollection of this kind of behaviour?
2
Cameron Burgess
I'm currently working on a prototype with a lot of individual elements (a calendar view). I'm wondering if it's possible when transforming individual elements in Framer to ignore some of the contents of a group. I want to be able to change the height without impacting/distorting the text elements. Does anyone know how to do this? Bonus: Leave object shadows alone too.
1
Jon Arnold
I want to add pressed states to my buttons: # Touchtargets States Pressed touchTargets = [btnOpenProfile,btnCloseModalWrapper] for i in touchTargets i.states.add pressed: opacity: 0.5 i.states.animationOptions = time: 0.01 i.on Events.Click, (event, id) -> id.on Events.TouchStart, -> id.states.switch "pressed" id.on Events.TouchEnd, -> id.states.switch "default" Initially it doesn't work, but when I tap a button the next time it does :-( Thoughts?
3
Kevan Lin
Framer newbie! I have a for loop that creates these buttons. Inside of the same loop I have an event listener for any clicks on these buttons and when there is a click, the .html should change and the color should change. For whatever reason, only the last button changes in state (but only turning green and not changing text). Any thoughts? Thanks!
3
Jochen Leinberger
I need to check if an object key changed and trigger some events if the event changed. Is there some function in framer or would it be better to use something like
3
Adolfo Bozovich
Hey guys! Quick question, I have a delay of half a second when I play a sound at the same time I click a button is there a way to fix this? Thanks for all the help!
4

June 22

Oliver Vaupel
Hi all, i have a question: if i have a SliderComponent on a page which is within a PageComponent. How do i prevent the page from swiping when i use the slider?
1
盛碧星
http://share.framerjs.com/96wjox79yrq0/
1
Blaine Billingsley
Does anyone have good examples of how to do little chained animations to product some of the effects like Animate.css has? Shakes, rattles, etc? I have hacked it but I've had a hard time dialing them in that keyframes seem easier for. How do people tackle this in framer? Do you just use keyframe animations?
1
James Martinez
Hey everyone! What's the best way to prototype for the Apple TV using Framer? I've created a custom device, but there's a zooming issue that I've discussed with Framer support that makes this unusable. :/
8
Dmitry Sholkov
Hey guys, do you guys have any tips how to enable Mouse-wheel on page component? We are currently trying to build a scroll-component that checks the delta of a scroll and snaps page component to the next page, but it gets really complicated and doesn't work as nice as with a mouse drag. Thanks in advance!
2
贾朝阳
How to write Framer JS in Windows? Thank you!
7
Yang Liu
Hi friends! New to framer. Start to learn it, I just download some sketch files from framerjs.com, but I found it could not be open(see the screenshot), can anyone help me?
1
George Kedenburg III
The other day I had some downtime and thought it'd be fun to build a Framer version of the awesomely rad music player that Tim Quirino recently designed and shipped (link in comments). Once I had it working, I thought it'd be even more fun to hook it up to the Spotify API so you could preview the player with (almost) any track you wanted to. It's not perfect, but I think it's pretty cool. I hope it helps out if you're just starting to get in to integrating APIs into your prototypes. Check it out! http://share.framerjs.com/cck1i1mbo1y0/
5
Hans Kristian Smedsrød
Hey friends! What's your take on working with a multi screen app? Let's say I want to use "pages", but I want these pages to be Sketch artboards with interactivity and not just images. Any best practices out there you'd like to share? Thanks!
3
David Baird
Hi All. New To Framer. Im a UX designer, Interaction Designer. Some coding experience for web. Main tools - Sketch, Axure, POP and Kony. Looking At Framer as an option.
2
Udi Gindi
Has anyone tried the MIDIControl component? It seems like framer studio does not recognise it.
1
Peter Gr
Hey all :) Anyone know how I could generate this kind of visual for an audio file? Thanks for your help!
2
Sam Thorne
Is it possible to do the OAuth dance from within a Framer prototype? How would I handle the callback? Any thoughts or anyone managed to do this before? I had a search and didn't come across anything.
3
Markus Manuel Burkardt
Hi all, I worked on a prototype all day yesterday..... this morning I re-opened the file and the imported sketch file first didn't react to the (very simple) code anymore and then the file didn't show up at all anymore (see screenshot). I re-imported the file in a new document and copy and pasted the code ... but nothing works anymore... any idea what might be the issue ?
4
Ash Adamson
Is anyone getting a lot of crashes since updating? I've crashed about 15 times today and I'm not doing anything that processor intensive or complicated.
1
James Martinez
Hey all! When working with page components, I've noticed that the last page is never displayed. I've included a link to the template project that Framer Studio ships with. http://share.framerjs.com/1c5ut0bley5b/ In this example there should be five pages, but only four are displayed.
3
Hongru Hou
Does anyone know how to change the font family and font size for the Framer Studio code editor? I just wanna use another font for programming. Thanks!
3
Stan Dézaid
Hi ! Not really a Framer question, but do you guys know any API service that allows you to integrate cool icons or dribbble-style illustrations to a web service ? Something like that, but with only high quality designs (eg without all the creepy black icons) : https://www.iconfinder.com/api-solution
0
Arturo Goicochea
Hey guys, need some help. Hope you can help :) I'm struggling with a draggable layer. I'm doing a few things with it: - On touch start: --- 2 layers animate (opacity 0 to 1) and appear --- the page component scroll is disabled - on touch end --- 2 layers animate (opacity 1 to 0) and disappear --- the page component scroll is enabled The one thing I can't get is to return the dragged layer to it's original position if it's not dragged to the end. Also, I'm having inconsistent results with the listeners, as sometimes the layers stay "on" (don't animate back to opacity 0). Here is the project: http://share.framerjs.com/9mmmibt5k9di/ Thanks in advance!
3

June 23

Poojan Jhaveri
Can you do screen lock on orientation in framer ? Right now I can set the device orientation but if someone rotates the device, the screen will rotate accordingly.
1
David Townsend
I need help understanding how Copy workers in Framer. I have a layer that has an image and two opaque layers over the plus an minus. I would like to be able to hit the plus to duplicate the layer in a scroll element. Or hit the minus to destroy the most recent layer. Is this possible? This is what I have. Any help would greatly be appreciated.
1
Shawn Elson
Hi all! I just completed a clock UI with adjustable day/night mode. Includes custom slider with an animated knob. Nods to Dieter Rams' classic Braun design, Robert van Klinken's Apple Watch Clock and Benjamin Den Boer's Slider Basics. http://share.framerjs.com/hqrz5455kf8y/
3
Yohan Baillet
Hey guys, I have a layer where a pinch event is used to zoom / resize and a tap event is used to do something else. The problem I have is when you stop pinching it auto triggers the tap event as well... so what is the best way to prevent tap event to happen when user is pinching on the same layer?
1
Jason Nelson
Has anyone run into the following issue? I'm running into an issue where I push layers into an array and then when I reference them later I run into an error. Trying to "print" the reference to the layer via the array results in returning this: [object Object] Instead of what I would expect, something like this: [<Layer id:1 name:layerA (0,0) 200x200>] It only happens in certain scenarios, and I can't share the project where it's happening. I don't know what I did to change what the output would be. Thoughts on how I did this or ways around it? Can I do anything to the "[object Object]" to find out what's inside it? TIA!
2
Sherzod Max
Made a healthcare chat prototype with Framer! So far, really loving the tool. Just wish it was easier to export prototypes to GIF. Takes a while to get the right quality GIF. https://dribbble.com/shots/2792863-Healthcare-Messaging-App-Urgent-Chat-Prototype https://vimeo.com/171801988
1
Patryk Adaś
Hi! I am pretty new to framer.js and javascript, in general. Therefore I'd like you to help me. I am trying to prototype attached png. The slider on the bottom works a little bit like a timeline in After Effects - I can move the whole element, but I can also change its width to zoom in / out the screen above the slider. I am thinking about coding it and that's my thought process: 1) I need to corelate the width of slider element to width of elements seen above. How to make them stack accordignly? Should I use array? 2) I assume that my slider element should consider three elements: a) Parent, that is movable b) Left 'dragger' c) Right 'dragger' Is that correct? Any advice would be way more than helpful!
2
Jochen Leinberger
hi is there a possibility to define sendToBack in a state? I tried: layerA.states.add stateA: sendToBack() which did not work ...
1
Sigurd Tapio Mannsåker
Maybe I'm just extra sleepy today, but I can't for the life of me manage to remove a layer's image. I could have sworn I used to just do layer.image = "" or layer.image = null, but neither works for me. Am I misremembering? Here's a simple example (give the image a few seconds to load and it should pop up, even though I've included both attempts at removing it): http://share.framerjs.com/eubiqk59tr2o/ Anyone?
2
Jordan Robert Dobson
🎉 Hey all! I'm featured in the latest User Defenders podcast episode where I talk about #UX #Prototyping and most importantly Framer JS. Take a listen. I'd love to hear your thoughts. http://userdefenders.com/podcast/022-the-little-details-can-make-a-big-difference-with-jordan-dobson/ Also, please help us get the word out and share this with your friends as well. 👊🏻
7
Rolando Pdl
I'm trying to find a way to share a framer js prototype privately. I was told that I can host host the files in a similar way we do with static websites... I've tried that and it didn't work. What's the best way to share a prototype privately? Thanks.
3
Fausto Pérez
Hi I'd like to share a little snippet to generate layers and target them by name afterwards. It took me a while to find out, so I thought I'd share as it might be useful to beginners like me: # Generate layers for i in [0...3] Framer["card#{i+1}"] = new Layer name: "card#{i+1}" # display names in layer list # Then you can target specific layers Framer.card1.y = 500
6
Mike Kotsch
Hi guys, is it possible to hide the layer tree in the center? I kind of like it, but I don't really need it right now.
2
Nikhil Venkatesh
Hey all! I've changed the cursor on my prototype to a pointer using document.body.style.cursor = "auto". Does anyone know if i can change the pointer to a hand when it comes across clickable parts? Thanks :D
7
Patryk Adaś
How to make it grow in other direction? Currently I am using 'width of purple element = right.togglex - left.togglex'
5
Yang Ziyi
Hi, I'm new to framer... I have trouble in using loop to create layers with different names. Can someone kindly help me?
1
Brent Riddell
Whenever I animate a ScrollComponent, like its position on the screen, eg if i have a scrollable layer off-screen initially, then once something is clicked its moved onscreen, the scrolling no longer works, is there something i need to do here to reset the component? I tired .updateContent() but that seems to have no effect :/
3
Javier Eduardo Treviño
Hello guys I'm really enjoying Framer. Can you name your favourite websites or resources for getting framer code snippets, example projects,etc. (other than this group and the official docs)
3
Adam Deher
Hello good people, I am building a prototype that does not conform to any of the default devices offered. So, I have my canvas set to "No device." But I would like the whole canvas to be visible while building out the prototype. I'd like to be able to set its view to "Fit" in the same way I could when using a default device canvas. Any ideas on how to make this happen? Thanks.
8
Davo Galavotti
Yesterday Dropbox presented a new set of features for collaboration. This great animation really helps focusing on the create / upload action. There is any way to animate the device size? Example: http://i.imgur.com/wGGusDE.gifv
2
Patryk Adaś
ha, I think that would be the last struggle to create my very first project in framer: I am trying to re-create the attached grid. Basically, after trying to figure out the proper way I thought about creating one row with random number of elements (cells), elements also have random width (50,300) and they are side - by side with the same margin amount. columns = Utils.randomNumber(2,5) for index in [0...columns] /// cell = new Layer ////// height: 50 ////// width: Utils.randomNumber(50,300) /// cell.style = ////// "outline": "1px solid red", ////// "margin-right": "50px" Of course, it's not working and I dunno why. I thought also messing with x position, but I can't get this right, as it'd be dependant on width of the element, which is random. Then I'd just copy the row, code quality may be poor, but It'd be working properly at least.
4
Kai Daniels
Is there anyway to print a layer's "true" value? For example if a layer is parented to another layer, print the value of the parented layer's Y position in relation to the ENTIRE prototype, not in relation to layer it's parented on? The inspector does this.
2
Donald Pinkus
Hey guys - is there a public place with all of the framerjs modules people are making?
2
Aaron Paterson
Hi everyone, How do you call multiple images inside an array within your 'images' folder? Download here http://share.framerjs.com/3jel3xwsxolu/
3
Vishal Iyer
While importing a Sketch file with an Artboard, how do you move a layer to the root level (same as that of the artboard). I see 'layer.superLayer = Framer.Device.screen' used in the Artboard template, but this seems to move it out of the layer structure altogether, which I don't want because I still want to be able to control its layer hierarchy. I've hacked it by separately importing the asset into Framer that brings it at the root level, but its not as efficient.
1

June 24

Michael McLaughlin
Hi everyone, I have an issue where I want to trigger layerA.states.switch(stateB) but when that animation is complete automatically move to stateC and then stop. Is this possible?
3
Judah Guttmann
Pretty new to Framer, I am currently using a LongPress Event and a Click event on the same layer. As soon as the LongPress Event ends it registers the Click Event. Anyway to have the two working together on the same layer or will they always cancel out? (unfortunately I cannot share the file)
2
Loretta J. Hickey
hi
0
Max Schwartz
Does anyone have a good resource for creating snippets? I used the example file but when I tried to create a more robust snippet I get an error that says: "Plugin error: { NSLocalizedDescription = "A JavaScript exception occurred"; }" Any snippet advice or more elaborate examples would be greatly appreciated. Thanks!
7
Jordan Robert Dobson
FramerJs Seattle Meetup 13 ⏲ Start 22 min in.
24
Craig Stanspliff
Hey everyone! I'm wondering if someone can help me. I am on a PC so I am using the text editor with Framer repos from github. I have it all working but I can't figure out how to get the proto to display in a device frame. I assume it's some kind of include at the start of the app.coffee file, but I am total amateur so need a little help. Cheers!
1
Blaine Billingsley
Apologies if this has been brought up before, but I am having trouble getting pageComponent to work as I expect. I copy/pasted the example of adding pages via a for loop directly from the docs http://share.framerjs.com/cj7t8brzoykn/ For some reason, the last page can't be accessed via swiping. This is also true for the PageComponent snippet that ships with Framer Studio. After pulling my hair out about it for several minutes, I tried the .updateContent() method and it works swimmingly, which is great. But I don't understand why I need to do that? Is this a bug? a feature? should I just be doing it a better way?
3
Sergey Voronov
hi guys , wrote a module for dragging object on circle, http://gph.is/28RBsae module info https://github.com/mamezito/dragOnCircleFramerJS. live prototype http://share.framerjs.com/wfzfredmtfub/ . u can also listen to angle variable, and use this for circular sliders
4
Malcolm Ellis
Hello All! Does anyone have an "orientation example" that works on the phone with the latest version of Framer (v65)? I've seen a few orientation examples out there, but they require updating when opening. Once updated there seems to be some background clipping occurring that prevents layouts from displaying properly. Here's an example file, http://share.framerjs.com/yeix6oo5lfwu/ To test, 1.) be sure you have v65 2.) open the file and select "try anyway" when prompted to update 3.) test the file on your phone, changing orientation (works for me) then try, 2.) re-open the file and select "update" and save your new version 3.) test the file on your phone - now you should see the clipping issue when changing orientation any ideas? thank you!
1

June 26

Pedro Grey
Hey everyone :) I'm trying to capture the cursor's coordinates during a drag event *right* when the cursor drags past a certain point. Is there a way to listen for event.x, and then record the Y value at the moment when that x value passes the threshold? I've tried using "if event.x == [threshold]" during "onDragMove" to pinpoint that moment, but that never seems to be triggered while I'm dragging. If I use the following code, the event.y keeps getting dynamically updated so that moment when the cursor broke the threshold is lost... X.onDragMove -> ...if event.x > threshold ......captureY = event.y
0

June 27

Michael Hirst
Anyone have an LG G5 template out there? I'm working on one, so I'll share it here if I don't hear anything. Cheers!
1
John Grendon Enderby
Hello folks! Was wondering if anyone has frame rate issues with animations in Framer when they have a video file embedded? Additionally we have used both velocity.js and rebound.js and found that neither seem to join all the dots with a Framer prototype when creating something for the web. Does anyone know if there are tutorials or demos of someone making a Framer prototype and then using those animations in either of those libraries? Would be great to find a workflow for the web.
0
Yang Ziyi
Hi, guys. I need some help on animation. I'm trying to make a layerA move from position X to position Y when click layerB, but I want to have layerA's velocity equal to 0 on some point of its route then continue moving. So it should move, stop then move with just one initial click on layer B. Thanks!
0
Amrit Mazumder
Does anyone know how to wrap text in Jordan's awesome InputField module?
5
Sarvagya Vaish
I think the latest FramerJS build (http://builds.framerjs.com/) is missing the Generator. I went back a couple of builds and found an older zip file that has a Generator, but when I try to run it i get this error - Framer Generator is damaged and can’t be opened. You should move it to the Trash. Any suggestions on how to fix this?
3
Joshua Bradley
Hi excellent people! Has anybody done any performance/stress-testing on sketch file imports? I'm experiencing some issues importing a 25mb, ~60 artboard sketch file. It seems to take a few minutes. Wondered if anybody knew of any generic performance gains I could make by making changes to the file (eg. shallower nesting, no images, etc). I'm just not sure what is expensive (from a processing point of view) and what isn't. Any suggestions would be awesome.
7
Eric Wyman
Trying to target a layer state used in a loop. Adding the state in the loop creation and trying to animate it when clicking on another layer outside the loop. Can't seem to make the connection.
3
Kai Daniels
Hey all, I'm trying to make an arrow-key based toggle which triggers certain states, though I can't seem to figure it out:
1
Samarth Bahuguna
When importing multiple screens from Sketch, do they need to be artboards inside a single page or can we access multiple Sketch pages (and their artboards) from Framer? I usually put different screens in different pages in Sketch, and different states of a screen in artboards within its page. Framer's documentation seems to suggest having all artboards in a single page but I couldn't find a definitive answer. Thanks!
4
Patrick Keenan
Is there a way to trigger the scrollend event? The situation is I have a page component in a scroll component. If the page is scrolled horizontally more than 30px I want to end the vertical scrolling component. Direction lock makes it so vertical scrolling is blocked, so both components become really sticky. Thanks!
3
Joshua Walker
Orlando, FL First full UX Day!
3
Hyengjoo Nam
Hey guys, This time I made a rating slider using gooey effect. I think it would be nice idea to show emoji when rating something. Try it out, and I hope you will like it. ** This works well with Safari. http://share.framerjs.com/pyec1qte4ca9/ By the way, I couldn’t use various background color, because of gooey effect. I think its contrast & blur factors affect background color…but I am not sure exactly. A few vivid colors such as red and yellow can be printed well. If someone can solve this problem please let me know. Thanks !!
19
Blaine Billingsley
Hey everyone, every time i share a framer url i am getting this init.js error. I found a closed issue on github that said this was from creating a file from an older version of framer, but I created this file from the newest version. I also tried "Save As" and still no dice.
1
Joohee Park
Beginner question, again! I want to change some particular words' color into yellow when i tap a sentence. Is there any way to do that without creating separate html layer with different color style and overlaying on an original layer?
2
Raphael Dirr
Hey guys :) I am trying to build a picker roll like the one in the picture. Has someone already created a picker roll? Didn't find any resources for this.
1
Ethan Miller
Anyone know of a way to force a page reflow?
4

June 28

Hyosook Lee
Hey guys! I tried the new Google fonts site can preview fonts on the various background colors. I also added more colors by change the shape of palette to circle. Thanks! You can try -> http://share.framerjs.com/ho2wj17u02lz/
5
Alex Pereira
Hi folks! Is there a way to subscribe to changes in Screen.width? I would like to make by web prototype pseudo responsive but can't find a way of doing this other than scheduling periodic checks via Utils.delay.
4
Andy Eng
How to create a fancy animation in framer?
1
Michael Boswell
Anyone here still use Cactus? Seems like it no longer compiles CoffeeScript/SCSS?
1
Juan J. Ramirez
A thought: It would be amazing if someone could work on an iOS app like Frames or Frameless with baked-in access to the camera API, Bluetooth API, etc. Of course, the app would need to provide an out-bound API to get those objects and make them available to be manipulated in Framer and injected into the DOM. I know this is not a trivial project but I don't think is impossible. Has anyone ever thought about this or tried something similar? I heard in the past about some users who wrapped their prototypes in PhoneGap to gain access to the camera. Perhaps someone is working on something like this. Anyone?
3
Dan Hedaya
has anyone done any web app prototyping using Framer JS? I'm very curious to see an exmple.
2
Tiffany Chen
Hi! When importing a layer from Sketch, I am trying to 1) scale the layer so it fits the screen and then 2) wrap the layer with a scroll component. It seems like what gets wrapped is the originally unscaled layer rather than the new scaled layer, though. Does anyone know how to address this?
8
Shaun Mosley
Just dreaming here... Can you get a Framer project to run on Android Wear (or Apple Watch) so you can test it in the real world? I'm envisioning something similar to the Framer android app or Framerless that makes Framer code feel native. Would love to know what is and is not capable. Thanks! :-)
4
Jon Arnold
Is there anything I can do to increase the performance on android devices? Scrollview is laggy even without content in it. Everything is so slow…
3
Aalok Trivedi
Not sure where the right forum is to post this, as Framer did not create the Framless app, but I thought I'd post it here anyway: It's reallyfrustrating when I'm trying to connect the Frameless app to my Framer studio when others are also using Framer Studio. It keeps connecting to another computer, and I can't select mine. Feature Request: Have the ability to select the computer you want to connect Frameless to (a la the Frames app)
1
Aaron Paterson
Hey Framers, I keep getting at error importing a file from Sketch any one having this issue? This is a first for me and before was never a problem... Help
2

June 29

Chris Camargo
Is there a quick and easy way to shift the position of the device frame? I want to move it around so I can do some detailed screen recordings.
2
John Charles McLaughlin
Is there a way to configure the Framer editor? For example I'd like to use 2-space soft tabs instead of hard tab characters.
3
David Louie
Adding a custom background image to a Project. Fun and done in 2 hours (fast for me). http://share.framerjs.com/grzx8630vcqm/
2
Junhyuk Jang
Hi, I made a rapid prototype about FB comment. It can make comment font size little bit bigger than defaults. http://share.framerjs.com/jkysriihntte/
2
Riccardo Buzzotta
Hello guys, So, I have two problems with this prototype (a Map Screen): 1. I keep getting an `undefined` error with cardSource.picture (L330, a JSON attribute), even though it works in the final prototype. 2. When I preview the prototype on my iPhone (Frameless App), the dot markers disappear while dragging the map (they appear when the map stops moving completely). This doesn't happen when previewing the thing on Safari/Chrome. Preview: https://dl.dropboxusercontent.com/u/206933874/riccardo/prototypes/map2.framer/index.html Source File: https://dl.dropboxusercontent.com/u/206933874/riccardo/prototypes/map2.framer.zip Could anyone help me? 🙏 (also, I wasn't able to upload it from Framer Studio)
1
Edwrd Han
Hey guys. I'm a relative noob here, and I'm trying to figure out how to work with draggable layers. I have a draggable main layer with a bunch of sub-layers arranged on it, and I would like to be able to drag/scroll through the sublayers by dragging the main layer. When I do not set constraints, then I can drag the main layer anywhere I want and 'scan' through my sublayers. The problem is when I reach the end of the sublayers, the main layer just gets dragged into no-man's-land. I want to limit the area where I can drag the main layer but when I put constraints on there, such as x, y, width, height, it just causes the main layer to bounce back to the x,y position of the constraints. I know that's what its supposed to do but is there anyway to get it to bounce back when it reaches past a certain point, but behave as if there are no constraints until then? Sorry for the wordiness... here's my test code so far...
3

June 30

Junhyuk Jang
Hi guys, happy new year~ Question: I want to show 'touch point' when record my prototype. So I made some trick. It works well on background, but doesn't work on layer.. How can I fix it?? Here's my code. # set stage bg = new BackgroundLayer # touch layer o = new Layer width:100, height:100, backgroundColor:'#2dd7aa' o.borderRadius = 100 o.opacity = 0 # set touch effect Framer.Device.screen.on Events.TouchStart, (e) -> o.bringToFront() o.animate properties: midX:e.offsetX midY:e.offsetY scale:3 opacity:0.5 time:0.01 Utils.delay 0.1, -> o.animate properties: scale:1 opacity:0 a = new Layer width:300, height:300, backgroundColor:'#28affa' a.center() a.states.add second: {rotation:45} third: {rotation:0} a.states.animationOptions = curve:'spring(200,20,0)' time:0.2 a.on Events.Click, -> a.states.next()
2
Francois Jordaan
What do people use to quickly export something created in Framer JS as a video clip? E.g. if I want a short screencast demonstrating an interaction that I can embed in a blog post, or even just a quick animated GIF I can paste into Slack.
6
Brad Ellis
Whats up with the framer/preview.png image? I try to change it, but it just resets to black when I save my file. Is that not a file I'm allowed to play with?
1
Justin Smith
Did somebody here created a prototype using the HighCharts.js charting library[1]? I tried to do it but for some reason, I can't output anything, despite no errors and all the correct dependencies included in my index.html[2] They have pretty neat bar and line charts that I would like to implement. I also tried to use d3 as a backup but unfortunately failed. ____________ [1] http://www.highcharts.com/ [2] HighChart.js itself and jQuery, all via their CDN.
4
Unbong Kang
It seems to be a bug. (PageComponent) Here I do not know if that report. parent in Layer... last page is not visible.(green page) - error Demo : http://share.framerjs.com/ey0u5wb5u86h/ - not error Demo : http://share.framerjs.com/k074xj7xj0kb/
2
Peter Gr
Hey everyone - I'm having a scrolling / screen height issue. I have one scroll component with multiple pages inside of it. The longest page seems to be setting the default height for the others, creating a blank gap at the bottom of the shorter pages. Any suggestions for how to fix this, while keeping the pages within the same parent scroll component? Maybe something with wraps?
2
Rafe Chisolm
Hey All, so I'm just getting started out with using Firebase with Framer thanks to Marc Krenn's awesome module. Showing data in the "print" dialog was pretty clear, but I'm just not understanding how to show that data within my prototype. Anyone able to show/explain how this works?
3
Yang Ziyi
Hi, guys. I finished my first mobile project on framer studio and want to present it on different screen sizes (the original project is made based on iphone 6 size). The method I know is to read the screen size and proportionally resize everything. Is there any suggestions to make it faster?
3
Jeffery Nelson
Hi Framers, Can anyone shoot me an invite to Dribbble? I would really appreciate it! :) Here is my works:
2
Sigurd Tapio Mannsåker
Hey dudes and dudettes, here's a module I made a while ago but only recently cleaned up sufficiently to share. The original use case was to add a spring to an eased animation for finer animation control, as discussed a while back with Jordan Robert Dobson, Marc Krenn et al, but I've also included gravity and generally found it to be handy for a bunch of things – hopefully it'll be helpful to some of you guys too. Some examples: http://www.sigurd.io/framer-hook/hook-example-spring.framer/ http://www.sigurd.io/framer-hook/hook-example-modulator.framer/ http://www.sigurd.io/framer-hook/hook-example-gravity.framer/ Get it here: https://github.com/sigtm/framer-hook
8
Jason Nelson
Hello Framerers! Looking for some insight on the best way write something that should be relatively simple. Is there a straightforward way to tell when an animation has completed on a one off basis? Using Events.AnimationEnd creates a listener that lives in perpetuity. Is there a built in way to have this only listen once then go away? Is there a simple way to destroy the listener? I don't want the listener to fire overtime the object animates, just the first time. Right now, I hack a Utils.delay event to match animation time, but if the animation is slowed down at all then they fall out of sync. I've tried Utils.debounce, but again, depending on if the prototype hits any performance issues, I run into unexpected behavior. Any thoughts or guidance is very appreciated. TIA!
1
James Martinez
Hey everyone, What's the best way to intercept touches for a layer? For example, I have backgroundLayer that is listening to touches, and cardLayer that is on top that covers about half the screen. I want cardLayer to listen for touches and backgroundLayer to listen for touches, but I want them both to respond to the event separately; backgroundLayer should not receive touch events when cardLayer is touched.
2
Dan Jones
Help! I'm trying to use NPM to pull in a module from our enterprise GitHub instance but I just get an "Error: cannot find module" message in the debugger when I try to reference it in my Framer prototype. I've tried following the Backbone example on the Framer JS docs website but get the same result. Any suggestions of where to start investigating?
6

Monthly archives

2017

2016

2015

2014

2013