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

What is Framer? Join the Community
Return to index

May 2016

May 01

Richard Sellies
I almost finally found a way to resize the imported image to scale on any device you view it on. Just not sure why my Yellow layer is not showing the full height of the screen. Does anyone know why? (Super happy I have found a fix for the image resize :) http://share.framerjs.com/iabrfyj87ntr/ # Import file "TheCollectiveExperince-v1a3" psd = Framer.Importer.load("imported/[email protected]") psd.mainPageContent.center() psd.mainPageContent.props = scale: Screen.width / psd.mainPageContent.width layerA = new Layer backgroundColor: "rgba(255,227,0,1)" opacity: 0.44 width: screen.width height: screen.height
1
Pavel Laptev
Hi-diddly-ho Framer!) Make some preloaders. It will be useful for prototypes with a lot of pictures) https://github.com/PavelLaptev/FrameLoader/ Im open fot suggestions and master on Github open for corrections)
1
Alex Chan
I just pushed my FramerJS boilerplate: https://github.com/alexchantastic/framer-bootstrap For those who like to stay in their preferred editor, but still want to be able to use FramerJS as exposed in Framer. Let me know what you guys think!
2
Jun-Seok Kim
I tried using 'vibrant.js' in framer.js. It's not cool, but working :) http://share.framerjs.com/hxyyudbx9492/ (I added saturate animation on image) https://dribbble.com/shots/2685664-Extracting-Color-Animation
2
U-Kyung Kim
Creating this refresh interaction, I practiced Utils.modulate, Utils.interval and coffeescript :) Share: http://share.framerjs.com/7pmw7d2y6eei/
11
Emin İnanç Ünlü
Hello Framers, I have a feature request: Ability to pause / freeze the simulator to be able to inspect layers. Sometimes we need to do inspection in a very specific time interval, like while pulling down the scroll content. But because scroll view pulls itself back, there is no way to inspect it in this interval. If we had the ability to pause the simulator with a shortcut or code, it would be great. For example: Utils.pause().
3
Andy Catch
Hi there, I'm working on a prototype where I was hoping to have the current date and time shown. I found an old project that uses Utils.domLoadScriptSync() to pull in an API, so I thought I could just use that with one of the many date/time data sources out there, but there's no documentation for this Util on the Framer site. But it still autocompletes inside the updated Framer app. I presume this means that it's been deprecated, but if not, where might I find docs on correct usage and parameters? And if it has, what method (s) might I use to pull in external data? Thanks guyzzzz!
2
Lea Marolt Sonnenschein
Hello! I'm new to framer, and I was wondering if there's a way to import an icon via Sketch and then change that icon's fill color when it's clicked via Framer. Thanks (:
2
Anton Outkine
Hi all! I'm building a relatively large (in terms of screen space) prototype in Sketch, with multiple elements, and I just noticed that upon import into Framer some layers turn into PNGs, and some turn into not very good looking JPEGs. I've no idea what's the logic behind it, so the question is — can I somehow make all my layers to turn into PNGs, or maybe I'm just missing something obvious?
1
Meray Uyanik
Hi guys;) Again me:) It's the new Payment Interaction prototype for Framerjs. I hope like it <3
5
Meray Uyanik
Hi guys;) Easy tiny touch for menu interaction
2
Elliott Malkin
Simple question. If I resize the Framer window, why would this event not be triggered?
5
Junhyuk Jang
I made weather icons with code, and I add animations to each icons. After all, code is powerful design tool. http://share.framerjs.com/703okqq7ba2f/ http://i.giphy.com/xT1XH3CON5gCNlxe0w.gif
3

May 02

Rolando Pdl
Noticed that importing my design from Sketch to Framer creates this line of code: sketch = Framer.Importer.load("imported/[email protected]") I'm not sure what the "@1x" part of the code means. I thought that by changing it to "@2x" would double the size of the image files but it doesn't. Any feedback will be appreciated... thanks.
3
Richard Sellies
Hi all, can't get my head around this. All I would like to do is make the share link have the full screen width of the device its been viewed on. Right now it stays at fixed width and on some devices it shows only half the width it should be. Can some help me please.
5
Noam Elbaz
what does "update Framer library" do ? (searched for it but didnt get an answer)
2
Aleksandar Zezovski
Hey all! I'm trying to create a collapsing modal window by altering the height of a layer (import from PS). When created in a test project, it all worked fine but when trying to put it in my main project, the layer is cropped both from the top and bottom instead of only from the bottom. Could it be a scaling issue or something?
3
Anton Outkine
I browsed through the usual places and can't seem to find any charting/graphing examples. Do you know of any, or, perhaps, there's a charting/graphing library that you successfully used in Framer before?
2
Fran Pérez
Small tip: Sometimes you need to access i from a function/event inside a loop, for those times wrapping the loop body in a self-invoking function that takes i as a parameter will do the trick: do (i) ->
4
Koen Bok
A few tips for working with masks (clipping layers) and rounded corners. You used to need a special force2d property for this to work, but in the latest WebKit this seems to be solved. So you can drop that entirely. If you use rounded corners with a mask, you can run into situations where the anti aliasing looks like it mixes up colors. You can avoid this by using an extra layer for your background color, instead of setting it directly on the mask. #protip #masking
3
Josef Richter
Sorry for asking this for millionth time, but still cannot find satisfactory answer: I'm drawing in @2x resolution in Sketch, i.e. 750x1334 iP6 screens. I import @2x. I have sketch = Framer.Importer.load("imported/[email protected]") Framer.Device.contentScale = 0.5 No matter what I try, the prototype looks EXTREMELY blurry in browser mirror or when I share it. It's unpresentable to the client. I am using Andreas Wahlström's ViewController plugin, if it has anything to do with it... Am I missing something or doing something wrong? Let's sort this out once for all and let's clearly nail it down in the documentation please :-) Thank you.
2
Amelia Liarakos
I've struggling with this for a couple hours and I can't seem to find a great example through Googling or figure it out on my own. How would I set up a looped animation that is applied to all the sub layers of a parent group? I'm trying to make all of a certain UI element pulse by scaling it up and then scaling it back down to the original size. But I want that animation to repeat indefinitely. So far I've gotten one element to pulse on the loop and I've gotten all the elements to scale up but not scale back down. I can't seem to get the loop to apply to an array of layers. Help?
6
Scott Simpson
I am trying to call an animation on a layer that is created by a function call. Any thoughts on how to make it work? http://share.framerjs.com/yjko0vd8cmp1/
3

May 03

Weston Thayer
I'm happy to share a little side-project with the community -- Framed is a fullscreen browser for Windows, in the same vein as Frameless for iOS. If you ever need to prototype for Windows Phone, this finally lets you hide all the browser chrome. The exciting part is that it also works on PC, Hololens, and Xbox (soon). You can design a windowed app experience that mixes with the real desktop or place windows around your room in AR. This is just the start, check it out at http://westonthayer.github.io/Framed/ and kick the tires if you can. I think there's a lot of interesting directions to take it. If you have ideas (or find issues), add them to https://github.com/WestonThayer/Framed. Happy prototyping :)
6
U-Kyung Kim
This is my first apple watch prototype. This is to practice a timer effect :) Share: http://share.framerjs.com/nr8g2g4cwq5p/
0
Matthew Martin
Hey everyone, I'm hoping someone can help me with this prototype. I'm trying to use the the modulate utility to make the red layer fade away as the blue list is dragged up. It doesn't seem to work when the blue layer is within the scroll component. My code is probably wrong when trying to target the blue layer inside the scroll component.
1
Joshua Söhn
Hey! I want to place a Framer Layer behind a Sketch Layer and I can't get "placeBehind" to work. Any ideas? I want the Layer in the List to be place under "Balance". I used: parent: sketch.Account_Overview_Available placeBehind: sketch.Balance
1
Geunbae Lee
Hi! I'm relatively new to Framer... I tried using modulate to change things around. But I have a feeling that I wrote more codes than necessary. Any suggestions on how to make the code cleaner and shorter? Thanks! http://share.framerjs.com/smm29ppfz5b3/
4
Silvia Bormüller
Hi Framers, what is the best way to work with several artboards imported from Sketch? sketch.artboardxy.visible = true doesn't work for me because my artboards are not hidden after importing?
2
Ivan Afandi
Hey guys! I'm new to the new framerjs studio. Want to ask about, how to show element base on the scroll position. Like after the end of the content, i want to show some widget. Thanks all!!
2
U-Kyung Kim
I think vrComponent is such a fascinating feature in FramerJS! So I made this VR interaction prototype as a practice :) [Share] 1) for Mobile phone: http://share.framerjs.com/rc0kgcfwubqn/ 2) for Desktop: http://share.framerjs.com/1zc39y76ouxo/ *Using mobile phone is the best way to check this prototype.
9
Kelly Keenan
Quick question, how do I animate a layer up 20 pixels, instead of specifying the exact Y position for it. Right now I have: $.button.animate properties: y:470 I would like it to just move up +20 instead of specifying the exact Y coordinate. Thanks!
1
Rajendra Goodwin
Come network with fellow entrepreneurs, designers, engineers and supply chain professionals touring Northern California’s LARGEST spring & metal stamping company, Scandic, expanded San Leandro plant. Since 1969, Scandic has been a leader in coil springs, fourslide stampings, precision progressive stampings, and CNC wireforming. Join the San Leandro Chamber Entrepreneur Business Forum for it's inaugural partner event with SYNCFAB. Like our FB Page After Registering!
0
Benjamin E Saravia
I just found how to animate an SVG from illustrator. Just replace the <SVG> part and add ID="pathID" to it. * You can play with the rest of the values. Framer file : http://share.framerjs.com/77lt8t9aufup/
3
Briana Winter
Is there a way to set Utils.cycle to jump to a specific index position within its array? I'm using it to cycle through a series of images while an audio track plays, but after the track ends I need to reset the cycle to start at the first image.
2
Saurabh Srivastava
Hi all, I am working on prototype where I need to use iphone touch ID event i.e I need to initiate animation through touch ID. I like to know if any one has tried or build anything using touch ID please share it , I will be very grateful for the help
1
Dave Crow
I’m seeing some odd behavior with this tablet prototype. Possibly a bug? I’m trying mirror the prototype on an iPad Mini, but it was showing the device frame instead of a fullscreen prototype. So I thought I’d work around it by setting it to go fullscreen when Utils.isTablet() is true. But then when I set the view scale in Framer to 50%, it zoomed out on the iPad. Change the zoom in Framer to 75% and it gets bigger. The view scale in Framer seems to be affecting the prototype on the device. This is only happening on the iPad, not my iPhone prototypes. Has anyone else seen this? And is there any workaround?
2
Blaine Billingsley
Still working through some 3d concepts to get my head around it. Ran into some weird artifacts again (different from last time). Since y'all were so helpful last, time, does anyone know what's going on here?
0

May 05

