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

What is Framer? Join the Community
Return to index

April 2017

April 01

Paul Wan
How to minify framer.js? I do not want my remote customer wait too long, when I showed the prototype. the orignal frames.js size is 545 KB,and frames.js size is 377 KB by uglifyJS,. Can I minify the framer.js maximum compression ? thx
1
Sergey Voronov
is there a module or something that allows viewing all variables in a dictionary all the time, i need to debug things on fly, so calling print is not really an option so i can see the variable properties somehow while i am interacting with prototype - will help me fix things
1
Sauraj Babu
check out my recent prototype dribbble for more : https://dribbble.com/Sauraj
1
Sergey Voronov
i spent ages deconstructing my whole prototype to understand why its not working. but seems there is overall perfomance issue of framer on iphone? here is simple scrollcomponent with content about 3k pixels, on desktop its completly fine. when trying scroll it back and forth on iphone 7, many times its just freezes and doesnt respond to scrolling at all https://framer.cloud/GkpGJ/. Any hints?
4
Arash Lowni
Is there a way to refresh a URL in a "for" loop? I'm trying to populate multiple tiles using "for" loop with random images from placeimg.com but it's using the same image in all the tiles. e.g - "https://placeimg.com/232/137/arch"
1
Arash Lowni
When I paste text with large spaces into a string, the spaces don't show up in the prototype. Any ideas? e.g text: "Large gaps between words" ...displays as "Large gaps between words"
0
Johannes Eckert
Call me crazy but I do like to design everything at @1x. that's what feels most natural to me and produces output that the engineers can take as input directly. I am struggling setting up my framer prototypes this way. if I set Device.contentScale, it works OK when a device frame is present, but layer.center() does not seem to respect the scale factor. When viewed on a device, Framer.Device isn't around and then the meta viewport scaling does seem to be responsible for scaling. Is there a good few-lines-of-code solution for this without doing a custom device or manually changing the meta viewport? http://share.framerjs.com/lrvq10uiv0mx/
26

April 02

Sheng Guo
Hi,guys, I follow the FramerJs's document tutorial, from Sketch Artboard import to Framer. I want show "secondScreen" artboard, but,in framer, still show "first Screen". Where is wrong? Thanks!~~
2
Alžběta Brychtová
Hi guys, I would like to do a never ending animation. Everything works fine opened in the locally installed Framer. However, uploaded on the cloud or mirrored on a tablet device, the animation run only once. Could somebody tell me what I did wrong?
1
Daniel Caine
Hey everyone, I'm designing two navigations which share similar styles and functionality, so I created a Class for them: https://framer.cloud/NaLuh/ I've got two questions regarding this Class: 1) To create a click event for just one of the tabs of a particular instance of Navigation, is it possible to do something like: Navigation.tab("Tab name").onTap -> // do something 2) If you want to prevent click events for a particular Navigation, how is this done? Something like: Navigation.tabs.preventDefault() Any help is much appreciated, thanks!
1

April 03

Junjun Sun
Hi friends, I have a question for how to change a layer's attribute in the auto-generated layers in the loop: for example, if i want to change the height of "layer4", how can i reference "layer4" in the code(because the name of "layer4" seems can not be used) Many thanks!
2
Florian Ludwig
Hi guys, I recently worked on a quick fix to enable commenting in your prototypes: CommentLibrary.js is a fast way to document your feedback and to save annotations while reviewing and interacting with your Framer prototypes. By shaking your device a new layer above your prototype is created, in which you can set markers and add your feedback. Check out the Article and the GitHub Repo! I hope some of you guys find it helpful. (only works with Framer's TextLayer update🚨)
0
Michael Boswell
A friend of mine was having an issue creating multiple horizontal pageComponents stacked vertically in a vertical scrollComponent. When searching for a solution, there is a Medium prototype that's often referenced, but actually solves for the inverse. I'm sure someone has posted something similar, but he couldn't find anything so I threw this together real quick and figured I'd post here in case anyone else runs into this same issue. Edit: Added directionLock on both the scroll/page Components. (Thanks, Fran) http://share.framerjs.com/du0hrzr65w7j/
6
Brad Wrage
Hey all, I'm looking to trigger a swipe event depending on the direction. Can someone point me in the right direction?
1

April 04

Victor Mark
What's the best way to cycle through 4 states onMouseUp with the a 1 second delay between each states? Thanks
4
Marc Krenn
The 'colorThief' module allows you to easily extract the dominant color(s) of images. Example (incl. module): https://tr.im/colorThief
9
Junjun Sun
Hi Friends, do you have the problem for the slow of change state in stateCycle function? For example, I have three layer: layer0, layer1 and layer2, and there is a button on the top right side in layer1: When I click the button, the height of layer 0 will change between state big and state small, I want the y position of layer1 and the y position of layer2 both move up and down according to layer0's height (seems layer1 and layer2 stick to layer0).... but in the code of layer2's y position always seems opposite to layer1's maxY. (when layer1's maxY is 1682, layer2's y is 2844; when layer1's maxY is 2844, layer2's y is 1682) So, could someone help me to solve the problem? Many thanks!
4
Sanchit Gupta
Hi All! I am playing with TextLayer and I am unable to use a font hosted online (not from google fonts) in my framer prototype. Any suggestion? Thanks!
2
Joe Day
Has anybody done anything in Framer with tile maps?
3

April 05

John Lee
A few things that have been on my mind: 1. when I move layers I always get the undesired props: rotationX: NaN rotationY: NaN Add to my layer, then I have to delete this . 2. Any comeback on this question regarding adding/removing toppings to a pizza? https://www.facebook.com/groups/framerjs/permalink/1103094213150982/ Thanks!
0
Zhang Han
Hi all, has any one faced the issue that a framer cloud link doesn't work in China? Are there any other ways to share a framer prototype?
1
Joey Huang
Hey everyone, I'm new to Framer and I'm playing around with the text input example from the Framer Studio homepage: http://share.framerjs.com/1ps366tc70o4/ When I run this on my phone, the native keyboard invokes when I tap on the text field, pushing everything up. Is there a way to (1) hide the fake keyboard and (2) prevent the entire screen shifting up when the native keyboard is invoked? Thanks!
1
Michael Van Havill
Hey guys, struggling to find documentation on this. Can you invoke a keyboard with framer? Im trying to get a keyboard for input on my ipad prototype.
2
Naema Baskanderi
Hi All, I was hoping you might be able to help. I am using the native keyboard for my prototype. However I am finding that it is pushing my background image up and I am getting a blank area. How can I stop this from happening. It looks like it is allocating too much room for the keyboard. I'm using a module for the keyboard input:
2
Gideon Carstens
Hi everyone, I'm having a go at creating a custom module. I'm really struggling to debug the errors. 1) I need help getting this ridiculous example to work https://framer.cloud/PVbJv/ 2) What tips/advice/approaches are there to debug coffeescript, especially as the size of the code grows?
2
Andrew Tang
Howdy all, I’m a total noob and I’m trying to figure out how to drag circle elements along a circular arc (clockwise + anti), however I’ve searched high and low on how to do this and haven’t seen any examples yet. Can anyone point me in a direction where I could learn this? In this example, I’m trying to drag the colourful circles along the grey circle/arc. What I’m trying to do, is replicate the Linum iOS app if anyone’s played with that. Any help / point in the right direction would be very much appreciated!
3
Geunbae Lee
Hello from the MS-HCI program at Georgia Tech! A lot of the students from our program love using Framer.js during our UX projects not only for crafting prototypes but also to learn how to code! Although Atlanta doesn't have those cool meet-ups like in Seattle or San Francisco, we learn a lot from this large Facebook group and also by teaching each other in many of our classes. We really think Framer is a very powerful and useful tool to learn when looking forward in getting our entry-level UX related careers. Also, it's an excellent tool to express our creativity through code! Thanks to Koen Bok and Elena Stoyanova for providing us with such cool Framer swags! We will continuously spread the benefits of learning and using Framer to other students here at Georgia Tech!! From, Geunbae Lee | Nishant Panchal | Vedant Das Swain | Cheryl Xiaoxuan Wang | Philippe Kimura-Thollander | Xinyu Li | Jordan Movish | Sam Weiller | Cheryl Cheong | Muchao Tang | Diego Osorio | Morgan Nicole
4
Jean-Francois Hector
Hello everyone, I just got started with learning Framer as a prototyping tool. I would like to know whether I can access (or recreate) a fully interactive and functional iOS keyboard for my prototype, using Framer. i.e. upon taping a text input field, I want the iOS keyboard to appear (the real one, or a Framer-simulated one), and for characters to appear in the text input field as I type them on the keyboard on screen. Is this possible and easy with Framer? Thanks a lot for your help
2
Jurre Houtkamp
Hey Frameroos, Recently Framer received the great addition of 'Framer Type'. A new way to add dynamic type directly in Framer. I have created this simple prototype to show some of the powers of the new TextLayer. Switching to nightmode and back will adjust the color of the type to increase readability. Hope to see some more awesome TextLayered projects soon! The Dribbbles: https://dribbble.com/shots/3413467-Nightmode-Switch-Dynamic-Type Try the prototype: https://framer.cloud/HVLbz/
1
Daniel Alvarez
Hi guys, I'd love to create a Framer Group and host a meetup, in Mexico City. Who can I contact for help and check all the guidelines?
2
Ashwin Khurana
Can anyone provide guidance on how one can host both the framer project folder and accompanying sketch file for import, in Box. Currently, when I click import after having made changes in the sketch file, Framer crashes and then Box asks me to (a) unsyc the framer project folder, or (b) delete the folder. Vicious cycle, any help would be much appreciated!
0

