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

What is Framer? Join the Community
Return to index

August 2016

August 01

Marty Laurita
Here's a little "launch sequence" interaction for this #framerfriday. Enjoy your weekend! On Dribbble: https://dribbble.com/shots/2868233-Launch-Sequence
6
Misha Eliseev
Yo, can someone help me transform shape? So I have something like an arrow. On a click It should become longer and change the background and border color. What can be done? I have no Idea how to make something besides rectangles in Framer, let alone animating it.
5
Louis Currie
Hi guys is there any way to listen to the finger position while holding the screen? A bit like MouseOver / MouseOut in the attached prototype http://share.framerjs.com/aq8b32wty6dh/
3
Christian Hagel
I'm running into a discrepancy in what subLayers returns between Framer Studio and the Browser Framer Studio returns name, the browser does not print myLayer.subLayers Here are two samples Framer studio: <Header_col id:101 name:fb_pain_header (1406,202) 602x50>, <Label_medium id:102 name:fb_pain_byline (1406,272) 602x50> Browser (Chrome & Safari on Mac, Chrome on Windows) <Header_col id:101 (1406,202) 602x50>, <Label_medium id:102 (1406,272) 602x50>, Any ideas for ways I can work around this? Specifically i'm using childrenWithName to find a layer and bring it to the front.
3
Gadzhi Kharkharov
Hey guys, are you testing a new web viewer? Trying to share a project and get this new type of viewer UI with lots of JS errors. Wondering what's wrong.
2
Terry Tien
Hi guys! Does Utils.textSize still on board now?
1

August 02

Manas Vaze
n00b question: Why are my layers not in order after an import from sketch? basically, my navBar and tabBar of the iOS prototype are below the scrollView.
3
Steven Ren
Hey guys, with my limited knowledge, there is a issue chokes me, it's about iOS keyboard position with "input" element. follow the image code, when input element on focus and iOS keyboard show up, it will make my homeScreen move up, is there have any solution let homeScreen hold its own position?? thanks.
3
Raitis Linde
Hi, everyone! I've created an interactive grid prototype for one of the projects. Perhaps may be of use to someone else as well – http://share.framerjs.com/8fdrvhbl4x1l/ A bit more detailed description – https:[email protected][email protected]rfj
2
Sergi Bosch
Hi smart people, I'm looking for help making my framer.js code modular. As you can see in this simple prototype (that includes the Input-Framer module by @ajimix), a lot of my code is repetitive. I'd love to hear people's suggestions on how to remove it's redundancies. Thanks! Here's the prototype:
2
Ivan Afandi
Playing around with Framer JS. Framer JS can be really helpful when designing simple interactions :)
1
Isa Bison
Can you pass a reference to the app.coffee scope to a function in a module? Can you even get a reference to the app.coffee scope? Or, is there a way to extend the functionality of whatever object app.coffee is used to constitute? e.g. App::decorateAllLayers = -> for layer in layers ... From what I understand, the short answer is no, and the medium answer is to make a snippet. (Ps. This Bison is intentionally trying to enter the china shop and do some unsafe things.)
2
Tuguldur Tuvshinbayar
Hey everyone, can someone explain me the relation between superlayers and sublayers. For some reason, I can't manage to make onTap and onClick functions work on sublayers whereas those event listeners seem to be perfectly working on superlayers
3
Gregory J. Orton
I have a request: there seems to be a huuuuuuge number of 'undocumented' functions / features in Framer JS that either the framer team have not got around to doing, or they just assumed people know (if they're pr0 JSers, or don't need). An example is from another post here from about 2 months ago: "There's an undocumented Utils.textSize(layer.html, styles, constraints)." (it's definitely not documented here: http://framer.com/docs/#utils.utilities) and I have used this in my projects: "json = Utils.domLoadDataSync 'someJSONFile.json' layerA.html = json.someProperty" I understand that Framer is coffeescript compiling to JS and running as HTML + CSS + JS inside a container so it has access to basically ALL of what JS and HTML have to offer, but there are limitations, for example binding event listeners: "layer.player.on "ended", -> ..." doesn't work where "layer.player.addEventListener "ended", -> ..." does work. Anybody else have any cool 'undocumented' features / tools that they'd like to share?
3
Ahmet Bekteş
Can we make a turntable widget within Framer? I have 36 different images and want to create a turntable effect of a physical product? I found https://codyhouse.co/gem/360-degrees-product-viewer/ while looking something for free :)
2
Suhaila B
Hey everyone! I just started using Framer today but I'm having some issues with using delays. I have a layer (which I imported from Sketch) and want it to automatically animate into the page automatically after another animation is done. So I'm using the .onAnimationEnd function and everything works (repositioning, timing, etc) except the delay. If I set the delay to anything other than .5, the layer starts glitching onto the screen (as in it animates in but in a very janky way and inches in and out slowly in the process). Any ideas?
3
Aaron Benjamin
For those who like to work with data, this is a handy tool to bring Dummi data into Framer:
8
Brian Byle
Stumbled across this today: class List extends ScrollComponent constructor: -> @tasks= [] @iconCheck = iconCheck = new Layer width: ... ..... ..... My question is the line : "iconCheck = iconCheck = new Layer" Is that shorthand for something or literally just assigning "iconCheck = new Layer" value to the variable iconCheck? Thx in advance
3
Marc Krenn
UPDATE: You can do pretty much the same with using layer.props! Thanks Andreas for pointing this out. https://www.facebook.com/groups/framerjs/permalink/810536505740089/?comment_id=810926565701083&reply_comment_id=810999649027108&comment_tracking=%7B%22tn%22%3A%22R1%22%7D ################ Original post: Feature request/proposal: Layer presets Wouldn't it be cool if we could define complex layer style presets and 'load' them whenever needed? http://share.framerjs.com/coubggnwppbv/
12

August 03

Benjamin E Saravia
Hello community, did this. I've mixed a deck card idea with the flipCard modules, that is around. http://share.framerjs.com/wfzzbcb3ugql/ * I guess it can be converted to a module if somebody wants to reuse it.
1
Lisa Reburn
Hi, I was wondering how compatible framerjs is with jQuery mobile? I am creating a hybrid app using JS, Html5, CSS and jQuery mobile and packing using phonegap. Also, is there a way to export link to view on mobile device?
1
黎竑廷
Hi all After I import my sketch file into FramerJS i dont know how to replace my sketch file background color block to the layer which defined in FramerJS ( that's, bg = new layer .... ) PLEASE HELP
4
Nick Hanigan
I'm trying to help a friend with a solution to drop coffee through a mask. I thought if the mask shape was a triangle it would clip the animation behind it to that shape. I am not sure if my code is correct however... as I appear to be doing it wrong. See http://share.framerjs.com/twl9kv4ht5ey/ (I'm still learning). cc. Terry Tien
2
Josh Puckett
I liked Black Ray's spring visualizer, so here's a rebound: • Custom spring and animator • Spring curve is visualized as a path • Curve updates in real time as values change • You can scrub the curve to inspect any point in time Code is scrappy, but take a look to see how spring systems/animators work (this one is very simple): http://share.framerjs.com/rxexiyc4he9u/
8
Philippe Côté
Hello Framer Group, Is there a way to draw a bezier curve then animate the points directly in Framer without using any external JavaScript libraries? I've looked upon paper.js, p5.js, two.js and snap.svg but thought there might be a much simpler way... Thank you very much.
6
Luis Ricardo La Torre
305 Today is the day! People of Framer group if you know anyone in Miami pass along this video.
0
Josh Ackerman
A while ago I posted a lock screen prototype for a concept phone. I recently decided to revisit the project, and add a better design with a lot more functionality. There are now user accounts with profile pictures, custom clock designs, and different private notification preferences. Additionally, clicking on any "complication" will reveal a lock screen app, and long pressing on any public notification will reveal a detailed dialog. The project is about 1200 lines of code, and includes a lot of the different things Framer has to offer (Scroll views, page components, custom classes, layers, custom devices, etc.), so even though it isn't the nicest code, I will post it if there is enough interest. Like on Dribbble: https://dribbble.com/shots/2877205-Lock-Screen-Prototype-V2 Version 1: https://dribbble.com/shots/2096562-New-Lock-Screen-Prototype Edit: Here is the Framer file, http://share.framerjs.com/7k2k7ei4r4fh/. I changed the font to Open Sans, so there would be no problems with displaying the prototype. Also note that the code is far from perfect (It's a prototype), and I tried to add some comments about what I will improve in future versions (like type checking, setters and getters, etc.).
2
Aaron Yih
Hi, I'm wondering if it's possible to make something like this in with framer? Perhaps with svgs? Thanks!
2
Jon Madison
re: Import from Sketch to Framer -- the naming is kind of frustrating, i.e. we can't set things up hierarchically, meaning. I can't have two groups with the same name because Framer wants to append a(n incremented) number at the end, instead of respecting the hierarchy. it'd be far more useful, for example, if i had artboard A with a group named "group" and artboard B with a group named "group", and, after importing i could simply reference as A.group and B.group. Am i missing something? or is this a future opportunity for Framer?
4
Chris Wang
If a layer is nested in parent layers, how do I get its position on the screen rather than relative to its parent? Seems like the default x,y is the position relative to its parent layer.
1

August 04