Lynn Liangying
Hi Friends, how can I rescale the whole file? I want to make it smaller, maybe 70%?
5
Márcio Ribeiro
Hey guys, I’m working on a prototype for an iphone 5s and a new moto G 3rd gen and despite I’m using the same code and assets, it seems that moto G is having some trouble to render the prototype (and is not a big one). The prototype performance on Iphone 5s is way better than moto G 3rd gen, but the moto G spec is better and newer than Iphone 5s. Is it normal? Am I doing something wrong or Framer prototypes have better performance on iOS?
1
Shane Brown
I've got a scrollable layer and am listening to the "change:y" / scrollLayer.onMove event, with a bunch of Utils.modulate inside for a sticky header. I'm having a lag problem since I'm calling a bunch of these Utils.modulate every time the change:y event triggers ( within a certain space) to scale / move my layers . I've tried modulo to reduce the frequency these are called, but the scrollY value isn't consistent (often something like 2001.2343234234), and Utils.debounce & Utils.throttle seem to break it for some reason. Does anyone have any tips for fixing this?
2
Chris Camargo
Is there a way to get 'velocity' for a layer that's animating, rather than a layer that's being dragged?
2
Raphael Dirr
Hey Guys, is it possible to give this green dot a location with longitude and latitude on the map (in this example I want to have the dot set on the position of NY). locationManager module is from: https://github.com/jonastreub/LocationManager THX for your help :)
1
Nicolas NapoliEmpoli
Hi guys, today I have published a handy resource for Software Product Managers. And, of course, Framer is included! :) PS: It's also currently #1 on Product Hunt.
1
Kyle Haapala
Hey y'all, I'm (very) new to Framer and I'm wondering if it's possible to export a GIF from Framer? I'm thinking of animating a custom loading spinner and I want a way to export it. Thanks :D
2
Sergey Voronov
Hi guys, I wrote an article on how I used SVG to create android unlock screen, hope you will find something useful there)
5
Amrit Mazumder
Hi Everyone! A while ago someone posted a way to load 'data' into a prototype by adding some params to the prototype URL. I am really struggling to find the post...does anyone have a clue? Thank you for your time!
2
Richard Sellies
How do I move a group of selected items at once. I'm not sure why its not working b1btnContent = [psd.b2btn, psd.b3btn, psd.b4btn] psd.b1btn.on Events.Click, (event, layer) -> b1btnContent.animate properties: y: 1000
2
Huy Nguyễn
Hey guys, Is there any way we could get to the origin state for a layer? So I have this case originState -> click(open) -> stateA -> click(close) -> stateB -> originState I thought that we could use card.states.current("...") but I don't know what to fill into the quote marks. Thank you!
4
Tisho Georgiev
Hey folks, I've updated my old framer-hints plugin to support Framer 3 / Studio and it can now be used as a module. It highlights interactive elements in your prototypes, so it's useful for presentations, or just plain debugging. https://github.com/tisho/framer-hints
6
Daniel Kamphorst
Hey guys, I was wondering: is it possible to change the content inset of a scroll component without 'resetting' the whole thing? It looks like the messages are going down (snap to a lower point), before they go up. [When fully scrolled down (begin state of the prototype), click the text field to see what I mean] Also, is it possible to only set the bottom content inset? scroll.contentInset.bottom doesn't seem to work. Thank you!
2
Chris Camargo
Having difficulty with snapToPage and the PageComponent: http://share.framerjs.com/3c2w9yyesnkz/ On line 140 in app.coffee, I assign a click event listener to each of my "tabs" in the PageComponent. If the PageComponent isn't scrolling when one of those tabs is clicked, I tell the PageComponent to snap to it. For some reason, snapToPage isn't working here when animation is enabled, but it WILL work if I set the animate boolean to false. What am I doing wrong here?
12
Ade Adegoke
I am trying to make prototype of argumentative reality app, does anyone know how I can make a prototype in FramerJs with the phone camera being part of the prototype?
3
Benjamin E Saravia
This one is simple and pretty, playing a bit with the colors and blend-mode http://share.framerjs.com/0fjpvuou8z5d/
3
Florin Nica
Hi everyone! I've been prototyping with something for the past couple of days and I came across an unexpected behaviour. When changing states, you can remove the parent, but you can't add it back. Is this a bug? Or am I doing something wrong and I can't see it?
3
Reshad Farid
Are there people out here who really convert their framer prototype into real code for iOS ? Do you have a video / tut on how u guys handle that? Cause I always restrict my prototypes with basic animations because I am afraid they would be inpossible to convert to code
3
Ahmet Bekteş
After having a cloudy Kings Day, I come up with an weather app idea for Nederlanders. Here you can find the sketchy-prototype: http://share.framerjs.com/vs25r1dzfgod/ Enjoy the sun If you have. https://medium.com/@abektes/catch-the-sun-b206e0568e90#.5zz7105tc if you want to read some...
2
Pavel Laptev
Hi, Framer! Make textGradient module, which adds a gradient to text. It works correctly with the TextLayer module. You can make a simple animation of the gradient, like "from -> to" for gradient size and position. https://github.com/PavelLaptev/textGradient-for-Framer.js
2
Anton Outkine
Hey all! Hi Koen! Following up on your suggestion that I post a tricky list/loop/state example that I see people stumbling upon and having problems in Slack — here it is. I commented on parts of code that seem suboptimal and removed all transitions and animations so this example would be as barebones as it can be. My question is how could this be done in a loop (and generally more elegantly in code) — there are at least two parts of code that could be improved. More here:
4
Arun Venkatesan
Anyone know when Figma import is going to be supported?
0
Jacopo Moretto
Hey all! I imported screens from my a Sketch file where I removed any background colour from export, but I see it in FramerStudio anyway. Do you know why? There is a way to avoid me to modify manually layer.json? Thank you!
3

May 06

Chris Chen
Q: A faster way to scale a circle with no blur? Hi guys, I just came across this problem that when I try to scale up my circle like 3x or 4x bigger, the image just went blur. The reason I use scale instead of increasing width and height is because I want the circle to enlarge from the center. I just wondering is there a better way to make this possible instead of creating a bigger circle first and scale it at initial. Thank you!
3
Jacky Lee
Pushed a little fix so the example isn't getting clipped by the background layer. Thanks Jordan Robert Dobson for the solution! ✌🏼
2
Benjamin E Saravia
Quick question: does anybody have recreated something similar in FramerJS? * Thanks
3
David Politi
Hi SF Framers! Framer Sessions 05 is happening on Tuesday, May 24th, at Über HQ in San Francisco. Looking for volunteers and workshop leaders. More details here:
2
Ali Sanaknaki
Hey guys I have a question; how am I able to make a layer, when clicked would switch to a specific page? By clicking button3, would make pages scroll to page3. Thank you!
1
Peter Michael
Not sure if this is a bug, or I am an idiot, or both. But importing my sketch file brought in the sticker sheet with it from Sketch! Once I deleted the sticker sheet and re-imported the Sketch file to Framer, it worked fine. Something I missed, or just a bug?
1
Robin Ait El Alim
Hey guys, Is there a way that my BLUE layers inside of my GREEN scroll component have a position x and y not relative to the scroll component itself ? Basically I would want to have the x of my blue layer be 550 ish instead of 10. I tried to change the superlayers but if the scroll component and the layers didn't have the same superlayers, it doesn't work or maybe I did something wrong. Thanks for your help :)
6
Kevin Cannon
I'm seeing a weird arefact when I "flatten" a Sketch group using the * character. See attached pic. The white box is nowhere in my design. Framer file: http://share.framerjs.com/1ya73gvju2ok/ Sketch file: https://dl.dropboxusercontent.com/u/89613/Framer%20Header%20Artefact/test.sketch Any ideas?
1
Danny White
Hey friends. That time of month again. A lot of newness to chit chat about! Come rep if you're around NYC!
1
Marc Krenn
Classic case of seemingly trivial task turning out to be not so trivial to solve: http://share.framerjs.com/oozti4njlpd5/ 1) Ping immediately onTouchStart ... 2) ... and every N seconds after (using Utils.interval) while the button is still being pressed. 3) Reset Utils.interval to prevent "interference". #ping #hold #reset #interval #UtilsInterval
4
Ronan Rooney
For designers working on teams, what strategies do you use to collaborate on FramerJS prototypes? Is something like github helpful? I'd love for my teammates and I to work on the same FramerJS prototypes at the time without overwriting each other.
1
Samara Mohammed
Why am I having trouble interacting with text on layers imported from Sketch? There are a number of times where I specify an interaction (such a clicking on a layer), but it seems like I have to click on a specific spot on that layer for the event to register. This is a particular issue with simulating hyperlinks (clicking on text). Maybe the target is too small to click on? Any help/tips would be much appreciated.
2
Didi Medina
Hey fellow Framers, I'm trying to build out an interesting interaction and need help figuring out how to approach it. I sketched out the different states in the photo attached. Let me know what you think the most intuitive way to approach this would be :) Thanks in advance!
6
Mike Hughes
Save the date and signup to attend the Melbourne Meetup, next Thursday night. Bring your questions, cool things to show & tell or just yourself for some food, drinks and talk about our favourite prototyping tool. Hop to see you there :-) PS. Message me if you have and questions or suggestions.
1
Christian Selig
Get ready for some likely-silly questions. :) - Once I've created a layer using Auto Code (command-shift-N) how do I reselect it to edit? I can't seem to figure this out. - If I want to test an interaction on my iPad, how do I do that full screen? If I choose the "iPad" layout in Framer it mirrors the border in the web/iOS preview, which is kinda odd.
3
Ermal Turkesi
Hi there... I was wondering if it's possible to stack layers, similar to how you would have position: relative in html? Thanks!
4

May 07

Brian Byle
Hello fellow Framers! Basic but important question concerning Framer & Sketch: - I have 10 Artboards imported from Sketch - Artboard 1 (on bottom) has a button - Artboard 10(on top) has the same button in the same exact position - Buttons have different names in Framer Here's the rub: if I hide Artboard 10 ( opacity0), and I try to click the button on Artboard 1, even though Artboard 10 is invisible, IT always receives the CLICK event. Since opacity 0 is not working, how do I "hide" to top Artboard so it will not receive the CLICK event and the lower Artboard will? As always thx a ton in advance! Brian
4
Jonhenry Righter
Is anyone else encountering trouble with the player example on the Framer Gallery page? http://framer.com/gallery/preview/#video-player.framer It's hiccuping every second upon playback. Commenting out the below line allows for smooth playback, but breaks it in other ways.   progress.knob.midX = progress.pointForValue(this.currentTime) Any advice?
3
Georgemaine Lourens
Hello all. I'm running into some problems with the pagecomponent.wrap(). Everytime I wrap my first artboard into the pagecomponent, every element seems to scatter all over the place. Double checked the sketch file, clueless at this point. Anyone?
2
Silvia Bormüller
Hi guys, I would like to create a chained animation on an array. What is the best way to achieve this? I have an array with circles and two Animations. How can the array be set in the animation? It only works with one layer for me..but i would like to call all the layers in the array. Thx
3
Brian Byle
Hello again. I have the following code: button1.states.add off: opacity: 0 on: opacity: 1 button1.states.switch("on") print button1.opacity My print statement reads "0". ??? If I just switched to on why am I not seeing "1"? The code is written exactly as shown above with no errors . Thx in advance! B
5
U-Kyung Kim
I made a download icon today for some more Framer.js animation practice! Share: http://share.framerjs.com/wr5q48i8tnap/ P.S., I would like to start a dribbble.com account, but don't have an invite yet. If anyone could share one with me, I would greatly appreciate it! Thank you to the FramerJS community! :)
7
Scott Simpson
How would I set the child parent relationship when creating layers with functions? http://share.framerjs.com/c7qs64ljye8h/
3

May 08

Tomonari Takahashi
Hey all! I have a simple question about the screen transition. During prototyping, we usually make multiple screen for example timeline screen, detail screen and so on. And we will probably test the screen transition. At Framer, how can I make the screen transition? I think that when there are more than three screens, it is hard to manage the code.
2
Ed Lea
Framer 101 question: How do I close the layers column?
1

May 09