April 06

John Lee
I'm working on the back of Steve Ruiz's excellent example of using arrays, logic and functions. But extending things more, by: 1. Importing a sketch file and targeting layers to add dynamic content 2. On layer selection, add the selected item to a new array 3. Allow selected items to be only added once, and removed from selection by either array. BUT I'm stuck, and need some help: 1. how to add only one item (check the array for duplicates) 2. how to then remove the item from either the topping list or selected toppings. https://framer.cloud/TZhVw/ Any help most appreciated!
11
Lukas Guschlbauer
Hey Frameristas! I'm just starting out with Framer and as one of my first prototypes I'm trying to achieve something like the "Clear - Todo App" The point where I get stuck is that the Utils.modulate for the "check" and "remove" layers doesn't work inside a for loop. Here's a version with a single "todo"-item, where the "check" and "remove" layers modulate in scale and opacity on horizontal drag and the "todo"-item gets destroyed when it's dragged further than a third of the Screen.width: https://framer.cloud/ynPTY/ When I try to wrap this in a for loop, the modulation doesn't work anymore... Another problem would be that after destroying the "todo"-item, all items below should move up the height of one item to fill the space. I tried this by making a for loop that starts at the index of the destroyed item and goes until todos.length and substracted height of one item off of their "y"-position. But this doesn't seem to work properly either. This is the "construction site"-version of the prototype, where nothing really works: https://framer.cloud/dllLn/ Can you point me in the right direction?
2
John Lee
Any good articles/Framers on using Arrays versus Objects?
2
Dániel Korpai
Hey :) I've started to work more heavily with for-loop, but got really stuck at a point. I created 4 cards with a for-loop and added a cardinfo layer for each of them with a 'parent: card' attribute. Then, I grab all of them and put them in an array (called cards) like this: 'cards.push(card). So far so good. :) The problem starts when I want to modify all cardinfo layers, which are child of the card layers. So when I use 'for card in cards' I can only edit the first cardinfo layer, not all of them. :( Do you have an idea, how can I modify all child layers of a layer which is in a for-loop? It would be awesome to hear some guesses. Thank you! :)
2
Gideon Carstens
Hi all, I’m (trying to) learn how to write Framer modules. For the life of me I can’t get this simple attempt to work. Here's the error message and framer link: https://framer.cloud/jBohe Please help this noob out :D /cc Jordan Robert Dobson
4
Jon Arnold
I built an endless scrolling animation with some flaws: https://framer.cloud/VBtiF/ - There is a gap between those two layers after they are looped the first time - The linear animation is not as smooth as expected Any ideas?
3
Michal Bak
Hi, when using Framer.JS inside Atom with coffee-compile, I've copied myModule.coffe into Modules (as described in tutorials) I add: mMyModule = require "myModule" and then trying to use funcition: mMyModule.makeDraggable(layerA) I receive an error that makeDraggable is nto a function.. Looking at other sample projects from the web, I can see, that after requiring module, the file framer/framer.modules.js is update with module data.. In my setup nothing happens. It looks like even if I require my module file (with coffee extension in coffe script ofc) it's not "compiled in" ? Can some using framer.js on atom can give me some tips/good tutorial how to use it on windows/atom config? thx in advance
2
Aalok Trivedi
Any concerns we should know about Sketch import with v.43's new file format?
0
Piotr Kuklo
Hey people, Is there anyway to recreate mouseOver event on a mobile device? Looking for something like 'fingerOver' ;) I would like to have a similar experience after swiping a finger over shapes like in this video:
3
Johnny Garces
hi framer fam, I have a question on preventing some default actions. In my case, I have an overlay that is at first hidden but then appears along with social media icons when user clicks on the "share button". This overlay then disappears along with the social icons when the user clicks on anywhere within the overlay. The problem is that I don't want the overlay to disappear when user clicks on the social icons. The overlay should not be hidden upon clicking on the social icon- only if it's clicked within any area of the overlay except for the icons. Here's a link to the prototype- would appreciate any feedback on my code as well :)
2
Mike Susol
Hi Framers, A few noob questions. I'm trying to figure out how to most efficiently code some very basic interactions. I'm hoping the community can help me understand the best way to tackle this. I'm also experimenting with the Sketch>Framer workflow, so any advice re: best practices will be appreciated. Here's my ham fisted first attempt. Thanks! https://framer.cloud/KMKdn/ Simplified Framer file: https://framer.cloud/ezVbr/
2
Jon Madison
i may have asked before, but now it is time to actually do it :) Is the Framer documentation created with customer html/css? if not what tool was used? I've a substantial library i'd like to be able to document via running a tool against the source, at least as a start.
0
Dave Anderson
Why do prototypes viewed via mirror or in the cloud show occasional flashes of purple outlines around layers? This doesn't occur in Framer's built-in canvas. I've also noticed some differences with TextLayers—I have some TextLayers that look fine in the built-in canvas, but that wrap awkwardly when viewed in a browser.
1
Alex David
Is it possible to have multiple Events on a single layer For example I want say "layerOne" to react the same for both Tap and Swipe Events. Thanks
2

April 07

Gideon Carstens
Hi all, when writing modules, what's the best editor? Preferably one that will also give me code completion like Framer Studio does?
2
Camille Zapata
Hi everyone, I'm trying to use "page.snapToPage()" with layers created through a for loop. I've assigned them names via "name: detail_#{pageIndex+1}". However, "page.snapToPage(detail_1)" doesn't seem to work. Appreciate any help. Thanks! :D
2
Sabato Urciuoli
My journey has started playing with states, animation options and the new layer panel. Thanks guys : ) https://framer.cloud/EheWf/
0
Sabato Urciuoli
Hello, I moved a couple of months ago in Berlin and I'm new to Framer as well. I was wondering if someone is interested on having some prototyping sessions over a beer. Would be great to share some knowledge and build nice stuffs. Cheers
1
Daniel Caine
If you want to use Sketch layers inside of a custom class, how do you do this? I've tried the following (which doesn't work): # Store our detail view layers from Sketch detailViews = [$.detailView, $.detailView1, $.detailView2, $.detailView3] class detailView extends Layer constructor: (options={}) -> options.size = Screen.size # Get default layer functionality super(options) for detailView in detailViews detailView.properties = parent: @ frame: detailView.frame x: 0 y: 0 print detailView // prints the detailViews array fine testDetailPage = new detailView()
0
Jordan Robert Dobson
Chris was asking how to do the twitter launch screen animation and Johannes answered back with an approach I hadn't used in a long while. I changed his example up a bit to not use CSS animation so I could have more control over animation timing. Here's an example of how to do it using a webkit-mask-image and a proxy layer using Framer's native animation tools.
4
Brandon Souba
Built a Facebook Paper chatheads example.
19
Dimitrie Hoekstra
another question: how do i add up to arrays? subnav1 = sidebarlinks.children[1...4] subnav2 = sidebarlinks.children[6...10]
1
Alvaro Lourenço
Listen to Animation events while ignoring Mouse/Touch events. - Is it possible?
5
Wouter Van de Kamp
Hi all, I was looking for a way to simulate vibration in a prototype and came across the following post: http://ryhan.org/post/106823687656/quick-tip-to-simulate-phone-vibration-in-a The problem is, the project isn't live anymore, so when downloading it I get a 404. Does someone have it? CC. Ryhan Hassan P.S. I'm aware of the fact that there is vibrate() but that won't work in Safari, only in Chrome.
1
Jon Madison
updated Input-Framer again (not my module, but i've needed features that wasn't in the original)-- added font color and font family to constructor.
2
Alexander Bennett
I'm trying to create a prototype where you can zoom into a photo with the new pinch gesture, but then when you drag past the edge of the photo it animates that edge to the edge of the screen. Similar to how iOS photos does it when you are looking at the last image in a set which I documented in the video attached.
6