Mohsin Amjed
I have multiple Page components that are being toggled on/off by tabs. For some reason the .content is pushing all the items below as if they were stacked even though I have visible: false
1
Petter Nilsson
Hey! Has anyone used an online service to user test their Framer prototype, like usertesting.com? Which service is the most suitable for Framer prototypes, and specifically what’s the best way of presenting it fullscreen (without browser ui) to the user while testing? Thanks!
12
Uğur Erbaş
Hi everyone, It’s the another Framerjs prototype.
0
Sergey Voronov
any ideas how to fix transparent background of device? working with motorola 360 custom device, at moment I change something here Screen.backgroundColor="rgba(255,255,255,0)", device background becomes transparent, if i click save or share - it goes black automatically http://share.framerjs.com/bzpdhtc76lj9/
2
Elise Lawley
feeling like this should be easier than it is right now, but I'm trying to dismiss the keyboard triggered by an event. - i.e. when form is submitted, go to this view with device keyboard dismissed. I'm having trouble dismissing the keyboard. If anyone can help me out, that'd be great!
2
Paul Rich
Hey, is it possible to use snap to page in pagecomponent without listing all pages between?
2
Jon Arnold
I just tried to play around with a simple 3d animation (rotationZ) with an element I imported in Sketch. But as soon as I change rotationZ some of layers are cropped. I also tried wrapping layers and giving its parent a perspective. What am I doing wrong? Is 3d broken in Framer? Most of the examples here are broken with the update version of Framer.
2
Jordan Robert Dobson
Any thoughts on this grid usage? I'm helping my brother with a project and looking for layout feedback. http://jrdn.io/1O1h3L420L3T Tap the screen to see the grid.
4
Yang Ziyi
Hi guys, I'm learning using classes in Framer, and trying to make a bar chart. Things puzzle me is that the graph always animates from the upper side rather than the bottom side. What could I do to fix this issue? Thanks!
1
Fariz Rizaldy
Before it, Thanks for accept me to this group. I want to ask about prototyping with Framer JS but in Windows Environment (Sorry for Mac User, I hope you understand my problem, hehe). The question: " Is it possible to import PSD Files to Framer JS Project?" Sorry for stupid question, but I just getting started to prototyping with Framer JS. Big Thanks!
2
Javier Eduardo Treviño
can you guys post your favourite API's to use for filling out your prototypes with data? this is a practice that I wanna get started with
5
Blaine Billingsley
I sent feedback through the app but maybe there's another solution. mousewheelEnabled scrolling seems to be borked in the new version. It will only scroll the code panel, even when trying to click into the right panel. Anybody else having this prob?
1
Chris Wang
I've having problems with drag constraints and drag momentum. Seems like when I add drag constraints, the momentum = false is ignored. Can someone help me take a look?
4

August 05

Wonyong Choi
Hello~ Framers, I’m so excited to share my work here. I made card interaction based on Scroll Component. I’m a begginer in the framer ang This is my first work with code. So.. it’s very immature. (I know.. :P ) but I hope you enjoy it ! Thanks~ See you soon. http://share.framerjs.com/xsmnsevpvh3y/
1
ShekMan Tang
Quick question: How can I trigger an event with Keyboard input? E.g. set a layer visible when "Enter" key is clicked. (Using FramerStudio i.e. CoffeeScript) Thanks!
4
Olav Ljosland
I have made a prototype using Framerjs and Sketch, sized for an iPhone 6S. Now i would like to make it scale to any device. How would i go about achieving this? I tried these two lines, and while it did scale most elements to the proper size, positions and animations were off: artboardWidth = 750 Framer.Device.contentScale = (Screen.width / artboardWidth) Any advice?
5
Rob Byrd
Hello, I am trying to create a a horizontal scroll section within the overall page scroll. For some reason the horizontal scroll section bounces back and while it knows a mouseWheel event occurs, it doesn't have any scrolling effect. scroll is overall page and scrollComponent is the horizontal scrolling component within the page.
1
Misha Eliseev
Hi I've got a prototype I made for iPhone Plus in 3x Is of possible to preview it on normal iPhone with as little modification on code as possible?
1
Sergey Voronov
we will start broadcasting #framerlondon Campus London in 40 minutes or so
1
Rob Byrd
Unable to import modules. I can't seem to figure out what I'm doing wrong...I've placed the module files in the modules folder within my project and for some reason it just isn't able to pick them up.
1
Irfan Qureshi
FramerJS event at Campus London, live on Twitter now.
1
Stephen Crowley
https://www.facebook.com/events/1209348709117086/
0

August 06

Randy Lutcavich
How can I get onScroll to be called when a scroll object is animating to a new scrollX position?
6
Jorn van Dijk
Live from the Framer Amsterdam Meetup!
48
Misha Eliseev
Sup, I want to add new hands for my prototypes (or change default one) how can I do it? Thanks
1
Luis Ricardo La Torre
Koen is my friend on Facebook now! #KoenBeMyMentor :p
1
Jorge Alvarez
Here's an issue I come across often. I have to create a bunch of layers with the same properties, than I will then need to recall individually. I'll do a for to create all of them, and then do something like: box.name= "box_"+ (i+1) For some reason, I'm unable to then call those items using their name, as in: box_1.opacity = 0 Any clues on why this doesn't work and how to do it properly? Thanks!
3

August 07

Michael-Owen Liston
Hello Framers! New to Framer and the wiles of Coffeescript, so forgive me the obvious question, but I haven’t been able to find documentation elsewhere: 1. The code below compiles, but does not return any value for parent.width leftCol = new Layer width: 800 height: 800 for i in [0...3] layer = new Layer parent: leftCol name: "scoreBox" + i ----> width: parent.width / 4 height: 200 x: i * 220 y: 0 2. To get the value of the parent layer in this case, I have to call it by name leftCol = new Layer width: 800 height: 500 for i in [0...3] layer = new Layer parent: leftCol name: "scoreBox" + i ----> width: leftCol.width / 4 height: 200 x: i * 220 y: 0 3. Option #2 doesn’t seem very DRY. Is there something about namespaces or something else fundamental that I’m overlooking that’s preventing #1 from working as intended?
2
Paul Rich
Hey, is it possible to reach the three buttons under the scroll component like this?
1
Jiaxin Chen
Hello, Benjamin Den Boer The Audio.module is great, but there're some problem: When I set [progressBar, currentTime, timeLeft] both true, the progressBar and currentTime doesn't work anymore. If I set some states for currentTime and timeLeft, they will both broken. How can we fix this? Thanks!
0
Michael McKenna
As someone new to coding and looking at many examples, trying to figure out how to integrate the Sketch layers with the examples. I still can't figure out David Lee's example that push the layers into an array without having to write each layer ... I'm looking at the PageComponent and wondering again, how do I get my artboards in there instead of the snippet that is new layers? Almost every example out there creates new layers and not picking up Sketch layers which is confusing to me.
2
John Grendon Enderby
Is anyone else having regular failed downloads in the Framer app on iOS? Takes quite a few tries to get a project downloaded. Also try again would be good instead of going back to the copied link, reopening the project and then downloading.
2
Yeseul lee
Hello everyone, I started learn Framerjs 3 months ago.I made a first prototype with page component. I wanna share my first prototype . Actually I'm not good at code yet, but hope this helps other beginners like me Hope you guys enjoy it :)
3
Sergey Voronov
share server is down? can't share from UK. tried from different cities and IP
4
Lee Jungyoung
Hi Framers, I made Peel Off interaction with SVG Drawing and CSS mixBlendMode. http://share.framerjs.com/9k2ncqsoqgah/ Actually it's a remix of Jordan Robert Dobson's SVG drawing and Jun-Hyuk Jang's blend mode animation. I made two groups of SVG layers and set their blend mode differently. Thanks guys. It was a lot of fun making it.
6

August 08

Isa Bison
A snippet for playing fast and loose with imported assets. Example: https://vimeo.com/177741747 Files: https://github.com/IanBellomy/Dump
2
Sergey Voronov
wrote an article on using json and firebase in your prototypes https:[email protected][email protected]-internet-of-things-6eb1ae8b8325#.fiaopdn7p. Feedback is warmly welcomed)
0
Nicolas Tilly
Hi Framers :) Here is a small prototype that I just finished. Thanks to the "Framers" of this group for tips and valuable advice ;)
1
Amy Casillas
I love the ability to share, however I'd prefer to hide the Open in Framer link that displays when I share a prototype. If I hide it locally it remains hidden, however if someone else opens it they still see it. I'm trying to test some things in a prototype but people are very distracted by the link. Is there a way to disable it?
0
Matthijs Zwinderman
Hi all! Just starting out here, and already running into a small problem. My goal is to make a backgroundlayer 'flash' onClick (no practical application: just a random idea), however, it seems only the last "states.switch" is done - even if there is a delay set. Any ideas how to solve? http://share.framerjs.com/nkp7rykcs378/
3
Amy Casillas
Is there a way to change the background color of the Framer Studio text editor? I'm in a bright room, and it's very difficult to read the code on black.
4

August 09