Fran Pérez
Quick question: how can I detect/fire TouchEnd when it happens outside of the object?
5
U-Kyung Kim
I practiced more of Framer.js today and made a social button animation :) Share: http://share.framerjs.com/1m7q7xefvn4d/
4
Yi Hao
[Need help] Hi there, I am having a problem with my prototype. Here is my prototype link: http://share.framerjs.com/emnikxzwxtxd/ If you drag down the card at some point(e.g card.y > 400), the envelop will automatically go to the top of the screen. The problem I have right now is the envelop can go up to the top when you drag the card at some point, but it just goes back when I release the mouse. I used the on Events.move function. Thanks a lot in advance for anyones help!
2
Richard Sellies
Hi all, I'm trying to swap between two states (Or animation) every time you click on a object. But I'm not getting the code right. Ive look everywhere and still not understanding it :/ nav.menu.states.add menuOpenAnimation: y: -0 menuCloseAnimation: y: -1485 nav.menubtn.onTap (event, Layer) -> if nav.menu.states.next("menuOpenAnimation") else nav.menu.states.next("menuCloseAnimation")
1
Richard Sellies
Trying to make onTap the green box (layerA) animate. When the animation is finished, layer be animates with onAnimationEnd function, but some how its not working. Can someone please help.
1
Tab Chao
Is there a way to animate color transition of a layer from bottom to the top? I mean, not simply fading colors.
1
Ayushi Sinha
[Need help] I created a prototype for iPhone 6. How do I make it work on Nexus 6? The proportions are really off(prototype on Nexus is occupying only half of the screen) I tried: Framer.Device.contentScale = (Screen.width / artboardWidth)
2
Kees Plattel
How would you construct a 2 dimensional array? I have to randomly select a 'question' and serve 4 options to answer that need to match the question that need to be displayed. Any tips would be helpful!
10
Way Chang
Hi all! Yesterday I was really excited to see Jordan Robert Dobson’s post “InputField module” which is about using native camera & camera roll on mobile device. It is really useful to the project I am working on. So I took a part of my project to test the module, here is the result: http://share.framerjs.com/7zjud04ss7rg/ Be aware that some portrait photos will be rotated at 90 degree, not sure why this is happening. Hopefully in the future we can access the camera directly instead of showing up the action sheet and also the photo gallery can be called separately Once again! Thanks to Jordan Robert Dobson! And thanks to Framer for giving me a chance to learn coding. It’s not easy, but awesome fun! Anyone is interested in Framer in Taiwan Area. Please feel free join our newly opened Framer JS Taiwan Group ! 如果有台灣的朋友們想一起交流的話,歡迎到這個社團 Framer JS Taiwan https://fb.com/groups/framejs.taiwan
3
Brian Byle
Hello again! For testing, I was looking to write a statement that would print back the name of whatever layer I clicked in Framer. What I tried: layer.on Event.Click, -> If this.name == "LayerA" print "LayerA" else print layer.name Surprise this doesn't work. Again the goal is to return the name of whatever layer was clicked as a print statement. Ideas? That again in advance!
11
Kai Oliver Reuter
Hey all! I have a question for using scroll.closestContentLayer with an if statement. For example: if "scroll.closestContentLayer" == "id:26" --> do something. Im looking for the right syntax. Thanks!
3
Koen Bok
We're almost ready to release a new bugfix update. It features an updated V8 for speed, better backups, framer.js fixes, the mysterious window close fix and much more. You can help us test by running the beta. For a full changelog see the update window. http://framer.com/beta
3
Daniel Specht
From time to time I try to use Framer JS as a website prototype tool. It's not really made for web prototype dev. even if there is a option to choose "Webbrowser" as a device but. Unfortunately it doesn't makes much sense to use it but I already described this.. Mirroring works better but you can't refresh the webbrowser, and see the changes. Does anyone know how to bypass this? Another problem becomes apparent when you try to make e.g a 1440 x 900 px web prototype. Imagine you have a 13" Macbook. There's no chance to see what you are doing on the other side of the canvas (see image). Any idea if there is some kinda "hand-tool" like in Photoshop?
4
Bimma Bimma
This is a fairly complex Framer prototype that runs great locally and reasonably well over the net on a desktop browser but is somehow borked when viewing on an iPad. Can anyone offer any suggestions as to why? Also: easily the most elaborate Framer exercise I've done. 1200 lines of code. Getting better at more comprehensive prototypes - well beyond just spot interactions. http://www.applied.design/#work/app/intelevision2
4

May 10

Ermal Turkesi
Hi there... Is there a way to secure my project from having it be exposed to other people on the network? I am able to see other peoples work on Frames and I'am assuming they can see my work as well and I don't like that. Any suggestions? Thanks.
1

May 11

Benjamin Den Boer
Hey all! Today, we’re introducing the Framer Gallery. This replaces our Examples page and showcases the latest featured designs, which we’ll be updating frequently. Browse through all the beautiful work people are making in Framer. Discover new interactions and find inspiration. http://framer.com/gallery/ Featuring amazing new work from George Kedenburg III, Robert van Klinken, Balraj Chana, Amine Zafri, Djordje Vanjek and more! :-)
4
薛鹏
Hi,everyone I've been following this Learn Framer 100 prototypes in 100 days project for a while, and thanks for Robert's share, it's really helpful and an awesome way for learning Framer. And I now have a question about Day 27 project(http://share.framerjs.com/8mdwnt7f0332/) . when you hover on a layer which close to the ScrollComponent’s bottom, the layer expend but will be covered by the ScrollComponent. how to get the layer up to show all content when hovering on it?
1
Rolando Pdl
Hello Framers! How can I add 2 events to the same button? I got a hamburger button that on click/tap becomes an "X" and opens the navigation menu, that's the first event. I need to add a second event to the same button that on click/tap will change the "X" button back to a hamburguer and closes the menu at the same time Any help will be greatly appreciated.
4
Andrea Trabucco Campos
Hi! has anyone encountered this error before? I'm simply importing from Sketch with this layer system! I feel like the answer might be obvious — any help would be greatly appreciated!
1
Robert Thompson
Framer promotes the use of coding as part of the interaction design process, yet there's this argument; if anything will Framer JS support ES6?
3
Jordan Robert Dobson
Hey everyone! I'm doing an interview tomorrow with User Defenders and would love to answer any questions you have on design / UX / and prototyping. I'll be talking about Framer and how it's apart of my workflow. Feel free to leave questions here or on Twitter. :)
2
Eli Showalter
There's a bug I've noticed recently: Sometimes after I've created a lot of layers in Framer, if I scroll too quickly through the Layer Preview panel to the bottom, the layers get masked and I am increasingly given a smaller and smaller "window" to view my layers. I can only reset the Layer Preview panel by closing out of that prototype and reopening it. Here's a link to the prototype where this is happening: http://share.framerjs.com/x557rqmz8kea/ Not sure if anybody else has run into this issue or knows a fix. Keep up the great work Framer team!
1
Thomas Offinga
Is there a way to overwrite the default animation speed using a Slidercomponent? Whenever I do this, it doesn't seem to get overwritten. animationspeed = 0.4 Framer.Defaults.Animation = > time: animationspeed animationSpeedSlider.on "change:value", -> > animationspeed = Utils.round(animationSpeedSlider.value, 1)
2
Johan Sjöstrand
Up and running with the new view controller by Andreas Wahlström. Works great! I want to listen and fire an event right after a new view is shown. Is that possible?
5
Jun Xiu Chan
any framer js editor app for iPad?
1
Sigurd Tapio Mannsåker
Is there any way to stop the Sketch importer from numbering layers with conflicting names? For large projects, it gets hard to come up with new names for every "icon", "label", "button" etc :) I personally prefer using generic names for stuff and using childrenWithName() to navigate the layer hierarchy.
1
Veronica Jimenez-Miller
Happy Monday Framers! What's the best way I could give shared properties to layers? My code is like this : card_shadows = ["card_left", "card_middle", "card_right"] card_shadows.properties = shadowY: 10 shadowBlur: 16 shadowColor: "rgba(0,0,0,0.4)" This is not working ;'/ Do you have any suggestions? Thanks!!!
4
Sigurd Tapio Mannsåker
I'm having issues with a Sketch mask that seems to get ignored on import (trying to force a layer to import at a certain size). Are there any known bugs regarding Sketch masks? It works fine in other groups in the same document, even when I just move the same mask layer to a different group. Utterly confused.
1
Geunbae Lee
Hi, I'm in the process of creating my first-ever mobile app (weather app). I've used Framer and Sketch to create this prototype which still needs a lot of work done. While creating this, I came across a question when I imported my designs from Sketch to Framer. Is it wiser to import the PNG files created from Sketch to Framer rather than importing the whole Sketch layers? I've tried importing the Sketch Layers directly and it just created a whole mess because there were a lot of layer groups that I didn't end up using but needed to organize. Also, in the Weekly Forecast section, I'm trying to place 5Day Forecast as a default and when pressed the 10Day area, 5 extra days are shown. How should I do this? http://share.framerjs.com/379o7bd6dazz/
1
Sergio Majluf
Some say that popping plastic bubble Wraps help release stress. I had no Bubble Wrap around, so coded some for myself. Either that, or just a self-challenge: code a simple interaction with audio feedback. This could certainly be improved, but it´s a nice quick demo (under 45 lines!) of how fun Framer can be Live demo: http://share.framerjs.com/u2akes4atb3g/
3
Bogár Bence
aloha! i would like to embed my framer prototype in a medium article. marvel has a pretty nice integration, i need something like that. can you share your experience and recommend a quick, easy and nice way? thanks your responses! p.s. i don't wanna use after effects.
3
Jiaxin Chen
Hi Framer Team, I'm writing an Chinese ebook called "Framer for Designer" for designers in China. One thing draws my attention is Framer Docs' code highlight theme. Because I want my ebook's code block looks like the docs. It's amazing beautiful and useful. I can get theme's hex value in doc-style.css, but when I use "highlight.js" to detect "CoffeeScript in Framer"? Unsatisfactory. This script can only detect a little. So, can you guys teach me a way to detect "CoffeeScript in Framer" accurately? Or tell me the JS you recommended? Sorry for my poor English~
2
Sergey Voronov
small reminder for Framer people that can be near London this weekend - we will be glad to see everyone on 14th of May, Saturday at Lastminute.com HQ to do some Framer magic)
1
Dhruv Sharma
Re-post :- How do most of you apply your framer.js projects to production? Is it possible to use any of the resulting javascript code from a prototype in production-code? I don't want to create something amazing in framer.js, if I can't even re-create it. Any workflow tips would be much appreciated!
1
Nikolay Berezovskiy
Hi, guys. Here is the creepy workaround which helps you get the real pointer coordinates from touch event on your Device, not Canvas — http://share.framerjs.com/1cgf43ahlljq Suggestions, better solutions?
3
Dave Anderson
Hi—wondering if there is a way to nest a scrollComponent within another scrollComponent? I'm mocking up a web app—I'd like to simulate a scrolling field within a larger scrolling page. Thanks!
1
Márcio Ribeiro
Hey framers, I’m working on a prototype that needs a numeric keyboard and I was wondering if someone already made a module or a project with this feature on Framer? Thanks a lot!
1
Joshua Walker
Hello Sara Surh Koen Bok you great people said to reach out if we have an event with a heavy focus on Framer and I am proud to say we have one on the books in June! :) Will friend request you both in hopes of getting the official team involved
2
Daniel Specht
Hi, Just wanted to know if there is any Framer JS Forum out there were questions could be discussed. I found this: http://framergroup.com/posts/751814214945652.html but not sure about the latest status.
1
Ade Adegoke
Hi everyone am quite new to Framer JS, but I have to learn a lot pretty soon as I have a project that has to be handed in tomorrow. I would like to know the simple code of how to make a button. For example if I press a square on screen it turns to a circle?
1
U-Kyung Kim
Hi, I practiced more Framer.js today and made a piano passcode screen! I learned about adding audio using a module called UISound. :) Turn on the sound, and play C-C-G-G-A-A-G to unlock the phone! Share: http://share.framerjs.com/5vakfptioaxx/ On dribbble: https://dribbble.com/shots/2701563-Piano-Lock-Screen
21
Jason Nelson
Does anyone have any experience or examples of simple layer overlap detection? TIA!
3
Jason Nelson
Another question :) Has anyone done any explorations using Apple pencil? Is it possible to consume tilt or pressure in the browser? TIA!
1
Mårten Björk
Hi Framers! I wrote a blog post about how CSS and layer styling works in Framer — something I struggled with when starting out. Hope it helps! (Let me know if you have any questions.)
3
Parsa Kamali
QUESTION (I think an easy one): I've created a series of sliders with a loop. I've also created a text element next to each one to read the value of its respective slider, and that's all setup to work. I'm having issues with all sliders only affecting the text value of the first slider, not its own. This was an issue for me before when I was trying to have a hover state for a series of created rows, and the answer for that was using arguments: "rowBG.onMouseOver (mouseover, rowBG) ->" 1. Why do those arguments work and how? 2. I'm pretty sure this is what I need to do for the sliders, right? Well how do I achieve that with an event that framer hasn't designed? Right now I have it as "sliderInput.on "change:value", ->" and that it what's not working. Pics attached. THANKS for the help!
1
Christian Selig
Is there a way to save a prototype for offline use on my iPhone? Say I want to show it to someone else when not at my house?
2
Jeff B. Léonard
Does anyone know if it's possible to create an instance of an object in order to duplicate it to add different events to it ? For example if there's a button that gets used in different places, but depending on where that button is in the flow it would have a different action assigned to it... Any pointers would be greatly appreciated.
2

