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

What is Framer? Join the Community
Return to index

February 2017

February 01

Carolyn Huynh
Hi, I'm a TA under professor Julie Kientz at the University of Washington. We are teaching a UX prototyping class for undergrads and we wanted to see if we could get a free week long trial for 60+ students. Please let us know if this is possible! Thank you!
2
JinJu Jang
I found a really simple way to make the width of a button dynamic! just one line of code. https://framer.cloud/ShDqJ/ layerName.html.length <-- Tells you how many characters in the layer(When you use html: "something something"). So you can apply that value to many cases. Not a fancy prototype, but this is so userful! :)
2
Julius Koroll
Hey guys! One question: I would love to give childrens of a group some animation and states. I tried: List.children.states.stateA but it doesn't work.
4
Steve Ruiz
For my UI portfolio, I built a website to show off a Framer prototype, using recordings and text to take viewers through the prototype's features step by step. What do you think? Working on the project, it got me thinking about a feature I'd love to see in Framer's future: a simulated user, or an object identical to the existing cursor that could take instructions for animation and interactions, and would trigger interaction events in the layers beneath it. Something like, animate to here, then delay a second, and then tap. With a simulated user, I could create a 'tour' of the prototype and then open it up to the user's own interactions without ever leaving the prototype itself.
0
Giles Perry
I’m animating a set of layers in an array and I want to do something when all the layers have finished animating. What’s the best way of doing this?
4
Julius Koroll
Hey guys, I want to implement Framer more into my Web-stuff. First: I implemented the .wrap() but it doesn't work with a mouse-scroll, you have to click while scrolling. How can I change that? Second: I want to listen to the position of my scroll and hide/view a scroll-down-header after 100px or so. THANKS so much for every suggestion! <3
1
Akhil Dakinedi
Quick question: If I hid the ShareInfo box in my uploaded Cloud link (the "Made with Framer" box that shows up on the left with the "Open in Framer" link), how do I open the prototype in Framer from the Cloud URL? Trying to revert back to a previous version after something went very wrong in the prototype...I don't see a way to do it from the Cloud Dashboard either. Any help appreciated. Thanks in advance.
3
Alvaro Lourenço
Hi folks, I'm trying to dynamically load an image by using `new Image`, and then setting `image.src`. This actually works inside Framer environment, but coders are having lots of 404 issues when opening it through the browser. - Q: Is it possible to subscribe to `load` events in Image object? Thanks!
3
Vilav Bhatt
Hey y'all, are there any existing projects / modules that are useful for bot prototyping, like Facebook Messenger, for instance?
1
Krijn Rijshouwer
Hey everyone! The best way to learn is by doing. That's why we're launching the Framer 100 challenge, a new initiative inspired by Tony Jing. Want to accelerate your skills and get your hands on exclusive Framer swag? Here's how to participate: 1. Upload and share your Framer prototypes with hashtag #Framer100 on Dribbble, Twitter and the Facebook Group. 2. Reached your 100th design? Email us at [email protected] with your address. 3. Get a Framer goodie bag delivered directly to your doorstep. 4. Glory! Help us spread the word! — https://dribbble.com/shots/3252370-Win-Free-Framer-Swag
5
Jacek Stryk
Is there a way to limit the scope of the animation listener events? Oftentimes I listen to "layerA.onAnimationEnd" somewhere and it does what I need it to do. But the unintended side effect is that if I animate layerA somewhere else the event fires again. How do I confine/limit the event listeners in general to fire once, in a specific scope, or how do I make them more "localized"? Or maybe there is a better way of doing something ONCE upon animation end and I'm just thinking about it in the wrong way?
4
Andrew Cunliffe
Does anyone know how to remove the scrollComponent that comes with the flowComponent?
5
Aalok Trivedi
I'm practicing using json, but I'm having a little trouble. I have 7 items in my json file but when I create my loop only 6 items are created. I'm sure this is expected behavior for a loop, but how do I get all my items? I'm using this proto as a reference: http://share.framerjs.com/n28faa7ue9rr/ my proto: http://share.framerjs.com/2pol2qocna4d/ https://screencast.com/t/lWQmvbDS6ThL
2
Sergey Voronov
Here is the video of prototype of facebook messenger we did yesterday between Amsterdam and London meetups. Prototype uses firebase module by Marc Krenn , input camera module by Jordan Robert Dobson so you can actually take a photo on iphone and IOS kit module by Kevyn Arnott, and spotify module by me:) amsterdam prototype link-http://share.framerjs.com/jar163tvhcbr/ london link - http://share.framerjs.com/d5v9myt7laa2/. Mind that game will not work for second time (i will be clear DB constantly). https://github.com/k-vyn/framer-ios-kit https://github.com/mamezito/spotifyApiFramer https://github.com/marckrenn/framer-Firebase http://framerco.de/post/136846506048/module-inputfield-class-update-this-module-has#notes
10
Koen Bok
Poll: How would you feel about Framer switching to ES6 (actual JavaScript)? Background: Framer currently uses a layer on top of JavaScript called CoffeeScript, to make it less intimidating and easier for beginners. But the next version of JavaScript (ES6) fixed many of these issues, so we are considering to switch to it. There is a lot more to it then I can express in this post, but I just wanted to poll the temperature and get some feedback.
113
Xin Xin
Hey guys! I'm using sprites for some animation work based on Jordan Robert Dobson's excellent sprites module. However, it doesn't seem to be working with the most recent version of Framer. Here's the link: https://framer.cloud/kQfCa/ I took screenshots of the framer file and the js errors on console. You can see that it's as stripped down as it gets. Anybody have an idea of how to fix? Thanks!!!
14

February 02

Jacek Stryk
Is there a way to use Utils.cycle() in reverse? Example: array choices = [a,b,c,d]. Pressing a keyboard key Utils.cycle() and returns choices[0], choices[1] etc. When I press backspace I want Utils.cycle to return the PREVIOUS array value (choices[0]) not the NEXT one choices[2]. Any ideas how to make the Utils. cycle() bidirectional? I guess I can do choices.reverse() and start cycling through that but looking for a better solution
7
Tessie McClendon
Has anyone gone through the process of submitting their FramerJS app to Apple Store. I sure would appreciate your guidance. Thanks much!
2
Tae Chemist
Hey guys, I'm trying to fit my 640 width assets to iPhone6 screen. Using this code: artboardWidth = 640 Framer.Device.contentScale = (Screen.width/artboardWidth) It works on the Framer studio but it doesn't seem to work on the real device "iPhone6" any thought?
0
Radek Kyselý
Bidirectional Utils.cycle() Hey guys, just a quick note. If any of you need to Utils.cycle() through your arrays in both directions (not just "next" item), I made this little extension of the default method to do so :) https://github.com/rdksl/Bidirectional-Utils.cycle-for-Framer #cycle #utils #array #next #previous #directions
0
Priyanka Sharma
I'm just starting on Framer, have tried it for a couple of hours before posting this. Is there a full resource library for modules available somewhere? Or something tutorial like that is good for beginners? TIA.
3
Sara Surh
Hey Frameristas! Over the last year, we’ve had loads of success with Framer Meetups happening organically all around the world. Some of you have expressed interest in a larger, more in-depth official Framer event, so we thought we’d take a minute to test the waters. If you’re interested in attending, take the short survey and let us know what you’d like to see from us! https://framer.typeform.com/to/mwsI4H
9
Nick Bewley
Follow up to my last question here: https://www.facebook.com/groups/framerjs/permalink/1039302626196808/ I'm trying to check the duration of a tap event and perform an operation if the tapped button is held for longer than [x] seconds: "event.offsetTime" gives me the duration of an event from TapStart to TapEnd, but now I cannot figure out how to check the duration of the event INSIDE the tap event. Using Utils.delay inside the tap event doesn't work as this is called during the initial event. Thanks for any and all help. This one is stumping me. http://share.framerjs.com/3mgw618ukoqc/
1
Peter Lada
Recreated snapchat's tab navigation in framer. I'm sure its been done, but it was fun to build:
1
Silvia Bormüller
The last Framer Meetup at Freeletics HQ in Munich was pretty awesome. Make sure to join us next time. http://meetu.ps/c/2R9vv/vJsMj/a
1
Finlay Craig
Hey Framers! I'm trying to build a paging module, where pages scale when they are the current page, and shrink slightly when they are not the current page. I can't seem to find the current/live position of a page when it is being swiped. I've tried page… page.onMove -> print pageOne.x … but this just returns the final x value. I've tried the 'change' functions, but nothing seems to be able to 'see' the live values of pages, whilst they are being interacted with. Any suggestions most appreciated :)
1
Vincenzo Petito
There's a way to upload the images on Framer Cloud? On Framer Studio are ok but even updating the prototype on the cloud, images are still the same!
1
Anton Kartashov
#Framer100 Flipboard-like navigation controller: https://framer.cloud/VZLwi
2
Julius Santiago
Have run into an interesting issue lately and wondering if anyone else has run across it: seeing an Uncaught Error when viewing a framer project via cloud link in the browser. No errors in Framer Studio. If I copy and paste the code into a new project and then upload that to Framer Cloud there will be no errors. This is the second time this has occurred. One thing I've also noticed is that if I open the link in an incognito window there is no error. ps - would prefer not to share the framer link because it's work stuff :/
2
Tony Jing
Is Framer Cloud down right now? I can't seem to upload protos or visit Framer.cloud.
4
Aalok Trivedi
I'm trying to implement Mapbox into my prototype and I followed the instructions found here: https://www.mapbox.com/help/mobile-framer/, but I get an error. Any thoughts on what I did wrong? https://screencast.com/t/PDtfmlLa http://share.framerjs.com/ygt01gz4lv8l/
2
Kari Goin
Is saving to the cloud unavailable? I keep getting a page not found and error message.
1
Dani Bedar
Hello! I'm trying to create an animation where upon a click event: 1. LayerOne (a 30% black layer) and 2. LayerTwo (a Modal on top) are visible for either a) 5 seconds or b) until user clicks outside of modal area It's a common web UX, where a modal appears and the screen behind is darkened so you notice the modal, and it's either timed or you can click on the darkened screen behind it to exit early. I'm thinking it would be accomplished by writing two functions, one to toggle the dark layer/modal and another to decide if the dark layer/modal are visible, but having a hard time accomplishing this. I think this could also be done by just adding the dark layer/modal as state changes upon the click event, and adding an if statement like, if LayerOne is in state B (opacity: 100), and user clicks on it, switch LayerOne and LayerTwo to state A (opacity: 0), else if time = 5 seconds, switch LayerOne and LayerTwo to state A (opacity: 0). Would appreciate any tips!
3

February 03

Nikolay Berezovskiy
Hi, guys. Who knows how to call some part of a composite class from another module? For example, I have to call an icon from a header and detect their events.
6
Floris Verloop
Framer.com has a brand new look! There are no pages that were left untouched. Everything has been updated, refined or completely overhauled. The frontpage is much simpler, the new feature pages showcase our amazing features, there's an all new examples section and improved performance accross the board. The best part? An awesome new product video that you’ll want to share with all your designer friends. https://www.youtube.com/watch?v=O_P1I9u3bes
10
Milan Seitler
Has anyone else experienced an issue with different x/y values in Sketch and in Framer? For example, my box has an y position 300 in Sketch but when I import it into Framer, it has 290 :-(
1
Daniel Caine
Hi everyone, This has been asked before, but gonna ask again as it appears to have been a while since anyone's asked this: * Any decent examples of charts? * Anyone had any luck using Charts JS? Thanks!
1
Arena Reed
Hi. Thanks for adding me to this group! Are there any good examples of a simple web application that I could start from? Ideally, something with a few different views and some hovers and menus. Is Framer a good choice for a web app? I mainly see people using it for animations within mobile apps, but I think it might save me from some frustration if I take the time to adopt it. I'm pretty comfortable using a prototyping app like Marvel or InVision but I want to upgrade to something that doesn't make me create 100s of screens in Sketch just to show hovers or little menus for an app that only has about 10 actual views.
2
Ade Adegoke
Does anyone know how I can create this?
2
Gregory Dean Hall
I used framer a year ago and found it lagged on a 6 plus. I want to go back into high fidelity prototyping. It's either framer or origami studio if framer performance hasn't improved for on mobile prototypes. Any thoughts? Thanks
1
Ted Benson
Hey Frameristas! I just built a module to help you use Spreadsheet data (Excel & Google Sheets) in your Framer projects so that you can free yourself from lorem ipsum, or just as bad, a bunch of JSON files :) Hope you like it!
2
Renato Castelo
Trying to make a small game and learn Framer at the same time. I need some tips on how to detect collision and trigger an event from it (if spaceship and asteroids overlap) Anyone willing to help?
6
Madhu Rajanna
I am looking to build a html table with about 10 columns with first column sticky in framerjs. Do we have any examples?
1
Aalok Trivedi
I want to mimic the enter code interaction for mirroring your prototype. I'm kind of hacking it for now, so I created a loop of inputs and made it so when you "keyup", it blurs the current index and focuses the next index. What I'm struggling with now is to creating a red border around all the inputs if the last input value is not "4". Any help would be great!
0
Nikolay Berezovskiy
Hi again. Have some issue when trying to set focus to an element with delay. It works with different elements. It does not work only with a delay or AnimationEnd event. Who knows where is the problem?
3