April 08

Travis Hall
Hi all, recently I’ve been working a lot with natural language. I’m a big fan of Fantastical 2’s use of natural language to allow events to be created quickly using natural language. I practised prototyping the basic event input using Jordan Dobson’s InputField module and Chrono.js - Moment.js http://share.framerjs.com/wi2u02qj00r1/ Has anyone tried any natural language js libraries with framer? https://github.com/nlp-compromise/nlp_compromise for example?
6
Dimitrie Hoekstra
hey hey, quick question Using https://github.com/martenbjork/distribute-layers how can i get it to animate propperly => maintaining the margins while animating? https://framer.cloud/YlhqX
5
Jesse Campbell
I was getting a bit tired of adding text styles like fontSize and lineHeight to every TextLayer in a rather large project we have going, so I created a module that extends the TextLayer class. The goal was to make it easy to add a “class” like one would in CSS. Feedback welcome. :)
1
Mohsen Mirhoseini Argi
Hello everyone, I have just started using Framer and like to use it inside my Android application using WebView but found no documentation or tutorial, anyone have done this before?
1
Raje Punsalan
Is Framer still a one time purchase?
5
Giles Perry
Proud to have my article published on the Framer blog. Find out how I made a module for adding 2D physics simulations to your prototypes. https://blog.framer.com/its-particle-time-how-to-use-a-physics-engine-with-framer-e66af34ec859 Here's a link to the prototype https://framer.cloud/KXQHl/
5

April 09

Koa Metter
Hello everyone! I created a module for easily adding a masked ripple animation (open or close) as a way of elegantly transition between bottom/top layers. The animation is commonly referenced in Google's Material Design. https://github.com/iamkoa/ripple I've seen other Framer prototypes using similar transitions but I hadn't stumbled across a module that seamlessly worked out of the box. I hope you find this useful!
1
Joohee Park
Hello, I have a question about mirroring. Sometimes it works but mostly it doesn't. I checked my firewall settings but couldn't figure out what it should be set. I also tried via my phone's hotspot but it didn't work. Anyone knows a solution? I hope Framer supports mirroring over USB cable again.
0
John Lee
Quick Q: How do I assign custom props after creating a New Class Object? I have two arrays - images and text. I create a Class component 'myClassObj' and inside each object I have a layer 'myCustomText' - I want to change this prop once I create 'new myClassObj' See image! Thanks!!!
3
Claudio Henriquez
Hello guys, why does it happens that when I import a layer from sketch that has opacity set to 0 I can't change the opacity in framer ?
1
John Lee
A couple of questions for states: 1. Do global layer states and non-visible layers in Sketch - not work together? I'm unable to get my layers to show visible using a global object. (see img) 2. layer.ignoreEvents is not working when using XX.onClick event and states, any advice?
0
Gideon Carstens
Hi everyone, Sometimes there's a scenario where an action (eg. click) should scroll the page to a specific point or scroll to the bottom of the canvas. I know there are a few Framer methods for these kinds of things. However I often find myself needing to write some kind of code like in the screenshot. Is there maybe some kind of math calculation that takes the canvas size into account so that I can always reliably calculate how to scroll to a certain Y position?
0
Michal Bak
Hi Guys, just quick questions, can you give me hint hot should I start creating a "bigger" prototype, in framer, with mutiple screens with differet actions using same buutons like home/back differently on different screen? Using pageComponents, maybe viewController module or .. ?
2
Jon Madison
Is there some magic I can do to my framer so that when i self-host it on my static server, it also gives me an "open in framer" option?
0

April 10

John Lee
Any way to set a global state and apply it to any layer? For example: dog = new Layer fish = new Layer layer.states.active = __backgroundColor: 'red' dog.onClick -> __fish.stateSwitch 'active' This would be SUPER useful if we can! PS - sorry for posting almost everyday, but I'm a curious person
2
Alex Maximets
Hi Team, I'm working on integrating mapbox into my project by following this guide:https://www.mapbox.com/help/mobile-framer/. Problem is whenever i run "npm install map box-gl" I get an error (attached). Does someone know a way to get this to work? Thanks
6
Jon Madison
Dear framer, i would love a grid display with pixel markers option. Otherwise i'll just make a module for it. i'm halfway there (too lazy yet to put the number markers in place). But framer if you did it i'd like that, too. :)
4
Dimitrie Hoekstra
Who has a good example for showing off how only 1 element can has a certain state (selected) at a time? So if one element has the state selected, and I put that on something else.. it will turn off the original one ;)
0
Julia Carlson
Happy Friday! Is there a way to disable autosize on TextLayer? It's proven very useful when I want to size the text to the container but there are cases where I want the container to size to the text.
3
Daniel Caine
If you have a dashboard with clickable elements on it, and animate an overlay over this view, what's the best way to prevent events firing on the dashboard when you're interacting with the detail view? I'm guessing hiding it off-screen and putting back when you need it isn't the best approach?
1
Dan Clarke
Can framer send MIDI out to a virtual bus?
1
Dimitrie Hoekstra
What is the best way to point to a deeply nested element?
2

April 11