May 12

Chris Keith
having some preview / demo issues outside of the Framer Studio app. I'm trying both Frames and Frameless for iOS as well. The thing im running into is effecting two places. The first is on my computer. My prototypes work fine in studio but as soon as i hit mirror > open in browser, i'm met with a blank screen. The second part of this is im getting the same issue when trying to preview via frames or frameless. However, in frameless, if i connect my phone via usb and do the personal hotspot method i can get it to recognize framer is running and i can open the prototype fine. Frames still has an issue with the link that is the same to my desktop problem. Chances are it's one issue effecting both places but i dont know where to look. Any help is massively appreciated.
1
James Ryan
Hey guys, I need to embed FramerJS in a web app - the application uses AngularJS on the front end. I've come up with a solution embedding with an iframe but it means instantiating another application inside the iframe and communicating between them which is a little hacky. Is there way to instantiate framer within a div, rather than it appending itself to the body of a document? Cheers :)
1
Jins Kaduthodil
Hey all, tried to find an answer to this but struggling. I love the ability for an interactive framer screen. I would like to know how I can add it to my website so it integrates into my site. Can I host the data else where?
2
Dave Anderson
New to Framer JS, but so far it's been a great tool! A few feature requests: 1. Allow custom devices to fit to the preview window size. 2. Allow the preview window to detach from the main window, for use on multiple monitors. Thanks!
1
Silvia Bormüller
Hi, I have two layers with a superLayer and I want to hide the overflow of the green layer. I tried style= "overflow" : "hidden" but it doesn't work.Any ideas?
1
Eli Nathan Showalter
Who wore it better? 🤔😂
0
Ee Venn Soh
Google Material has some new goodness on Motion — https://www.google.com/design/spec/motion/duration-easing.html Now you can copy the duration and easing function :D Whole bunch of other new stuff too. Check it out!
1
Michael DeFazio
Quick question: Is there a way to get the event when scroll.scrollToLayer(...) is finished? scroll.onScrollEnd and scroll.onScrollAnimationDidEnd don't seem to trigger. Thanks in advance!
2
Shane Carmody
I’m trying to import an artboard that is 2004 x 2630 pixels. I imported @1x so it would fit into the preview window. Can anybody tell me how I can shrink the view down to get a global view of the imported artboard?
1
Aalok Trivedi
Hey all. I have 2 buttons in an array (likeButtons = [like1, like2]). When one button is clicked, the other disappears. When the same button is clicked, the other reappears again. I have that part working fine. What I want is to have a specific layer (commentInput) to change states only when like1 (the first item of the array) is clicked. Im struggling to make that happen. Any suggestions?
2
Aaron Paterson
Hi, I have a scrolling issue I think its an "ignoreEvent" solution with my array that I am having a hard time to work out. Can anyone help? http://share.framerjs.com/fzovqaflbtb4/
4
Aaron Paterson
Hi everyone, I'm trying to create a parallax on this iPad page I mocked up in Sketch using the FramerJS: "scroll = new ScrollComponent scrollHorizontal: false layerA = new Layer x: 100 # Modulate the scrolling distance scroll.on Events.Move, -> y = Utils.modulate(scroll.scrollY, [0,100], [0,10]) layerA.y = y" Which is cool. But I want to know how to make it 'the text' to stop at a certain point. i.e. "just before the end of the green panel" See attached http://share.framerjs.com/dblgfjz1j1m2/
20
Jochen Leinberger
Hi, is there some global switch to disable all print commands in framer? I use print a lot during development and debugging but when I put the outcommenting all print commands when a pototype is ready for showtime is a bit cumbersome. Ideallay there would be somthing like print = false which would surpress all print commands in the framer code ... any ideas?
4
Johan Sjöstrand
Working on an app that uses the sliding tabs pattern. Has anyone recreated this in framer? Would probably involve the page component for swiping between screens but also HTML text in order for the selection bar to have variable width? I could and should probably attempt it myself but still figured I'd ask. Seems like a common enough pattern.
3
Sergi Bosch
Hi Framer community, I have a Framer Studio license. Can I install the studio on both of my macs? Or do I need a separate license for each device? thanks
1

May 13

Jordi Martinez Ortega
is there anyway I can create a class that extends from EventEmitter?
13
Debashish Paul
Hello Framer-ites, Wanted to figure out if there was a way to visualize sound in Framer… After some deep digging and initial setbacks, things worked smoothly and here is a sneak peek. Let me know if this “sounds” interesting, happy to share the details soon!
17
Boris 'Yreane' Prokhorov
Hey, framers. Can you, please, tell me how to do this thing? I have a scrollable container with 4 layers inside. I need 2 of them to scroll X and Y, 1 - only Y, 1 - only X. How should I do that? When they scrolled, they should be scrolled all together. But some of them only by one axis.
1
Poojan Jhaveri
How do you link one framer file or page to another frame file on onClick Event ?
1
Harsharanga Patil
Is not possible to have InputModule = require "<directory>/<some-file.coffee>"? There are folders in my module folder.
0
Tab Chao
Hi, is there any easy way to create tabbar of mobile APP in Framer? I found this module but just cannot add Framer layers in the tabbar. It can only contain img T T
3
Sigurd Tapio Mannsåker
Morning Koen Bok et al, just wanted to say I love that the new beta has code folding! Just two things I thought I'd mention just in case, even though you're probably already well aware: 1. I would love to fold a whole indented section with one click, kinda like how Sublime has arrows in the margin at the first line of any new indentation. That way I don't have to manually select 100+ lines of code for some of my more complex UI elements. 2. Currently, it doesn't remember my scroll position when I return to the main document from a folded section. I assume this is already in the pipeline, just putting it out there anyway :)
2
James Elson
I'm trying to import a module into my first Framer project and it doesn't seem to get picked up (no sign of it in framer.modules.js). I notice in Frame Studio a brief "ModuleBuildError;" message but nothing else to help me track down the problem. I tried commenting out everything in the module, removing the module file temporarily - always the same problem. Any ideas?
12
Jorn van Dijk
Google recently added a bottom bar navigation to the Material Design spec. This prototype recreates a couple of frequently used interactions, that you can customize for your own design. - Material Design icons and colors are variable - All component dimensions are variable - Movie titles and descriptions are loaded from a module - Movie posters are loaded from a local folder - All content is wrapped in scroll and page component - Touch up/down to hide/show chrome interaction - Ripple effect works with every color - Statusbar with accurate time - All assets are SVG Dribbble → https://dribbble.com/shots/2712771-Material-Design-Tabs-in-Framer Prototype → http://share.framerjs.com/1g9v8d7bh6qd/ (only in Safari)
6
Joe Lifrieri
Hey, I'm having trouble with hidden layers intercepting events. I know about using @.ignoreEvents to disable event listeners on a layer, but its really frustrating that adding an .ignoreEvents to a parent layer doesn't disable events for all child layers. Rather than it cascading down, I have to manually enable and disable every event listener when it shows and hides. Is there a better way to do this?
2
Marie Lu Vinh
Just downloaded the latest version of Framer Generator from the github pages and it won't even open...The alert box says the file is damaged and cannot be opened.
1
Fran Pérez
Question: is there a way on mobile to fire TouchMove on a layer when TouchStart is initiated outside or on another layer? Example (on mobile: start touch outside and move over the red layer): http://share.framerjs.com/d5os9qtqpnho/
1

May 14

Robert M
Howdy, fellow Framers, I recently purchased Framer and The Framer Book by Tes Mat. Shortly after doing so, I challenged myself to create 100 prototypes in 100 days. Simple stuff first with the intention to create more elaborate prototypes as time went along. Tomorrow (April 20th) marks Day 10/100. I figured I'd share with you all in case you wanted to follow along, offer critique in the form of smarter ways to prototype in Framer, or perhaps even learn from the Framer files I share. Heres the link: http://rmion.com/framer-js-in-100-days/ Cheers!
15
Jordan Robert Dobson
Happy 1st Birthday Framer JS Seattle Meetup. Thanks to mentors and attendees for building an awesome Framer community!
9
Rafe Chisolm
Hey, Looking for some advice. I'm trying to create a 3x3 grid where each panel occupies the Screen width/height. Pardon the methods used, or verbose coding this is my first attempt at a layout that allows scrolling horizontally across columns, that within themselves scroll vertically. Running into a few roadblocks: http://share.framerjs.com/9ymi20s5l5l8/ 1) draggable.overdrag is preventing the ability to scroll across the columns, but would help prevent the scroll region from overlapping the top grey bar 2) Can't figure out how to get the pages to "snap" to whatever page is occupying the majority of the Screen that is in view - right now it just kind of "floats" depending where the cursor drags 3) The up arrow/carat doesn't ".snapto" the linked Page in the grid
2
Fausto Pérez
HI all, this is my first post here, and my first Framer prototype: http://share.framerjs.com/njtdbgzk2qbm/ I have a question regarding my code, thanks in advance for your help: Is there a way access the layers by name? I could create the circles in a for loop, assign them a name but I'm not sure how to access the layers later. Thanks a lot!
4
Geunbae Lee
Dear Framer: While studying the Docs in the Framer Studio, I have spotted one minimal error. It's not a huge problem but I decided to post it anyways. In the Docs -> layer -> layer.props -> it says.... layerA = new Layer # Get current layer properties print layer.props ## < ---- this part should be layerA.props # Output: { x: 100, y: 100, ...} # Set properties layerA.props = rotation: 90 opacity: 0.5 Thank you!
1
Ali Sanaknaki
Hey everyone! Wondering if any of you guys have 1 more Dribbble invite, and if I can get the invite? 🙄 Thanks!
0

May 15

Ermal Turkesi
Hi there, Is there a way to select a layer by just passing a variable name? Now sure if I'm clear but here is a sample of what I was thinking... [currentItem.name].addButton.visible = false Thanks.
5
Chris Keith
is there a way to get the number of files in a specific folder or directory using coffeescript?
5
Sergey Voronov
hi guys , inspired by todays #framerlondon event i wrote a module to place an object on circle using center point of circle, its radius and angle, plus moving object from point to point using arc according to latest google motion design guidelines https://github.com/mamezito/moveWithArc-FramerJS-module
1
Jeremy Stewart
Question: Trying to limit the y of a content layer inside a scroll component. Not having luck... scroll.on Events.Move, -> erin.scale = Utils.modulate(scroll.scrollY, [0, 800], [1.5,1.3], true) erin.y = Utils.modulate(scroll.scrollY, [0, 800], [0,10])
1
Kin Chung Wong
Hey guys, I have a question regarding using Sketch symbol in FrameJS. Is there any way to access the layer in the symbol? I was using Sketch 3.7.2 and FramerJS v63. I found that I couldn't set the onTap function for the layer in symbol. I tried to group the symbol and use sublayers to loop though it. However, It is empty in the symbol group. Thanks!
2
Min-Sang Choi
Might be off-topic but I'd like to mention that Framer helped me a lot with this new Gboard app that I've been working on past few months. We tested interaction models with many prototypes and animations as well. It reduced a lot of iteration time since we were able to play / test with it without extra engineering effort. Cheers!
22
U-Kyung Kim
I practiced more Framer.js today and made a resizable rectangle layout prototype! Thank you to the community here for encouraging me. :) Share: http://share.framerjs.com/qonfas3lao72/ Dribbble: https://dribbble.com/shots/2713504-Resizable-Layout-Prototype
6
Florin Nica
Hey everyone, ^_^ I’ve been working on a couple of projects for the past few weeks that are all about the user interaction with the interface. Framer has been tremendously useful and a key part to my design process at every step along the way. Thank you Koen Bok and the rest of the Framer team for giving us this fantastic tool! I know you’re hard at work making it better every day :) This is the latest prototype from one of the two projects I’ve been working on: A different kind of video player Link to Prototype: http://share.framerjs.com/l6unqe2rgckp/ (video file might me a bit slow to load while scrubbing through the video) The idea behind this was to get rid of buttons and touch targets, and, instead turn the entire screen into your “actionable area”. - Tap anywhere on the screen to play or pause - Drag anywhere on the screen to scrub forward or backwards There is still a lot of work left to do, but from our preliminary testing it looks like this works really well for young kids and users with limited mobility. Feedback (especially the constructive kind) is encouraged and extremely appreciated. :) Thank you!
1
Christoph Fahlbusch
Hey people. Does anybody know how to "properly" animate this on a curved path or how this could work programmatically? What I've done is rotate the bounds to 180° and the button is its child element. Visually I'm happy with it - But there has to be a better way to code this 😔
5
Joon Won Lee
It seems I found a bug after updating v63. It is that I cannot page to last one in pageComponent. plz check this one.. :)
3