Lee Jungyoung
Hi Framers, I archived Framer works I made so far. Some of them are quite familiar to you but others might not. I'll put my new works here in the future so you can check it out later. Hope you guys enjoy !
2
Koen Bok
We're beta testing serving your shared projects over https with http2 enabled. This mostly means that your project will load way faster. You can try it out by just changing your share links from http to https. The downside is that if you use external resources (images, scripts, fonts, etc) from a different domain, they have to be https too or your project might fail to load. This is only a problem for ~1% of the projects we see. The best way to make sure you always load resources the right way is to change your urls from "http://hello.com/script.js" to "//hello.com/script.js". It will then pick whatever the current page uses. For a cool demo on http2: https://www.cloudflare.com/http2/
1
Aleksei Razbegaev
http://agmsoft.com/#javascript Вакансия для толковых разработчиков в сложный проект в Минске. Рекрутерам - бонус за кандидатов (ваши условия обсуждаем в личке) Хорошего дня!
0
Louis Currie
Framer works great in VR with the Homido mini http://share.framerjs.com/h50lvt4dnymc/
2
Tony Jing
I made a little rocket ship animation. Quite a fun project. http://share.framerjs.com/5vjuwn6xknr9/
3
Albert Ramirez Canalias
HeyFramers, We're holding a Framer meetup in Barcelona :D
0
Terry Tien
Hey guys! How are you doing! I'm currently facing an issue about indicators. I followed some kindly posts in our group to create this guide page with indicators. But somehow it keeps warning me there's something wrong with the allIndicators[current]. Could you guys kindly have a look on that? Thank you in advance!
4
Vincent van der Meulen
Hey! Are there any Framer prototypes out there that use typed.js? (https://github.com/mattboldt/typed.js) I am having a hard time integrating it into my prototype.
0
Nipurn Doshi
Hello people! How can I highlight clickable Sketch imported layers as hotspots when users click somewhere else? I checked out a library https://github.com/jonahvsweb/Framer-Highlightr but it doesn't work with sketch imported layers. Any pointers?
1
Paul Rich
Hey, how to pass the right index to the method? for key, index in sketch.keypad.subLayers key.onTap -> addAmount(index) Now is always the last digit of iteration for each sublayers (
1
Yang Ziyi
Hi, I'm making a prototype, and want to show it on a big display. Now I plan to connect the display to my mac. I'm searching a way to hide the address bar (also the window with framer sharing information) in browser but failed... Does anybody know how to hide address bar for browsers on mac(safari, chrome, firefox...)?
1
Keyur Jain
Hello folks! I would like to share my first Framer prototype with you today. Inspired from the VR Module, I decided to make a Virtual reality based ViewMaster . To present some excerpts of the considerations that went into designing the micro interactions inside this prototype i wrote a medium article that you can find here: https:[email protected]/vr-based-viewmaster-in-framer-js-72858df6570f#.106ljxiva You can try out the prototype at this link: http://keyurjain.com/vrframer/ I've got a ton of tweaks and improvements to make to the code, which I hope to do as I continue to learn Coffeescript. Let me know what you think :) Cheers!
5
Beɳ Pesso
So how can one have synced clones of groups (AKA Symbols) imported into Framer with the ability to manipulate/interact with the elements of said groups? (E.g. A Contacts list where each contact has multiple buttons overlaid on it.)
1

August 10

Will Anderson
Hi all, I’m trying to replicate a scroll experience where certain elements on the page continue to move up/down their y-axis after the user stops scrolling. http://www.apple.com/iphone-6s is a good example (if you ignore the rotation). Anyone have any experience with this, or have any tips on best practices? Here’s my framer file to better illustrate the ask http://share.framerjs.com/avbbif768gx2/
1
Henrique Belfort
[NOOBIE QUESTION] Hi, Framers! Let's supose that I created all my app prototype using FramerJS and now I'm gonna code it for Web. The question is: Is framer exclusive for prototyping and I have to create all animations again using some front-end framework? Or, is there some way to reutilize framer's animations in this case? Sorry if I did not understand something obvious! Thanks!
6
German Bauer
This is prob an easy question: What's the best practice to detect screen rotation of a mobile device. I need an event when it happened and what the new available screen size is after the rotation...thanks
2
Stefanos Kofopoulos
Hey guys, Using the Framer app on iPhone is a bit frustrating to me. Swipe from Bottom brings up the Control Center along with the Framer app menu. The Control Center gesture can be disabled from Settings > Controls Center but this is a universal setting. The Framer app offers disabling Swipe from Bottom but then again shaking the device is also a bit frustrating to me. I thought maybe a Swipe from Left / Right gesture can solve this issue - or even an option in Framer app Settings for this purpose. I'd personally prefer Swipe from Right to Left to avoid any conflict with iOS default multitasking gesture. Just an idea. http://share.framerjs.com/ehtvar5vw9jy/
1
Baisampayan Saha
I opened a old framer link from the framer group today and it did not have any links for downloading the prototype. I saw the same thing when I had opened one of my older protptype link. Is there a way to download them?
2
Øyvind Nordbø
Absolutely love, love LOVE the new sharing functionality you guys built. Although it has a small bittersweet after-taste, now that the new sharing stuff is live, all my old share links became interface-less. (i.e: No download/open in Framer buttons, etc). Any chance of bringing this back?
1
Eli Beitzuri
Trying the Framer app on iOS and the download button seems to be disabled. Is there something I need to do in order to enable downloads?
2
Miguel Olave
Hi Community! What is your best practices or workflow to work with Sketch + framer + code? I know many love write blogs or articles. Don't be shame to share. I want to improve my times designing! I use: 1.- Global app Wireframe Sketch, for big picture: Prototype as freedom, group and I use RenameIt plugin. 2.- Copy Parts to another sketch to import: Clean groups and rename it if necessary 3.- Import to framer and play. Some recommendations to reduce steps!
0
Paul Kooi
Im getting really poor performance in the preview window... frames per second slow way down as I move from one state to another... wondering if this is a common occurrence since I'm very new to Framer JS. Enjoying learning the tool so far
9
Sherzod Max
Made sign-up flow prototype with Framer. Struggled with having type indicator attached to the end of type() object. Decided to fake it in the end. https://dribbble.com/shots/2890544-Sign-up-Flow-Prototype-for-Healthcare-Messaging-App
0
Fritz Frizzante
Sit back, put your earphones on and breath! http://share.framerjs.com/m6o2ebip8zb2/ A while ago I was exploring the concept of “mindful interactions” and I thought I would just share it here. This concept aims to help people build awareness by training the ability to voluntarily pay attention. On the simplest level of the concept, the user only needs to breath along the animation respecting the time suggested by the animation itself. As a second step, the app recognises the users’ breathing pattern and helps being aware while slowly matching to the initial animation. As the access with getUserMedia (for microphone access) to prototype for voice interfaces is still very limited, especially on iPhone, I had to simulate it. By switching to 3D Touch, I could at least dynamically communicate how it would sound and feel like. On the third and last step, the user can finally close his/her eyes and by feeling a vibration pattern he/she can breath according to it. Here I had to fake it once again by using sound feedback (sine wave with Web Audio API) since there was no way to access the motors. It’s vibrating though! This is no code-wizardry. Happy to hear thoughts and tips.
1

August 11

Igor Kulemza
How to enable scroll by mouse wheel? I set true for scroll.mouseWheelEnabled but it still works only with click'n'drag as usual. I prototype for desctop. Help please )
8
Ban Nguyen
Hi everyone, I am trying to create a flyout menu for my current project (like the mockup) but I am kinda stuck. User mouseover the icon to expand the navigation container and show the expanded its navigation, User can also touch/click on the "THIS IS HEADER" to expand the other navigations. This is where I am at now: http://share.framerjs.com/q3j84u31uqvd/ Could you help? Thank you!
6
Jonathan Alpay
Hello guys ! I'm student and I love FramerJS, I tried it yesterday and that's cool ! The only thing is the price :( I'm student and 129$ is too much for a student (for a software). Why don't you have any offer for student ? :(
2
Allan Suaco
Hi Fellow Framers, 1) Quick question, I want to know if its easy to build a fully responsive website prototype using Framer? 2) How you guys optimize your codes or how your codes look like if you use Framer in prototyping a responsive website? 3) Do you have work sample guys that you use Framer in a website?
17
Clint Miller
Just got started with Framer yesterday. I'm trying to trigger an animation or state changed based on what page my prototype is on. The problem appears to be that Framer isn't understanding my page name for some reason. Can someone please help? Thanks.
2
Rob Byrd
I have a question specific to the View Navigation Controller module. I've attached an actual photo of my screen because taking a screenshot hid the page properties. For some reason on transition the previous page only goes -650 on the x axis instead of its full width of 750. Has anyone come across anything similar? Or have an idea why it might be doing this?
5
Polina Flegontovna
Hello everyone! Does anyone have a good example of pagination with scrolling? Greatly appreciated!
4
Jesse Brack
Hey all, has anyone experienced click/touch event fickleness inside a scroll component when testing on an actual device (in my case a Galaxy S5)? Specifically, when you have a conditional that prevents things from happening when scrolling is active to prevent unwanted actions when someone is scrolling with their finger but unfortunately the scroll event almost always fires whenever you tap the screen which makes click/touch events not reliable in this scenario. Even the demo example http://framer.com/examples/preview/#scroll-n-click.framer has problems registering a click/touch event on a real device.
5

August 12

Javier Eduardo Treviño
where can I find the latest stable build of the framework to use on Codepen or elsewhere online?
2
Benjamin E Saravia
Hello, I just did this to take it out of my mind and practice :) Some 3D and dragging interactivity. Here's the framer project : http://share.framerjs.com/tb56laugl36i/ ALSO: Could anyone please send me an invite for dribble?
3
Maciek Ziółkowski
Hello, I have three page components (shoppingList, productsBought, productsNotBought) placed next to each other horizontally. The middle one has few pages initially. I would like to transfer the page from the middle component to either one on the left or right by swiping left or right. I have written this piece of code to do this, but it causes errors: shoppingList.currentPage.onSwipeLeft(function(){ productsNotBought.addPage(shoppingList.currentPage, 'bottom'); shoppingList.currentPage.destroy(); }); shoppingList.currentPage.onSwipeRight(function(){ productsBought.addPage(shoppingList.currentPaage, 'bottom'); shoppingList.currentPage.destroy(); }); Is there any other way to obtain this effect? Regards
2
Rob Byrd
Hello, I came across an issue today while trying to duplicate a series of tiles. I am prototyping an application with a large number of thumbnail tiles. My goal is to repeat the 5 tiles I have created in photoshop many times, provide unique names to each and attach event listeners to each. I thought I had it worked out and then realized that while I was able to copy and rename additional layers, Framer does not recognize any of the renamed layers. For example psd.Recipe_Tile_5 exists but psd.Recipe_Tile_6 does not, even though it is in my layers panel.
2
Gregory J. Orton
Somebody help! I'm trying to create some 'explosions' using circle layers and animation chaining. Code here: https://repl.it/CmWg Trouble is, if you copy and paste this code into framer, the first time you click it, the animation runs in order, but further clicks all see the animation run in reverse - even though I 'reset' the values changed by the animations at the end of it all. Can anyone look at the code and solve the problem?
1
Andy Fuchs
Is there a way to speed up launching a framer project in the browser? For me it takes 15 seconds delay - on every refresh -, while the project re-compiles the 'app.coffee' (Coffeescript.loadProject(app.coffee)), although the generated files are already there... Any hint? Thx, andy
2
Junhyuk Jang
When I feel tired after working, I make something funny stuff. This is one of them :) http://share.framerjs.com/x8zp38gqfu7b/
14
Niels van Hoorn
I've just updated Framer Generator with fixes for Sketch 39. We've also switched out the backend providing the updates to Framer Generator. Therefore the “Check For Updates…” in Framer Generator won't work for this update, but after redownloading it from https://builds.framerjs.com/latest/Framer.zip, it will continue to update itself in the future.
2
Andy Jakubowski
Having an issue where the text of my layer gets an additional “0” at the end while the layer is switching state—and then goes back to normal when the state is switched. It only happens if I assign exclusively numbers (“123” as opposed to “abc” or “abc123”) to my layers’ HTML attribute. Can anyone spot what’s wrong here? I actually used this before without any issues... Here’s an example:
8
George Kedenburg III
It's definitely not perfect but here's a quick 1-hour take at a Framer version of the new Apple Music player in iOS 10! In this project you'll learn such wonderous things as: * what a slider component is * how to scrub a video or music * how to combine states, events and conditionals * how to do things continuously (like update the time) * how to format time * how to not play yourself Check it out here: http://share.framerjs.com/j14jmsmtj1x3/
4
Javier Eduardo Treviño
are there any other Framer users in Monterrey, Mexico?
0
Ban Nguyen
A Left Navigation prototype. Any other recommendations would be appreciated. Thank you!
1
Allan Suaco
Hi Framers, Quick question, I have a bit problem animating the hamburger menu and the carousel. Here's the scenario: In hamburger menu, if onClick it animate then show the dropdown page. While in carousel, there is a swipe recognition to each image. Do you guys have a sample work like this? Thanks in advance!
4

August 13