Bhawna Sharma
Hi Guys! My macbook just crashed and the sketch app is deleted from my laptop. My boss bought the sketch and gave me a license key. Can i use that again to install the sketch app again on my laptop?
1
Siddharth S Rao
Made a quick infinite looping animation. Is there any way to reduce or optimize the code?
0
Johann Kasuch
Hey frameristas, I have a (probably basic) scoping issue. How do i refer to a function which is created in a class, outside of the class. i made a little prototype using the doc code. In my real project i have a rather complex class, with a remote state affecting different layer within the class. i want to access this remotestate by tapping on a different button.
3
Dániel Korpai
My first public Framer prototype is finally published! :) I'm sure there is a lot of room for improvement, but can't wait to learn more from you :)
4
Daniel Caine
Hey everyone! Has anyone ever experienced the following (it seems to happen to me quite often, but I never seem to know how I actually fix it): that when you add layers to a scroll component, that the scroll.content far exceeds the height of all of the layers within that content area? This is the prototype in question: https://framer.cloud/isOBk I'm animating some layers into view, and then wrapping those layers inside a ScrollComponent. If I print the height of the ScrollComponent.content and also the layers it contains, they don't match up. It's on around like 360, within the openDetailView function, where the ScrollComponent and layers are added.
0
Dimitrie Hoekstra
How am I able to Scale my Framer.Device towards the browser viewport? :) So if my device is set up with 1280*800 for example. It can scale to fit on smaller screens for example. Bonus question: How do I get rid of the "Made by framer"
2
Kerrin McLaughlin
hi, I'm new to framer/ rusty with programming and I wanted to achieve this drag and drop swap effect...I was wondering if someone could help me this the logic or knew of any examples of something similar they could point me to? thanks !
3
Kenneth Spry
Here's a toolbar concept I'm working on. You can't actually draw anything, though. It's more about selection. I wanted to condense functionality (assuming that people are more likely to want to change color than stroke width and that they're more likely to want to switch from freehand to a particular shape [rectangle, in our case] than switching shapes [a pervasive pattern found in a lot of drawing tools]). The problems with condensing functionality are training and creating persistent, consistent feedback, of course. My approach is to subtly train users by cycling through some states to reveal functionality. Since ours is a product found in conference rooms and lecture halls (lots of users at once with different experience levels), we have to be a little creative about how we get new users up to speed. Framer has made testing these concepts much faster and more realistic. Vanilla JS would take a lot longer, and no other prototyping tools I'm aware of allow you to do the math required to create 3D lazy-susan-like selectors. What I'd really like, though, is to change the svg shape's stroke color to the selected one as simply as I can change a normal layer's. I'm aware of some libraries, but I hesitate to use them often, since Framer is always releasing great new updates that might break the libraries. Anyway, uhhhh... Framer! https://framer.cloud/KGOVl Update: I found a bug. Selecting a shape worked fine until I animated the picker on page load. I'll have to figure that out. Clicking the shape should change the border to blue, but it's not happening until I manually select a different shape. Weird. Update: fixed it.
0
Kevin Clark
Hey! Running two animations on the same property (with a delay) doesn't seem to work. Any ideas?
1

April 12

Mike Brits
Hey Framers, I've got an idea I'd like to try out, just looking for the best way to do it. Is there a way to embed custom metadata into a layer in Sketch, and retrieve it in Framer? In Sketch, I have figured out that I can set userInfo on a layer (standard Javascript object key value pairs) but it doesn't look like that gets kept on a Framer import. Is there a good way to save custom data in Sketch that can be accessed in Framer? Maybe alongside the opacity in metadata? Google is not as helpful as I thought it would be. Thanks!
2
Gideon Carstens
Hi all, In my custom module I have a method to make a step indicator. Inside the method there are states to transition to a next step. How do I expose those states from the module so that I can call them on eg. a Click event in framer? (in the example I'd like click a button and then call a state change on my module).
1
Sascha A. Carlin
Hey guys, anyone still using RealiveWave/Google Form anymore?
0
Andy Jakubowski
Hey folks, do you know if it’s possible to set some default properties for TextLayers? Framer.Defaults.TextLayer doesn’t seem to be working... The point is to avoid repeating certain things like setting the font family over and over. Thanks!
4
Reony Tonneyck
Anyone have an example anywhere, that snaps an object to the corners when dragging? I'm trying to mimic a small video preview widow snapping to the corners of a viewport. I have it working with dragging to constraints of a layer, but beyond that I'm a bit clueless right now. https://framer.cloud/xIESC/ I just started using Framer yesterday, but haven't found any examples. I'm surprised actually, seems like a common scenario. This is for a web project by the way. Thanks!
2
Shiv Kehr
Hi all, Would you have any advice or resources for how to go about building the fluid interactions that the app in this video has? Thanks!
3
Matthew Barton
I am interested in building a working static version of the app i am designing. I am not sure if framer is the right solution for complex prototypes. Any advice?
4
Thomas Engebrand
Hey, how can I disable a button when a layer is visible above it? For example clicking a button triggers a full page overlay but I can still click the button underneath through the overlay. Hope that makes sense...
3
Marcin Kalbarczyk
hey guys, I've download trial version, and I can't import sketch files, can anybody solve it ?
7
Nefaur Khandker
Anyone know if there's a way to import artboards from Sketch with a transparent background? I've unchecked the "Background Color" and "Include in Export" artboard options in Sketch and I'm still getting an opaque white background when I import my artboards into Framer. My goal here is to split apart large areas (eg, browser chrome, app chrome, content) of the the web app I'm prototyping into separate artboards so I can edit them more easily in Sketch.
2
Eli Rousso
Heyo. Sometimes when I import from Sketch, the assets generated are too large. I have to scale them down to .95 to make them fit correctly. Anyone else have this problem? Thanks!
1

April 13

John Marstall
New module, GradientHelper. I find it a bit tedious to assign gradients in Framer, and of course animating them has always been right out. This makes both easy.
1
Adam Mazurick
We have a profile view. At the bottom of it, we have a 'not into leslie card'. When the user swipes it up, it should open another scrollable view. https://framer.cloud/czGVA/ Having trouble making the second view with scrollable profiles.
5
Kenneth Spry
Here's an SSO login idea to assist with onscreen keyboard experiences. Instead of making everything disappear, the user would instead be directed to the appropriate SSO form for the domain provided. It's a start, and, again, it was super quick to whip up with Framer.
1
Wart Burggraaf
Can I ask you to create a Framer prototype in under 5 min and share it? This is what I made: framer.cloud/KiKbq/ What can you do in #framerunder5min?
1
Jonno Riekwel
Hey guys. I own the domain framer.rocks. I once had the idea to make a resource site, but never got around to making it. Send me a message if you're keen in taking it over from me (mates rates).
0
Oscar Salazar
Hi all, I have 2 pages within the pageComponent, each with an image that can be pinched or panned inside a clipping layer. Is there a way to read the values (scale, position) of the last pinch and pan from page one and use those on page two?
1
Alvaro Lourenço
Hello everyone.. I've been playing around with Three.js - trying to figure out a way to bundle it with Framer+VRComponent to build some mixed 2D/3D VR prototypes - but unfortunately I came upon a blocking point in which Framer content gets updated way faster than Three.js framerate... I would like to sync them up, but 3D content is aways `delayed`. As a designer, it appears to me that working around this would be kinda hard... so I'm posting in attempt to get some advisement or help. "ThreeLayer" project is attached. Thanks in advance :)
1
John Kowalski
Hey all! Recently looking for a new tool to create good quality gifs for dribbble. Any suggestions on the most efficient tool for this? — What are you guys using?
6
Dhruv Sharma
How can I animate/add state/ modify sublayers when imported from sketch? P.S. I'm new to this so I've been trying to learn framer from what all is available on the net and this group. But I still can't find solution to this.
2
Dominic Reiterer
Has anyone of you tried the mapbox integration for framer? Is it possible to start an animation based on the zoom level of the map? So that I can for example display a button when the user zooms in?
1
Vignesh Sachidanandam
Hello. I'm trying to prototype a delayed hover interaction. The behavior I'm trying to prototype is as follows: 1) When hovering over an icon, provide a hover effect (change color). Change back to initial state onMouseOut 2) When lingering over the icon (i.e. hovering for x seconds), display a flyout with additional options. Reset this timer onMouseOut (so the flyout doesn't show in less than x seconds / immediately the next time the user hovers over the icon) 3) Hide the flyout onMouseOut (immediately) I'm having trouble reliably achieving 2) using delays. Any guidance? Adding a screenshot of what I'm currently trying to achieve 2). I think I need to set/clear timeout in a different manner, but wasn't sure how to do it. Thanks for the help!
3
Siddharth S Rao
I designed an interesting touchbar concept. Feedback would motivate me to design more
2

April 14

Nicolás Prieto
Worth checking :)
1
Mike Kyllo
Hi Framer people, I am new to all this and have a question that might be easy to answer. I am repeating assets in my prototypes, such as layer and child layers. Is there a way that I can create a variable, copy a layer and child layer and assign the variable to attributes of that set?
6
Dan Clarke
I'm trying to push layers in to an array, then switch their state using an array reference. What am I doing wrong?
2
Dan Clarke
Following on from my earlier question. How can I trigger audio snippets? Say the user clicks on a button, how can I trigger a 'k-click' sound?
8
João Paulo Villa Mello
Hello guys :) I've done a micro interaction and I'd like to hear your feedback!
3
Benjamin Zanatta
Hi people ! Is it possible to clip a Layer with a TextLayer ? When I do it, it clips with the boundbox of the layer :/
1
Jacopo Moretto
Hi all, I have some trouble with .copy(): 1) when I copy a TextLayer with TextLayer children it automatically add children text to parent text 2) when I copy a Layer then I can't use Auto-Code feature I think the first is Bug and second one is a missing feature...but how knows? :)
1
Mike Kyllo
Hi Framers, I have a simple questions. If I increase the width from page.width to a larger measurement, the page centers with the top being above the viewport/screen. I'm trying to use the scrollable component and have my page scroll down. Is there a way to set up my page so the top is at the top of the screen? Thank you.
3
Chris Calo
Howdy, all. If I have an instance of a ScrollComponent, how would I find out what the *maximum* scroll position can be? In the code attached, notice that by inspecting the values of scroll.scrollX I was able to figure out that in this case its maximum value is 194, but I'd now like to compute this number—or read it from a property! Anyone have any tips? I'm not able to find anything in the docs on this.
3
Nefaur Khandker
Is there a way to determine whether `Events.StateSwitchStart` is starting an animated or non-animated state transition? I have a situation where I have a parent layer (Layer A) and child layer (Layer B), and I want to use state changes in Layer A to control state changes in Layer B, but I want to make sure I'm animating Layer B state changes appropriately.
1
Michael Boswell
This may seem trivial, but is there away to indent documentation with tabs instead of spaces? Whenever you paste code from documentation, it shows an error and you have to delete the spaces and tab.
3

April 15

Michael Lee
Hi all, David Politi and I are planning the next Framer SF meetup, Jorn van Dijk will be there along with Koen Bok I believe, if you want to be kept in the loop, join the Framer San Francisco group :)
1
Mike Kyllo
Hi Framers, Does anyone know how to setup a nested for loop inside a for loop? That might be a little confusing: Names = ["Bob", "Mike","Jerry" ] for i in [0..Names.length] NamesRow = new Layer y: 700 + (i * 280) x: 87 parent: page for i in [0..Name.length] NamesSubLayer = new Layer parent: NamesRow[i] html: Names[i]
9

April 16