May 16

Dor Karavani
What is wrong with the following JS ? why do I get an error ? <script type="text/javascript">// <![CDATA[ window.DY = window.DY || {}; DY.recommendationContext = {type: "PRODUCT", data: ['SKU123']};]]></script>
7
Dmitry Sholkov
Hey guys, can anyone explain what I'm doing wrong? I need a function that creates copy of a layer. On a click event outside the function i want to be able to destroy created copy. But because copy is technically inside function Framer couldn't find layer that I'm referring to. http://share.framerjs.com/506vzi0hb3p7/
3
Sergey Voronov
wrote an article on latest #framerLondon event with some pics and thoughts )
2
Jenessa Johnson
Hi quick question here, I'm new to Framer and am looking to add a pop-up window. How should I do that?
7

May 17

Agisilaos Tsaraboulidis
Hey Framers, one quick q: I want to create the search function "exactly" like it is on the iOS Platform. How can I achieve that in framer? Here is my project: http://share.framerjs.com/tc0oxmh7hn4j/
1
Luis Ricardo La Torre
Yellow underline lag: I'm having a tiny issue swapping images between states, maybe I should do it in a different way, but right now I get a bit of a lag when the yellow paragraph is supposed to go back to the original state. http://share.framerjs.com/qwpgh1mf5e8f/
1
Sindu Narasimhan
Hi. I am having issues with mirroring, when I attach a video layer to a scroll layer. I am using Frameless to mirror on my iphone. The video does not show up on the phone, but shows on the computer. Has anyone faced this before? Attached SS of my code
2
Jacob Kim
Hi, I need some help with this interaction where I can select or de-select different categories and there is a number +1 or -1 when I select or de-select. I have something where I can +1 using ++index, but how do I get --index when I click on a particular category (layer)? http://share.framerjs.com/xqpok4pcx5n4/. Thanks in advance for the help.
2
Krijn Rijshouwer
Hey All! We're excited to host our London meetup on May 26th. Join me and Niels van Hoorn at the Kahoot office for a presentation, workshop and a drink. Be sure to bring your laptop to follow along and feel free to bring any cool projects you are working on to share. If you are new to Framer and would like to get started then you're also more then welcome to join! RSVP here — http://bit.ly/1XhXiE5
4
Sam Thorne
Hey, I'm looking for some more thorough documentation on Framer, so far the docs I've found on framerjs.com and elsewhere are a little lightweight. Is there a full API document set somewhere? I tried to build the Dash docset from a script I found on github, but I guess it's out of date now, as the docset returns empty from the build process. Any thoughts?
2
David Politi
Attention San Francisco framers! Tickets for Framer Sessions 05 on sale today at 10 AM PST
1
Shabbir Hussain Sihorwala
I am really struggling to understand programming. Concepts such as classes, methods. Some would say that they're easy. Has anyone else faced a similar problem?
6
Chris Wang
Hey guys, do events have to be registered to layers? If I want to do something wherever the finger leaves the screen, do I have to register touchEnd event to every single visible layer? Is there something like Device.onTouchEnd or Screen.onTouchEnd ?
3
Gaby Moreno
Does anybody have any pointers for making a get/post request from within framer?
5
Rachel Kieun Park
Hi everyone! I'm trying to make the audio player scroll knob be adjustable in both x and y directions, scaling it up in y and moving the knob in moving in x direction. In my head, how I've set up the modulate makes sense but it's not working as I wish for it to be, and would love your idea to resolve this issue I'm facing. Note, it wouldn't identify the components (ie. audio.progressBar.knob') as an object so i turned the whole audio as a scroll...wondering if that was a good way to go? http://share.framerjs.com/w3n0byxf77jv/
1
Márcio Ribeiro
Is someone having any problem with the scroll sensibility from the scroll component on an Iphone 5s? sometimes I found that simulating a scroll using the draggable property instead of a scroll component has a better scroll experience.
2

May 18

Joshua Crowley
Hi guys, here are some of my tips for building big projects with Framer. Let me know if you have any suggestions or corrections.
6
Dave Anderson
Hi all, How do I access all of the top-level layers from an imported Sketch file? (I.e., programmatically rather than by name—I want to loop through them). sketch.children doesn't seem to work (my imported sketch file is assigned the name "sketch"). Thanks!
6
Maxim Kroft
Hi, is there some way to rearrange layers in Framer from imported .psd file? When I change it in .psd nothing seems to change in Framer even if I click "Import" again. Thanks!
2
Jacob Kim
Hi guys, I am trying to figure out an if statement where there is a minimum number of categories selected before the next button is enabled. See prototype: http://share.framerjs.com/bymbidhlptit/ In the prototype, the bottom button is enabled (change color, for example) only when 2 of the 3 is selected. Can't seem to be able to figure it out... sorry, newbie here.
2
Jiwoong Lee
Working with radial reaction in grid described in Material motion spec. https://www.google.com/design/spec/motion/choreography.html#choreography-radial-reaction Had a quick idea and gave it a try. http://share.framerjs.com/rwcughd24v7k/ It's not necessarily "radial" though. (more like diamond shape) It may be enough for prototyping purpose, but curious if there'll be a better model.
2
Kevin Kwa
Curious to know if anyone has attempted to track user input (tap actions) in a Framer prototype via a heatmap? Was looking to use this library (https://www.patrick-wied.at/static/heatmapjs/). Could do wonders for UX testing for micro-interactions.
1
Keith Lang
Small request: I really love Utils.randomImage(). On a slower internet connection, it appears to re-download the (same) image on every preview refresh. Cache possible?
5
Tes Mat
Just wondering: Why would anybody use the ‘onClick’ event? Now that ‘onTap’ receives the Gesture Event Properties and is therefore more useful. The docs say that ‘onClick’ has “no delay on mobile”, but I’m not sure what that means. They both trigger upon release, so any delay there might be must be milliseconds. (I’m asking because in Auto-Code ‘onClick’ seems to be a first class option: It appears on top of the list)
2
Sharon Zeevi
Is there an older version of framer that works on os x 10.9.5 ?
2
Peter Kubin
just came across that 'layer.states.switch("default")' works, but 'layer.states.switchInstant("default")' does not... any reason for that?
3
Anton Jarl
Hi I'm trying to create FontAwesome icons with Andreas Wahlström's FontAwesome module using a for loop, looping through an array containg the names of the icons. Anyone knows if this works and if it does, what's missing in my code?
3
Henrique Gusso
Experimenting with pixelation inside Framer using canvas getImageData. Each pixel becomes a Framer layer, enabling you to create interactions such as changing the background color to the pixel you clicked at. http://share.framerjs.com/iegotb2zy0zi
6
Sam Thorne
Feature Request: Ability to clear all states at once on a layer! I'm switching between views and within each view I have a bunch of states for a cursor. It would be great if I could clear and set batches of states between each view.
1
Geunbae Lee
I found a bug in Framer! Currently, I'm making a blackjack game and when I tried to use the following code: After the following code, if I try to type and SAVE, Framer instantly shuts down showing an error. I think if I'm trying to use a while loop with an if statement, it gives an error. Please let me know because I really need this resolved to continue making the game!
5
Márcio Ribeiro
hey all, I'm working on a big mobile prototype, and as the project get bigger and since I'm using a lot of images from photoshop importer, time to load the prototype is getting slow. Any tip on how to get a better performance on load time?
3
Danny Nathan
Quick question on the Pages Component: The image sums it up; I want to have an image center screen that is swipe-able, but when moved, switches the content of the entire screen. Is it possible to only make a specific portion of the screen touch sensitive when using Page Components? Or should I not use pages and use states with a listener on the image instead?
1
Michael Boswell
Has anyone shared this here yet? It's pretty great. While Framer is wonderful for the nuances of animations, it's bit long-winded for setting up the higher-level hierarchy of a larger prototype. I think Framer could be a solution for both, and this is a really great module/plugin to help.
2
Pasquale D'Silva
Probably a trivial solution, but I'm stuck on some variable scope stuff... Trying to get this random value (randomInterval) to update itself each time it’s called, rather than hold onto its value. How do I scope this correctly? 10 internet points to you, if you help out. <3
2
Geunbae Lee
Hi Everyone :) I put my time to make a BlackJack game with Framer! I'm going to rearrange and fix some of the messy codes that I have written as well as the design. There's still a lot of work that needs to be done. It's a little different from regular blackjack where you can split and double (I didn't want to go through that because I'm still a code noob...). Also, the dealer only hits once. Anyways, enjoy! http://share.framerjs.com/sz4rwx75c6k4/
1
Jonathan Korn
Hey there, has anyone here used FramerJS with Ionic? Curious to see the possibility of having FramerJS handling the View components in a hybrid app.
1
Henry Latham
A simple loading circle animation if anyone wants to re-use:
1
Jacopo Moretto
Hi there, does anyone know if I can import artboards from different pages in the same Framer project? Thank you :)
1
Rolando Pdl
I was testing the Mirror feature using the Frameless app, and my prototype wasn't covering the full screen of my Iphone6plus. It only covered about half of the screen. See attached image. Note: I am using some imported layers from Sketch. I have also tried to manipulate this line: Framer.Importer.load("imported/[email protected]") changing it to: Framer.Importer.load("imported/[email protected]") but got an error while changing it. I would like the prototype to cover the entire screen Does anyone knows how to fix solve this issue?
4

May 19