February 04

Hugo van Heuven
Heyhey, framer is giving me some trouble with the canvas. I work on a retina, on desktop apps... I don't seem to get lucky with any of the device settings: If I set Device to canvas, I can't zoom in or out. If I import my sketch file 1x it's all blurry, If I import my sketch file 2x framer displays it 1x and basically zooms in 200% If I set Device to MacbookPro I can zoom to 50% giving me correctly what I should see, but everything is offset by the macbookpro image, and the Canvas apparently can Pan/Scroll... Anybody a experience working with Framer for non-mobile prototypes?
2
Dani Bedar
Anyone have any tips on how to handle html text within a button? I have a clickEvent animation on the button that changes the text (increase the number by 1), but I'm having trouble both keeping the text centered in the button during the animation, and changing the integer. (My button animation is also weirdly delayed). I shared my VERY messy code (it's a work in progress). Appreciate any help!
1
Will Simons
I know this has been asked before but has anyone managed to get Josh Pucket’s pathtoSVG plugin to work? I installed it but when I came to use it, the plugin menu flagged it as ’deprecated’. Does anyone have any thoughts on how to get it to work or failing that, a workaround?
2
Nitin Sampathi
#Framer100 #Framer001 Prototyped an interface for a Spotify TV app
2
Javier Eduardo Treviño
Is There a viable way to do responsive web or app design in framer?.. Having a iPhone sketch art board and framer studio doing the interactivity works like magic but what about responsive scenarios. Any tips or thoughts ,article recommendations?
2
Eric Parren
Is there an updated version of https://examples.framerjs.com/ ? It's such a helpful resource for my students, but unfortunately it doesn't seem to have been abandoned.
1
Robin Spielmann
Hey! Is there a possibility to animate the lineHeight or the opacity of the html input of a layer?
3

February 05

Shinji Kimura
Hey frineds, I found a same question had posted in the past tho it hasn't solved at that time. So let me try one more shot. Problem: When running prototype in full screen on Framer studio, each key press beeps Mac's alert sound. Anybody has any solution to this?
2
Anthony Custable
Hey guys, I am new to coffee script and I am trying to animate a flyout menu by clicking the menu Icon. For some reason its not working. Anyone know why?
4
Katherine Martinez
How do most of you apply your framer.js projects to production? Is it possible to use any of the resulting javascript code from a prototype in production-code? I don't want to create something amazing in framer.js, if I can't even re-create unless I use third-party libraries like Greensock or jqueryui. Any workflow tips would be much appreciated!
12
Anton Kartashov
#Framer100 3D + onSwipe: https://framer.cloud/wWHCt/
2
Steve Ruiz
Hey, question here. I want to (a) begin a touch event on one layer, (b) drag the touch event through a second layer, and (b) end it on a third layer. Is there any way to capture the event at (b), or notice that a touch event's coordinates are occurring on top of a layer, despite neither starting or ending on that layer?
5
Noam Elbaz
Anybody experiment with Framer and Bodymovin? Would love to hear your experience.
0
Orfeo Chen
I'm trying to build a pull-to-refresh interaction and the expected outcome is exactly as https://framer.cloud/xIDIa/. Now I'd like to replace the blank list with a ScrollComponent. One thing I find hard to achieve is within ScrollComponent, there's no place to insert the "Pull to refresh." hint. Any clue? :)
2
Ee Venn Soh
In case you have missed it. Airbnb's Lottie — After Effects animations to native app converter.
3
Thomas Law
Hmm... An experiment to change SVG path anchors with Framer. Just watch that sound wave, I don't know if Framer could get access to iPhone's microphone, or I could make the sound wave react to voice input. Also includes a timer function, the longer you record, the slower the play button goes. Here's the link: https://framer.cloud/tWhLN/ And if you think it helps, please like it on Dribbble: https://dribbble.com/shots/3267120-Voice-Record
3

February 06