Zachary Halvorson
Any Vancouverites in here? Been thinking about starting a meetup...
4
JL Flores Mena
Some findings I wanted to share about skinny arrows & fat arrows: - First take a look at the Coffeescript code on the right. - This is an example of a simple class with 2 attributes (version, text) and 2 methods (getVersion, getText). - I create an instance (called entry), pass the attributes and then I run its methods. - Notice how 'version' gets back as undefined, but 'text' works. - The only difference is in the nestedFunction. I used a skinny arrow inside getVersion, and a fat arrow inside getText. - Now take a look at the JavaScript code on the left. The tricky scope thing is either more clear or way more confusing now. I'm still trying to understand the how and why of this topic. This is my homework for this week, just wanted to share in case this reference helps someone else.
5
Javier Eduardo Treviño
how can I make an animation take part of a state that repeats itself ?
4
Johannes Eckert
I am trying to use visibility in states. Just setting the layer's transparency to 0 still makes it capture events. It would be great if the object could also disappear completly. This works on fade-out, but the fadeIn doesn't work. it looks like boolean attributes are applied at the end of a state change, but when setting them to true (at least for visibility), it would be nice to execute before. I know that I could work around with stateWillChange and stateDidChange, but it would be easier if framer does that for me. Also, pixate does it this way: When an object is set to 0%, no events are captured. It's clever, but probably not good if you want to use a layer inside a hack.
6
Samarth Bahuguna
Is there a better way to record prototypes than Quicktime? Possibly at their original pixel resolution instead of being scaled in the browser? I'm looking for the highest quality recording, irrespective of file size. Thanks!
6
Jonas Treub
Do you teach Framer workshops or have you been thinking about running one? Here are some tips and a few fun ideas from Noah Levin
5
Brian Byle
Ok. Been looking at the fat arrow vs the skinny arrow when defining functions. Thus led to callback functions and function binding. Can someone please give a practical example of when a callback function would be used? Thx in advance!
4
Wez Elliott
Anybody else have issues mirroring from framer studio to frameless after the recent update? Enter access code doesn't seem to work.... just get "Error [object Object]"
5

August 14

JinJu Jang
Hi Framers! https://youtu.be/hd1N6YFjRXM (Framer Link) http://share.framerjs.com/7i2kqasyafad/ I’ve been working on using Framer as a user testing tool. I revised the final prototype for my Cocoaheads Melbourne presentation, so please ignore some of in-jokes:P If you wonder how it works and how the app would turn out, you can check the links below. Basic version: http://share.framerjs.com/lnqpryx74nic/ Final App: https://itunes.apple.com/au/app/aia-vitality-australia/id740456913?mt=8 My user testing work flow were like this. 1. Make 1-2 versions of realistic iOS prototypes 2. Recruit users, Let users use the *app* freely for 1 minute. 3. Ask a specific question. (i.e.: Where can you see your profile?) to check the UX is clear. 4. Gathering feedback, decide where to fix. 5. Hack hack hack until the next person starts. (around: 1-1.5 hours) It was amazing that everyone’s feedback was so functional and also consistent. (Not like my ordinary client-designer feedback loop!) I find users always find a bad UX problem, which designers like me can be blinded from. It entirely changed our design decision process. Now anytime we feel “It looks fine but I’m not sure about this” We start up a quick user test to find out what works the best for our users! :)
0
Tarun Chakravorty
Hey framer friends, I have a basic question on arrays. I have a simple list view that I'd like to add interactivity to. When I import this sketch file in the screenshot, I have an array called listView and I can type something like *print listView.children* to see all the items in it. My question is - how do I attach an *onTap* to each of the rows in this listView? My n00b attempt of *listView.children.onTap* throws an error.
2
Okernel Liu
Hi Framers, I found something wrong about shared prototype after framer studio latest update. After latest update I can't download or open the shared prototype using the old framer library. For example, old shared prototype (http://share.framerjs.com/0qw309wo2yb9/) does not support download button. New shared prototype(http://share.framerjs.com/5ilbpnqfvzka/) supports download button. After comparison new share page and old page, I found a way to open it. Open the scheme “framer://share.framerjs.com/download/sdi6ib57zoe3/project.zip” in the Safari then Framer Studio will download the prototype. All you need to do is copy the old prototype id something like "0qw309wo2yb9" to framer://share.framerjs.com/download/ "Copy the old prototype id here (not include quotation)"/project.zip.
3
Tomi Adewale
Hey Everyone! If I have a set of divs I've created but later on want to fill with content that loads a bit after, how do I do this? I used the getElementsByClassName method and tried to do a replace with a forLoop like this... gotEm[h].html= newStuff ...via an event listener. That didn't work though. Any general ideas on what I ought to look up? Also, I guess if there were a command that lets me easily halt my program till some calculations are made and a variable is defined with content, that would also solve my problem. Now that I'm thinking... is that just an "if something != undefined" statement? Thanks in advance!
2
Rafael Marin
I've been working on many prototypes with lists, and there's a recurring problem of having to delete items and recalculate positions every time. So I created a ListComponent that extends ScrollComponent and updates the stack of elements automatically whenever something is added or removed. It's very elementary still but it's such a common problem that I thought it might be useful for other people. Here's an example: http://share.framerjs.com/11uw00nwb6nk/ And here the source code: http://github.com/rafaelmarin/ListComponent.framer
1

August 15

David Chen
Hello Framers, Has anyone have the import problem that, when import two Artboards of Sketch into Framer, but the second Artboard has been kept outside of the screen (I already make it visible)? Not sure where it's missing @@ Thanks for your help!
1
Angie Marie
I'm super new to Framer and I was doing a test where I have 2 Artboards with two screens, but I also have 4 individual groups (outside of the Artboards) that I want to import as Layers along with it. When I import Sketch - Framer, it ignores those 4 groups outside of the Artboards. I know it ignores items that aren't in a group in general, but I thought it would import the Artboards + 4 individual groups as layers. To elaborate more, one of the Artboards is a form screen that I just want to manipulate individual parts of it so I don't think it makes sense to have another full-size artboards with the dropdown state changing, but maybe that is how you're supposed to do it? One of the individual groups outside of the artboard is just the dropdown menu part of the dropdown button so I want to animate it that when it's clicked, the dropdown appears. Is it more "correct" to have the dropdown menu hidden on top of the Artboard? That just feels harder to work with in Sketch, but maybe that's what I need to do. Thanks in advance for your help!
2
Jun-Seok Kim
I made this prototype because just i need. Long-press someone's text and send it! See all of (spagetthie)code through below link. https://dribbble.com/shots/2898482-Copy-paste-chat-for-Facebook
3
Ahmet Bekteş
Hey Framers, Sales want to use prototype in a fair and they said that there will be no internet connection. Can I add an offline video and can they show the prototype offline? Video is about 200mb and I will try to reduce the file size of that too...
5
Benjamin E Saravia
Simple-function practice. A ticker and a dial animation using SVGs and gradients. The ticker and the dial-ring use the same function :) Source file: http://share.framerjs.com/nwut32igjopb/ ** Can we have this kind of rings included in Framer ? * Based on a project from : Jordan Robert Dobson (thanks!) http://share.framerjs.com/d12zpts130lt/
1
Nitin Sampathi
Hey Framers. I downloaded a trial of Framer and recreated the Instagram Stories capture animation. dribbble: https://dribbble.com/shots/2900701-Instagram-Stories-Capture-Animation instagram: https://www.instagram.com/p/BJIyTfvAKoWIqHYzSlg89M4sBgmnfrOq2wx-Uw0/?taken-by=nitins1 share.framerjs: http://share.framerjs.com/fozgr8qmgdgw/ Unfortunately the video on the framer share page doesn't work (but the UI works), maybe if you 'open in framer' you can check out the project.
0
Jared Palmer
This may belong on Github, but is it possible to call a NavComponent.push with animation=false? Working on a web prototype, so native mobile push/pop animations are jarring. https://github.com/koenbok/Framer/blob/master/framer/Components/NavComponent.coffee#L80
3

August 16

Jiaxin Chen
I made this circle animation at weekend with Framer, enjoy! dribbble: https://dribbble.com/shots/2894100-Circle-Animation#comment-5494770 prototype: http://share.framerjs.com/mmg8zvkahax2/
2
German Bauer
If I'm building my own components, is there a way that they can emit custom events? If so does someone have a best practices example for defining and throwing custom events ?
3
U-Kyung Kim
As a fun exercise, I made this DJ cat animation with Framer.js :) dribbble: https://dribbble.com/shots/2897750-DJ-cat-animation-in-FramerJS share: http://share.framerjs.com/r91h0rwh6b7h/
2
Gökhan Kurt
I'm starting to play on framer.
0
Karim El-Kharraz
Hi folks ! Im newbie of framer ,can you guys tell how i can create a gradient background
5
Guillermo Romero Jr
Wow! 15,500+ members! That Framer love <3
5
David Diamond
Hey, anyone have any experience with prototyping image uploading? Did some extensive digging last night on how to do this but no luck. 🙏
1
Jordan Robert Dobson
Tray Card Snap & Swipe I was helping out Andreï Clødiüs with an issue today with an Apple Maps iOS 10 style bottom card interaction and figured I could share with you all. http://jrdn.io/2W2w0m0n3z0s I hope this helps someone out there. I'll post this and a few others to http://FramerCo.de very soon!
0
Andreï Clødiüs
Hey guys! newbie here :) I think I need some of your help with an issue I can't seem to be able to solve. I want to be able to snap a layer vertically to 3 different positions when I swipe up or down. (like in the new Apple Maps app in iOS10) I've created 3 new animations with the 3 positions and have them start on separate swipe events. Problem is that instead of swiping from animation 1 to animation 2, and then from 2 to 3, it goes straight to the third animation. Any help is appreciated! Thx a lot!
5
Ryhan Hassan
Not sure if other folks have tried this yet, but just wanted to share a quick technique for prototyping things on desktop. I've spent a bunch of time at Dropbox experimenting with native UI like the menubar app, windows, and overlaid UI (like the Dropbox badge). By default with almost every prototyping tool I've seen, designers tend to try to fake a user's desktop, which means that you miss out on seeing how well it interacts with a real desktop environment. Rather than recreating / faking a user's desktop within a prototype, I've found it super useful to just bundle Framer within Electron. This way I can try out and present a prototype within the context of my actual desktop, and see how well it interacts with my real windows. On top of the built-in templates for menubar apps and windows, it's also been interesting to make interfaces that float on top of other windows by sizing a prototype to the full width/height of the screen and setting a transparent background. Anyways, hope this is helpful!
6

August 17