Paul Eichenberg
Hi people, I found a weird behaviour (or not) in Framer. I try to create a list from my own module. https://framer.cloud/lHFHE In the blue box I created a list using module, in the green below within Framer itself. In the layer section I can see that the listItem is at the different position. In the blue box it is a child layer of its container layer in the green box everything seems to be correct. My question is: is it a bug in Framer or do I something wrong with my module? Because if I try to build a more complex module then I can not access the right children layers correctly or I have to make really weird code constructions.
1
Krzysiek Podruczny
Hello, folks! I'm wondering if there is a way to make text inside Text Layer selectable? Any ideas? 🤔
4
Dan Freeman
Not sure if this is the right place to post something like this but I figured I would give this a chance. I am a UX/UI designer in the process of building a social media app. I am new to the program and am looking to build out a prototype in Framer. Ideally I would love to partner with someone who has a lot of experience in Framer building prototypes looking to build a new app. I have investors that want to see a finished prototype so I figured joining forces with someone more experienced in this space would speed up the process. If you are interested in learning more please reach out. I am looking for someone preferably in the US. Thanks
0
Stephen Crowley
Seattle-area Frameristas—please join us for our 23rd Framer Meetup this coming Thursday hosted by Substantial. https://www.facebook.com/events/670216446483724/?ti=icl
0

April 17

Steve Ruiz
Tired of making up names and dates and stuff yourself? I wrote up a guide for using the faker.js library to generate loads of placeholder data in Framer.
2
Siddharth S Rao
Hey everyone, here's a quick fun prototype that I came up for Twitter edits. Feedback please. https://medium.com/@awesomesid/hey-twitter-to-err-is-human-to-edit-is-divine-46a2793a1428 Also I am not sure if I can post the links to my Framer prototypes or medium posts explaining my thoughts process. I am just looking for some feedback on my design approaches. If you think I am promoting my work or doing something that offends this group or something along those lines, please let me know in the comments or point me in the right direction and I wouldn't post anymore links in this group. Thanks.
0
Vince Li
Hey Guys! Let’s say you have a layer with a width of 200 and it has an image with a width of 300. Framer then centers the image. How do I make the image stay in the top left? Thanks in advance!
2
Alex Ksikes
Hello everyone, I'm all new to Framer but already I love the idea of writing real actual code for animations. Now I am wondering how easy it is to port Framer animations code to React Native. Does anyone have experience doing this and how smooth the process is?
1
Jon Madison
aside from destroying and recreating a ScrollComponent, what's the most idiomatic way to "reset" a ScrollComponent? no dice on what i thought would make sense scroll.content = null scroll.children = null (feels dangerous, but regardless didn't work) hopefully i'm just missing something. thanks!
6
Paul Kooi
anyone have an example of a carousel that wraps? Looked around but can't seem to find one. Thanks!
2

April 18

Alen Kh
I'm having huge problem with mirroring, yesterday it was mirroring and today it doesn't, anyone knows why?
4
John Lee
Hey my Frameroos! I know I post WAaaay too many questions, with only about a 50% response rate... but I'm feeling lucky today! So here goes - I have a pageScroller and want to pass along the attributes from the page.onClick -> event to another layer (or just enlarge to fill full screen) then return to it's original size after closing out. Is there an easy way to do this? In my example, I'm referencing all the props I want with an Array. See images for hints, my friends! Some code which doesn't work: changeLayerStates = (target, layerProps) -> __for prop, i in layerProps ____for currentProps, a in target.props ______currentProps+=prop
2
Afnizar Nur Ghifari
Hey guys, anyone can help me how to make pulse effect on mapbox marker?
2
Johnny Garces
any nyc framer meetups?
3
Patryk Adaś
Hello! I've got a question about VR. Recently i was researching about prototyping in VR: I know Framer has an excellent VR component, however I find some features of A-Frame more useful (scene creating, inputs etc.) Did anyone tried to merge those two tools? I mean to create a Framer environment within A-Frame. I found this excellent demo from one of the meetups: http://share.framerjs.com/mowzcqlcd2am/ Any other references?
2
Kenneth Spry
Anyone ever play around with the originZ property on a rotationY flip? I'm not sure that I'll use it, but it's a pretty neat effect. This one has a parent perspective of 0, for an isometric effect, and an originZ of -50, but if you change it to, say, -900, you won't be disappointed!
0
Pietro Spagnolo
Hey! It is possible to create and animate a gradient?
12
Perre DiCarlo
Hi all, is there a Coffeescript equivalent to autoAlpha, which dynamically toggles visibility based on whenever opacity enters or exits 0? To improve performance with lots of hidden objects, and to be confident that if I previously hid something, it won’t interfere with my currently visible objects, I frequently find myself adding lines of code around my opacity instructions that toggles the visibility of an object, or when animating opacity to 0, adding an event listener that follows opacity animation (see image). autoAlpha does this in one step (and without an event listener). For example autoAlpha:1 first toggles visible to true, then animates the object to opacity 1. Conversely, autoAlpha:0 animates an object’s opacity to 0, then once finished, it automatically toggles visibility to false. I first encountered autoAlpha in Greensock’s plugins for Javascript and before that ActionScript. Perhaps a combined opacity+visibility control exists in Coffeescript or other languages with a different name? Thanks!
4

April 19

Jaco Otto
Hiya, I want to build a TV UI prototype which is controlled with a PS4 controller or a remote. I saw a tutorial which explains how to rewire a bluetooth controller to macbook keyboard keys. (https://blog.framer.com/apple-tv-prototype-with-framer-using-game-controller-59f1fc3d3b0f ) I want to use the keyboard arrow keys to move the selected states between different elements depending on the direction one press on the dpad of the remote. Down to select/focus on an element below, right to select/focus one on the right. etc. When you press Enter it needs to load a new screen or perhaps pause the video etc. Does anyone perhaps know a good tutorial for this? The one I linked to seems really hard to adapt to what i need, since it's specific for a grid of identical items. Perhaps due to my lack of coding skills I don't know how to group elements and move the selected state between different elements with the arrow keys. Any links or suggestions would be greatly appreciated. Thanks
3
Jerry Lin
Hi! How to organize full app prototype in framer? When I import .sketch, they depart from every artboard, it's really hard to merge. Does framer has any method or feature can help to build a FULL app prototype? Thanks for any suggestion(even intro other prototype tools).
1
Sergey Voronov
anyone else have this or its just my bad lack, in 30% of cases when i change something in code , the device image and prototype itself is not loading at all. i need to reload prototype manually to see it. console shows nothing. happens on different projects
2
Cordell Orel
I don't know if I'm the only one facing that problem but I updated my Framer (v88) but I still can't work with dynamic text. When I download an example on Framer with dynamic text it doesn't show me the "ReferenceError: Can't find variable: TextLayer". But when I write "title = new TextLayer" or copy/paste the right code from the example with dynamic text in a new Framer window, it automatically gives me this ReferenceError. In the pic attached you can see I got the ReferenceError while the code is the same with the Framer window in the background. I don't know what to do. ☹️
1
Sergey Voronov
was scared for a moment:)
0
Kenneth Spry
Thought I'd share an exercise some of you might find helpful.
1
Comést Savatino
Getting a weird error: Uncaught TypeError: this.options.curve is not a function @ framer.js:9 Also, Line 12 in Animation.coffee is where I get the error: @_animator = @options.curve(@options) Hmpf...
6
Atsushi Ienaka
Hello guys, Is there any good example to nest a scroll component in a page component? I found some posts about that in this community but those URLs are no longer available.
2
Javier Eduardo Treviño
Hello I remember hearing in a Koen Bok interview about how when you developed Framer initially you guys used a special technique for getting 60 frames per seconds out of web technologies, I am working on some ideas where I'd like to use this in a pure HTML/CSS/JS prototype I'm working on for a TV app , is it a specific W3C specification or a JS library that allows this?
3
Sergey Voronov
Hey guys, no plans to fix sketch importing issue? symbols are seen in preview, but can't be access by framer, in this sample i have artboard with 2 symbols, its imported with just artboard in inspector - even in framer beta http://share.framerjs.com/sc8bhquommo0/ also its creating 3 objects , i have 2 in sketch
3

April 20