Peter Kubin
anybody out there, who did a kind of ken burns style slide animation with framer or could point me to an existing example?... i know, it's cheesy... ;¬}
6
Geunbae Lee
Is there any easier way to copy and paste written codes without having to go through fixing the indentations?
1
Erin McLean
Hey Framer Folk! Wondering if anyone has come across or build a native iOS date pick? I would love to leverage it for one of my projects.
1
Lai Yui Shin
hello all! I'm a new user of framer I got some problem with gif in framer gif slow down every event! (one gif is OK.....but two.....) is there any way to fix it? http://share.framerjs.com/7avm1bsdniza/ please help!!
3
Danny Nathan
I'm having issues with taps/clicks registering during a swipe event? Is there a way to more clearly differentiate the two?
1
Oleg Frolov
Hi everyone! I tried to make MD's bottom navigation. I hope you like it :)
2
Isa Bison
Is there a preferred place/method for reporting FramerJS application bugs?
1
Kasper Andersen
I'm fooling around with States after being a .animate kind of guy for a long time. I have a small question: I'm using the "onStateDidSwitch" event, but I only want to use it if the layer goes from Default to stateA. Is there at way to say onStateDidSwitch from Default to stateA then switch do stateB, if onStateDidSwitch from stateB to stateC then switch to stateD, etc?
4
Pavel Laptev
materialMotion is a module that allows you to create simple material motion in an arc. Avoid multiple transitions from one motionMo to another - this can change the arc concavity https://github.com/PavelLaptev/MaterialMotion-for-Framer
4
Sam Thorne
Is the PagerComponent able to page vertically? I'm trying to move through a vertical list item by item and seemed Pager would be the best option, but for some reason I cannot get it to page vertically.
5
Márcio Ribeiro
Is there a property to keep the original state of the whole prototype? Like if I want to reset all the states of the prototype to default, so I can make a button to call this function. I’m almost sure that I’ve already saw something like it somewhere…
2
Nefaur Khandker
Hey, y'all. I'm noticing some unexpected behavior when using draggable constraints with scaled layers (see this prototype: http://share.framerjs.com/6filuiytahkk/). This prototype is a modification of the original drag constraints example (from http://blog.framerjs.com/posts/dragging-scrolling-paging.html). Notice that I'm applying a scale factor to both the draggable layer and the layer that visualizes the drag constraints. However, in order to get the correct constrained behavior you need to average out the original scale factor (1) and the new scale factor (2). This is visualized by the green square. Is this the expected behavior? It didn't seem to make sense to me, but perhaps I'm misunderstanding the math behind it. Can anyone explain what's going on here?
2
Chris Wang
Hey folks, Is it possible to do non geometric shape masking in framer?
2
Jon Madison
seems like this should be an easy one, but i've tried a few, including inspecting properties as a layer has scrolled. how to retrieve the current x,y coords of a layer? i.e. trying to capture the position of an item in a scroll on scroll events.
2
Ash Adamson
Have you ever imported a sketch file where a sketch group is displaying correctly but it’s coordinates are (0,0) ? Has anyone solved this issue before? Sketch Group 1 - is a box and is showing up properly in the X/Y placement in framer. Sketch Group 2 - is displaying the correct location on the screen, but has X/Y of 0,0. When it's real X/Y should be 181, 120.
10

May 20

Jon Bell
I created DailyUI for Framer! Come show some love on Product Hunt and sign up - https://www.producthunt.com/tech/dailyframer
11
Ng Sheng Kee
Hi, all. I got one question about the code maintenance. Currently I got one very huge mobile app and going develop it to prototype. But I found that, the framer app is just only able to read one coffee file, which is app.coffee. and that case will causing me in the future very hard to check back my previous code. Previously I am using a text editor and compiler(Koala) to build up the prototype. Here is the way i build for it. I created a app.js and then include this all multiple js file inside then the compiler will help me compile a app.min.js. Which is help me to easier to maintenance my code and less pain in the future. // @koala-append "activity.js" // @koala-append "activity-states.js" // @koala-append "activity-controller.js" // @koala-append "activity-search.js" // @koala-append "activity-search-states.js" // @koala-append "activity-search-controller.js" The the CONS is I have to slice the jpg file manually, because everything is code by the text editor without using framer app. Sketch and Framer APP combination is awesome. it manual slicing and auto export img and json file, but the cons for the Framer APP is no able to let me edit multiple js file and hard for maintenance. Is it any good suggestion for me? Your reply is appreciated. Sorry for my bad english
4
Philippe Côté
Hello Framer Group, Hard question here (and even maybe a bit complicated for nothing): does anyone knows if it's possible to read an ID3 tag using CoffeeScript? I've seen this thing is possible using JavaScript libraries but how can I call the JavaScript functions inside Framer to actually read and display the tag info inside Framer? A virtual beer to anyone who answers. :P Hehe... :) Thanks.
4
Daniel Caine
Hey guys, I've searched on Google and this group but couldn't find anything, so apologies if this question has been asked before. If you're overriding the default animation styles by using Framer.Defaults.Animation = Then how do you override this default when using states? Using animationOptions doesn't seem to do anything :S
3
Florian Pnn
Hello guys, I have a question regarding Classes. How can I succeed to add a property to the object Key without having to add it after creating a new layer? (see the picture below for a more explicit version)
5
Michael McLaughlin
Newbie question. How do you modify speed / curve of states.next()?
5
Diego Oriani
Hi all, I need help figuring out an equation that modulates an array based on a draggable layer. I came up with this solution but its not working properly. The right behaviour should slide the array based on the limits of the draggable layer. Any ideas how to fix this? Thank you in advance. http://bit.ly/1rYVi81
0
Henry Latham
Circular menu icon pop-up:
3
Jordan Robert Dobson
Today while at ValioCon I felt inspired to build a simple schedule web app in Framer for myself and the other attendees. http://jrdn.io/gEwI My favorite part in this is that it switches to the correct day automatically for you. 😁
4
Olivier Gillaizeau
Hi guys, quick and possibly dumb question. Is there anyway to use the scrolling wheel with Framer ? For web prototype it pretty tricky to not have that working.
2
Kasper Andersen
New day, new question: I have a layer inside a loop which gets it's text from an array, something like this: layer.html = names[i] Then I have an input field where I can add text to the names array when i click a button. How do I get the layer.html to update when something new is added to the array? If I print names after clicking the button the new text is added to array, but I need a way to have the text.html by itself. Is it possible?
1
Jon Madison
Hi! I'm working on an animation that needs to take place after ScrollComponent.scrollToLayer is complete, or even being able to listen when the layers change due to scroll events started by scrollToLayer. unfortunately I haven't observed scrollToLayer a) triggering any onScroll events b) onScrollAnimationEnd being called after a scrollToLayer call. I only see these events fire when i manually scroll. How can i know when a scrollToLayer animation is done, or otherwise tap into scrolling/change events when i called scrollToLayer? (i also tried onAnimationEnd, and the .on "change:*" events
1
Chris Camargo
I feel like there's an obvious solution here I'm not thinking of, but how would one go about writing a module that self-executed? In other words, can I write a module that does something the instant it's included via a `require` statement?
1
Chris Keith
im sure there's something very simple im missing here. im using a for loop to make a few shapes and have them animate indefinitely. The problem is everything animates down but then only the last item in the loop will continue the animation sequence. how to i make it so they all do it? i attached a screen cap of my code for evaluation. thanks!
2
Enrique Gonzalez
Can you help me please? I want the green box (layerCloseA) to close its parent layer (layerA) by reversing its state. Instead I'm producing unwanted behavior where layerCloseA closes and reopens layerA.
0

May 21

Rizchel Dayao
We found this example using Parse in Framer: http://blog.parse.com/learn/using-parse-to-power-up-your-framer-prototypes-part-i/ Does anyone have any other examples that integrates real data in Framer?
4
Diego Oriani
Hey there, I am wondering how can I modulate an array of items based on the direction of a draggable layer? I am really struggling here, already tried to check if the 'y' value of the draggable layer increase or decrease, also tried a condition that detects what direction the layer is being dragged but 'left' / 'right' direction messes up everything. Any ideas? http://share.framerjs.com/y204gky0yzdj/
0
Geunbae Lee
< Suggest watching it in HD!> Hi I've been using Framer to make a prototype for my UX project. I'm really getting a hang of this! Can anyone tell me an instruction page where I can see the tips and rules for importing sketch files into Framer? I get a lot of errors while doing so all the time which is why I just save the pics and import them into Sketch. However, this takes time and frustration. Thanks!
1

May 22

DS Industrie
""22/05/2016 02:13:07"" ((Framer JS)) Dsindustrie vente de composants electronique, microscope endoscope usb, instruments de mesure,Appareil de diagnostic automobile
0
Enrique Gonzalez
Re-posting for visibility: Can you help me please? I want the green box (layerCloseA) to close its parent layer (layerA) by reversing its state. Instead I'm producing unwanted behavior where layerCloseA closes and reopens layerA.
2
Jochen Leinberger
Hi, Is there any possibility to disable the share function of framer Studio? I am working on confidential projects and hitting the share instead of the mirror button would be a nightmare.
5
Nikolay Berezovskiy
Welcome to Russia, Koen Bok
5

May 23

Diego Oriani
Hey Framers, I believe I found a bug when using 'parent' and 'superlayer' with pageComponent. If you change 'superlayer' to 'parent' the last item on the array will break. Can you confirm this?
1
Kees Plattel
Hey, every time I crash Framer... (By selecting multiple lines at ones and trying to type...) It sends me another 'Welcome to framer' email. I've been sending reports for 2 weeks now. Just FYI :)
1
Daniel Caine
Hi guys, I'm trying to add a delay to items in a list which get pulled to the same x position, so that they don't all move at the same time. Like the one seen in this shot https://dribbble.com/shots/2051789-Interaction-for-Doctor-Schedule Attached is my code so far. I've got the sketch layers put into an array, so that's good, but I'm wondering how I'd go about achieving this? Any help is much appreciated, thanks!
7
U-Kyung Kim
I practiced more Framer.js today and made a prototype of a constellation game called Starry Kid I had designed previously! Find the cartoon characters in the virtual sky. :) - this works best on the device! Demo: http://share.framerjs.com/ww9mvlfvfgvi/ Dribbble: https://goo.gl/A8W9tM Original game design: https://goo.gl/45zeJF ### Thank you so much to Jonas Treub for his article on the VRComponent module, on which a lot of this prototype is based: http://blog.framerjs.com/posts/design-virtual-reality.html
12
Chris von Burske
I'm new to Framer and new to Coffee script as well. I'm excited to begin my journey. Can anyone give any tips or advice they wish they'd know when they first started using Framer?
4
Brendan Fagan
Fellow Dubliners, join Intercom and Framer for a night of talks on design, prototyping, and product on June 15th. Our own Emmet Connolly will be chatting with Koen Bok and Benjamin Den Boer. https://nvite.com/FramerIntercom/bcbf All proceeds will be going to CoderDojo. Looking forward to seeing you all.
1
Thomas Offinga
Is there a way to import Retina assets, but display them on 'regular' size on desktop? Everytime I import something as 2x it shows it in double size.
3
Jon Madison
FYI scrollToPoint documentation example is faulty.
3
Joshua Tucker
Hola everyone! I recently had some free time and spent it creating an AndroidScrollComponent. This module allows you to use a ScrollComponent with an overscroll glow. +Chris Lee asked about this recently in the group and was my "inspiration" to look into it, so thanks :P. https://github.com/joshmtucker/Android-ScrollComponent P.S. It's been brought to my attention that my OrientationEvents module is a little rusty and needs some improvements. Will be looking into that next. Cheers!
2
Robert Gaal
If I make a layer scrollable, and I swipe its contents with my finger, a TouchStart and a TouchEnd event fire. This is annoying when scrolling a list with individually selectable items. It means that when I scroll I accidentally select one of the items in the scrollable list. Is there any way to counter this?
17
Enrique Gonzalez
I'm having issues with Mirror in Framer. The "open in browser" option times out and nothing is rendered. My Framer studio version is up-to-date v63.
7

May 24