Jared Palmer
Was really blown away by Ryhan Hassan 's idea to bundle Framer inside of Electron. For those that want to try this out themselves, I built a little command line tool that automates the entire process (no knowledge of Electron required).
4
Terry Tien
Hey guys! I'm currently submitting my prototype to the teach fellow as my final project. Just want to know if do not have a Framer in the mac, which file in the folders can be opened to view all the codes? Thanks in advance!
1
Richard Burton
There is a rumor that some of the new MacBooks are going to have a touchscreen where the function keys are: https://9to5mac.com/2016/06/06/macbook-pro-oled-keyboard-concept/ Over the last few days I have been thinking about how we might use that for our app, Balance (http://balancemy.money). I put together this prototype of a function touchscreen. It responds to click events and keyboard events on the function keys. I thought I’d share it here in case anyone else finds it useful: http://share.framerjs.com/qrvpywnr36bn/
0
Peter Gr
Hey all, if I want to make a prototype that can be viewed in desktop browsers or mobile devices (and adjusts for each screen size), should I set device to "No device"? Context: I made something using a desktop browser device display in Framer Studio, but I gave it instructions to adjust according to screen size. Not sure how I should export it.
3
Floris Verloop
Hey Framers, We love checking out all the innovative prototypes our community creates and shares. But we thought our sharing mechanisms could use a little love. So we went back to the drawing board and created a sleeker interface, along with a rich media preloader, helpful hints, customizable metadata and social sharing cards. Read more about the release — http://blog.framerjs.com/posts/improved-sharing.html
14
Jaewon Hwang
Hi Framers! I am new to Framer and want to share my first Framer project with you guys. It is a user interface for filtering what people post on their social media to better control their online privacy and reputation. Hope you enjoy it. View more about the project: http://www.jaewondesign.com/#/social-media-filter/ Thanks to– Noah Levin for the great class about Framer on Skillshare Charlie Deets for sharing great insights into designing for privacy on Medium
3
Peter Gr
I recreated this fun game that the New York Times has where you can test your reaction time against Usain Bolt. This vid shows my prototype. Try it live here: http://share.framerjs.com/nl1uwqkrt4al/ This one is designed for desktop viewing. :D Also check out the original N.Y.T. game here: http://www.nytimes.com/interactive/2016/08/13/sports/olympics/can-you-beat-usain-bolt-out-of-the-blocks.html?smid=fb-nytimes&smtyp=cur
4
Edoardo Guido
Hi guys, Does anyone know a tutorial or project on how to work with parallax effects with pageComponent? I couldn't find (or I've missed) something really useful on the net. Thanks
5
Peter Gr
Hey everyone, is there any difference between Screen.width and Framer.Device.screen.width? Also, I've noticed that screen.height and Screen.height return different values.
3
Diego Bernabé De Luna
Hi Guys. Question. I'm about to start a high fidelity prototype for a big multi screen complex app. I bought the Framer license out of a recommendation, but now I'm only seeing "micro interactions" on the examples. Meaning, only one screen or two with cool animations. Is this tool more of a "animation/creative concept" tool or can I accomplish complex prototypes with Framer JS? Should I look somewhere else for this? Thank you!
3
Majorr Tom
Hey, what is the correct way to import @2x files from Photoshop? Or what size/dpi should I use there? If I double the size of the canvas in Photoshop, to see it crisp on a retina display, the imported files in Framer are double in size. I can resize the layers with .scale but the prototype performance decreases if I do that. Thanks!
6
Chris Chiusano
Does anyone know how to get a sketch imported layer above a framer layer?
2

August 18

Karen Park
Does anyone have recommendations for sources of royalty-free images? I feel like I heard of a new site (or new to me) in the context of prototyping, perhaps at a meetup? Anyway, thought I'd throw it out there.
6
George Otsubo
Hello, trying a side parallax thing but it jumps the minute you start scrolling, don't think this is the right way to approach this. Also not really sure how 'do' works either... if someone can help explain how that works...any help is appreciated!
1
Jon Arnold
I am trying to build a spinner but the scaling of the circles are behaving strangly: http://share.framerjs.com/qax1k0dcqqt0/ This is the wanted behaviour: https://zippy.gfycat.com/GorgeousLegalBunny.mp4 Anyone know why?
4
Kevyn Arnott
Hey everyone, I just pushed some updates to iOS Kit module. https://github.com/k-vyn/framer-ios-kit I just wanted to first say thanks to you all for the support on the module. It's been so awesome to hear your feedback & see it get used. Many of the things added today have come from your requests! Along with the new things today, I should add – most of the module has been rewritten, so I'm sure there will be bugs here & there. Please send them my way, and I'll fix them ASAP. Enjoy! Here's a rundown of what's new: • Sketch convert – a simple function that goes through all your layers in Sketch & writes constraints for you to make your imported artboards fit every device. This allows your design to fit the device without scaling all the images up. • Sketch components – all the components in this kit now have corresponding Sketch components, so you can paste those into your artboards, and when you call convert, it'll render the iOS Kit component instead of a flat image. • Completely rewritten – it's no longer a 4000+ line coffee file. It's broken into really easy to navigate & browse sub modules. • Added a View component - it's just like Layer but accepts constraints & is immediately rendered without the need to call layout. • Added iPad Pro keyboard • Sheets on iPad now support targets. The sheet will float & point to the target. • Added dark styled keyboards • Banners are now iOS 10-ify'd. • Fields can now accept keyboards, so you can fill out multiple fields with the same keyboard. • Dynamic Layout is the same one from Material Kit, which means it works on Android & iOS devices and uses layout.set & layout.animate. • Plus a bunch of bugs fixes & I'm sure other things I'm forgetting.
24
Karol Piwowarczyk
I want to start designing WEB in FramerJS (I created artboard with dimensions of 1440x900) You recommend any training materials? (share link or documents) ------------ PS. I want to have scroll (in browser window), when imported artboard from Sketch. How to do this? Thanks for your help!
4
Anthony J Lee
Anybody recommend any web hosting sites? I'm thinking shared I'm trying to build a portfolio
1
Baisampayan Saha
facing a problem.. Created a prototype with no device as the selected option. When I see my prototype in the presentation mode, the position of the elements changes. In normal framer window, the prototype remains at the center, when I go to the presentation mode, the prototype shifts to the left hand side and also size scales down. Is there a fix to this problem?
2
Eli Beitzuri
Are there more performant ways to use placeBefore()? I have a virtual screen I need to dynamically re-order in this way. Using placeBefore() in the onTap function causes a very noticeable lag in the prototype responding to the tap.
8
Nikhil Venkatesh
Does anyone know if it is possible to show layers that are not within the device? Use case: I'm trying to create a button outside the device that toggles the visibility of a bunch of layers in the prototype. Thanks! Stephen Crowley Jordan Robert Dobson Vishwas Shetty
2
Vishal Iyer
I'm looking for an explanation for what I think is a curious behavior. I have two simple prototypes. #1: http://share.framerjs.com/gox7hisqbkiv/ #2: http://share.framerjs.com/t2bivpop1iro/ #1 has one layer (layerA) clicking on which triggers an event to duplicates it (layerB). Subsequent clicking on layerA doesn't trigger the event. This is what I would expect. #2 has layerB on top of layerA right away. I have an event attached to layerA, which gets triggered even though its covered by layerB. Why is this happening? And how is this different from #1
5

August 19

Chris Wang
Rotation in perspective gets cut off when using sketch import with artboard? So I tried 1. rotate a layer created in framer 2. rotate an image drag and dropped into framer 3. Import layer from sketch but without art board 4. Import layer from sketch with art board #1 - #3 works fine. For #4, when I try to rotate a layer in perspective, it gets cut off. Can someone help me with this?
5
Emmanuel Henri
Question does Framer exports code boilerplate to help you get started on a iOS project?
2
Sergey Voronov
anyone actually built anything on one and the greatest https://github.com/k-vyn/framer-ios-kit ? interested in solutions on bottom input field move when keyboard appears, actual use of icons in tabbar and so on
1
Jeongmin Kim
I love this page. When someone ask me about 'code basic', I'll send this address without hesitation because this is a great summary. About 2 years ago, I was a designer who didn't know anything about code. So my only coding teacher was 'Framer > Docs' and 'Learning > code basic' page. Now I teach Framer sometime, but I think this page is a better teacher than me.
0
Floris Verloop
We just shipped a slick new homepage. More importantly, we added tons more resources for both our beginner and advanced users, as well as a Community page (featuring this group!). https://framer.com https://framer.com/getstarted/guide/ https://framer.com/community/
10
Thierry Meier
Guys, is there a way to pull random user avatars just like you can pull images from Unsplash like so: image: "https://unsplash.it/500/50#{i}" Since uifaces.com uses Twitter URLs for the image links it's not as easy. Happy about any tips!
1
Yfat Eyal
Extreme beginner question here :) have been trying to take apart different examples, but am trying to find an easy way to just have a slider control the scale of a different layer (http://share.framerjs.com/17op3oqfo03t/)
4
Chris Lee
I'm increasingly making complex Framer prototypes with multiple versions reusing the same components. Seems like a prime time to componentize my code. This seems like something that Framer—a code-based prototyping tool, of all things—should be great at. But I've had headaches trying to figure out how to componentize things in Framer classes because writing Framer classes seems to require a fundamentally different structure than writing normal Framer layers. Like, I can do it, but it doesn't seem worth the effort. I usually just give up. And when I look at the source for (for example) ScrollComponent, it's scarily complex - even for someone like myself with a solid CS background. Meanwhile, I really like React's functional component framework. Because components in React are simply functions, I can build everything as a big block of code and gradually separate it out into separate components simply by moving the code around. And because components are simply functions, I can create "higher order components" that apply a behavior (similar to Framer's ScrollComponent.wrap) to an existing components - simply by using the same API. This makes it easy to separate out concerns of presentation and behavior into separate components. Has anyone else been thinking about how to better modularize Framer components? Especially curious if there are any other Framer users who have experience with React, and whether you think it's feasible to apply some of React's design patterns to Framer code.
6
Johan Strömgren
Anyone got experience working with geolocation in Framer, specifically triggering events at certain locations?
3
Patric Pfoertner
Hey people I got a question: Is it possible to animate a static Website, which is made with sketch? I would be thankful for a workflow description. :)
2
Sabitov Farid
Hi fellows! :) Can you help me? http://share.framerjs.com/2187r44ct9an/
1

August 20