Krzysiek Podruczny
Hey, I'm trying to debug some code but got stuck. I want to get dimensions of text selection and it works for single lines. When I try to select multiple lines of text, results are off. It seems to return the dimensions of window, not current selection. I've tried running the code on JSFiddle and it works correctly there: https://jsfiddle.net/gonfzpgu/ Compare the results with Framer prototype for different window sizes: https://framer.cloud/cJlXd/ Do you have any ideas why this is happening?
0
Sergey Voronov
Guys , this stuff is not collapsable, and u can't disable that from prototype with shareinfo. seems to much, especially on desktop prototypes
2
Matthew Barton
Am i correct in thinking if you have two layers on top of each other in a parent / child relationship, the child layer will not listen for events? I cannot seem to get a modal with 2 buttons to trigger.
0
Floris Verloop
Hey people, As of today it’s possible to control the privacy of your shared projects in Framer Cloud. Invite the whole company or restrict access to specific people. We’re excited to get this out there. Head over to our blog for the full details and let us know what you think.
3
Natasha Noltimier
Hey framer community. I'm experimenting with the VR component, and I'm wondering if there is a way to animate a transition when changing the environment images? Essentially I have two environments I want to transition the user between, but I want it to feel more like a fade than a stark changing of background images. Any thoughts?
1
Eyal Zaidman
iOS viewer bug, someone? For the past 24 hours I can't see my prototypes on my iPhone (from the cloud). I get a blank white screen or the following image (an image of the device on a white background). I've updated my project Framer Library, using Framer v88. Watching it on the browser works just fine. Appreciate any help
2
John Marstall
This isn’t the first status bar Framer module, but it uses native TextLayers and SVG – no assets to store. Enjoy. https://github.com/bpxl-labs/StatusBarLayer
0
Karina Kozinsky
Hi, Is it possible to use SVG filters in layer style in Framer?
1
Dan Clarke
Hi all. My Java/Coffeescript chops are still fairly light and I'm looking for advice. I have created a knob that can be rotated (doing this by dragging a hidden layer which updates the knobs .rotation). Whenever the knob has moved 45 degrees forward, I'd like it to change a state of a layer. I can do this 'hard coded' and call a method, but really I'd like to have a method that listens for a change and then causes an event i.e. when knob moves 45 degrees from the last time it did, raise a flag method listens for the flag to be raised (or a variable to be updated) method switches state of layer. not sure I explained myself too well?!
2
Patryk Adaś
after updating to newest version VRcomponent does not work: https://github.com/jonastreub/VRComponent/issues/3
2
Maarten Afink
Hi! Did anyone ever created a Trello board like in Framer?
4

April 21

Ben Rodenhäuser
I am doing a little slideshow using PageComponent for a client presentation. I want to be able to use the arrow keys on the keyboard to move through the slideshow (left/right), so I am listening for keydown events. This works fine, except that in Framer Studio, I get feedback sounds whenever I press the arrow key. Not so if I mirror the prototype in Safari, so that works "out of the box". Is there any way to avoid these sounds? Here is a stripped down version of my prototype (the keydown listener is towards the end):
6
Vilav Bhatt
Has one seen / built a project as a loan calculator? Slider-based, drag variables to alter final amount etc...
2
Giel Cobben
Hey guys, Today we proudly release the completely rebranded Mollie. In the past couple of months we completely restructured our products and features, built a new website from scratch, gave it all a fresh new design and copy, and completely refactored the whole backend and frontend. Check it out and let me know what you think. Like it on Dribbble — https://dribbble.com/shots/3441476-The-new-Mollie View prototype on Framer — https://framer.cloud/ukxXt/ Read some more about us and the rebranding on Medium — https://blog.mollie.com/the-new-mollie-2bf4af1428f4
4
Youssef Eid
Is there a Framer Toronto Facebook group?
4
Charlie Sneath
How I detect the target of a scroll event? I have an h-scroll inside a big v-scroll. I want to lock scroll on the v-scroll while the h-scroll is active.
6
Danaan Clarke
Hey guys, I'm using Adria Jimenez's framer inputs. Is there a way to change the styling on focus? i.e. border color changes
1

April 22

Vlad Mafteiu Scai
Hi guys, So been reading about Coffeescript 2, and it’s supposed improvement to keep in line with ES6+. Also been delivered as a NodeJS library if required. Are there any plans to update Framer to support it? I know devs were thinking of switching to ES6, but it’s too verbose for a designer.
0
Melissa Chukri
Happy Friday friends! I'm in UX designer/sometimes-FED and I’m building out a symbols library and template system of all our standards and styles for my UX team. I’m wondering if anyone has any useful plugins, or tips and tricks or references/communities (this page rocks btw) for Framer+Sketch. Please comment or DM me!!
2
Zeh Fernandes
Hi all, I just published a module to creates Loading Placeholders (like facebook feed). It uses the layer style as reference turning very modular and practical. » Demo: https://framer.cloud/NApWd/ » Code: https://github.com/zehfernandes/framer-loadingplaceholder I hope can be useful.
3
Jochen Leinberger
Hi, I am working on a page component with content inset. But my problem is that I can either add inset to the bottom or to to the top but not to both ends ... any ideas anyone?
2
Ray Alexander
hey all. I've asked a question similar to this before but I'm trying to see if there's a better solution out there. I'm trying to replicate a mobile webpage that is longer than the viewport (not a super rare case...) I make a scroll component that is screen width and height. inside that I put all my content. https://framer.cloud/hKQnt/ for quick reference. On framer cloud and framer mirror the content goes from top of screen to bottom of screen. which is fine. But I'm going to be building a webpage, and when you open it in safari on a phone, as you scroll down the 'page' the safari top and bottom bars remain static, they don't fold away like they do in real life. So the solution I've already discovered is to replicate the safari bars as shown here: https://blog.framer.com/from-a-to-b-and-back-again-196ffd26ec48 and then open the prototype on framer mirror or cloud. However, I want to upload my prototypes to a server so that the usability folks can open them on any phone directly from url. So the TL;DR: is there a way to construct my main page scorllcomponent so that when it's opened on mobile safari the status bars react to scrolling correctly?
3
Jian Li
hey, how to transcode this html code in framer? ________ <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=abcde"></script> <script type="text/javascript"> var map = new AMap.Map('container',{ resizeEnable: true, zoom: 10, center: [116.480983, 40.0958] }); _________ I try to do this in framer: _________ map = new Layer html: "<iframe src='http://webapi.amap.com/maps?v=1.3&key=abcde&output=embed>'</iframe>" map.html += "<div id='map'></div>" mapElement = p2_map.querySelector("#map") mapElement.style.height = pageDa.height+"px" map = new AMap.map (mapElement) _____ and I got a error: ReferenceError: Can't find variable: AMap
2
Alex Venus
Hey Framer-Family, Vivien and me are currently writing our bachelor-thesis on the topic of media manipulation and we would kindly ask you guys to answer some questions in our survey for us: https://echo43.typeform.com/to/LdjWUJ @Admins if this is against the rules please remove :)
0

April 23