Anton Kartashov
#Framer100 Swipe to Delete. One of the most popular cases with Page Component in Framer: https://framer.cloud/xrCrJ/ I've created my own #Framer100 playlist on Youtube: https://www.youtube.com/playlist?list=PLbmT-uqPoDTeY8wfjD2T57zcxAZBZmZLn
0
Alvin Keegan Goh
Hey guys, I was just wondering: will there be a Windows release for the Framer app any time soon?
0
Oliva Rawlings
hey !! super new to framer atm & wondering if it's possible to do more object oriented code with coffeescript ?? Can't seem to figure out a way of defining classes in it & I'm sick of typing the same parameters into each pageComponent I make : (
6
Martin Halik
Hello may you help me, why this doesn't work? for all sketch layers it animates only ripples[3] layer. for i in [1...4] sketch["sortBy#{i}"].on Events.Click, -> ripples[i-1].opacity = 1 ripples[i-1].scale = 0.5 ripples[i-1].animate properties: scale:1 opacity:0 curve: "spring(300,30,0)" time: 0.4
2
João Paulo Villa Mello
After the login animation, here is another animation for SocialBase app. Hope you enjoy it. I'll appreciate your thoughts :)
9
Jiaxin Chen
Hey framers, I want to use real data in my prototype, so I google for the examples, but there's nothing I can found. So, what will you consult when you want use real data?
12
Jesse Campbell
Hello, Framer group! I'm totally caught on something and am looking for some help. I’m trying to get an array of all the JSON files in a "/data" folder, so I thought I’d use NPM glob but it’s giving me the following error: "TypeError: fs.readdir is not a function. (In 'fs.readdir(abs, readdirCb(this, abs, cb))', 'fs.readdir' is undefined)" My files look like so: ``` # File: modules/npm.coffee exports.glob = require "glob" # File: modules/data.coffee {glob} = require 'npm' glob './data/*.json', (err, files) -> # do things with files # File: app.coffee data = require 'data' ``` To my understanding FS (file system) is included in NPM, but it seems like it can't access the functions. Any thoughts?
0

February 07

Chris Wang
Hey guys, could anyone help me understand how the Draggable Constraints work and when to use it? Seems like x,y defined in constraints are the positions that the layer snap to "after DragEnd" rather than "on DragStart". And I'm also having a hard time seeing how the draggable area is defined by Width and Height. Here's my test file http://share.framerjs.com/u1pw4s6avfmk/
3
Jacek Stryk
Wondering if there is a way of actually playing music in the prototype's background and control its volume / change soundtrack on the fly? I can play a video - but what about music / mp3 files for instance?
1
Dexter Wang
Hi Framers, When scrolling to a certain point y (scrollY), I want to slide in an element using the event Move. Using Move, when you scroll up fast, the animation is really slow because it keeps refreshing in the background. How do I make sure it only animates once? https://framer.cloud/UPTap/ Thanks. [edited]
3
Brandon Shepherd
I'm trying the new Framer Cloud, and after uploading a project, when I test it on a device, it says it can't find one of my modules. The module is in the modules folder of the project, and everything works fine on the desktop and when mirroring. Any thoughts on what the problem might be?
3
Naheel Jawaid
Hi guys question about animation. If I'm animating three properties, is it possible to have certain properties start 40% of the way into the animation? Sort of like shifting keyframes in AE.
4
Meishen Yin
Hello, guys, I am experimenting with Framer JS. I imported the sketch file directly and I wanna make a layer scrollable horizontally. When I add this line of code, the layer is gone from Canvas. Scroll = ScrollComponent.wrap (sketch.PictureBanner) How should I deal with this? Thanks
1
Dani Bedar
Hi all, I shared a prototype on Framer Cloud, but the person viewing it is using Chrome on Windows and it's not working correctly - the Framer dialogue box won't minimize. Anyone have a workaround?
1
Ben Rodenhäuser
I think this question has been discussed before, but I could not find an answer to it: I have a layerA which is masked by another (parent) layerB. Now I would like to scale layerB in such a way as to reveal more of layerA, i.e., I want to be able to scale layerB *without scaling layerA*. This seems to be a bit of a problem because layerA is a child of layerB (otherwise, no masking would be possible ...), so the default behaviour is that layerA scales along with layerB. Any suggestions? Thanks in advance!!
5
Alexander Olssen
Hello, guys! Can somebody help me with pagecomponent? I have an array of 3 items (draggable verticaly) inside pageComponent and don't know how to return an "y" value when i dragging a layer...
1
Melih Bilgil
Hi together. I´m new to framer and have a problem with the z Position on a parented object in the PageComponent. The parenting breaks the z Position. Here is a example. Any ideas?
2
Tomáš Báňa
Hi guys, can you recommend a tutorial about export svg from sketch to framer? Any Article or something else? Thanks
2
Paul Kooi
Anyone having trouble using the Framer app for iOS? I've installed it. Verified that I'm on the same wifi network. I open the app. I get nothing. I've tried opening and closing both the mobile and desktop apps multiple times. I've tried multiple workarounds. Anyone have an idea of what I'm missing here?
2
Eyal Zaidman
Is there a way to programmatically hide an overlay (after calling flow.showOverlayBottom for instance)
2
Maksim Bentsianov
Hi everyone, wondering what's the best way to achieve responsiveness across devices in framer? I've tried this technique but it didn't work..
2
Rohan K
I have created a class by extending layer, so the objects of this class have all the same properties as layers plus a few extras. Is it possible to convert layers imported using sketch to objects of my class? I want to do this so i can avoid having to specify properties like x,y,image, height, width for layers as sketch already defines those.
3
Liz Heidner
Does anyone else struggle to get their projects to upload to the Framer Cloud? Mine seem to fail 2/3 times.
6
Julian Lucas Wohlleber
Hey Guys, some friends and me want to use Framer Studio to build a exhibition-piece for the Telekom-innovation-Labs. Currently we're struggeling with storing data that is generated by the visitors in a json file to use it the next day. Is there any workaround that any of you already experienced? I'm currently struggeling finding a solution, trying to use node.js in combination of express. Is this the easiest/a possible solution? Has anyone any experience or insights she/he could share? Would be so happy to get some feedback!
9

February 08

Meishen Yin
Hello, everyone. I am starting creating Framer JS prototype for one of Apps I designed before. I am wondering how could multiple artboards be imported into Framer JS? Currently, I imported a sketch file within multiple artboards and there are multiple on Framer JS canvas. Is this supposed to be? I heard that there is a new feature about " go to next artboard/page". Do you know any good tutorials about this? Thanks
4
Regimantas Vegele
Is there a way to set ‘focus’ to true on a text-field (input field) on mouse-over. So that the user would not have to click the field? Thanks.
1
Henry Kim
Dear Framers, I just started learning about this software since yesterday by following the tutorials on Framer YouTube channel. And as I followed a few, I noticed the video put "properties" whenever animation is added, but, in Auto-Code Animation, it shows "options." I'm curious to know what the difference is. And I am already facing a quite devastating learning curve. Hoping to get some help and knowledge from this group and I appreciate the help I'm going to get. 😁
2
Naheel Jawaid
Hey guys, having a bit of trouble here. Trying to edit animation options for when it switches states. I put 3 seconds as the time for when it switches to "topRight" but it doesn't seem to be affecting anything. Am I missing something syntax-wise? https://framer.cloud/bvSiN/
1
Henry Kim
I just started my own thing for the first time and I am hit with a brick. I want to import images as layers but when I import the sketch file to Framer, image isn't showing up. How can I fix this?
5
Scott Herrington
Hi all. Need some help with the flow component. I have a sticky flow.header and flow.footer. I want a layer to slide up from bottom using flow.showOverlayRight(layer, options) and take up the whole screen BUT the space taken up by the header and footer from the flow component is still being respected. This leaves me with white space above and below the overlay layer. Seems silly. What's the best way to solve this? Cheers!
0
Jochen Leinberger
Hi, I am trying to get panning as two finger gesture working as described here https://framer.com/getstarted/guide/#pinchable with: # Enable panning layerA.draggable.enabled = true layerA.pinchable.enabled = true The Problem is, panning works just like dragging but not as a two finger Gesture - neither on my desktop nor on my ios device ... Am I doing something wrong here?
2
Staci Stanford Jaime
Just wanted to say thanks again from the HCDE department at UW for a great panel and workshop about Framer! I heard so many inspiring comments! Thanks to Jordan, Stephen, Erin, and Rich (and Chris for being willing)!
1
JinJu Jang
Hi Framer people! I found a presentation I made for local iOS dev meet-up. By reading that, I thought it could be quite helpful for those who are new to Framer. Please have a look if you are interested in :)
4
Allie Etcoff
Hey there, is anyone having issues with their cloud files? I'm trying to share my prototype with my teammates, but it is not rendering the design.
2
Michael McKenna
Is there a problem with the Flow Component showNext being used alongside a custom transition? I think I saw a post about this. My custom one doesn't seem to be working as expected. It seems to create another Scroll Component and visible = false or something. Update: Flow component custom transition test by itself trying different methods to have different types of page transitions (right, bottom) doesn't seem to be working correctly from what I can tell. The flow sets and can't handle different transitions after the first one? https://framer.cloud/HJKt60YEl/
2
Steve Ruiz
It's not perfect, but here's my shot at making a drag-to-rearrange list -- with edge scrolling.
1
Eyal Zaidman
contentScale + showOverlayBottom = trouble? Hi there, I was able to fit my prototype to different devices using the following code (base resolution is iPhone 6, doesn't work on the simulator when set to iPhone 6 Plus but works great on my actual iPhone 6s Plus). But, Now, when incorporating a flow component, and calling "contentScale" something breaks: the overlay layer doesn't show up in the right place. Appreciate your help. This is how it looks with iPhone 6 (looks fine):
1

February 09

Blake Reary
Any way to move/hide the "Made with Framer" button on cloud prototypes? It's covering up the one interactive piece in my full screen prototype. https://framer.cloud/mjSnc/
2
Aalok Trivedi
I'm using the animation-sequence module to fire 2 animations on a layer one after another. How do I destroy the layer only after the second animation ends. Right now it destroys the layer after the first animation ends. Is there a better way to go about doing this?
1
Paul Kooi
Hi. I have a layer ( layerA ) that has two states. The state change is both it's position and it's height/width. I have another layer ( layerB ) that's parent is layerA. When ( onClick ) I change the state of layerA I would expect layerB's position and scale to change relative to it's parent. Instead the scale isn't affected at all, and I get a double translation as it's position changes? I've tried Parent, Super Layer, and I've tried Aligning both it's horizontal and vertical position? Anyone have any ideas how I can animate the position of a layer while handling scale and avoiding double translations? Thanks in advance.
4
Meishen Yin
Hello, everyone. Could I know how to make a scrollComponent clickable when the scroll action stops? Differentiate the two actions.Thanks
1
Enrico Varela
Just started to make some ideas for how IOS X could be optimised for larger screens such as the iPad (Pro).. It's in early stages of design but here a rough concept video.. Hope you enjoy it - �
1
Erik Lindholm
Anyone else experiencing issues with OnForceTap Event? Can't make it work on my iPhone 6s. Running Framer v82 and iOS 10.3. I've been testing other example prototypes as well and none of them are working.
1
Josh Ackerman
Hello, I am working on a virtual keyboard prototype between an iPad and iMac using firebase (for more information see https://goo.gl/jxSjYP). So far it seems like all the major functions are working, however it would be cool to make something closer to a working demo with trackpad support and arrow keys. I have some ideas about how to make this work, but before I dive in to coding something that is possibly more complicated than it needs to be, I would love to hear your ideas, or general feedback. My idea for the arrow keys sound simple enough, but maybe my implementation of the track pad could be better? For the trackpad, I was thinking of having a layer on the main computer with its position mapped to the location of touchDrag events within the trackpad on my tablet. Then on a tap event, I could record the coordinates of the tap, adjust coordinates, and then simulate a click at that location on the main computer. For the arrow keys, I found an example of specifying the location of the cursor within a text box so pressing an arrow key would find the current position of the cursor in the text box, and then increment or decrement by one depending on which arrow key was pressed.
4
Guna Seelan
Having a problem with Preview. Prototype looks blur https://framer.cloud/wmnBF
1
Eyal Zaidman
Anyone else experiencing issues with mirroring lately? 1. It takes ages for the prototype to be mirrored on the device (almost a minute each refresh). I've tried it in 3 different places (WiFi networks) 2. Sometimes I get an old version reflected on the device 3. The prototype on my iPhone 6s plus device looks a bit different (size and scale) than on the simulator Sierra 10.12.3 Framer 82
2
Lukas Guschlbauer
Hey! I'm trying to achieve a search-field that filters an array. I'm using Jordan Robert Dobsons "framer-InputField"-module, and on keyDown I'd like to filter an array of items that match the current input value. Also the matching letters in the items should be highlighted. (So actually just like Google Search Suggestions) How would you go about it? I didn't try much yet, but I might have used a "indexOf()"-function loop through the items array to show those elements, but if somebody knows how to do it and maybe even has a prototype, I'd be your fanboy4life... ;)
4
Andreas Wahlström
Hi! I rewrote the ViewController module from scratch with new animations and a accompanying Sketch plugin for generating UI flows. Would love to hear your thoughts! Download here: https://github.com/awt2542/ViewController-for-Framer Intro article: https:[email protected]/create-ui-flows-using-sketch-and-framer-36b6552306b5#.dp4w6i676
33
Mike Johnson
This week's FramerCasts: Custom Modules part 2! Continuing on part one we will take our class and create a module for it. We'll go over how to export, import, and what all the names mean. We'll also talk about thinking about your user first (other Framer designers!) and letting them extend your module further through properties.
0
Leonid Nazarov
I want to create an action sheet. But if I add to the layerB coordinate Y (bottom margin), the animation is not working as it should.
1
Jurre Houtkamp
Hey there! I'm interning at Framer so you'll probably see a lot more of me in the framer channels from now on. We've just shipped some great new community prototypes to the brand new examples page which you saw last week. From flight maps to gestural tab switching in Safari, it's all there! https://framer.com/examples/tablet/ https://framer.com/examples/desktop/
2
Seb Bailey
Is there a way to collapse layers in the layer view on the right hand side? Some of my parent layers have quite a lot of children, and it would be nice to be able to scroll to the bottom of the list without having to go through all of those children first.
2

February 10

Ryhan Hassan
Hey folks, I just added a Framer integration to Dropbox Paper, and wanted to invite you all to try it out. As of today, if you paste in a link from Framer Studio, we'll automatically create an interactive embed of your prototypes. This makes it super easy to organize and give context around your prototypes, as well as share and get feedback from your team. Hope you enjoy :)
21
Noam Elbaz
Hi. I'm on a Macbook Pro. Trying to prototype a desktop app that will be presented to client (with out a device image. I find it quite impossible. Not enough space in view window to view the prototype. Zooming didn't help. Any suggestions?
6
Joe Day
Quick module question: can you reference a module from within a module? For instance, say I have module "foo" and module "bar". "foo" has animation curves in it, and "bar" has an interaction in it that needs one of "foo"s animation curves. Is this possible?
2
Tyson Junkers
Looking for some help... Let's say I have layers A, B, C, D, and E. I want to have the opacity change on all layers except the one that is clicked. What's the best way to do that? Thanks!
1
Sona Solbrook
Has anyone been able to create dynamic header using the flow component? for instance, for a landing page the header is header_landing but for an interior page, it changes to header_interior. any thoughts?
3
Paul Kooi
When importing a sketch file into Framer. I want to then use .bringToFront() to get the header and footer above the work that I've created within Framer itself. When I do this.. I get an error telling me that bring to front is not a function blah blah... In the preview however it seems to work. It does indeed bring those elements to the front. Any clue how to get rid of the error?
0
Lukas Guschlbauer
Hey! Today I asked how I could achieve item-filtering by text-input value. (Kind of like Google Search Result Suggestions...) I've come this far now: https://framer.cloud/utFSM/ ✔ Filter array by input ✔ Highlight the value in each item that contains the value Now the only thing I'm still struggling with to make this work as I need it would be to "close the gaps" that stay after items are filtered out. Can anybody have a look at this?
2
Braden Hamm
I used Mitya a few years ago when they were beta testing. They just made a Framer integration. https://www.facebook.com/groups/mitya.app.ixd/permalink/1926433304251457/
0
Erik Lindholm
Have anyone tried to create a scrolling behaviour similar to the iMessage chat list where the bubbles appear to have some springs between each other? Can anyone point me in a direction of how to achieve this? :)
0
Naheel Jawaid
Hi guys. Bit of a basic question I'm stuck on. Is there a way to set a layer as a parent, and have the parent layer remain on top of the child? Pic attached.
2
Naheel Jawaid
Is double-tap supported on the Android Framer mirroring app/Chrome on Android? I'm running Android 5.0 with the latest versions of the apps above. However, in my prototype, a single tap works instead of double-tap. It works perfectly in Framer studio and on the desktop web version though. Prototype for reference:
0
Mark Johnston
Koen will you be adding "Framer native" backdrop-filter?
2
Dave Crow
Has anyone used Chart.js with Framer?
3
Daniel Caine
Hey everyone, I'm trying to import moment and chart.js using npm and after requiring it in my Framer document I get the following error: TypeError: Color.isColor is not a function. (In 'Color.isColor(this._backgroundColor)', 'Color.isColor' is undefined) Anyone had this problem before? Link to prototype: https://framer.cloud/ckdaU/
1
Sergey Voronov
wrote an article on how to use modulate utils in Framer, comments welcome
6
Ashanya Indralingam
Happy Wednesday Frameristas! Community member Bradley Ryan of Uber Design recently stopped by the office for a show & tell and boy, were we blown away! We thought you might be interested in hearing about how Bradley and the UberPOOL team are using Framer, so we wrote a post about! Read it on Medium (and ❤️ or share if you enjoyed it) — https://goo.gl/IHPFG1
2
Chris Camargo
Hey Frameristos, running into a weird issue here. This prototype is simple... just 4 layers stacked on top of one another, all inside of a single parent. I create states to move the position of the parent, sliding each layer into view vertically. Just click to trigger each state. For some reason, on Safari on iOS, my layers disappear before they're out of view. Not an issue on my Mac. Can anyone check this out and confirm this? I'm a bit stumped.
2
Daniel Alvarez
Hi, is there a discount for students? If there is, does it work with Framer Plus subscription?
1
Alberto Ishida
Hey guys, Is there a way to import gifs into a framer prototype?
5

February 11

Orfeo Chen
Hi there! I just built a ripple button in Framer, only to find that the ripple effect doesn't work properly on my mobile. Is there something wrong with my setting of animation or it's something expected on mobile? Thanks.
1
Joshua Tucker
Happy Friday everyone! Never late to start #Framer100... Endless chase; my first (of many to come) ventures into machine learning + Framer. https://framer.cloud/ENhyY
3
Steve Ruiz
This project will automatically arrange a grid of photos using variable dimensions for the item size. Handy for seeing what different grid sizes will look and feel like. As a bonus(!), I commented the hell out the code, excessively and extensively, as a test to see if I could put into words what was going on. Take a look, especially if you're struggling with iterations, classes, or assigning events within loops.
3
Ben Ellis
https://www.hungrybrowser.co.uk/remote-user-testing-framer-prototypes/
7
Orfeo Chen
Quick question: Is it possible to create a dynamic header for FlowComponent which can animate on, say, its height property? https://framer.cloud/BRGgv/ PS. Currently I use a hack...
2
Regimantas Vegele
Hi all, is there an easy way to set a layer (with children) perspective to not inherit the screen perspective?
1
Naheel Jawaid
Is it possible to have an onTap and an onDoubleTap event listener on the same object? I tested with print statements and onDoubleTap it detects both the double-tap as well as two single tap events.
4
Nanda Kusumadi
Hey guys, I'm having a lot of caching issues with Framer Cloud when assets are being replaced in the images folder. Replaced images take days to reflect sometimes. Is this a known issue? Thanks
4

February 12

Jon Wood
hey framer fam, I've been running into a programmatic problem for a project. I used a for loop to create 2 types of objects. Where button 1 (red) will animate card 1 (red), so on and so forth for each matching pair. I know how to animate each layer object within an array, as you can see by tapping white/blue/green elements. I want to animate the card based on the matching button without repeating code. As you can see it somewhat works with the red button/cards. Any thoughts? Thanks in advance!
2
Henry Kim
I have created my first project. In here, I want to add a page component so when an image is scaled, I can slide back and forth to see other images in a scaled format. Any suggestions on how I can do this? Examples would be very helpful. Thank you in advance!
1
Rakhi Parekh
Hi, I am just starting to use framer and wondering if anyone has tried creating a responsive multi page web flow in framer. Looks like most of the examples are for native apps. Thoughts/Examples?
4
Christian Selig
Loving Framer, but I find it's slow to update the UI on my phone over WiFi, despite my WiFi being decently fast. Is there a way to prototype over USB like Sketch for faster prototyping?
2
Jordan Robert Dobson
Hey everyone! Next Thursday we are holding our 21st Framer Seattle Meetup at Substantial. We'll have food, drinks, beer, and projects to explore for people of all experience levels. We'll also have a few lightning talks for those hoping to share and learn more about what Framer can do. Portions of this event will also be live on Facebook as well if you can't make it in person. We'd love to see you out next week. The community is growing rather quickly. We had 50+ people out at last months meetup! - Jordan & Stephen
1
Orfeo Chen
Bug report: Framer project gets reset (all files gone) if it is located under a directory named "#blahblahblah" and synced with the cloud.😷
1
William Jansson
Hello framers! Is this a bug? I tried to create 2 custom flow transitions in a project but there seems to be a problem with the flow component's custom transitions. I also tried on the code provided in the framer docs but the same problem still occurs - I can't use any other names except for the already written "layerA" and "layerB" anywhere in the code which forces the layers into these two variables so that I am only limited to 1 custom flow transition per page, is this a bug or am I missing something? Would really appreciate some help regarding this! Creating custom transitions with names except for layerA and layerB just won't work for me, I'll link the code from the docs below so you can try for yourself: https://framer.cloud/OYXox/ By the way, I'm a new user and not an expert when it comes to code and was wondering what the "nav" in "transitionName = (nav, layerA, layerB, overlay)" is for something? I noticed that the original source file for flow component on github uses "nav.size" instead of something like "screen.size" to make the (50% black overlay) cover the entire screen. https://github.com/koenbok/Framer/blob/master/framer/Components/FlowComponent.coffee#L295 I feel kind of confused and would love for someone to shed some light on this since there isn't much explained about custom transitions in the docs.
1
Eyal Zaidman
Quick "click" event questions: 1. How do I get the x,y position of the click (event.x works on the emulator but returns "undefined" on the device)? 2. Where can I find the documentation for this (couldn't find it on Framer's website)? 3. It is possible that there's an offset of the click position (on the emulator, when I click on the top-left corner I get x,y = 99,143)?
3
Boris Kharchenko
Hello Framers, I had a confusion, why my Framer prototypes on Android reads every Tap as DoubleTap. It is a problem when you have 2 buttons at one point and tapping one, automatically tap on other (even if second button is IgnoreEvents before 1 button is tapped) Tested on Xiaomi Mi5 and Ulefone 007. On iOS everything is ok. Any thoughts?
0

February 13

Jason Nelson
Hey, framerers. Question. What is the best, cleanest way to call a function defined in a module from another module?
1
최최보금
Hello, everyone. I found a beautiful interaction from the codepen site. I would like to use this interaction in framers.js. So I modified it so that we can use this interaction in framer.js. I think we can apply this interaction to different places. you can see the original Code in http://codepen.io/soulwire/pen/mErPAK thanks to Justin Kindle for sharing this beautiful interaction :) Here is a link to the updated version. http://share.framerjs.com/lmemw69lojsz/
7
Meishen Yin
Hello, everyone, I just meet a problem that an artboard can show normally on Sketch, but when I imported to Framer, some of the visual elements are just gone. I tried multiple time. Looking for the solution. Thanks.
2
Daniel Caine
Framer community! 🙌 Has anyone ever built a prototype where it has a flow (like on Uber) where it captures a document through using the phone's camera?
3
Nishant Kaku
is there a way to align layerA with layerB?
4
Charlie Sneath
Can anyone confirm that the convertPointToLayer() function is working correctly? I'm getting an error that it's not a function, though my syntax seems to match documentation. (Sidenote: the docs have the same function name for convertPointToCanvas() and convertPointToLayer().
5
Tim Child
I am finding when trying to import from Photoshop that some layers are not referenced. Even when they are named with a single word, they are just pixel layers and with 100% Opacity. Any ideas?
1
Marco Basaglia
Hi, was wondering if framer js is compatible with os x yosemite or el capitan. thanks, Marco
2
Nicolas Hémidy
Hey everyone, I've just started using framer and I'm already a big fan. I have some issues with the scrollcomponent and I was wondering if one of you could help me. I wrapped a layer from sketch and the height of the scrollframe is weirdly cropped (half of what it should be). Would you have some advise about managing scrollcomponent? Thanks a lot for your help!
7
Josh Ackerman
Hello, I just created a knob in FramerJS which also snaps to 45 degree angles. When using it I sometimes experience unexpected behavior (random position changes), and I currently cannot see any issues with the logic. Also the code looks unoptimized, are there any ways I could shorten it? Possibly a better way to make a draggable knob? Here is a link: http://share.framerjs.com/elrr2ew10bsa/ Thanks!
1

February 14

Henry Kim
Dear Framers, For a beginner just like me, is there any good tutorials that I can follow along? I have done Framer YouTube tutorials and some of FramerCasts, but I want to learn more with different examples and resources available on the website feels a bit short. Thanks!
8
Joe Day
OK...another module question! Say you wanted to do make a button module so that you could instantiate it like the attached image. The button should be made up of three layers: the background, the text, and the hit target. There would also be some event-based animations for the interactive states. I've been trying to extend the Layer class so I can use the constructor to handle the text. But I am getting hung up on creating the layers, parenting them properly, and handling the events. Am I going down the wrong track by attempting to extend Layer?
16
Matthew Joseph Kulp
Hey all- I'm looking to use a Framer prototype for some user testing. I'd like to integrate a Typeform survey into the Framer prototype for this. My first attempt used this: https://github.com/peteschaffner/framer-webview Which I got working but doesn't support taps (which you need to take the survey, obviously.) I'm wondering if anyone has better ideas. Thanks in advance for any suggestions.
1
Dimitri Campbell
I have a question about how to control/tweak the scroll animation. When you apply ScrollComponent.wrap to a layer it has its typical behavior where you can scroll it pretty far past its boundaries but it bounces back to a boundary edge when you let go. Is there a way I could have the standard "rubber band" kind of behavior but add a "soft" boundary where the content ends and a "hard" boundary where the user can no longer scroll?
1
Andrew Liebchen
Howdy! Awhile ago I posted an module I built that powered React-style application state in Framer. Since then, I've used it for a few prototypes and made a few improvements to the API. Get the module on Github and read the original explanation here: https://blog.framer.com/react-style-state-machine-for-framer-e1c4e7032e65
2
Greg Jang
Framer Preview v2, all tabs are empty. Doesn't connect to Framer Studio at all. Is there something I have to do for macOS Sierra? I'm on the new touchbar mac book pro as well. I also uploaded my framer project to the cloud but I don't know how I can access that project file from framer preview. Since the beta Framer Preview never connected properly over wifi. It worked once then never again. Why not just have a login feature that guarantees connection? Thank you Edit: The app doesn't ask for any access code either.
6
Tim Child
Further to this, having your support/forum inside Facebook is a complete nightmare. I can’t Google any answers and Facebook’s search is near terrible, there doesn’t seem to be any tagging or any categories. Facebook’s Origami tool has the same problem and this could be a way of making your offering better than theirs.
3
Zack Shapiro
Hey everyone! Does anyone know of anyone implementing framer's Color.mix function as an open-source library?
3
Eyal Zaidman
Is there a way to get a loaded image natural size, or set the layer to this image size? I saw a post suggesting "img = new Image" but I can't make it work...
3
Benjamin Kuhn
Hi Frameristas. Seems I have a problem setting the Background Color of a Scroll Component. It´s supposed to be white but somehow it appears light grey. I have set the color using backgroundColor: "rgba(255,255,255,1)". However it seems to be overlapping/mixing with another color setting – when I change the color it always appears milky and never really vibrant. I´ve a nested Page Component within the Scroll Component which is smaller and has no background color attached. Any ideas?
1
René Schiebelhut
Hello people. Quick question: https://framer.cloud/CpGEN/ that little dot inside the Hexagon, i want this to pop up. It is orginally big. It does what i want now but it is giving out weird errors? Would you use other ways to make things pop up?
4
Daniel Louwe Kooijmans
Yo! I want to prototype a feature where the user deletes the current page in a pageComponent, then snaps to the next page. So the flow is: - Click event - Get current page - Remove or hide that page, must include an animation - Snap to next page Any ideas? Thanks!
7
Lama Halwaji
Hello Jonas Treub is there a way I can trigger the IOS camera while I am building a prototype with Framer? Thanks
1
Sergey Voronov
Hello friends. Next meetup is scheduled on 3rd of march at wearehive.com https://nvite.com/FramerLondon/b7a2
0
Lukas Guschlbauer
Quick noob-question: How can I persist a state-change? Scenario: Button Hover-Effect with MouseOver, MouseOut and on Click it gets an Active-State. Right now (which makes sense) the active state gets removed on MouseOut.
2
René Schiebelhut
Question: If you have a horizontal bar, which you want fill up smoothly (like a progress bar), what method do you use? I tried scaling but it always starts in the middle and not at the left side of the screen. Thanks in advance, can´t find a fitting example.
1
Preston Lee Turner Jr.
Hey Framer's, I was wondering if anyone is using this tool with their ioT projects?
2

February 15

Koen Bok
Hey big company employees. We get a lot of support mail from people working in enterprise environments who can not use Framer Cloud in their company for security reasons. We recently developed a private Framer Cloud offering, including Single Sign-On and extra security features that we're testing with a few large clients. We're looking for a few more launch partners, so if you work at a big company and would love to use simple sharing with Framer Cloud, send an email to [email protected] and he can help you out.
8
Wojtek Galaj
Hey guys, When I Layer.copy() I loose the names of my layer's children and so I can not reference a child layer in the copy to manipulate it later. Is this by design or am I missing something?
3
Junha Kang
hi, i have a problem using the Framer mobile app even when it's on the same wi-fi with my mac book, nothing shows up and only when i use tethering and open the Framer app on mobile once and go to the home screen of the mobile then open the Framer app, i can see the project does anyone had or having a similar problem ? thank you !
2
Michael Masarapadi
Framer is really changing everything and im enjoy it juss blew a client and pocketed $ with project i did in a few hours which i could have done in weeks...
4
Meishen Yin
Hello, everyone, I just tried to make all the interaction for a mobile app on framer js. But it turns out that the more artboard and interaction I added, the importing speed is really, really slow. Is there any way to minimize the file or size of the Skecth file? thanks
1
Dory Little
Figma imports broken for anyone else?
5
René Schiebelhut
How can i simply trigger an animation when a certain scroll point is reached? I´ve found a few hints, but none of them fit perfectly. I have an animation for a graph that runs before i see it. How can I trigger it to start once if scrolled down to point x
3
Sergey Ivanov
Hello, everyone! I have a noob's question. I want the layer B started scrolling with the layer A, but when the layer A scrollY reached >= 80, layer B stopрed scrolling and it's Y position remain 14. What's the best way to do this? Thanks!
2
Martin Menzel
Hello everybody, this is my first time sharing something with the community. I have been enjoying Framer since late 2015 :) Because I haven't found a solution anywhere, I tried to create one myself. For a medical software I wanted to create a "magnifying glass"-like feature to zoom in on a certain area of an image. You can grab the little circle and move the "lens" next to it around. For this example I used a wallpaper from Transistor by Jen Zee as image. I'm open for suggestions how one could do this in a better and more reusable way. Maybe as part of a flipbook like application so you can zoom in on every image. Thanks! -- https://framer.cloud/shPpA
2
Dimitri Campbell
I'm having trouble understanding how nesting works in Framer. I imported a sketch file and created a new layer in Framer after doing so. When trying to nest the new layer (framerLayer1) under (sketchLayer1) I get the error. I tried doing so like this...framerLayer1 = new Layer framerLayer1.parent = sketchLayer1 "TypeError: sketchLayer1 is not a function. (In 'sketchLayer1', 'sketchLayer1' is an instance of Layer)" How do I fix this?
6
Farbod Faramarzi
Hey! Is there any way of getting the progress of an animation when doing something like foo = new Animation? Can I in any way find out how much of the animation is finished?
3
Bruno Charters
Hello, I'm new to Framer and I am struggling with something. I want 3 different scrolls to relate to each other. Here is a link to the project. https://framer.cloud/QtWST/3/ I want day scrolling to affect the content table horizontally and vice versa. And same goes for the hours on the left, I would like that scrolling them would update the content table vertically too. I tried scrollComponent.propagate event but it doesn't work as I had thought. Any clues?
6
Nicolas Hémidy
Hi everyone! I'm looking for advise on sketch + framer workflow when you design a complex multi screen app. Would you have any good resources on the subject? I'm especially interested in those questions: should I regroup all my screen in one artboard? If not, how do you manage elements which are common to several screens? When one element of one screen is nested into a layer and need to expand (and get bigger) when transitioning to another screen, do you use the same element and change the layers throughout the animation or do you fake it by having 2 different elements which looks to be only one moving (if it makes sense..)? Thanks a lot for your help!
9
Johannes Eckert
Haven't used sketch import in a while … I have one artboard the size of the phone I'm desinging for, and I want to overlay another layer that's outside of the artboard. It doesn't even get imported into Framer. How do I bring elements from Off-screen in sketch into Framer?
7
Koen Bok
We worked with a bunch of larger companies to set up an enterprise license plan for Framer. We can now offer it to everyone. It includes things like a licensing api, premium support, optional training and volume discounts. If you work at a larger design department and see people around you paying for Framer themselves, send Sara an email at [email protected] and we can help you out.
2
Fran Pérez
How can I listen to the events of the scrollComponent automatically generated in a FlowComponent?
5
Lukas Guschlbauer
Okay just throwing it out there, since I've wrote my first custom layer-classes today and then had the idea: When importing from Sketch, Symbols with overrides automatically get converted into classes with the overrides as properties... What do you think? Should be possible I guess..?
3
Eric Parren
When I use ScrollComponent.wrap() on an imported layer with child layers it doesn't seem to work correctly. No scroll component shows up, and the content layer wraps around the child layers of the layer I indicated the scoll component should have wrapped around.
1
Lukas Max
Hey does someone know if its possible to create a pageComponent inside of a pageComponent? I mean its possible, but is it also possible that I can deactivate one pageComponent while I want to scroll the other one? Imagine something like this: - first pageComponent is fullscreen on tablet - the second one is on the second page of the fullscreen one but just a centered boy of 500px (or what ever) So that if I am on the second page of the big one i can use the second pageComponent without the big one also scrolls. Hope you get what I want :)
1
Christie Gettler Tarazon
Hi all! Is it possible to control a framer prototype through an apple tv remote? i.e. I press the menu button on the physical remote and the prototype reacts?
13
Christopher von Boisterous
Hey everyone, I´d love to initialize a function or alternatively put a delay on a function. The basic idea ist each time you click somewhere on the the document a timeout function is triggered and after 5 seconds a state is switched to a different state. The important thing is when you click on the document during the 5 seconds the timeout should be set to 5 seconds again. I don´t get how to handle this problem. Would be nice if anyone of you has a solution :) THANK YOU
4
John Kowalski
Hey Framer fam, I am currently using Mapbox in my prototype. I'm not sure how to alter the street labels text size as they are too small. Does anyone know how? heres the docs if needed: https://www.mapbox.com/mapbox-gl-js/api/
2
Kenneth Spry
Framer Cloud and Figma are changing things so much for the better. Big thanks!
2
Frank Boeree
Hello! I'm playing around with firebase a bit and the possibilities look promising. So far I managed to register 2 separate click events from Framer in Firebase and send the unique code back to the 'print window' in Framer. Now I want translate the code in the 'print window' to a 'clicks counter' but don't really now how to count the 1's and 2's I Receive back from Firebase. Does anyone has an idea? Thanks in advance :)
6

February 16

Junha Kang
hi framer team just quick simple question from a beginner can i right more than two functions in one line ? like, if i want to call 2 functions on a event i have to write A.onTap -> ' function1() ' function2() but can i write them in one line ? i tried ↓ A.onTap -> function1() function2() but it's giving me error like the picture i attached thank you !
3
Celeste DeMartis
anyone ever run a usertesting.com test with a framer prototype? How did you execute?
1
Nikolaj Dam Roadley-Battin
Does framer officially support MIDI Out yet? I read in the MIDI Component, that you use the Web MIDI API, which does have this option. Can I access MIDI Out or should I use Web MIDI as an extra Module to get more functions? Any help on this matter is appreciated, as I am looking to make some MIDI In/Out examples for Hardware Prototyping :)
5
Anton Kartashov
#Framer100 I tried to make a realistic prototype of chat. With adaptive bubbles and scrolling: – https://framer.cloud/pIAYK/ – https://dribbble.com/shots/3293283-Chat-Dribbble
6
Meishen Yin
I am wondering why I have error say a layer name is not defined as an object. I check my sketch file multiple times and I am sure that I have a single layer folder named as that. Thanks
1
Rohan K
[SOLVED] every time i add a border to layers imported from sketch, the images shrink just a tiny bit to accommodate the border. the reverse happens when the borders is removed. Is there anyway i can have the border not affect the layer image? i tried css box-sizing property, but that makes the layer's position move when border is applied
2
Nishant Kaku
Does anybody else finds issues in Z index, which somehow is ignored in Chrome? However, that works fine in Safari.
3
Rohan K
since framer will not import sketch layers with same names (even if they are children of different layers) how can I target layer names with wildcards. For e.g. i was to use layer.childrenWithName(iconX) where iconX could be icon1, icon2, icon3 and so on...I know we use regex for wildcards and pattern matching, but I've always had a hard time understanding how to format and use regular expressions
5
Charlie Chao
Hey all, I made an unofficial prototype of an inline color picker for Framer Studio. A frustration I have is that I often find myself opening up Photoshop or Kuler just to find the color I want to include in my prototype. I believe designers would benefit from being able to see and manipulate colors in the code without leaving the editor. This prototype shows what the interaction could be like albeit having a basic picker UI for demonstration: https://framer.cloud/bKjxM/ Let me know what you think 😀
6
Didier Clerc
Hello, I am new to Framer and I try to create a simple interface with a lot of buttons. To do that I am using Arrays and I would like to detect on which button the user performs a Tap. I assign the onTap listener on the button within a for-loop but every time I tap a button, I get the index of the very last element of the array, not the one I tapped. Any idea why? and how to perform what I want? Here is my prototype: https://framer.cloud/oKuaJ/ Thank's a lot for your feedback!
2
Adam Mazurick
Trying to learn how to use Lottie in my prototype. I'm having trouble setting-up the prototype. Can anyone help me? Here is the JSON I exported from After Effects. I just want to create a simple prototype so I can see how to use Lottie.
13
Karabo Ngoatle
Amazing experience to be in the presence of Koen Bok & Dean Broadley, Framer meet up South Africa
0
Karabo Ngoatle
The Trinity Combined
0
Alexis Morin
Hey guys, is it just me, or is the Framer.Info feature not in the docs? I've been trying to get rid of it. Any tips?
1
Johann Kasuch
hey guys! I'm having a strange problem using animations curves. When i add a new layer+animation to my existing project i'm getting an error: "Can't find variable: Bezier". If i open a up a new project and do the same, everything's fine. Whats the problem in this case?
3
Christian Selig
Is there any way to speed up Framer Preview (or perhaps I'm not using it correctly). I have pretty fast WiFi (as attached) and my project has 1.2MB in images, but a trivial refresh with no changes can take up to 10 seconds to load on the device. Am I accidentally performing a hard refresh or something each time?
1
Niels van Hoorn
Hey Frameristas, We’re happy to introduce Framer Handoff, the key to making your engineer’s life easier, while keeping your designs true to form. We’ve updated our syntax and animation API to make it super simple to define spring curves. From there, it’s now just a simple right-click to share converted animation values with support for iOS, Android and Web. This is the first of many post-prototyping features we hope to launch, so leave a comment if you have any related feature ideas! Read the feature page for the full breakdown — https://framer.com/features/handoff/
15
Lindsay Trevors
Hey Framer friends, I'm a designer learning the Framer ropes and for this proto so far I had a lot of help from a dev. I have a couple of things I'm trying to achieve on my own that I'd love to have your help with. 1) I have 2 draggable layers, one nested in another (Card E). Is there a way I can prevent the parent layer being dragged when I'm dragging the nested layer? 2) How can I have a message appear (as in, revealing a hidden layer) only once a parent's child layers have all been destroyed? Here's my proto for context: https://framer.cloud/jqWsL/ I have a first pass at pseudo code at the bottom that I hope articulates the above. Thanks so much in advance!
3
Steve Ruiz
What do you use for HTTP requests in Framer? Can someone put up a quick demo of setting a layer's HTML using http://loripsum.net's API? 👨🏻‍💻🕰 🤷🏻‍♂️
1

February 17

Stan Tan
Hey lovely peeps, I'm having trouble to define the properties of one layer within a group, which was imported from sketch. Is there a way to do so? E.g. : referring to image, I'm trying to set the layer "back_phone_number" to state.a = opacity: 0 state.b = opacity: 1 and trigger this change of state with an event. However it seems that i could not set the above values (or at least, it didn't apply to them). Background: i imported from a Sketch file with 2 art boards, my idea was to animate the states from art board 1 to art board 2. Hope to get some help here!
2
Arun Kumar Dadhwal
Twitter share button in Framer Cloud mentions old @framerjs Twitter handle. Might want to update it to new one? 🙂
1
Bhaskar Ravi
Posted this on the sketch community, but thought it'd fit here as well. Not a framer specific question, but would love to know what icon sets you all use for mobile development. Thought it'd be a fun and useful topic for us designers :)
1
Arun Kumar Dadhwal
Baby steps 🐣 (1 of 100) #Framer100
1
Youngchang Yoo
hi I have trouble working with Atom editor. when I import modules which I downloaded from github, the error message has shown 'require is not defined' and then I can't go further. if I don't use modules, there is nothing to hassle me. how can I solve this?
1
Karabo Ngoatle
Koen Bok giving us a nice intro, welcome to Africa bro
3
Alexander Maximets
Hi everyone, Having a bit of an issue with functions running in arrays. Currently all the buttons change states on each card as they should, but when I press the button that has a function attached it runs the animations only on the last card. Any help would be much appreciated! Thanks
13
Ben Ellis
Hi all, Looking into using Framer to prototype a TV App experience for a client here in the UK. I want to hook up a physical TV remote, capture the keystrokes on the arrow pad etc and then translate that to control a prototype on screen on the Mac. Have seen these articles here: https:[email protected]/game-controllers-and-framer-de77610704d4#.a4yw8ynrx here: https://medium.com/framer-prototyping/apple-tv-prototype-with-framer-using-game-controller-59f1fc3d3b0f#.wcog76qr7 and here: https://www.orderedbytes.com/controllermate/compatibility/#apple/extended_usb_keyboard and was wondering if anyone had any tips/experiences they could share? Thanks in advance. Ben
8
Krijn Rijshouwer
Hey everyone, We're always super excited to see the things you create with Framer. So, today we're introducing an all-new page on the site that highlights the best work from the community, every month. This month it features amazing work by Claudio Guglieri Lillo, Noah Levin and Raphael Lopes. Check it out — https://framer.com/examples/featured/
1
Dominik Sebian
How is the survey going for the Framer Conference? Is there any result you could tell us, or is it to early? Would love to hear If it's happening or not.
1
Rohan K
[SOLVED] is there a way to apply shadow to a png file and not have it apply on the bounding box?
3
Karabo Ngoatle
Framer Meet up South Africa with founder Koen Bok
1
Daniel Caine
Noob question, but say if you want to add an active state to a single element in an array but then remove it from all others, what's the best way to achieve this?
1
Lukas Guschlbauer
Hey Frameristas! Thinking about starting out in VR development and wanted to ask for your opinion: - Which hardware you'd recommend? Oculus Rift, Valve, Vive, PlayStation VR? - Is it a good moment to buy or is there something new coming soon? Would love to hear your thoughts! :)
3
Anthony Custable
Anyone know why the link comes out blurry but when I load in framer it's clear? https://framer.cloud/imUKe/
3
Lee Jungyoung
Hey framerians, Big thanks for Handoff feature of newly updated version. I've noticed that you changed Spring animation more similar to iOS syntax. Now we can write something like "Spring(damping: 0.5)" However, it works really well for each animation curve but not in Default Animation area. Please take a look at this example below. Weird thing is that just "Spring" works fine but "Spring(damping: 0.5)" doesn't. Thanks !
7

February 18

James Muirhead
Feature Request: A utility or extra to enable the touch cursor on mobile devices so it appears when I record a video from my iPhone or iPad via Quicktime Player video recording feature.
5
Frank Boeree
A few months ago I built this prototype using Jonas Treub’s VR component. Hereby I would like to share the result. I think the prototype is a good example of the module it's possibilities. Despite the code being far from efficient (and the car that could use some proper photoshop skills) I think the prototype is a nice example of what is possible with Framer and the VR component. As a designer (that did not have any coding skills before I started to use Framer once in a while about 1 year ago) I think the modules are an awesome Framer feature to easily enrich your prototypes with complex pieces of code.
2
Dallas Elliott
Is anyone having trouble with importing from sketch? I just started using Framer and I'm struggling to figure out what I'm doing wrong. I've tried completely uninstalling/reinstalling framer + disabling all sketch plugins. I've recorded a GIF of the problem: http://jmp.sh/idFKoRF
2
Jonathan Harvell
I'm using a page component and I would like to trigger an animation each time the page changes. Any idea why the code below doesn't work?
3

February 19

Michael Masarapadi
Been waiting for this .....
0
Tom Columbus
Can anyone explain why including a print command is making this work, but when I remove it, I get nothing?
2
Alex David
I have a question for when I have multiple screens that animate on top of one another, and the best practices for how to ignore any events from pages that live behind. For reference I have uploaded a test framer file that illustrates my issue. I click the "right button" to animate the orange screen in to view. But I am still able to click the "left button" from the mint screen even though it is behind the orange screen. Thanks
3
Ben Rodenhäuser
I am doing a little slideshow using PageComponent for a client presentation. I want to be able to use the arrow keys on the keyboard to move through the slideshow (left/right), so I am listening for keydown events. This works fine, except that in Framer Studio, I get feedback sounds whenever I press the arrow key. Not so if I mirror the prototype in Safari, so that works "out of the box". Is there any way to avoid these sounds? Here is a stripped down version of my prototype (the keydown listener is towards the end):
5
Orfeo Chen
#Framer100 challenge: Gesture lock screen. Swipe upward and the unlock pattern is "V". 🤣
1
Joey Qiang
Hey guys, this is my first Framer project. Check the link to see the online prototype: https://framer.cloud/qCZKS I got innovation from Jinju on Medium - https://blog.framer.com/a-story-of-a-designer-conquering-mathematics-d0fd4585f0ba#.x3tljfqi7 I spent around 8 hours in total to write the animation, which proves my poor ability at coding...sad. However, I do get some insights after hassling with Framer codes for a whole day. Following are my thoughts, hope you can get some tips from them. 1.Do homework on Array, understand how array works. It's vey efficient to use array to control similar operations. Also, reviewing knowledge about trigonometry is also necessary. 2.Draw static image on Sketch first. It helps you images how state jumps from one to another. After you figure out all your state transition, begin using Framer to achieve it. 3.If you check my code, I spent 2 hours to come up with this line: spinCircle = Utils.cycle([60, 30, 0]) eventually. This line helps my 3 objects always have 120 degrees between each other. I wrote this line by live testing again and again, which wasted a lot of time. When I review this line of code, I got the hunch. The logic behind this code is that, thinking you only want to change 90 degrees for your first line after rotating it three times, meanwhile you have to rotate the line 60 degrees at the first time. Therefore, you can only rotate the line 30 degrees at the second or at the last time. Boom, it is much clear to think of the problem in this way. If you have any question about how to make this effect, feel free to contact me. I kinda love this app now. Best wishes for the Framer team. You guys are awesome!
3
Claudio Henriquez
Hello Guys, I'm new to framer Js and I'm just trying to do a quick prototype following this tutorial https://www.youtube.com/watch?v=3zaxrXK7Nac I'm using my own design for this, the problem is as follows: When I create a new layer (time 8:13 of the linked video) and I try to set one of my imported layers as the content of this new layer by using the property image, I get no results. If I bring this new layer to the screen I can only see a black background with transparency, according to the tutorial, it should has the layer I'm assigning to it via the image property. Here is an example of my code: sketch = Framer.Importer.load("[email protected]") explore_layer = new Layer width: 750 height: 1334 image: sketch.explore.explore_group x: screen.width sketch.Tab_3.on Events.Click, -> explore_layer.animate properties: x: 0 y: 0 curve: "spring(400, 35, 0)" Here is also a screenshot of my layers https://gyazo.com/f3fccf7f38813744ea17d259463fabdc
1

February 20

Joshua Bradley
Hi framing humans! I wonder if you could help me with directionLock. I've got a horizontally scrolling pageComponent nested within a vertically scrolling scrollComponent which itself was automatically generated by a flowComponent. How can I stop the vertical scrollComponent from picking up drag events on the pageComponent which start horizontal but then move vertically or diagonally? I've managed to do the opposite (stop the pageComponent from responding to drag events which start vertical but then become horizontal) using: myPageComponent = new PageComponent directionLock: true But I don't seem to be able to use the same technique on the scrollComponent (which is generated on the fly by the flowComponent, as I mentioned). A separate but related question: how can I target this auto-generated scrollComponent? 'myFlowComponent.scrollComponent' evaluates to 'undefined', as it doesn't exist at the beginning of the flow, so I'm not sure how to get at it. Any pointers much appreciated! Thanks :D
3
Roman Bitter
Hi all, I've been trying for the last couple of hours to make a header that would: A) scroll normally on the way down and B) on the way up, when reaching the top, become static My aim for the header is not to be included in the bounce that follows scrolling back to top. So far, I've been only partially successful - my conditional statement seems to work, but only after the current scroll event ends. Thank for any advice.
1
Rohan K
I'm trying to figure out if in the scroll component, i can add padding to the scroll.content. The contentInset property adds margin outside the content layer, I am looking to add padding inside the content layer. Any ideas?
4
邵帅
Hi everyone, I have a problem. Recently, I buy a macbook because of my old macbook broken. when I use framer in my new mbp and enter activation number, I receive this dialog , please help me, thank you very much.
1
Junhyuk Jang
I just published my very first English blog post. I want to share my experiences about design, coding, and writing.
1
Dave Anderson
I've noticed that if I use one of the device presets, the preview resizes automatically to fit in the preview window. But if I use the "Canvas", for a project of arbitrary dimensions (I'm working on a web app), the preview no longer resizes, and instead is clipped. This makes working on a small display challenging—is there any way to get the same behavior from the preview window that we get using the device presets?
1
Deniz Basegmez
Is there a way to edit modules within framer? I'm working on a slightly more complicated prototype and it'd be useful to have the layer inspection tools when editing my modules.
8
Krn Rby
Hello everyone, I am currently trying to disable scrolling in a flow component. I am using this : flow.showNext(layerA, scroll:false) but it doesn't seem to work. I still have a scroll component created by default... Do you have any idea why ? thx :)
0
Nitin Sampathi
Any framers in the Baltimore/Washington DC Area? I'd love to start a meetup if there isn't one already.
1
Paul Kooi
Hi. I've run into some kind of silly bug... wanted to see if anyone else has come across it. I have two machines that I use. A Macbook Pro, and at home I sometimes use my iMac. I'm building a mobile prototype that uses two pieces of video stored in my Framer project directory on drop box ( syncing locally on both machines ) Each video uses "videoName.player.play()" to play the videos. On my iMac at home the video's both play as expected. On my laptop only one video plays. The second video just shows the first frame and does not play at all. Neither video or audio??? Any thoughts ... ideas... anyone else ever experienced something like this? Thanks
0
BG NY
Hey guys excited to be part of the group! We're looking to build a mvp prototype for our app concept (wireframes done). Looking to hire a Framer designer and collaborate! www.BGNY.io
0
Brianne Yep
I imported a Sketch file into Framer. Then I copied one of the Sketch groups (GroupACopy = GroupA.copy()). This group contains other Sketch groups/layers. My question is how do I interact with the groups/layers inside GroupACopy?
0
Javier Eduardo Treviño
I keep getting this settings when using layers manually. this rotation settings that block my layers.
1
Agisilaos Tsaraboulidis
Framer has an issue when I try to import a big Sketch file into the program. It basically makes the little multi-color spin pop up and then both framer and sketch are closed(crash). Am I doing something wrong?
1
Sergey Brsdsg
Hi. I have a basic question. How to check if layer is in certain state? What I’m trying to do: https://framer.cloud/uwiQr/ (using properties) Button shows up on mouseover, dropdown shows up on click on the button and both stay on the screen until dropdown is closed. What I’m getting using states: https://framer.cloud/hPfUO/ The button doesn’t work correctly because something is wrong with this part: $.group.onMouseOut -> if $.dropdown.state = "on" $.hover_button.animate("on") else $.hover_button.animate("off") What’s the correct way to check if dropdown is in "on" state?
3
Aalok Trivedi
I haven’t really worked with page components a whole lot. Why is this acting all funky. If I go back and forth from 1st to 2nd page, it keeps scrolling automatically. Also how do I get rid of the overdrag? pageComponent.draggable.overdrag = false didn't work. In fact it made it worse and you can drag it anywhere...
1

February 21

Adam Deher
Is the app crashing for anyone else whenever you undo an action?
0
Joseph D. Wolff
EDIT: Figured it out. Solution in comments Hey Folks, I'm trying to make some custom transitions to be consumed with Framer Flows. However, I'm not sure where to set the animationOptions - tl;dr my timing is way too slow. Can anyone give me some guidance?
2
Orfeo Chen
Hi Framerers... I have been fiddling around with SVG in Framer these days and encountered an problem with event listeners. I use Snap.svg to manipulate SVG elements, yet find it unable to respond to touch events. Weirdly, even if I listen for touchstart event, it'll only function when I hold cmd key and click on the element. Any clue on this? Is it possible that the Framer Layer somehow interferes with SVG elements that lives inside of it? Thanks.
1
Javier Chávarri
Hi all, I've been experimenting with a CSS flexbox library and Framer, so the prototypes built with Framer can be shown in multiple screen sizes without much work, just by setting some rules. Flexbox allows you to define things in a declarative way ("what to do") instead of imperative ("how to do it") for example: layerA.flex = 0.4 # Take 40% of the parent size layerABrother.flex = 0.6 # Take 60% of the parent size layerA.minHeight = 40 # But at least give layerA 40px height So far I got a "cells layout" example working, but I'm really amazed about how powerful the mix of a flexible layout + Framer animation engine is. My question to you guys: are there any ideas or existing prototypes you would like to try with this flex system? Please share a link or code if you do
8
Joey Qiang
https://framer.cloud/GJQDL This is my second Framer project. I kinda love to use math into JavaScript coding now. But I realized I lack knowledge of combining media technique and math knowledge. Does anyone can provide me some study materials (online courses, website, and books are all welcomed)? Take aways: 1. Utils.delay doesn't perform well. Because I don't know the original codes of the function, some the function breaks down the whole animation 2. The animation panel is not very user friendly. First is that it doesn't always show up correctly. Sometimes you cannot open it for an animated layer. That's why I prefer typing animation options. However, the easing function's grammar is a little redundant and inconsistent, such as curve: Spring(damping: 1.00) and curve: Bezier.easeInOut. Hope the framer could improve it in the future. 3. I don't know how to use code to transfer coordinate system. For example, take the(0,0)as the center, then rotate all elements in certain degrees would be a more efficient coding idea. Holy... I maybe realize the solution when I am typing my thought: is it possible to rotate the parent element as a whole? Respectively, all children elements would be rotated for the same degree as well. I will try that and post on comment soon. If you know more better ideas to code multiple same shapes in different position, please tell me your genius ideas. Thanks bro. Feel free to send me your feedback. And I want to discuss with all you guys about how to better use math in animation coding.
3
Orfeo Chen
Hi people. I'm curious about whether there is a way to copy not only the layer itself, but also its states and event handlers by using something like layer.copy(). If not, is there any property to access the event handlers? States are easy to copy manually since they are properties, yet we set event handlers via functions, I don't know what's going on behind the stage.
0
Jurre Houtkamp
In light of the new spring release last week I created this fairly simple prototype to play around with the new springs. The goal was to create a realistic feeling suspension upon the car accelerating and breaking. As a bonus you'll be able to play around with the car by dragging and adjusting the suspension. https://dribbble.com/shots/3308256-Tesla-Suspension Play around with the full prototype here https://framer.cloud/jbHtQ/
2
Isaac Kim
How do you make a scroll component locked so it can only scroll down? Essentially I want to remove the 'slack' or 'bounce' at the top of my scroll component. Thanks!
3
Eyal Zaidman
Modules vs. Classes: When and where is it advised to prefer modules over classes? Does a module serve as a static class? Of course, when you want to crate more than one instance of a certain item - you'll use a class, but in what scenario would you prefer a module over a class? For example: for implementing a status bar or a navigation bar (shared by different screens) - would you prefer a module or a class, and why? Thanks in advance :)
6
Lukas Guschlbauer
Heyo! I guess this should rather be an improvement filed on Github, but I'll try it here: I've been fiddling around with Steve Ruiz createClass for Framer Module and integrated the TextLayer Module which makes creating a class almost perfect, but everything apart from textlayers has a backgroundImage set, so you can't modify the looks of it. As I've investigated the "layers.json" file I saw that the export from Sketch only gives you "artboard, text & group" as "kind"-properties. Layers of the "text"-kind get all styles saved in the metadata, but groups just have a backgroundImage set. If those group-Layers had the styles stored in the metadata too, soon there wouldn't be many images (apart from layers that use an image as fill) needed in a sketch-import anymore... TL;DR: Add the metadata for shape-layers the same way as for text-layers! PS: Imagine following Sketch-Import scenario: - While import from Sketch, symbols get detached and for each SymbolMaster (where SymbolInstances are used) a class is being created - Every SymbolInstance in the prototype is being replaced with a class-instance. PPS: Looking at the pull-requests on GitHub gets me really excited for the near future of Framer! ;)
2
Andrew Cunliffe
I can't seem to figure out how to get the mousewheel working on the next pages while using Flows?. In the attached shot of my code "scroller" works when I use "showNextOverlay*" for all the next flows, and "scroller2' works on the first flow, but once you go to the next one you can only click and scroll. Is there a way to control which artboard/flow/page is the first or second child? Thanks.
1
Panos Spiliotis
It would be great if there was a stack exchange site for FramerJS. By all means, not as a replacement for this Facebook group which is great for general discussion and showcasing. A dedicated stack exchange site would serve as a better way to post questions and answers about Framer. It's a great way to avoid duplicates and make it easier to find the best answers to common problems thanks to the up-voting mechanism. I have created a proposal on Area51 here: http://area51.stackexchange.com/proposals/107065/framer?referrer=GCGm5l7uvL3QGfRTckjAxg2 If anyone is interested in making this happen, please vote by visiting the link above.
0
Ivo Ruijters
Newbie here. I'm trying to create nested arrays (to create 3 articles with each 3 lines of text). After that I want to position the first article to y: 0 but when I try to get that first one I'm getting "TypeError: undefined is not an object (evaluating 'articles[0].y = 0')". What am I doing wrong here? https://framer.cloud/OBFac/
1
Gregory Warner
Hi everyone, newbie question here, but I'm still stumbling over some (seemingly) basic things. I'm trying to build an iOS view based on an imported Sketch file with fixed header and footer bars but with a main y-axis scrollComponent with inner x-asix scrollComponents with cards. Any clues on syntax and approach? I'm still stumbling on referencing Sketch layers easily for something like this. Sorry, can't show current file/design due to NDA.
0
Afnizar Nur Ghifari
[SOLVED] Hey everyone, I have a problem to make the card to center. In my code, I have an animation on it `a.states.animationOptions = curve: "spring(480, 22, 0)"` when I remove the code, the card goes the center. My question is how to make the card to center without removing the animation?
2
Dimitri Campbell
Do layers made within Framer not show up if they are mapped outside of the viewport? I set a layer to be below the viewport and scroll in but when I scroll it doesn't show up. link: https://framer.cloud/QPkCk/ The layer in question is "box5Framer"
1
Jon Knoland Blair
Is there a way to pass data between FlowComponent pages?
6
Kaitlyn Eleniak
So I am designing in Sketch and when I import it into Framer and select MacBook Pro for the device, my design is only showing up in 1/4 of the screen. I have my art board set to 1440x1024 in Sketch, is there something I am missing?
1
Richard Bruskowski
Hi! How does framer figure out which Sketch files it should import, when I am working with several files? Any idea? I am juggling with about 4 files simultaneously (to keep import times sane), and I can't get behind it. My workaround is to close both, Framer and Sketch, and restart Sketch while opening the one file only I want to (re-) import right now. Thank you!
2
Steve Ruiz
I've been experimenting with data to create more dynamic, persistent prototypes that can better handle information. We can take an array of objects, create layers using those objects, handle changes to the data and destroy layers without destroying those changes, then rebuild those layers again later. I put together this project as a demonstration of what I've learned. Take a look at the comments, there's a lot of other good stuff inside.
2

February 22

Jon Doe
Is there a way to make the stupid layers list on the right wider?
0
Diego Oriani
Quick question, is it possible to customise animation properties (such as curve, time, delay) of a flowComponent?
1
Finlay Craig
Hi everyone. I'm getting a really weird bug with indentation on a project that I'm working on. I used Sketch import to bring some layers in, and now I'm importing additional images. I'm getting an indentation error on a seemingly empty line, between two seemingly ok layer declarations. The error moves around as I add and remove code. It's really odd. Screenshot attached :) Many thanks, Finlay
2
O'Ryan McEntire
Since updating to the latest Framer version loading modules takes anywhere from 30-60 seconds EVERY SINGLE TIME A CHANGE IS MADE. It's incredibly frustrating to make a tiny edit on a very small file and then come back to framer studio only to have it hang. Is anyone else having this issue? Everyone on my team is having this issue with different files.
1
Hr von Schade
Hey everyone I have a very general question: When I open the framer app in Chrome the performance seems to be really bad even with very simple content (no big ass app) and especially with FlowComponents and animations. Is there some good trick to increase performance? Or is it more likely that framer simply does not work well in Chrome?
1
Adam Mark Stevens
Any chance android watches will be added to the device options anytime in the near future?
2
Daniel Caine
I'm struggling to upload SVGs to Framer Cloud that are saved in images/ Anyone else had this? Everything else uploads fine, I just get 404s on the SVGs 🤔
5
Meishen Yin
Could I know why doesn't this code work? Thanks.
2
Nikolaj Dam Roadley-Battin
Hi again, I have a quick question about mirror options in Framer. Basically, I have a prototype which relies on the MIDI Component (Which is running in my browser, as the MIDI Devices are connected to my laptop.) However, I would love to have the graphical output displayed on a phone. But the MIDI Component is not a feature used on the iPhone, hence it crashes. Is there a way, without going through Firebase or other I/O components, that I can simply mirror my graphical content on the phone? Example of my ideal case: I have a MIDI controller connected to my computer. Framer reads the value and changes the state of a progress bar. My phone should then displays this progress bar, changing just as it does on my computer. I hope this makes sense, and you have an idea to solve this :) I would love to share some work if I get this running.
6
Mike Paggi
I was wondering who can chat with me from Framer in regards how Framer works in a 10+ people team environment?
1
Jacky Lee
Hey everyone, keen to get some thoughts on how you handle object states in a prototype? To demonstrate, I've picked a really generic scenario that many of you should have seen before: An ecommerce site with a products grid and a cart drawer. Each product card has an 'Add to cart' button, which toggles the the product state between 'notInCart' & 'inCart'. The state of these needs to be captured somehow and displayed when the user opens the cart drawer. What I've done is probably a really tedious approach, can be tested here: https://framer.cloud/JGOGl/ 1. Setting up an array with all the product cards and use that as the source of truth of each product state. 2. When i click 'add to cart' on any card, it will match this card with the corresponding object in the array to change its state 3. If the state is 'inCart', then add that object into *another* array called 'cartArray' 4. Finally, use this 'cartArray' as the source for populating the cart drawer items. It's probably easier to dig through the code, I've tried my best to comment everything in there. Has anyone done a similar logic to this? I'm just curious to see how everyone else solves this. Thanks in advance!
5

February 23

Naheel Jawaid
Is there a way to view a prototype in fullscreen on a mobile browser?
1
陳威威
https://framer.cloud/gxiUU/ Hey guys, I just successfully render the JSON animation which is generated by Lottie (http://airbnb.design/lottie/) in my prototype. Since it took me some effort to implement it on Framer, here are some tips to help anyone who wants to play around with this new tool. 1. Generate the .json file from AE with the pulging bodymovin (https://github.com/bodymovin/bodymovin) 2. Drag the .json file to your Framer project folder and place it in the root directory 3. Copy the bodymovin.js file (you can find it from Github of bodymovin or just copy it from my Framer project) to the framer folder inside your project 4. Open index.html file and add some code (<script src="framer/bodymovin.js"></script>) to link up bodymovin.js 5. Load an animation with bodymovin.loadAnimation() and enjoy!!
8
Roman Bitter
Hi all! I've been struggling with 2 issues and would appreciate your take on them. As you can see in video (or live prototype below): 1) when pins on the map change their state (changing background image) they flicker; I can't figure out why: I am using preloader -with no luck 2) the showPrevious in Flow component works but the transition itself is broken - this is the case in Framer studio and in browsers as well. Is this a bug or am I doing something wrong? Any ideas about any of these issues? Live prototype: https://framer.cloud/qnYds/ THANK YOU.
4
Bhawna Sharma
Hi Guys, I was looking at the framer website and they suddenly removed a few examples. I was looking for the example of evernote prototype. Does somebody have the code of that prototype?
2
Andrew Nalband
I came across some odd code coloring today - look at how Screen.width is green - is this a bug? The code runs as expected.
1
Okernel Liu
iOS 10 Widget Demo
1
Adam Mazurick
Hey guys, I want to change the default male hand in my prototype. Is there a snippet for this?
2
Will Anderson
Is there a simple way to detect if you're scrolling up or down in a prototype?
1

February 24

Swapnil Borkar
Should I be bothering to learn CoffeeScript if Framer is going to be moving to ECMA soon?
8
Jon Knoland Blair
If framer studio could support multiple files, that would be a dream come true.
9
Matthew Joseph Kulp
Hey all, I am loving Handoff and so is my iOS developer. However, my Android developer is a little disappointed that it seemingly doesn't work with Android's native animations (Interpolator). She's open to putting Rebound into the project but not if there is a good way to do this natively. Before we go forth with Rebound, we want to be sure there is not an easy way to translate Framer spring values into native Android code. Has anyone found a good way to translate Framer springs into native Android code? Also, if Rebound is definitely the way to go, why? What would be some selling points for it beyond seamless Framer handoffs (this will help me sell to the team)? THANKS!
3
Nishant Kaku
Has anyone tried Reading Position Indicator as it comes in most of the content sites.
2
Chris Wang
https://framer.cloud/fGFnb/ Hey guys, how can I stop content being cutting off by the edge of the phone? In the prototype the bottom half of third row of carousel is being cut off. And seems like it's only happening to the bottom edge but not to the right edge. In the prototype I basically have a bunch of carousels that scroll horizontally and the whole page scroll vertically.
1
Isa Bison
Anyway to use a completely custom easing equation? One that accepts time, duration, progress, start/end values and returns a final value? (Not looking for a custom Bezier.)
2
Lukas Guschlbauer
Hey Guys! Here's a "rebound" on Kevin Maos Calculator Prototype! Works kind-of... After calculation when you type again it resets. But I'm saving the values with their equation in a "history"-array, so I can put them all in the "drawer", Kevin had in his prototype! But maybe I'll do that tomorrow! ;)
2
Uwe Martin
So, I imported a PSD with 16 buttons. Now I want to animate each of them using a onMouseOver event. My plan is to populate an array with all the buttons and animate them by the index. My problem is that my array of imported PSD elements does not consist of layers. Is there a way to get an array of imported elements as layers, without having to set up and push them for each button?
4
Brad Ellis
I'm getting an error uploading my project because a team member uploaded it once already. So my error says that "The logged in user isn't an owner of this project" Is there a way to make myself the owner, other than duplicate the project? Does that even work?
1
Aalok Trivedi
I’m modulating the top profile so that the scale goes from 1 - .9 when I drag the bottom profile to the threshold. But after I go beyond the threshold, the top profile keeps scaling down. Same is happening to the opacity. Am i missing something? https://screencast.com/t/fJ2vuLzAfrxV http://share.framerjs.com/y2unfl0mh4qh/
1
Bhawna Sharma
Hi Guys, i am trying this code but I am getting an error: rondSlider.animate scale: 0.75 options: curve: Spring (damping: 0.5) time: 0.5
2
Kevin Mao
TL;DR: Framer noob here. Kind of blindly played with prototype until things worked. Would love any feedback and advice for improving the code or design. Thanks! I've finally gotten around to learning Framer, and it's been awesome. Made part of a calculator with entry history. First I used layer.draggable to build the dropdown and it turned out pretty hacky. Then I realized I could do this with a PageComponent, but that was even trickier for my slow brain. I'm not even sure what I did in there anymore... I left both methods in code folds so you can try both. I'm really new to coding, so I would love some critique on my code. Happy to be sharing here after learning by osmosis from everyone in this group for so long! https://framer.cloud/nxARh/ https://dribbble.com/shots/3313390-Calculator-with-Entry-History-Framer
8
Aalok Trivedi
Probably one of my most complex protos so far (not really that complex but took me forever). Hinge's new 'Discover' section, in which you discover new potential matches. Instead of liking the entire profile like most dating apps, you like a specific piece of content and then can optionally send a comment. http://bit.ly/2lMNmHc
0
Feles Daniel
Hi amazing people! I was working on some app concept design + prototype and I used Framer for a high-fidelity prototype (of course) Curious to get your feedback: https://dribbble.com/shots/3314570--Assistant-with-double-personality dfeles.github.io/arnold
3
Petr Stepanek
Hey everyone :-) I basically *just* started with Framer. Went trough a couple of tutorials on Skillshare, Sketchcasts and now trying each from your YT channel. I'm a little stuck with the ImageDetail prototype, where I'm unable to get Framer to run the code again and again for each and every image. If you could please spend a minute and have a look at this and tell me where I'm doing something wrong. I believe I followed the tutorial step by step, yet prototype only works on any image, yet after the code runs, not on any other image. The prototype can be found here:
1
Klaus Klausens
is there a difference between 1) layerA.states.add 2) layerA.states = ?
2
Andy Fuchs
Hi everyone, I haven't used Framer for a couple of months and now I forgot how to create an app.js from the app.coffee... When I try via commandline, Coffeescript complains 'Framer is not defined' (which makes sense), but all my projects have an app.js! What am I missing? Any hint? andy
1
Johann Kasuch
hey guys! i need your help. Right now my class looks something like this. But i want to refer to an individual array everytime i create a button. How do i achieve that?
7
Marie Soroczak
Hi all! I'm a designer with HTML/CSS experience but very little Javascript. I'm really struggling to learn Framer. Rather than continue to spend hours animating rounded boxes, etc. via other people's tutorials, without a lot of understanding or success, I would rather learn by creating projects from existing prototypes I've already designed for clients. Anyone available to Skype/Google Hangout with me for an hour or two a day for perhaps 5-10 weekdays (or as needed) until I am comfortable with the basics? I am available between the hours of 8pm-midnight Central European Time. PM me your hourly rate and availability. Thanks!
6
Christopher von Boisterous
Hello everyone, I currently have a problems with "Swipe Events" on the IPad. Everything works fine on my Mac. Anyone has similar problems? Or maybe the problem is in my code ;)
2
Andrew Fischler
Can a Framer project only have one Flow Component at a time? Seems when I try to create a new flow for a sub-page inside the original flow, it winds up killing both -- even with them having different variable names.
1
Johann Kasuch
hey ! I want to push a childrens property into an array. In my case the opacity of the children named "topGradientActive". But how? myArray[0] = listitem.childrenWithName("topGradientActive")
5
Steve Ruiz
Yesterday I posted a table to show how to use simple data to model more complex interfaces. Here's an even simpler example of that approach.
5
Riley Hollobaugh
Question regarding The ScrollComponent created by a FlowComponent. I'm trying to make the content scroll to the top of the page when conditions are meet, but whenever I try to change an element of the ScrollComponent (example: scrollComponent.scrollY = 200) I get a "variable not found error" despite the object being in the heiarchy. The objects name is "scrollComponent". Is the object intentionally uneditable? Unfortunetly, I'm unable to share the project file.
2
Sam Jang
Hi Framers! I'm in need of some help as I'm fairly new to Framer. I wanted to make a number (text) to increase upon clicking a button and decrease upon clicking another button. Which code should I use to make this happen? Thanks in advance!
2
Josh Max Rubinstein
I am having trouble sorting out Framer Handoff for animations with curves that were not set up in Autocode-animations. Is there a way to Handoff those animations? Or a way to convert those to Autocode-animations?
2

February 25

Ryan Morrison
Hey everyone, do you know if there is a way to display your web prototypes with browser chrome? It seems to be missing from the device list.
7
Kai Pradel
Trying to figure out how to respond to an onClick event that doesn't automatically trigger an OnMouseLeave event for the underlying layer. In regular JS this is achieved with event.preventDefault but that does not appear to work in this case. Any help is appreciated.
7
Alena Syvokobylska
Hi Guys! We keep experimenting with the visual data adaptation in different cases. Here is the Framer prototype of Shopping cart of iOS app. Depending on the height cart container, the user sees a different views of its content. What comes next? More details. Dribbble account https://dribbble.com/Anadea Framer prototype http://share.framerjs.com/h2qvkj5ocbe8/
9
Alexander Olssen
Hello, guys! I'm making a simple prototype and faced few problems that i can't cope with. 1. How to move second email card closer to the first in PageComponent? 2. How to solve a problem with content in Scrollcomponent that going outside the email card. My prototype is really raw and messy, sorry(
2

February 26

Chris Scicluna
Hi, I am trying to do a card interface where you can swipe them off view ala tinder but upwards and downwards instead of sideways. I managed to create a loop to generate the cards but funnily enough when I drag a card (e.g. named layer1) it gets dragged but it is being recognised as the last layer (layer4). Could you point me towards what I am doing wrong please? Here is the link to the project
3
Jesse Campbell
Hello, Framer community! I recently needed a scroll bar in a ScrollComponent. I thought I’d share my solution as a module. It's based on a few iterations of the idea I found around the web. Might be useful to someone. :)
1
Mohammad Mahmoud
Hello Guys, What is the difference between "layer.placeBefore(Layer)" and layer.placeBehind(layer) ?
1

February 27

Sauraj Babu
Press L for like here: https://dribbble.com/shots/3321820-Curated-photos-app-Onboarding Try out prototype here: https://framer.cloud/lGqPp/ :)
2
Aalok Trivedi
Jordan Robert Dobson how do I get the text to not align vertically centered?
6
Jerry Lin
1 of 100UI practice, open for any feedback thanks!! And I'm also finding learning group, if you have any interested in, don't be shine. My email([email protected]) https://www.ptt.cc/bbs/Design/M.1487566033.A.E05.html
1
Aalok Trivedi
I think I need fresh eyes because I can't figure out what’s causing the flashing/jumpiness when you hit the done button. Any thoughts? (edit the second content section (‘my happy place’). If you press the next button, type something, and hit done; the container height instantly jumps up, than back, then animates.
1
권권
Hello, Framers :-) Are there any errors in rotate method? well, The components appear to be cut off when I used rotationX,Y,Z. Preview with share link is ok, but preview in framer window and presentation isn't. Here are share link and video clip. http://share.framerjs.com/4zfh2l9rsd3z/ My Framer version is v72.
3
Utsav Saini
Hi there, When using FlowComponent, the showOverlayBottom method replaces everything on the screen. I want to keep the 'heart' logo so that it can take place in the header of (ii) screen i.e. Long notification. Is it not possible while using FlowComponent? I am NOT using WatchKit-Framer module so that I can learn how all this works. If this can be achieved using flow.transition() then please direct me to an example. The example given below flow.transition(layer, transition, options) in Framer docs is NOT quite clear enough for me. Also, where can I go to have a good understanding of 'show' and 'hide' functions?
1
Radek Kyselý
ClassAnimation Module Hey guys, I made this module that allows you animate individual HTML & SVG elements inside one layer's "html" property. You can easily target your elements by ›class‹ names. Animations provided by Velocity.js + A function for setting styles in more cultivated manner https://github.com/rdksl/Framer-ClassAnimation #class #animation #html #svg #velocity
0
Edward Sanchez
Hi, I sometimes don't use Framer for several months and need to open a file I created long ago. Most of the time things don't work at all and it can be hard to debug - sometimes there's no error message anywhere but stuff is very broken. Could you make backwards compatibility or at least conversion of files more solid so this doesn't happen? Or at the very least, is there a way to find out what version that file was created in and download that version of Framer so I can play it? I can send an example file if you contact me - can't share it publicly. Thanks!
12
Charlie Sneath
Can ignoreEvents be used as a property in a layers's state? I haven't got this to work, and have found that ignoring events is usually necessary when a layer's "hidden" state overlaps other content but isn't visible yet. Other approaches that might work instead?
1
Klaus Klausens
Hey guys, how can i access individual layers that i created with a for loop?
6
Nikolay Berezovskiy
Hi, guys. I wanna change scroll's height when the iOS keyboard is shown in Framer app on a device. Can't discover a right event for this. Canvas.on "change:height", Screen.on... ? Any ideas?
1
Burak Esen
Hey guys, how can i set the deviceType to "none" or browser/Desktop?
4
Christie Gettler Tarazon
is there a way to mirror framer to an apple watch? I didn't see an app in the watch app store...
2
Joshua Kenzie
Hey everyone, Considering organising a Melbourne Framer meetup, I'm curious to know who would be interested in attending? My work is happy to host, they have an office in the CBD next to Flagstaff station.
0

February 28

Alexander Maximets
https://framer.cloud/nKmRg https://github.com/awt2542/GridLayer-for-Framer Hey everyone, I'm trying to figure out how to use the "GridLayer" module and I can't seem to figure out how to target and add functionality to it. I'm able to adjust the number of rows and columns according device.width but when it comes to changing states nothing works. It's supposed to adjust the number of columns in grid layer when you click "button" while keeping the first two boxes in the same positions on the screen. Can someone please tell me what I'm doing wrong and how I can fix this. Thanks!
0
Jacek Stryk
What happened to the one-time Framer Pro license? Can't find it on the
2

Monthly archives

2017

2016

2015

2014

2013