Peter Gr
I'm trying to find a way to translate text with an api. Has anyone done this?
11
Justin Ma
Out of curiosity, has anyone thought of a solid way to test website prototypes with users? I've been using the ViewController module, and I modified it so that the links become the active link mouse cursor so I can quickly build prototypes. But I've been having trouble with users wanting to press the back button on the native browser to go back. Not quite sure how to approach that problem.
2
黎竑廷
Hi, i want to trigger event by code but i have no idea how to do that, i try to use layer.emit "click" but it wont work ... I still cant see that event been clicked automatically
0
Agisilaos Tsaraboulidis
Hey guys quick question: What this error could possibly mean? Can't figure it out...
0
George Kedenburg III
✨~✨~ Magic Text ~✨~✨ Made this quick little demo on the way home the other day. It's just a text layer that responds to the image underneath it by changing its color and shadow. I do this by writing the image to a canvas element, and then sampling the lightness value at multiple points on the layer. I average the lightness together and use that to determine what color the text should be and how much shadow there should be. Hope it helps you build something awesome! Play with it here: http://share.framerjs.com/e0yfu9p8j92n/
10
Ashwini Purohit
In the example below I'm trying to make it so when the user taps the white box (an 'envelope') it fills up the *entire* screen, not just the parent container ('page'). Right now the x: 0 y:0 coordinates are relative to the parent so it's not filling up the entire Screen.width, Screen.height. Any help would be much appreciated! I'm modeling an example of what I'm working on over here:
3

August 21

Enrico Varela
Just wanted to share more of my IOS X conceptual designs.. 😝
6
JinJu Jang
Hello! I just made a wireframe which is full of ultimate UX cliches you can find on apps everywhere. (Which means, this can be useful and save your time) 🙄💧 http://share.framerjs.com/8980s4ofir1e/
2
Alena Syvokobylska
Hi Framers, Designers around the world deserve a handy and clear text editing tool. Here is the the prototype I've made https://dribbble.com/shots/2895699-Text-Edit-Tool
11
Agisilaos Tsaraboulidis
Hello, guys, I'm stuck with a weird error all day today but still can't figure out what's going on. So I'm using this module: https://github.com/awt2542/ViewController-for-Framer and when I'm trying to go back from a screen I have this error: TypeError: undefined is not an object (evaluating 'properties.options'). Try to press the settings icon or the camera icon and then press the back buttons etc and you will get this error. Don't know what to do. Here is the prototype to play with: http://share.framerjs.com/yiqf09242ppm/ Thanks in advance guys!
1
Rob Byrd
Is it possible to trigger click events? I came across an older post asking a similar question, which was answered "reference the event docs for an emit event" I don't see this or anything similar in the docs.
14
Chris Chiusano
I haven't been able to get scrolling working when importing sketch files...can anyone point me to a good resource that might be able to help?
3
Rich Price
NBQ #2 :) Ok, so I was playing with the import function from Sketch. Worked well, and I could distort the layer(button) in coffee script just fine. Then I wanted to move it somewhere else on the stage, but I'm struggling to understand these objects(layers). I found a sample in the Docs for the Align function. I can't figure out why doing these align functions on myButton isn't appropriate. It works on a new layer, but not on the layer I brought in from Sketch. Any ideas?
12

August 22

Thierry Meier
Is there a library of accurate animationOptions for iOS interactions such as the keyboarding sliding in from the bottom, new screens sliding in from the right and such?
2
Rich Price
Greetings all - newbie questions OK here?
6
Keith Lang
I don't think it's possible given my research, but wanted to check: Is there any painless way to put images on the canvas using various composite modes? For example, Multiply, or Screen. I know Canvas supports it, but it seems not supported outside of Canvas for now?
5
Alan Dickinson
I prototyped a lot of card behaviors for the last app I worked on. This is a layer that leans into the motion when its dragged. Made this awhile back, just thought I'd share in case its helpful for anyone! Project: http://share.framerjs.com/4ipseyam5urf/
7
Agnes Won
Hi! I'm working on my first Framer project which involves circular masks around an image. I was able to achieve the circular mask with some help from the threads here using webkitClipPath. I have the circularmask scale based on user click, and what I ultimately want to achieve is scaling the image within the mask (and moving the x y positions of the image) as the mask scales. I've tried changing the image attributes, but it doesn't seem like I can access the image attributes with the webkitClipPath I set up. Any experts here have tips on how to proceed? http://share.framerjs.com/21s2yghtvtn3/ Thanks!
3
Clint Miller
Is there any way to view prototypes on the Apple Watch?
3

August 23

Jon Arnold
Hey guys, I built this loading spinner module. Hope you can use it: https://dribbble.com/shots/2910488-Spinner-Module-for-FramerJS And here is the github repo: https://github.com/ServusJon/Spinner-for-FramerJS
3
Leonel Duran
Newbie question, How can I center a text in a shape ?
3
Uğur Erbaş
Just a simple touch
1
Katherine Zadyra
Hi everyone! I have a variable called 'linesadded' which is a number, and a function called 'showsummary'. On click I want to execute showsummary function the number of times equal to current linesadded value. What is the syntax for this? showsummary() * {linesadded} or something like this is my guess, this does not give an error but does not work either... Thanks for help in advance :)
2
Sadok Cerv Rabadan
What's the best way to play with a prototype in Android? Thanks!
1
JinJu Jang
Is there any good method for detecting x/y position of cursor when you click? I.e: When you click some point on Screen it tells which x and y points you clicked. Please let me know if you know how to do it. Thanks!! 🙏🙏
1
Giovanni Caruso
I was playing with an old concept – If I'm right it was inspired by a previous iteration of Storehouse (iPhone). I've found a working solution by using the pageComponent. Any idea how to create something similar using the scrollComponent? Done some quick test without success. Thanks :)
2
Wez Elliott
Anybody else experiencing really choppy video playback when viewing on a device. Seems to work fine in Studio on the desktop but on a device constantly stutters every 4 secs. Any advice?
3
Donald Pinkus
Hey Framers! Before I post a billion questions... Are there any good articles, tutorials, or example projects of a full desktop web prototype? I really appreciate the help! I've used Framer for specific interactions, but never to mock an entire site. ----------- Specifically I'm looking for: 1. Given a sketch file with ~6 artboards (1 for each page), turn these into separate pages of the app 2. have a fixed navbar at the top 3. when a nav item is clicked, transition the page's content (not the nav) to a different page 4. Also apply an "active" state to the active tab ----------- Then there's a few other questions I have: 1. I have many "buttons" and "links" in my mock-up. How can I write an "animation" on hover once, and apply it to all of the elements? 2. How can I have a native browser like scroll container for my page (not the mobile style click + drag that comes with the Scroll component) ------------- Edit: Wow. I'm blown away by the quality / specifity of people's answers in this group. Usually you just get ragged on for being a noob in some tool. Thank you so much :)
6
Adam Mazurick
I love Framer!!! It's frankly so awesome. I also love the ease of CoffeeScript. This is an early attempt at an iOS Notification Swipe Interaction. It's a work in progress. The mirror app is amazing. http://share.framerjs.com/l6slxr9gtcd5/
4
George Otsubo
Silly question but why does the print statement get printed multiple times when there is only 3 pages in the pageComponent? Also I only swiped to the second page
4
Kellie Sun
Hey guys, I'm a newbie in framer. I try to add a real webpage as the background to create the prototype for the chrome extension in framer. I tried " html: "<iframe width='#{Screen.width}' height='#{Screen.height}' src='https://www.indeed.com' frameborder='0' allowfullscreen></iframe>" " which edited from an example using iframe for a youtube video. But nothing showed up in my framer preview. Anyone can explain me why this happen? Thank you guys
4

August 24

Adam Mazurick
Framer Question: What’s the best way to Master Framer given the following: I’m a Product Designer with an intermediate level understanding of Swift and iOS Development. So… I’ve got a good grasp of OOP in the context of Swift and iOS Development. I understand most major programming constructs like DataTypes, Standard Operators, Control Flow, Collections, Functions. I understand the MVC design pattern and nuances of storyboards. I’ve set a personal goal for myself to become able to prototype efficiently and quickly with Framer. I’m not strong on JavaScript. I tried following this tutorial on how to draw an SVG animation and felt a bit lost. I noticed he was using a lot of dot.notation and at some points couldn’t understand his code. What resources or tips do you have to improve? I don’t really want to Brush-up on JavaScript and then 1:1 map with with CoffeeScript. It seems like a waste. Any resources…you’d recommend?
1
Uwe Klinger
Hi guys, I'm experimenting with rotationX and rotationY and it seems to affect the other elements on the page (like cutting them in half, or as in this case you can remove them by going over them with the cursor). Is this a bug or am I doing something wrong? Best, Uwe Here's the example:
2
Sergey Voronov
inspired by spotify facebook player by George Kedenburg III (and using big part of his code :) I wrote module for people who want to play with Spotify API in Framerjs. Live sample here http://share.framerjs.com/3yjdfuufi56q/ .Module - https://github.com/mamezito/spotifyApiFramer
4
Dani Bedar
Hey All! I'm having a weird problem in which Sketch layers within a grouped object are repositioning when imported into Framer. Some layers are in a different x, y than in sketch, even while layers within the same group remain in position. Any ideas? Thanks for any help!
2
Koen Bok
I just updated Framer Generator (importing for the open-source Framer) to support Figma. So if you have a custom Framer setup, or don't want to pay for Framer Studio, you can continue to enjoy importing your Sketch, Photoshop and now Figma too. https://dl.devmate.com/co.motif.framer.generator/131/1472041975/FramerGenerator-131.zip
0
Michał Maciejewski
Hi! I'm very beginner in framer and i wanted to ask is it possible to make loop carousel like this one http://kenwheeler.github.io/slick/ (Myltiple items example) in framer? How can i do that? Here is my wireframe: http://i.imgur.com/5AvxczM.png
12
Javier Eduardo Treviño
is it possible to preview a framer project on the Android app without Framer Studio? ( don't worry I'm not being cheap, I am actually using the trial before I go ahead and buy studio)
7
Giovanni Caruso
Have not read it yet, but it seems a cool article (at least from the title and a quick scroll : ) )
0
Fredrik Ampler
How can I read all files (photos) in a specific folder, and put them in an array? I want something like: imgArray = "images/*.*" which would enable me to do layer.image = imgArray[n]
6
Tes Mat
Hey, I do a $25 discount on the Framer book to celebrate Ukraine’s 25th Independence Day! Why Ukraine, and not, e.g. The Netherlands (where Framer is made), or Belgium (where I’m from)? • 25 years is ¼ of a century! • I’ve spend most of my time in the last few years in Kiev (parts of the book are written there), and have seen what began with the Euromaidan protests evolve to their current situation (getting closer to the EU, but also still an ongoing war in the east) • Because of listening to Ukraine’s hymn so often on Euromaidan, hearing it now still gives me goosebumps… • UA has many talented designers, like Станислав Рапп (Stan Rapp), who made this flag visual. (and proposed the discount :o) • And I’m teaching a 1-month Framer course starting next week at Projector in Kiev: http://prjctr.com.ua/framer-js.html Use this code: «ukraine25» https://gumroad.com/l/framerbook/ukraine25 …new edition of the book coming up!
1
Antonio Krämer Fernandez
#Android #Offline Hey guys, i*m looking for a possibility to save a framer prototype on an android phone for offline usage. Koen Bok?
4