Andrew Nalband
Jorn van Dijk I'm seeing an inception situation on Framer Cloud links opened in Safari on iPhone. Clinton Jordaan mentioned it as well. For some reason, the device mockup is showing. Take a look:
4
Chris Boy
Hi, i don`t get firebase to work in Framer. What i'm trying to achieve is an Login in my Prototype. Can anyone help? Thanks!
1
Steve Ruiz
Events.Click has been bugging me for a while, as it fires on mouseup events even if the preceding mousedown event occurred somewhere else. This means a lot of false clicks, such as when a user 'cancels' a click by moving the mouse off of the clickable layer (and onto another), or when a drag ends over an area with an onClick listener. Gesture events take this into account and know to cancel when a gesture's end event occurs on a different layer than its start event. This makes Events.Tap an excellent replacement for Events.Click, however I'd like to see the same functionality extended to Events.Click.
4

April 24

Bhawna Sharma
Hi guys! I am trying to open a project in framer, but I am getting the notification that service is unavailable (503)
10
Patryk Adaś
played around with mapbox and 3d buildings, prototype available here: https://framer.cloud/JqqON feel free to play around with it :)
1
Eyal Zaidman
Is it possible to color tint png images?
4
Calvin Teoh
Does anyone know how I can get rid of this column on Framer Cloud links? Framer.Extras.ShareInfo.disable() only removes the share overlay. at the bottom of the column. But the column still remains. It's a little annoying when I'm user testing some website prototypes and it distracts from the experience.
6
Evgeny Lecker
Hey guys, just uploaded a prototype on emotion detection, that I will explain a bit at todays framer meetup in munich. Have fun with it :) (doesn't work in safari & studio, due to web rtc)
0
Pete Schaffner
Is there a way to extend default `Layer` getters/setters? In other words, it would be nice to do something like: @define "width", get: -> super # custom shtuff
22
Summer Bedard
If anyone is looking for a simple way to implement sticky headers - I just came across this module which is a huge time saver:
0
Vlad Mafteiu Scai
How exactly does one loop over a nested object in coffeescript? for name, i in usernames - I got this for a array with strings, but need something for nested objects as well.
3
Vlad Mafteiu Scai
Is this a bug? It clearly says the screen.width is 750px since it’s an iPhone 7 However when I attempt to assign it to a layer and make a calculation the screen.width is actually way larger for some reason. You can see that clearly from the math.
1

April 25

Kevin Mao
Here's a solution for how to prevent a button (with a downstate/pressed state) from activating its downstate or function while dragging (it's in a vertical scroll component within a horizontal page component). Posting this in case it helps anyone, because I couldn't find what I was looking for in the group. The button functions look like this: button.onTouchStart ->  button.animate   #animationstuff button.onTouchMove ->  button.stateSwitch("default") button.onTouchEnd ->  button.animate("default")  if pageComponent.content.x is 0   Utils.delay 0.2, ->    #buttonfunction This makes it feel like some apps where you can press and hold down on a button, see the downstate, but start dragging without activating the button. I tried a ton of stuff with ignoreEvents and checking for isMoving to no avail. Please let me know if there's a better solution with any part of the code or to make it look better!! keywords for people searching: stop stopping scrolling layer
3
Camille Zapata
Hi, I have a horizontally scrolling PageComponent inside another Horizontal PageComponent. How can I lock the parent PageComponent (so it doesn't scroll as I scroll through the nested pagecomponent)? I've tried using "directionlock" but it doesn't seem to be fixing my issue. Thanks!
3
Dan Clarke
can I use struct in framer?
1
Vlad Mafteiu Scai
Is there any Framer module that takes JSON and converts it to CSON and back?
1
Dominik Wierl
I'm having pretty big issues with the mirror app on the iPhone 7: I'm seeing my prototypes in the app, but when I click on one, it loads for hours and it slows down my wifi connection. Or it seems like to do this. The prototype files are not really big, so I don't think that this is the issue. Am I doing something wrong or is this a known issue?
8
Vanessa Slavich
Hi Framers! (Disclaimer: I'm pretty new to Framer). I'm trying to use FlowComponent to auto transition to the next screen. Does anyone have tips on using FlowComponent? Is this the right tool for animating between screens?
2
Vlad Mafteiu Scai
How can I detect the x,y values for a continuous touch or mouse hover event? I am not looking to move a layer, but detect if the layer underneath matches the cursor/touch event current position.
2
Jian Li
Hi, I create and delete buttons dynamically, and I try to record how many buttons I deleted. However the number recorded doesn't correct, I confused why the number increases exponentially instead of one by one. https://framer.cloud/AHwfY/ thanks!!!!
2
Fausto Pérez
Here are some pics of the 2nd Madrid Meetup from last Friday. Around 40 people attended and Lucia Gomez was a fantastic host! Great space and great atmosphere, we get the feeling that the Madrid community is growing! Looking forward to the third one! Photos: Andres Felipe Botero
2
Junu Joseph Yang
Hi framer experts! I had a quick question about draggable constraints. Is it possible to use isBeyondConstraints to disable/enable the constraints? I want to make a layer move to a new position if it is dragged beyond its constraint. I've tried a simple onDragEnd with a if/then(without using constraints), but it's buggy with maybe overlap of animation call event with post-drag inertia from dragging. Code below: layerA = new Layer layerA.width = Framer.Device.screen.width layerA.height = Framer.Device.screen.height layerA.draggable.enabled=true layerA.draggable.horizontal = false layerA.draggable.constraints = x: 0 y: 0 width: layerA.width height: 300 layerA.states.add moveOffScreen: y: 2000 layerA.onDragEnd -> if layerA.isBeyondConstraints = true layerA.states.switch ("moveOffScreen") layerA.draggable.constraints = null print("off")
3

April 26

Calob Mejias
Anyone running Framer on a Hackintosh?
4
Marty Laurita
Hey Framers! Quick question: has anyone tried to run prototypes using a local database instead of using something like Firebase? We're kind of stuck but we think we want to disable the "same origin policy" on the local framer server. We've also tried an ajax module, that failed as well. Thoughts?
7
Sindu Narasimhan
Are there any existing modules for connecting to bluetooth devices? I am looking for bi-directional communication with a BLE device :)
4
JoseMi Hank Chinaski
Hello everyone. I'm really newbie at framer (bought the license 10 mins ago) And I'm struggling to convert my current sketch design to a prototype. I'm importing from sketch, but unless I'm using a device template in framer, there is no way that I can fit my screen with my design. It gets cropped or too small in a corner. Is there any way to get around of this or just making my website smaller?
4
Pat Tato
Anyone have any guides on animating the textLayer?
1
Mike Paggi
Salim Abousallam not sure if my emails / messages are getting through...can you shoot me an email if you can on an update? thanks!
0
Eli Rousso
Is there a way using FlowComponent to reset the queue of layers? For instance, I'm trying to show a flow between a few cards and once the cards are hidden, I'd like to show the cards again, starting a new "session" to the flow, without the flow remembering the last "session." The only way right now to reset the flow is to present the first card, but the previous action still takes the user back to the old flow.
0
Jon Madison
TextLayer -- how do we add shadow on the layer itself (not the text)?
2
Marc Krenn
I just wanted to update an existing Framer Cloud file but Framer, for whatever reason (lib update?), decided to upload it as a new project. Turned out, the projectId of my local Framer file and the one in the cloud didn't match up. If you ever run into the same problem, you can force an update by doing the following: 1) Visit https://framer.cloud/__ExistingCloudFile__/framer/config.json 2) Copy the value assigned to "projectId" (looks like a serial number) 3) Paste it in your local Framer project /yourProject/framer/config.json 4) Open yourProject in Framer → Cloud → Update
6
Vlad Mafteiu Scai
I noticed in some project tuts, people use instead of tab, 4 spaces for the indentation. Is there anyway to get the 4 space effect quickly, without pressing Space key 4 times? Just curious, tab key works just fine as well.
2
Marc Krenn
GIPHY UP your prototype with framer-giphy Example: https://framer.cloud/jYhqu/ Github (download/docs): https://github.com/marckrenn/framer-giphy/
7

April 27

JinJu Jang
Hi everyone, Long time no see! :D I made a simple Youtube style video component the other day. I thought It can be a nice sample for someone who wants to achieve similar UI. Hope you enjoy!
0
JoseMi Hank Chinaski
Hey again. As this question is not related to my previous one, thought is better to start a new conv. I want to create something like a chatbot (it doesn't have to be intelligent at all, just follow a journey) Maybe that's too much for a newb like me, but I wonder if you guys have any tutorial or suggestion so I can crack on and try it by myself. I've seen people replicating facebook messenger but this one has to be full web and not msg window. Can I just use that and change the style or that's not how framerjs works? Thanks in advance!
1
Jacopo Moretto
Why Framer Studio doesn't recognize extended Layer classes? No handle appear on the left. I created a component that I'll use a lot and it would be very useful to position it with autoCode.
1
Jiwoong Lee
I have to share this to Framer community where I learned all this from :) Hope someone could find this helpful.
0
Steve Ruiz
Junu Joseph Yang asked a question yesterday that got me thinking about changing a draggable layer's constraints while that layer is dragging. This touches on a pretty common UI element - an element that can be dragged between a set number of positions - so I put together a class to handle it. Has anyone worked on something similar?
2
Danny James List
Hey all, thanks for accepting me! Really new to Framer here and have been playing around (Loving it so far). I finally got a prototype to do what I wanted so I uploaded it to the cloud, but one of my layers is missing completely. I have the same problem locally if I choose present, albeit a different layer. Am I missing something?
12
Floris Verloop
Hi all, Today we’ve pushed another update to Framer Cloud. The project view has a brand new design with a dynamic sidebar that will no longer get in the way of your work. You will also be able to browse through previous versions of your projects and see which project members have seen your latest design. Read more about this release on our blog
10
Joe Puddle
Hi all, im super new to framer and trying to create a really basic animation but am having a little trouble. For some reason the top of my image is being cut off when I animate it in even though there is no mask on the file im porting. Any help would be much appreciated. Screen of my Sketch file below and link to what im trying to make also https://framer.cloud/LrzyS cheers!
5
John Smith
Question I am running a for-loop which I animate several layers y positions. I'm trying to have a function fire off once the last layer animation ends. Is this possible with coffeescript? here the code I done so far screenTrans = -> for layer, index in arr layer.animate delay: .1 * index properties: opacity: index * 0 y: layer.y + 50 curve: Spring(damping: .6)
4
Andrew Cunliffe
My mobile prototypes used to seem to scale perfectly on iPhone 7 when imported from Sketch at 2x (from 375px artboards), but after the update, they seem to not? Works fine on my desktop browser, but on mirror and cloud it seems to shrink to 1x (375px width) link to the prototype https://framer.cloud/GQVgB
3
Taylor Palmer
Hi all, I have a Sketch file with multiple layers with the same name "card", but Framer brings them in as card1, card2, etc. This prevents me from being able to select them all with sketch.childrenWithName("card"). What's best practice here, without renaming all of them individually?
12
Aalok Trivedi
So I have a list of cells with a button in each cell. When you tap the cell, it does interaction1. When you tap on the button in the cell, it does interaction 2. However, when I tap the button, it triggers interaction 1 and 2. How do I prevent the cell interaction from triggering when I tap the button? https://framer.cloud/WaEpk (Just type anything to bring up the results. Right now, I only made the first cell tappable)
0
Giovanni Caruso
Old silly question. Any cool way to programmatically get the y position of a series of cards inside a scrollComponent? Code here: https://framer.cloud/UNFVK. *** Btw, the new Framer kicks ass <3
2
Ban Nguyen
Hi, Does anyone have a sample how to achieve this prototype? Show the indicator on the top menu while scrolling through each section (when the section title is near the top) Also user can click on the the top menu to scroll to its section. Thank you! I am using StickyHeader module and Utils.moderate but not sure what numbers should I use. Could someone help please? JL Flores Mena
4
Agisilaos Tsaraboulidis
Hello guys, Glad that I'm sharing a prototype built with Framer today. Recently I picked up on a side project of mine. It's called Daily Quotes and will help you stay motivated and inspired throughout the day. This is a really early version of the product and I want to publish it & build asap with code (iOS). This version will only allow the user to see a quote on their phones every day. Every day that quote will be updated at 6 am and a notification will be sent to the user to inform him/her about it at 9 am. Hint: Tap the Quotes Screen so you can see the different quotes I added to the prototype. That action will not be available on the coded product. I share the prototype so I can get feedback related to that version. I would like to improve it and make it better. Take a minute to check it out and tell me your thoughts, concerns, feature requests and the improvements that you will like to see now and in the future. Features that I consider adding after the launch: - The ability so the user can save the quote in the camera roll. - The ability so the user can see the previous quotes (past days - week) in a beautiful collection view. - The ability so the user can change the background of the quote so he/she can make it more personal. - The user will be able to change the time that quote will be refreshed. General: P.s 1: It was great meeting Niels van Hoorn at App Builders Conference, we talked about design, development, and Framer and so much more. That was the prototype I wanted to share with you back then Niels but I totally forgot 🤣 P.s 2: The new look of Framer looks totally awesome! You guys ship like crazy. Can't wait to see the next update. Here's the prototype: https://framer.cloud/iRTrF
1
Pavel Laptev
Hi, guys! Another cut from #framerlondon meetup. Sergey Voronov tells about FlowComponent 🤘 and sorry for quality
0

April 28

Giles Perry
Is it possible to use a line break in a TextLayer?
3
Koen Bok
Our friend and design focussed VC Steve Vassallo who is also one of the first investors in Framer, just announced a book about about design for startups, which proudly features Framer in the video: The way to design.
0
Sergey Voronov
#framerlondon meetup tonight was really big, with some sexy demos on minecraft and physics engine:). And we also joint our forces with sketch guys, and did a little bit of intro to Abstract app
10
Afnizar Nur Ghifari
Hi everyone, If you are from Indonesia 🇮🇩 and looking for Framer Community Come join us! 😉https://www.facebook.com/groups/207699399725111/
0
Lukas Guschlbauer
Hey! I'm looking for (already existing) basic modules (for web prototypes)... Things like: - Buttons - Inputs (Radio / Checkbox / Select ...) - Tooltips - etc... Of course those things are not so hard to build, but I'd love to be able to "bootstrap" projects before I start with those modules I always need and I don't want to build them myself if there are already good ones out there! ;)
1
Vlad Mafteiu Scai
The new look of Framer is very nice but.... where exactly are the Upload to Cloud and sync to phone features? :D Someone overlooked adding some buttons I see. Also snapping the phone to left side of the screen makes the window vanish.
2
Jorn van Dijk
Someone on Twitter asked if we can add the iPhone 7 Red edition. We likely won’t because its temporary, but I made it as a custom device. Feel free to use it!
0
Tes Mat
Hey, if you’re in 🇺🇦 Ukraine: there’s now a Framer group for Kyiv: https://www.facebook.com/groups/FramerKyiv/
2
Andrew Nalband
So...this release is fantastic. I'm impressed. As I started using it, something small occurred to me. Here's a humble suggestion. Jorn van DijkBenjamin Den BoerJonas TreubFloris Verloop
1
Tim Barkow
So, maybe I need to dig into the docs, but this new interface is not working for me. I don't hate it, but it's definitely getting in my way. Docked Preview refuses to resize in any way that doesn't use the full height of the app's window. Undocking Preview is extremely difficult, especially on a laptop. All the Preview controls are disabled, seemingly all the time. Previewing a Macbook takes up 70% of the app window, leaving maybe 20% for the editor which is now effectively unusable -- coffeescript and line wrapping do not play well together. I also can't reorganize or hide any of the columns to get some workspace back. I don't say this lightly, because I really love framer, but at the moment, this is a clear step backwards for my productivity.
3
Steve Ruiz
Here's a project I presented at last night's Framer London meetup, a prototype for a simple isometric minecraft-like game, where players can build, destroy, and navigate through an environment of cubes.
1
Vesa Metsätähti
Hi! TextLayer is apparently native feature of Framer. Has the convertToTextLayer() function been implemented as well?
1
Jorn van Dijk
I saw some folks asking to bring the device color options (gold iPhone, silver Nexus, etc) back. Good news, they never left! You just have to toggle the chrome on first, for the color options to become available.
2
Emil Widlund
I'm excited to share how my team at Electronic Arts build advanced UI-prototypes tailored for gamepad-environments - with Framer.
5
Jon Madison
new framer looks AWESOME. still want an easy way to bring in external modules. :-P
2

April 29

Aaron Azlant
Has anybody had success exporting elements of prototypes created in Framer into a react.js application?
2
Agisilaos Tsaraboulidis
Hello guys, As I see the new update focus more on the code area and makes it easier to have more space when you write code. With that in mind, I would love to suggest a future request of mine. In the future, I would love to see the ability to change the code editor theme/ make code editor themes for Framer! It would be great to customize Framer like this so every designer can make it their Framer more personal. What do you guys think of that?
1
Charlie Sneath
Do modules need to be in top-level /modules folder? Or can they be included when they're in other folders like /modules/project-name? My syntax of: module = require("project/module").functionName isn't working.
3

April 30

Javier Eduardo Treviño
Hello guys Is there any official documentation on how to embed a Framer prototype inside HTML or WordPress post? I am rebuilding my portfolio and wanna include some projects in there
2
Ian McClure
I think I am running into a bug in framer. I have a layer with two states, I can cycle between them as a part of a stateSwitchEnd trigger. If I try to cycle between them in a touch event, it will animate to the "large" state. When the layer tries to cycle to the "small" state, the state switch event starts but never finishes. Edit: it appears to be a weird interaction between the tap and drag event constraints. I think it is because when the layer changes size, it moves the layer outside the bounds of the constraints. https://framer.cloud/xkcYo/
0
Yaseen Abbas
Hi Guys, i am working on a project and have used design thinking to come up with some ideas, there is a particular idea related to a designing a buy journey that i need help with to prototype. We don't have the skill set in our team of 2.. :) Can you help? its a drag and drop concept and i am willing to pay someone to help?
0
Tara Chandi
I'm trying to add a small piece of audio to my Framer prototype. Can anyone help me?
2
Timur Nurutdinov
Framer Inventory 3 plugin for Sketch App is released: https://timurnurutdinov.github.io/framerinventory/ It provides an alternative semantic way to import – not layers but states, means you import animations rather than just visuals. Run & Paste code into Framer (assets are automatically placed in your project). Plugin also exports complete prototypes to preview custom transitions in Framer. Supports custom code & Reimport with previously written logic being saved. Move layers in Sketch and get updated prototype in seconds! Watch the teaser: https://vimeo.com/215017128 Hope you'll enjoy it.
5
Yaseen Abbas
also are there any courses on how to use framer properly?
1
Jean-Francois Hector
Hello all, I'd like to know how to use the iOS 10 fonts 'SF text' and 'SF display' in my Framer prototypes. I normally use Google Fonts to import fonts into my prototype, but the SF fonts aren't available at Google Fonts. I'm wondering how everyone achieves this?
2
Tim Kjær Lange
Is there a way to inject snippets at the cursor instead of at the bottom of the document?
1

Monthly archives

2017

2016

2015

2014

2013