Chris Wang
Is there volume control on the Video Layer?
3
Deniz Basegmez
Is there a Framer IRC channel?
2
George Otsubo
Hi, not sure if this is a bug but whenever I use PageComponent.wrap on a layer the default grey layer color sits on top of everything. ( Doesn't seem to happen for ScrollComponent.wrap ) The only way to get rid of it is to override the default property?
1
Andrea Prieto
Looking for speakers for a London event. I'm holding an event on 15th June about prototyping tools for Sketch and need someone representing FramerJS. Contact me if you're interested in the subject and would like to present a project or share your experience with the design community.
2
Bud Sigur
Hello everyone! I've got a couple of questions regarding using Framer.js without the Framer Studio. 1. Is importing layers manually the only way when not using Framer Studio? 2. What is the best way to set up the screen/device preview? I have found this script on Github, but apparently it works only for older versions of Framer.js Thanks a lot, your answers are much appreciated.
3
Benjamin Den Boer
Hey all, I spent some time recreating the Material Response from Google's new Design Guidelines. The .framer file contains some neat tricks (Shadow Animations, Loops and Mouse Tracking) and new Framer features. (Prefer2D). May be helpful for those just starting with Framer/Studio to play around with too. See it live & download the .framer file here: http://examples.framerjs.com/#material-response.framer Check it out! :)
16
Игорь Растворов
Hi! I'm stuck with the device loader. I've added two lines of code to require some modules and the device loader just stucks loading. Any suggestions?
2
Kees Plattel
Another Q. It states in the docs that Framer supports the Animation Codec with Alpha. I haven't gotten it to work.. and my H264 exports from After Effects are notoriously washed out (Gamma issue probably, as per usual with Quicktime). Any hints on how to do/use the codecs/compression correctly? Thanks!
1
Yash R Gupta
Why isn't mouseUp event affecting the layer background color in this example? As soon as the mouse button is depressed, the color should change but it doesn't seem to.
2
Min-Sang Choi
Sharing out one of the gboard prototypes(we don't have prototypes with final design so I gave little visual update). Sharing card from keyboard was completely new region to explore for us. So we came up with bunch of different options and decided to test it out with real users. We could easily build a prototype with framer and it required zero engineering effort. This boosted our design iteration speed and we could decide which direction to go with this particular interaction. Prototype url : http://share.framerjs.com/7x6dd91j7fwa/ Download gboard : https://itunes.apple.com/us/app/gboard-search.-gifs.-emojis/id1091700242?mt=8
7
Keith Lang
Anyone had experience embedding their framer code as a part of a 'real' website? Without any web dev experience, it seems a good approach would be put it Framer content in an iFrame, and use global dom objects as method of communication between Framer content and page content?
4
Jon Madison
really loving Framer thus far. like JavaScript, easy to learn, will probably take a long while to master. :) Why is the directory blown away/recreated on every save? It drives me crazy on the command line, and is mucking with my git flow. is there a recommended workflow for git users? aside from, cd-ing outside then back into the directory then checking in? I've found sometimes my changes get lost.
2
Jeremy Stewart
How do you wait for an animation to be done repeating?
4
Josh Peters
Help / Bug Using Benjamin Den Boer's Audio module and found that including "audio.showProgress = true" will make the playback audio stutter. If it's removed it will not stutter. Can someone please see if they have the same issue. Have a fix? Even better.
2
Ash Adamson
Can you not do an "If" statement on string values for layer properties like backgroundColor? If layer.backgroundColor == "FFFFFF" Using this syntax yields no results
6
Rahul Dhyawala
Guys really inspired by the work framer is doing. I created a simple cricket card concept for fun.
2
Chris Wang
I was looking at this example. http://framerco.de/post/124350476634/3d-dragging-a-snippet-to-enable-a-3d-effect-when It uses draggable.calculateVelocity().x, draggable.calculateVelocity().y now in docs it's simply velocity, seems like velocity.x or velocity.y doesn't work. can I still access x and y velocity individually with the new velocity?
1
Daniel Caine
So I've been playing around w/ animations in Framer. Here's a scene from a menu I'm currently working on! https://dribbble.com/shots/2732078-Opening-the-contact-notes Thanks again for all the help in this awesome community! Dunno about the rest of you, but Framer has actually made programming really fun and interesting! 😁
1
Shintaro Nakajima
Hi! I tried to make SVG animation with this module https://medium.com/framer-prototyping/working-with-svg-paths-in-framer-43d3c2d08adc#.2kdxkd1s6 But it seems the module does not work well on framer latest version v63. Is there any alternative to create Path animation?
1
Stephen Thunder Nixon
Fairly basic question I haven't yet been able to figure out from the documentation/googling for it: How do I add simple properties to a layer from a Sketch import without repeating myself a lot? For example, I have a fixed header which I want to have a drop shadow state given by Framer (I'll later trigger this state on content scroll, see the attached photos for an example of what I'm going for). However, doing this only seems to work like this: # sketch.second_header.shadowY = 2 sketch.second_header.shadowColor = "rgba(0,0,0,0.2)" sketch.second_header.shadowBlur = 3 # whereas I would expect it to be something like # sketch.second_header.states.add stateA: shadowY: 2, shadowColor: "rgba(0,0,0,0.2)", shadowBlur: 3 # BUT, the second version won't work. What am I doing wrong between identifying a layer from Sketch, then giving it properties?
6
Amber R. Murray
A Framer JS newbie here: Q: I am trying to have a draggable layer trigger a state change for a series of layers, but only when the draggable layer passes a defined "x" position. How do I do that? Thanks in advance.
2
Agisilaos Tsaraboulidis
Hey framers: I'm trying to "play" with some different things. I have a problem and I don't know what I'm doing wrong. I want to go from an Artboard to another and when I click the + button on the top right of the screen to go to the other Artboard it, only the keyboard appears to the screen. Take a look:
1

May 25

Vidit Kothari
Hi Guys, I've a set of web app pages designed on Adobe Illustrator (vector files) which I need to get prototyped and sort of functional so that a person can see the front end which should be sort of functional. Can you tell if I can do that in Framer Studio? and if yes, can you do it?
2
David Lee
Hi. Is there a way to save/download the current canvas as svg (or any vector) file?
1
Danny Nathan
Question: If I bought Tes Mat's FramerBook, would I benefit from the Coffeescript for Framer book as well, or does the former cover most of what the Coffeescript book does?
1
Daniel Specht
Hi, just a question: Let's say I wan't to make a Website prototype with 3 different sites. How do I make this? In Axure, I just create 3 files and link to each other. How can I do this in Framer? Thank you.
3
Enrico Capone
Hey guys, I'm start using Famer from a couple of days. There is a possibility to call the black iOS keyboard, without the bar with the arrows and the Done button? And possibly without pulling all the screen upper. Thanks
1
Agisilaos Tsaraboulidis
Guys, I have another problem here. Some of the layers in my Sketch file doesn't appear in the layer section at Framer. Take a look:
1
Dor Karavani
How can I see which script is loaded not Synchronous?
2
Florian Pnn
Hi guys, Trying to embed a project into Cordova and I was using this script : https://gist.github.com/hellonicolas/07817fe3d467b33c237b Everything works well except a problem with the sizing of the layers. I guess the layer with Screen.width/height are responding differently than the one with a width in number (750 for example). Any idea how I could solve that without having to edit all my framer layers? Wonder how Koen Benjamin are doing it when you share a project?
3
Tony Gaskell
Is there a correct way to lock screen orientation? Setting an interval to lock the rotation feels dirty...
1
Elias Suske
Hi Guys! Whe i'm importing from sketch, all my symbols with "Overrides" change back to default after import. Any Ideas to workaround (appart from detaching every symbol)? Thanks!
0
Dave Anderson
Hi all...I have a semi-opaque layer with an onClick event listener that is above a layer with an onMouseOver event listener...and unfortunately the layer that is in back never has its event triggered, I assume because the layer in front intercepts all events. Is there any way to do this? Should I conceptualize the problem differently?
1
Giel Cobben
Hey guys, just a quick question: Is it posible to use the scrollToPoint function with negative numbers? When I do this: list.scrollToPoint( ‍‍‍‍‍‍ ‍‍ ‍‍‍‍‍‍ ‍‍ ‍‍‍‍‍‍ ‍‍y: -200 ‍‍‍‍‍‍ ‍‍ ‍‍‍‍‍‍ ‍‍ ‍‍‍‍‍‍ ‍‍true ‍‍‍‍‍‍ ‍‍ ‍‍‍‍‍‍ ‍‍ ‍‍‍‍‍‍ ‍‍curve: "ease" ) It just scrolls to 0 not -200.
3
Rory Smyth
Anyone experience big performance issues on Android devices? Just using simple shapes and transforms. Big difference between it and and iPhone. Testing on a nexus5 and a nexus5x. Very laggy.
6
Tian-Yuan Zhao
I'm Canadian, a university student and I can't afford Framer right now given how expensive it is. USD to CAD exchange rate isn't Canadian-friendly for me right now.
2
Koen Bok
What do you most often prototype for?
3
Natasha Noltimier
Hi, newbie here. Is there an easy way to animate an object to move along a curved path? I have a circle that I want to move along a curved (exponential) line.
3
Chris Keith
Ive been working on this loader animation and i cant figure out the math to get the timing right. It starts off a little long and then gets cool and then falls apart. The second pass of the "wave" is really what i'd like to have be consistent but i cant figure out how to stabilize it. Any help would be greatly appreciated.
0
Jeremy Stewart
Curious if anyone is having issues with "share" in Framer. I get the network error, up to date, and have submitted feedback. Or if there is another way to share..?
1
Harrison Wheeler
Is there any way to edit the URL on the desktop view in Framer?
4
Chris Wang
Hey guys, if I want to prototype something like the pinterest long press, how do I detect if a touch moves into/out of a layer? Are there equivalent of MouseOver, MouseOut for touch events?
4

May 26

Brett Moody
Hi all! I'm trying to drag an object along a path that looks like a sparkline (lots of ups and downs). Any tips to get this going? I have the horizontal drag enabled but I'd like the circle object to follow the line when dragged. I don't need it to animate, just want to make it draggable.
3
Jarne Uytersprot
When I share my project, there's a transparent blue box on top of all my PageComponents. Does anyone know what is causing this? PS: the preview in Framer is fine, as well as the mirror to iphone...
4
Johan Sjöstrand
The iOS engineer I'm working with has trouble recreating the spring effect I created in a prototype. Is there some sort of equivalent I can point him to?
5
Natasha Noltimier
Hi again, if I want to delay the timing of functions being called in a for loop how would I do that? I am trying to use the Utils.delay feature but I'm not having luck (I believe that doesn't delay the loop, just the execution of the function being called, so It's skipping over some). I'm trying to animate some numbers to change as someone holds down a button, and they are changing so fast it isn't noticeable. Here is my code, any help is much appreciated! Thanks in advance.
2
Rahul Dhyawala
I wanted to create a loading animation during the onboarding process which is very fun and social. Very excited to share with you all! Dribbble - https://dribbble.com/shots/2736333-Onboarding-Animation
2
Paul Rich
Hey guys, I have few overlapping cards parented to ScrollComponent. My goal is when the card reached the top of the screen it stops. The same with other cards each of them should scrolls and stops on the top of the screen. What do you suggest?
3
Philip Worthington
Hello. Does anyone know of a way to show the 'cursor' (i.e. the position of finger taps) on iOS so that it can be included in screen recordings via Quicktime? (i.e. similar to the overlay you see in Framer Studio / browser previews). This would be a huge help for doing screen recordings from iOS via Quicktime. Thanks!
2
Cole Townsend
Hey gang! Using some sublayer loops and a little indexing, I made a prototype of a ping pong league app I'm working on. While working on this, I learned an easy way to get a *pull* vs. a *push* drag effect. When animating a group of layers with a loop, you can add a delay by multiplying the index by some coefficient (say 0.05). Usually that means the last item in the array has the longest delay. Depending on the direction you are moving the group of items, it may make sense to pull them out of the way, instead if pushing them. With a simple .reverse() tacked on to your layer.subLayer() array you can flip this. The linked dribbble shot has the animation looping, which I recorded with Screenflick and exported as a .gif. https://dribbble.com/shots/2738483-New-Game-Added Source: http://share.framerjs.com/fx308a03lkgl/
1
Sam Thorne
Feature Request: When loading layers from Sketch treat text layers as html variables within Framer so they remain editable!
3
Yohan Baillet
Hey everyone. I am trying to achieve this effect in Framer. Switching from page component view to basic list view. Is that possible somehow?
2
Rachel Kieun Park
Hi! Is anyone experiencing their audio player not working on mobile view while it works fine in the web view for share? I have it set to play upon load, but framer app for android doesn't seem to do any audio playing or pausing... :(
2
Jessica Klos
Hey there! Anyone know when the next Seattle meet up will be?
5
Peter Kubin
probably a silly question, but would it be possible to add a custom attribute and value to a layer at initialization? myLayer = new Layer customAttribute: myData
2
Sindu Narasimhan
Im using the InputFieldClass module, and the keyboard does not get dismissed when the user clicks out of this field. I know Blur is the event that I need to call, to know the user has clicked outside the field, but what do I need to do to dismiss the keyboard?thoughts? :)
1