August 25

Joyce Lau
Hey y'all, I've created layers in a for loop that I want to call later individually but their IDs are auto generated. Is there a way to define the ID or call the layer by its name instead? For example, in a function called during for i in [1..9] item = new Layer name: "item_" + i item_i.onClick or any other time I want to single out that item. 🙏 in advance!
3
Rhys Merritt
Hi Guys! I was part of some work recently which required a group of us to come up with a lot of variations of colour combinations, so I created a little prototype to give us a helping hand, and get some ideas generating a bit easier. This isn't super complex at all, but I was happy that I learnt a few things while creating it - namely, how to set up google fonts, how to vertically centre text in a layer, and how to make it fully responsive! Prototype here: http://share.framerjs.com/8qwfzxwwv22j/ EDIT: Just added the ability to drag your finger up and down to adjust the lightness or darkness of the colours :)
4
Rich Price
Thought I'd share my first simple prototype. Just wanted to get my hands around the framework and importing from Sketch -- which I love so much now! Fun stuff!
2
Paul Kooi
Newbie question: Say I have a widget ( say maybe a carousel ) that I want to duplicate many times.... and then programmatically make changes to it. How would this be accomplished? I tried using a for loop to replicate the widget but can't get it to work. The examples that I've found online suggest using an array and then looping over the array... but that doesn't allow me to make changes within the carousel itself.... hope this makes sense. Thanks
3
Jinn Rong Wang
Hello Framers! I was at a Vancouver prototyping Meetup demoing Apple TV prototype using game controller, and now I have scripted on Medium. Very excited to share with y'all :)
6

August 26

Chris Wang
Writing functions, using arrays, loops etc. have been some of my fears when using Framer because I was worried that those would introduce bugs that would take too long for me to figure out. But I know they are super useful if I want to prototype more complex stuff and save time. Today I decided to give it a try to write a function. So here it is. On reflection I'm also amazed how much you could do with Framer even without writing any customized functions.
2
Nitish Kumar Meena
Hey everyone, Is there any way to change text string in framer dynamically? for example, dragging up would increase the font size...pinch-out to increase kerning etc. Any leads would be appreciated.
8
Jeff Young
Having some issues with import in Framer Studio. I'm finding I can't access the layers via the "insert" menu if I save the document before importing. If I create a new document and import before saving, everything works as expected. If I save the document first, I can't use the "insert" menu. Anyone else experiencing this?
1
Giovanni Caruso
Hi! On Sept. 15 we are going to run a Framer Meetup here in Milan. Venue to be announced (just discussing some details). We are looking for designers comfortable co-leading the session, sharing experience or prototypes, etc. Here the event page (wip): https://nvite.com/FramerMeetup/fbe7
0
James Hare
Hi everyone! I'm experimenting with 3D transforms and made this little toy. You can drag the handle to spin the mobile. This only works within Framer Studio it seems, and not in Safari, Chrome or on iOS. Am I using any unsupported techniques/CSS? A further strange behaviour is that the background only goes the correct colour (grey) when you type something into Framer Studio. When it first loads the project, it's black! (try simply typing a space in the editor - it then changes the background to the correct colour). Anyone have some advice? Thank you
4
Mindaugas Petrutis
Hey all, planning on organizing a Framer.JS workshop or even a series of them in Dublin. Wondering if there are any Irish designers here who might be interested/comfortable leading it? We might also look at bringing someone to Dublin, open to ideas - [email protected] Would love to chat.
7
Adam Mazurick
Hi Framers. I'm still somewhat new to Framer and until recently I've been writing lots of unnesscary code because I've been avoiding using arrays. I found this article and it really helped me learn and use arrays to write less code.
2
C. Vincent Plummer
Hey all, can anyone recommend a good gallery of framer projects that are using the new MIDI integration? I'm very curious what people are doing with this.
4
黎竑廷
I made "flip cube" by Framer & purely css just quick example to show difference between them hope it helpful for someone https://codepen.io/anon/pen/NAkmYO?editors=1100#anon-login http://share.framerjs.com/h97a40ujhfdk/
3
Sam Thorne
Anyone know if it's possible to put modules in subfolders? I've tried a few variations and tried poking through GitHub to find out how require is parsing paths, but couldn't find anything. Ideally i'd be able to check out a repo with a bunch of modules in it directly into a project folder.
4
Jon Madison
re: FramerJS states -- is it currently possible to refer to dependent layers in states? I have two layers that i've joined together via a "container" layer, and i'd love to utilize states to affect animation of n layers at a time. As i describe my problem i'm now wondering if someone has written any module to handle this (in the case i'm missing something in current framework functionality)? :)
2
Lukas Lineker
Hi, used framer a lot but never with sketch. Imported my design from sketch and all the layers appear in the higherarchy. But whenever I try and do anything to the imported layers it throws the error "Can't find variable." Anyone know what is going on and how to access the imported layer properties?
2
Eli Beitzuri
Am I losing my mind? I could swear the Framer Preview app had the ability to open a prototype from any URL. Now I don't see that under "links", but I also don't see any version number change.
2

August 27

Kasper Germann Kramme
How do I "install" a module?
3
Matt Baxter
Is there a way to programmatically access the properties of a state on a layer? For example, if I wanted to know what the height would be for a given state, is there something like layer.state['active'].height?
2
Billy Roh
Hi! What's the best way to export animations from Framer to CSS keyframes? I checked out this demo, but it doesn't seem to be working anymore...?
2
Jonas Treub
Fun little experiment, push the dots.
6
Yuhki Yamashita
Has anyone ever tried to use maps (e.g., Google Maps, Mapbox) in Framer? Using the embed/iframe approach allows the map to render and be interactive, but doesn't allow for events like drag to propagate to the parent layer. And I'm not having much luck with the JS APIs (I can kind of get it to work when I view my Framer project on the browser, but not in Framer Studio or Frameless; and even then, the event handling is janky). Any pointers appreciated!
6

August 28

Adam Mazurick
Quick Newbie Question: I'm trying to create a force touch interaction. When you press the "Your App 10" icon, I want the origin of the animation to start from the point of touch. Instead it's animating from a weird x and y coordinate position. How might I fix this?
1
Patryk Adaś
How to make a navigation bar disappears after I've scrolled particular amount of pixels down? I want to re-create something like that: https://codepen.io/sunnyxyst/pen/DwgFm Thanks!
1

August 29

JinJu Jang
Hi everyone! I created a very simple, entirely configurable grid list. You can change the number of columns, animation speed, or almost everything with this one ;) Hope this can be useful when you need to make a zig-zag list! http://share.framerjs.com/wvix5s7vnnt0/ - 3 column example: http://share.framerjs.com/km9rd675yg8h/ https://dribbble.com/shots/2926123-Dynamic-Grid-Gallery-Framer-download-link-attached
4
Eric Wyman
WebUI prototypers... Is there a handy way to size down @2x sketch artboards for presentation?
4
Kin Chung Wong
Hey guys! I saw Marc Krenn's firebase post and made a realtime chatapp prototype with step by step guidelines using the module for a developer summit in Hong Kong. It is so amazing to use firebase in framer! :D Feel free to play with it. https://github.com/charleswong28/FramerJS-Firebase-Demo/ Framer is still quite new to me! It will be great to have comment from you guys or you may make pull request to it! Thanks! #firebase #framer
3
Bimma Bimma
I hope I can ask this question clearly ... If I've created a module with a class that has layers with onClick events, and those (module class) layers are included in a scrollComponent in app.coffee, how can I prevent the click event from firing on those layers when the user is scrolling the list? I'm clear on how to do this when NOT using a module, but this is clearly a scoping issue I can't figure out. I've tried passing the scrollComponent to the module as a parameter. I've tried using window["variable"]. To no avail. Scrolling always triggers one of the layers created from the module class.
5
Manuel Dahm
Hi, I am just starting with Framer and I try to create a tapbar iOs style, I have a sketch file with the 3 states of the tapbar in 3 different artboards.. How do I approach this in framer?
1
Baisampayan Saha
I have created a module that creates a grid of layers using for loop. now when i use the module in my framer though the layers are getting created....i am not being able to change the individual layers properties. I am not getting where I am mistaking!
6
Min Shin
Hello, everyone ! I have a problem with drag interaction. I tried to make another way of image interaction on the feed (I just thought if we use drag interaction to explore images without moving to other screen). Anyway, the first image seems ok, but other images have a problem with going back to the original position(please check the last part of video). How can I fix it? http://share.framerjs.com/gygw5f3n1ntd/
1
Baisampayan Saha
Recently, while prototyping for the redesign of the Playment app, i had to create a lot of buttons. Got frustrated after writing the same code for the buttons every time. So created a small module which lets us create buttons with proper material design shadows and interactions. Hope others can use it too. http://share.framerjs.com/alvooc0u46ux/
2
Óscar Macedo
Just sharing my project that will use JavaScript
3
Tojo Rakoto Ramanantsoa
Hi guys. Framer noob here :) Can anyone please heIp me understand how to listen to a specific "currentPage" (page activation) in a PageComponent? page.on "change:currentPage" just listen to the page change, not the current "activated" page, maybe there're other syntaxes? functions?... (please forgive my noobness) Here's my example : I have a PageComponent named myPage, and would like to assign a certain page of the myPage (when activated) to trigger another "thing", say an animation, or another page activation, or a state, or whatever... I know how to listen to Events like onTap, onScroll, onSwipe, on Move... etc, but I really would like to have a certain page "activation" to BE my Event? Does it make sense? Lol Hope you guys can help me figure it out. Cheers ;)
3
Jochen Leinberger
Hi there, I am working on a big Prototype (1600 lines of Code 40MB of images). Performance in Chrome and Safari is good. But after uograding to Framer v68 whenever I hit save Framer goes into a save cycle which takes arround 15seconds to finish. Which means working in Studio is a pain ... Any Ideas how to solve that ?
8
Calvin Teoh
Anyone else getting this 'script error' banner on their shared prototypes when viewing in Chrome? This doesn't appear in Safari and no errors are showing in Framer Studio either.
2
Miguel Olave
hello Framers Is there a way to manage shared projects share on website?? (Delete, update, edit, etc.)
1
David Kerns
I am relatively new to Framer and CoffeeScript – so please bear with me as I take the degree of difficulty down about 40 notches for most of you. As a learning exercise I set about the task of creating a simple switch component. It's far from perfect in some of the finer details, but has two major problems now which I don't know how to solve. http://share.framerjs.com/ug7bdzydvtbg/ One is that my switchBg state is not being applied if onTouchEnd (AKA mousing up) is ended outside the bounds of switchBg. Am I doing this totally wrong? Should I just be binding the state of switchBg to the state of switchHandle? and possibly related... Curious as to why does my .onTouchEnd needs to be wrapped in a click event on switchBg? I did this to prevent the switchHandle from twitching and fidgeting while be dragged – but I don't exactly understand *why* I had to do this. Any input or comments on any of the above would be greatly appreciated. Also feel free to point out obvious optimizations that could be made – engineering wise this is probably far from desirable, but with some help I think I can improve on it and learn more doing so.
3
Sigurd Tapio Mannsåker
Some people were asking about disabling the auto-refresh in the preview window, since it can be a pretty heavy task on complex prototypes. One quick hack I've started doing, is simply adding this line to the top of my prototype: return if window.FramerStudio It disables your entire prototype in the preview window rather than just stop it from refreshing, but might come in handy for some people. Comment out when you're ready to preview. Of course you could just do "return" as well. I just do it this way cause I often have it running in a separate browser window in the background, and I'm happy for it to refresh while I work. EDIT: Nevermind, see Benjamin Den Boer's reply below :) But just so it's not a complete waste of a post: Similar tricks are also handy if you're doing a lot of work with sound/video and you only want it to play in one instance of your prototype at a time. So you might do videolayer.player.muted = true if window.FramerStudio or videolayer.player.autoplay = false if window.FramerStudio for example.
1
Jonas Treub
Introducing Framer for iOS, a distraction-free way to preview your prototypes in real-time. Native level interactions, offline use and secure sharing links. Get it on the App Store and round out your design toolkit today! Download it here: https://itunes.apple.com/app/id1124920547 Read about it here: http://blog.framerjs.com/posts/framer-preview-for-ios.html
22
Adam Mazurick
I have a question. I'm studying framer.js and the interface and continuing to learn and discover. I’m following Sean Mateer’s kick-ass tutorial here. https://medium.com/framer-prototyping/framer-js-for-people-who-think-things-like-framer-js-are-weird-and-hard-add2068c8114#.h7zp2e3er As per the tutorial’s instructions, I’ve created a state named ‘stateA’ to change the x and y coordinates of file named $.card1 to the following coordinates upon click … stateA: x: -510, y: 300, scale: 0.85, originX: 1, originY: 0 so far so good…yay…all is well…until… I go into the framer property panel and after the event has occurred the property panel indicates stateA's position to be x: -424 y: 300… Why is that? I attached a photo.
4
Patric Pfoertner
Hey Framers, I got some Newbie questions and I hope you can help me with them: 1. Which Script language (JQuery, etc..) do you recommend me, for bringing my sketch website design to life? 2. Could you outline a workflow for launching a website (Blog + Shop) from scratch. 3. Could you also outline a workflow for launching an app from scratch. I hope you can help me :) Cheers, Patric
3
Verónica García
Hi Guys! I have this loop and I want that, in each iteration, the parent of each itemBackground be: item0, item1, item2, item3, item4 and item5. I tried with: "parent: sketchLogin.item+i", "parent: sketchLogin.item[i]", "parent: sketchLogin."item"+i" but it doesn't work. Any ideas? itemBackgrounds = [] for i in [0..5] itemBackground = new Layer width: 1175 height: 279 y: 285*i backgroundColor: "rgba(255,255,255,1)" itemBackgrounds.push(itemBackground)
1
Øyvind Nordbø
So this warning has kept popping up on occasion for quite a while lately, basically when I upload my projects to the Framer share server. Uncaught SyntaxError: Unexpected token { It never shows up in my compiler, and I have no idea what it is warning me about. Is this a library bug or am I doing something wrong?
1

August 30

Vince Li
Hey guys, what's the simplest way to make the red layer sticky as soon as it reaches the top? Thanks in advance!
3
Kan Grace
is there any webpage design example made by framer? I would appreciate if anyone could share some links?
2
Jeongmin Kim
Long time no see. I designed a watch face with emojis for fun. I apply media rules so this fit for avery apple device from watch to Pad. I have tried to use only emojis instead of images (� Watch hands, � Moon Phase, � Sunrise � timeChange… etc.)… But there are fontSize issue on iOS so I fix it again with images �. Here is Emoji only version too, You can rebound it anytime. Enjoy it ! Image Emoji version http://share.framerjs.com/i800s1330krn/ Only Emoji version: fontSize issue on mobile http://share.framerjs.com/6uq3wt3nujrx/ Emojis from http://getemoji.com/
1
Øyvind Nordbø
Aloha, Framer community! I wrote an article about making your prototypes more manageable and diverse, using Classes, Loops and Arrays!
15
Peter Gr
Hey y'all, I made something to turn strings into text bubbles. Thought this might be useful for others to use :) http://share.framerjs.com/8ydrjr9qi6l3/ (At first I tried using the textLayer module to "bubble-ize" text, but it kept giving errors when I imported, so I just used the built-in Utils.textsize)
3
Stephen Etheredge
How can I set my draggable constraint proportions once I already zoomed in and the base layer is scaled * 2???
5
Baisampayan Saha
I have made a gallery component which I want to add to a layer as a child. for example: {Gallery} = require "Gallery" layer = new Layer galleryComponent = new Gallery parent: layer this doesnot seem to work. Is there a way to append component from modules to be added to other layers as child?
4
Steve Ng
Hi, I'm new to framer, and I have very basic coding experience with css/html. I'm a designer first, but would like to get more experience learning framer. Is there a tutorial site for framer basics that anyone can recommend? Also would you recommend framer to a beginner coder like myself? Thanks very much!
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
Charlie Sneath
Any chance you guys will be making updates to the Framer iOS app to be able improve wifi connection on big networks? Can't connect when I'm at the office which is a bummer. Through USB would be awesome, too!
2
Sergey Voronov
any ideas why I can't interact with layer created by the function? http://share.framerjs.com/ngnjlx94mq6n/
2
Rafe Chisolm
Hey Framembers, trying to push an array of pages into another PageComponent's Array after a specific event, from a position to the left of the screen (instead of from the default right side). The goal is once you scroll back through the pages, the array that was ".push()" will appear in the sequence as if it was part of the "flow". http://share.framerjs.com/o5g0a5bf41l8/ Steps: - Swipe or Tap the Circle until you reach the 4th page - 4th page minimizes and PageComponent animates from the left - Tap on the minimized 4th page to return it to it's previous position/size - Scroll back to previous pages (this is the tricky part where I want to have the PageComponent that came from the left behave as if it was part of the original flow) Not sure if it's smarter to use ".push()" or ".splice()" or simply animate the nested PageComponent from the left (not sure how to to override the default x value after using "addPage"). Otherwise, I'm imagining I'll have to do a series "Util.modulates" to simulate, which may be over thinking it. Any and all help is much appreciated!
0

August 31

John Sherwin
Hi guys, I'm trying to animate the opacity of a sublayer in Framer. I have an array called "Cards" and there are 3 cards inside the array, each card contains 2 sublayers "label" and "value" which are just two html layers pulling values from other arrays. I'm trying to animate the "value" label on a click event. When I write value.animate and then try and animate its opacity property Framer tells me that it can't find a variable "value" even though it exists. Is this because its a sublayer or because its a sublayer of a layer that is part of an array? I've attached the code snippet. I know this is wrong but its an attempt to access the sublayer to animate that on its own. Any help is much appreciated. Cheers!
2
Agnes Won
Hi folks! Does anyone else run into problem of having the title bar of Safari/Chrome (on iOS) not minimize when they view their Framer prototype in mobile browsers? For example, the usual behavior is that the Chrome's title bar minimizes with scroll and connects with the iOS status bar. The title bar on my prototype however, remains exposed and thus adding some extra height to the screen. Am I missing something here? Would appreciate a reply. Thanks!
1
Miguel Olave
Hi Framers, When I want import some sketch in Framer how can I choose sketch project to import?? I haven't could to change project when I have to or more sketch's projects opened. Only solution that worked have been close other projects. Any trick or solution to solved??
2
Ilia Baronshin
Hey guys! I'm starting work on a TV app prototype, so how can I add custom device to the list and change Canvas size thereby?
1
Ken Yiu
Is there any native way to lock the orientation?
8
Miguel Olave
Hola framers que hablan en español, voy a realizar una presentación mostrando framerjs en un 20 min. Intentaré transmitir en vivo. Hi framers that speak spanish. I Will make presentation on Javascript meetup. I Will try transmit on live in about 20 min.
3
Steven Verhoest
hi everybody, I have a question regarding changing multiple attributes of a layer. First I created a layer in the standard way layerA = new Layer x:0 y:-90 name:"floatingMenu" then I make a copy layerB = LayerA.copy() now if I want to change properties I need to change each one of them line by line layerB.x = 100 layerB.y = 100 ... is there a short notation for this like you would the properties on a layer constructor? thanks Steven Verhoest
2
Min Shin
Hey, I've created a pull-down interaction to explore images on the feed(tried to make feeling like a bunch of cards) I've made this from my weekend study group as an individual work, and got a lot of help from Framer community in Korea :) Enjoy, framer! http://share.framerjs.com/bilb0m16ymdv/
1
Sergey Perepelkin
Hello guys, I learn framer on Windows (don't have Framer Studio) and have issues with Align functions. I always get "Align is not defined" in browser and even can't find them inside framer.js file. But it described in docs https://framer.com/docs/#align.align . Can somebody help me?
2
Adam Mazurick
Is there a way to lock the orientation of your prototype?
1
Nick Breen
Hey FramerJS group! I'm struggling with a page that has a layer with a dynamic height (could be large or small based on content). If you have any suggestions:
3
Jack Merrell
Hi Guys, Has anyone had any issues of image assets flickering during pinchable and draggable events?
6
Henry Latham
TEXT INPUT Has anyone built a fully functional iOS keyboard they can share? I want to mimic the sign in process for an app I am working on and have only dabbled with basic animations so far. Thanks for the help!
3

Monthly archives

2017

2016

2015

2014

2013