May 27

Calvin Teoh
I'm having trouble getting .off to work to remove event handlers Here's my file. http://share.framerjs.com/3enifrhzqat0/ Here I have a file with nav items. When I select one I call my function 'selectItem', it loops through all the layers and tries to remove the mouseover mouseout handlers, but no success... What am I doing wrong?
2
Katya Kostyukova
Hi everyone, I am working on the circular progress bar animation using John Puckett's module (thank you John!) and can't figure out how to change the starting point of animation and the direction. I need the progress bar to start animating form the top and run from left-to-right. ( I tried using direction: 'backward' and rotation but it doesn't work). Would really appreciate if someone could help figure it out:) Thank you!
1
Jacopo Moretto
Hi all, Are there any autocompleter for sublime text 3 in Windows? Something that can help with imported layers from sketch/Photoshop. Thank you :)
2
Tyler Young
Hey Framers! I have a three-page app I'm prototyping. Swiping between the pages works perfectly. However, on one of the pages, I have a draggable button that is conflicting with the page swipe behavior. Can someone help me 'freeze' the page view on the 'DragAnimationStart' event, and 'unfreeze' it on the 'DragAnimationEnd' event?
3
Ulysse Bottello
Designers! Your next project could be a chatbot. New medium, new challenge, join the Facebook discussion group! 🤖 https://www.facebook.com/groups/uxforbots/
0
Diego Oriani
Krijn Rijshouwer Niels van Hoorn Excellent evening guys. Thank you for the tips and tricks. Looking forward to the next.
2

May 28

Koa Metter
Loving the new gesture events, specifically swipe. Is there any non-hacky way to read a swipe gesture without simultaneously reading a tap on the same layer? I noticed that an .onTap event will fire after an .onSwipeEnd event.
4

May 29

Stanislas Chaillou
Hi Framers! I am stuck with my prototype, could use some help. I have 2 circles in my prototype. One white, one red. The red one is in center of screen. The white one is moving towards the red one. I want to be able to drag the white circle, has it moves towards the red circle, and for the white circle to keep moving towards the red circle, even after I stop dragging it. For the moment the animation starts, the white circle starts moving towards the red circle, I drag it, and it would stop after being dragged. I would like it to keep being 'attracted' by the red circle. Thanks your help!
1
Tyler Young
Hello Framers! I'm trying to create an effect where one layer is draggable, and another layer follows that drag identically for its changing x position, with an offset in its y position. I'm having trouble setting up the second layer to a) pull the first layer's position (x,y) in real-time (during drag), and how to ad a (-400) value to the y position in real-time. I can hack the effect into place by doing some layer combining and hiding/revealing, but I'd really like to learn how to do this the right way. Can anyone help?
3
Edward Sanchez
I need to prototype something similar to when you force touch an icon on home screen and see a menu - then without lifting your finger the menu items get highlighted as you hover over them. The part I'm struggling with is identifying which option my finger is on top of and which option I lifted my finger on. On the desktop I can achieve what I want with onMouseOver, but obviously that doesn't work on the device. I know I can probably do some math "if the event Y is > 50 and < 100 then do this... but I'm hoping for something less ugly. Thanks!
3
Tes Mat
I’m preparing a talk about prototyping tools and made icons to represent the different kinds of tools. 1. ‘Code’ — Like Framer, or using HTML + JS, or Xcode 2. ‘GUI’ — Pixate, Proto.io, Flinto for Mac,… anything in which you click buttons and set values 3. ’Signal Flow’ — Origami, Form 4. ’Timeline’ — Principle, Tumult Hype What do you think? (I know this isn’t Dribbble… but I’m not a real designer anyway :)
9
Rhys Merritt
It was awesome to be able to get up and show some work at the event last night in London. Krijn and Niels were very inclusive which encouraged me to share my work when I otherwise probably wouldn't have got up. I often get a bit scared of sharing things on here or the Slack channel out of fear of it being super basic in comparison to the amazing stuff I see on here. But, this community is super rad, and it feels good to be part of it, whether I understand half of what I'm doing or not! haha. This is a more cleaned up version of what I shared last night -
8
Marcelo Eduardo Oliveira
Our internal Framer workshop today, by Rafael Marin
5
Ross Fenrick
I've been exploring using Framer for desktop/web interactions, here's one of my first prototypes.
2
Callum Boddy
• http://bit.ly/cbz-birdies • Hi all, got my Part I of recreating Ridiculous Fishing in Framer up on Medium last night . Would love your feedback! Also feel free to chec kout my Twitter splash screen & Instagram scroll on there too :)
1
JT DiMartile
Does anyone use Framer along with the Personal Hotspot / USB option? (link: http://framer.com/learn/preview/connecting/ ) I've got the iPhone USB connected. but when I try to paste the link into Frames or Frameless, I just get an all while screen. (I also allowed Framer in my firewall settings)
2
Jonne Frankena
Hi Framers! Is it possible to collaborate in Framer by working in the same file together, or is Git my best option? Cheers!
3
Geunbae Lee
A simple youtube prototype...
2

May 30

James Caruso
Kind of a simple question, but does anyone know how to change the url of an iframe on click?
1
Rahul Dhyawala
I really liked the expanding collection by Ramotion (http://bit.ly/1Uc8JaU). So I wanted to experiment and try to recreate the experience in framer. Very excited to share with you! Dribbble - https://dribbble.com/shots/2743470-Profile-Interaction Framer - 1) http://share.framerjs.com/d2qkdjiw117t/ 2) http://share.framerjs.com/o4h78sm7lw0c/ (incase you face masking issues)
1
Paul Holliday
Is there any more in depth documentation for extending the Layer class - especially in regards to best practices for constructor / getter / setter set up!
1
Andy Fuchs
How would I (drag-)resize a desktop-app prototype in FramerJS? Since i's easy in HTML/Javascript, so I thought it should be possible in Framer as well - but it seems I can't find anything about it in the docs. Any hints?
1
James Caruso
Hello everybody! Does anyone have any experience prototyping with a game controller?
5
Koen Bok
I still really like this older article about learning code. A lot of truths.
0
Jacopo Moretto
Hi all, is there any chance to have a gulp+webpack configuration to compile a framer.modules.js compatible with the one exported from Framer Studio? Thank you :)
0
Nicolas Tilly
Hi everybody! Is there a way to put a fixed button on a page (like in css : position: fixed) with a draggable image below? Thanks!
1
Zeek Ikomoni
Hi all, I was hoping for advice/tips on setting up framer projects so that scrolling activates the mobile safari hide and show address bar. I have tried window.scrollTo, but I haven't been able to get it to work. :( Any help or guidance, would be much appreciated, as I'm currently stuck with the address and share bars, sigh. Z
2
Umut Ahmet
Is anyone designing Desktop apps in framer? Would be good to see some :)
3
Bruno Silva
Hey guys, anybody here have the same problem? The trial have 8 hours only, it's a short time for you learn about Framer because you need learn code too...exist another form for learn and see your animations? So I liked so much using Framer but the time is short. ahahaha
1
Javier Eduardo Treviño
hello frameristas I apologize because this is off topic but I wanted to ask you something considering a lot of you know a lot about mobile: what's more important in a phone for a better reading experience (think Medium) , the phone's resolution or screen size?
1
Rey Alejandro
Is Framer suitable for micro-interactions assuming that it will take a lot of time?
2

May 31

George Kedenburg III
Live from Framer Sessions 05 at Uber HQ in SF, featuring talks from David Politi, Peter Ng and me!
24
Thomas Offinga
Because I will be repeating similar code across multiple prototypes (for example a menu) I'd like to abstract it into a module. Is it possible to include assets (images) in there?
4
Kevin Devine
Hi, working with Noah Levin's skillshare course http://share.framerjs.com/brhipzbxeev7/ and I'm struggling to expand on it. I'm trying to have an animation to take place when a certain artboard comes into view, similar to how foursquare animates their map icon when you swipe between results. Any tips please? My setup is based on Noah's so i'm looking for something to happen when 'artboardC' becomes active and for it to switch again when moving to 'artboardD'. tia
6
James Ryan
Hey all, Can anyone shed some light on how to get modules working with FramerJS (outside of Framer Studio)? I'm working on a web app that compiles CoffeeScript on the fly and trying to add support for modules. I've compiled a module manually from CoffeeScript to JavaScript, included that in the page. I'm running into error after error, exports doesn't seem to be defined in the global namespace, modules can't seem to see the Framer object on the window (they're not wrapped in a closure either). Can any of the core devs lend a hand here? Is there some wizardry going on behind the scenes in Framer Studio that isn't included in the open source framework? Thanks so much!
1
Bud Sigur
Hello everyone! I need your help... I want to make a page which has a profile picture and a scrollComponent underneath. I tried to build this by making a container layer, a layer which contains the profile picture, a scrollComponent and a layer which contains the scrollable content. After that I've set the container layer to be the super layer of profilePic layer and the scrollComponent. I have also set the content's superLayer to scroll.content. My problem is that the content is being displayed weird. The top of the layer is a bit cut off, and then there is some sort of extra padding at the bottom of the layer. Can anybody tell me what am I doing wrong? Thanks a lot. :)
2
Eoin Ó Raghallaigh
Hi all, I have a text layer called selectDeparture and an array called departureAirports. This array contains a number of layers. When any of the layers in the departureAirports array is clicked, I want the name of the clicked layer to be passed to selectDeparture.html So far I have tried to do this with a for loop (shown below), but what happens is the name of the first layer in the array is passed, no matter which layer is actually clicked. Can anyone tell me how to pass the name of the clicked layer please?
2
U-Kyung Kim
I practiced more Framer.js recently by prototyping some interactions of an app called Jog Station I designed previously! I focused on the song selection page and experimented with different visuals for the song switching. Turn on the volume and check it out! :-) Share: http://share.framerjs.com/uou1s5e1ln1u/ Dribbble: https://dribbble.com/shots/2746643-JOG-STATION-Music-App-Concept-Prototype
3
Javier Eduardo Treviño
guys do you know of any editor that resembles the Framer Studio layout (code on the left, phone on the right side) that is built for development, i want to be able to code Ionic apps with the same layout. can it be replicated in other editor like Brackets?
3
Kris Savoia
https://medium.com/@MaCherieEdwards/we-dont-need-to-see-your-mockup-at-that-angle-20b487f7f3b7#
5
Koen Bok
Is 8 hours trial time enough? Or do we need more? Remember, the time counts against actual usage, so Framer in foreground and mouse moving.
10
Rolando Pdl
Is it possible to share prototypes privately?
3
Teodoro Mylonopoulos Labella
Hi guys! Normally I use Mac and Sketch for prototyping and then import into Framer but for a certain reason I'm working with Photoshop and Mac right now and I have realized that when I import from a PSD to Framer Studio, it takes too much time respect to Sketch and the most weird thing is that the "groups" on photoshop are not imported into sketch very good. I mean, some images from different groups mix between them, once they are imported, the layer names at the PSD, change by adding a number after it in the case the layer names are the same (imagine you have the group, 'icon' repeated 3 times, so now the layers name are 'icon','icon-2' and 'icon-3'. It doesn't happen at Sketch. Only in Photoshop, Is it a bug or I'm doing something wrong at naming the groups? Thx in advance ;)
1
Bryan Sebesta
Friends, is there an "offclick" event of any kind? I have a menu I am sliding out from the right, and I want it to disappear when you click off of the menu on anything else in the screen. I can't find any way of doing that, however.
4
Will Anderson
New to Framer, and have been struggling with a question all morning. Trying to create an animation where a text layer animates from 0 to 85, similar to jquery.animateNumber (http://aishek.github.io/jquery-animateNumber/). The animation would be initiated by some sort of event. I'm inserting a textLayer using a module I found through this group. But I'm not sure how to then animate this textLayer. Any suggestions or guidance would be greatly appreciated Here's what I'm working with http://share.framerjs.com/qtq2eg35trzf/
2

Monthly archives

2017

2016

2015

2014

2013