Hello all, I'm looking at the basic 'Scrolling example' that comes on the Framer launch screen. I'm surprised that I don't need to define scroll.footer and scroll.header. I.e. the example prototype works as if I had defined scroll.footer = appBar and scroll.header = navBar, but these two statements are not present in the code. (See last paragraph). I'm confused .. And if I add a "scroll.header = navBar" statement myself, the alignment becomes off (too much space at the top). Can someone help me understand what's going on?

Hi :) Is it possible to manipulate text created in the design tab in the code tab?

Hi folks -- I'm VERY new to Framer and after watching the first Youtube tutorials I was wondering if the original examples are still available (ones with just basic shapes). Does anyone know where I could find them? Thanks!

Folks, what are your thoughts on doing something like a #FridayFramer tag and posting some projects? Throughout my week I work on things that others typically tell me to. Friday afternoons I've allotted to learning, reading, etc — this afternoon I'm working through the Framer animation docs and the VR component—for instance. I know we share a lot here, but it would be fun to post on Dribbble, Medium, here on FB, with the process and the idea behind your project and tag it #FridayFramer Thoughts? Go Framer!

Hello lovely people, I'm not sure it's a good idea to code this in Framer, but whatevs. Upon clicking on an answer, I'd like to emit an event (which happens). However, when I try to call the function that emits the event, I get an error. I understand that the scope of the trigger function is the clicked answer, but that should still make the function work, right? Framer link here: https://framer.cloud/CsuSA Enjoy your Saturday!

Hi everyone! I am working on this prototype and could do with a little help. I need the heart icon to change color based on what color is selected from the scroller. How can I achieve that? Also how do I snap each rectangle to the bounding box? Many thanks in advance for your help.

Is there an Framer example using EdgeSwipe event? I am trying to create a similar navigation drawer interaction where you can swipe from the edge of the screen to reveal more content? And what's the differences between "Swiping from edge" and "Start swiping from edge"?

Hi all! Has anyone seen/tried to integrate backward history edge-swipe with flow component? I'm a noob so any advice would help. Thanks!

I'm new to framer and coffeescript so please forgive my basic question. This seems like a common problem but I haven't been able to find a solution yet. I've imported my sketch file but I can't figure out how to put it into a component that responds to the device detection command for scaling the width and height. I'm not looking for a true responsive design, just something that can scale for different devices. Any help is appreciated. Thanks.

Any pointers on how can I assign properties to imported sketch layers based on the group / layer name? for e.g. if a layer in sketch is named "button__isSelectable". Can it be imported as "button" with button.isSelectable = true ? (assume isSelectable is a valid property)

Hello guys, I'm new to Framer and I apologize for my dumb question. The code written inside Framer (CoffeScript) is it good for an animation/interaction development inside xCode or/and Android Studio? If not, how can Framer can help us in our design process? Thanks to anyone will answer!

Anyone knows how can one change a text layer's properties created in *Design*, in *Code*? 🙃

Is it intended for the canvas inside of Studio to always have a DPR (device pixel ratio) of 1? I'm messing with three.js, so I'm editing some of the HTML myself. After struggles with resolution sizes on different "devices", I recognized it was the DPR. But, the studio/canvas doesn't represent this for all devices. Example, DRP for iPhone7 should be "2", but the canvas recognizes it as "1". The first pic is Framer, the second is on my iPhone

I want to create something for Google Cardboard with the great VRComponent. For this I used two VRComponent objects next to each other (screenshot), but unfortunately on my iPhone 6 the prototype always crashes after a few seconds. It works flawless on an iPhone 7 Plus, so it's definitely caused by the performance of the iPhone 6... With one VRComponent object everything works fine on the iPhone 6. So, is there a way to mirror the visual output of one(!) VRComponent to reduce the calculations? Thanks in advance :)

Hello again framer community:) I'm quite struggling with a navigation concept in framer (see photo). The top row should basically work like nests navigation (see video: https://youtu.be/FoUYeAIo4xU?t=581). The bottom row should NOT behave like in the video but as illustrated on my sketch. As you can see in the demo you can access the main category with horizontal navigation. Vertically you can navigate from a main category to its subcategory. Unfortunately in the subcategory circles on the left and right from the subcategory of the next main category are visible. I don't want that because it implies you could then navigate to them which shouldn't be the case. How could I fix that? I really hope someone has an answer or an example to that since I can't wrap my head around it … https://framer.cloud/jGnEe

HI! Check my new work with Framer for Movie booking ticket challenge=)

Hey people I'm looking for stepper examples as shown below. If anyone has played around with this in framer I'd be grateful if you would share it with me. Thanks

Hi guys, can I change the content of a textlayer designed in Design mode? Now if I add a target to a textlayer in design mode it appears as a "layer" instead of the editable "textLayer". So is this possible now or is this something thats coming soon? Thanks a bunch!

Anybody else having weird scaling issues when importing sketch designs?

Framer Tutorial: 7 Simple Microinteractions to Improve Your Prototypes #Framer #Tutorial #Prototype

Hey guys, Having a hard time making this list responsive, and also didn't find many tutorials on how to make sure elements are responsive in Framer. Any tips on how to fix it?

Does anyone have experience with Tes Mat's Framer Book (https://framerbook.com/)? Is it a worthwhile resource for someone who's learning? Price is a little steep for an ebook, but it sounds like it comes with a lot of additional learning resources. (Hope this isn't repetitive; I'm new here. I did try searching :) )

When my colleagues view my prototype on their own screens, its does not display as it should (i.e. rectangles are not where they should be, making buttons etc out of place). Are there certain display settings that should be changed? Does anyone know how can I work around this?

Having issues accurately recreating a text layer in code mode. I'm using a font off Typekit that is synced locally to my computer. text = new TextLayer text: "This is a layer of text." font: "Sofia Pro" fontSize: 25 fontWeight: 900 x: Align.center y: Align.center I am unable to change the font weight, and the spacing of the font is different that that in design layer. The good news is the font itself is being imported in correctly. Any thoughts?

I've got an array of groups, each group containing a thumbnail and a logo. Is there any way to target only the logo when I'm making a state? For example: I want to do something like this for channel in channelsArray channel.states.active = children[0].scale: 1.20 children[1].opacity: 0.90

Have a coffeescript question; specifically regarding scope. Leveraging Marc Krenn's awesome Firebase module to semi power-up my prototype. Coffeescript's scoping is becoming an issue when trying to push a dataset into an array. Pulling the example from Github: firebase.get "/names", (names) -> namesArray = _.toArray(names) print name for name in namesArray Initializing namesArray outside the method isn't enough to update its value. Any ideas on the proper way to deal with this?

Hey guys!😊 I need your help! Have a look my work with Framer for Movie Ticket Challenge and upvote it if you like it.🙃 https://www.uplabs.com/posts/movie-ticket-booking-app-experiment Thank you very much!😉

Hi all! After the latest Framer Studio update, for some reason TextLayer inside a module (with a superlayer) makes the font size much smaller on framer preview on device compared to framer studio preview (ipad pro). If I set the TextLayer outside of a module (with or without a superlayer) the size stays the same on device and in preview. Has anybody else had this problem? Any workarounds available?

Hey all, pretty new to framer and am trying to create an animation like the one tinder uses to swipe left and right. What's the best way to go about doing this?

Is there anyway to make this happen in a TextLayer? I'm trying to attribute class to a part of the text I created...

Hello Framer Community. Has anyone experienced a problem when adding a layer to a ScrollComponent.content I get a default inset of around 100 which pushes my layer down 100 pixels. I have to manually do an inset of -100 but I know this should not be happening. Can someone please guide me.

Hi guys! I have this little chat prototype: https://framer.cloud/xpZWJ It works as intended, but I noticed that that app.content layer get really long. How can I fix this? (i.e.: keep it a minimum size at first, but then grow it taller the more messages one writes). Thanks!

Hello, Im trying to figure out how to make a custom transition for the flow component based on the documentation, yet it's not working out for me. I'm trying to achieve a screen transition that makes the current page disappear and the next page appear, yet without any sideways animations (as defaulted in the flow component). Can someone please take a look at what I have so far, any input would be of help.

Hello community, did this. I've mixed a deck card idea with the flipCard modules, that is around. http://share.framerjs.com/wfzzbcb3ugql/ * I guess it can be converted to a module if somebody wants to reuse it.

Do you know the game "War"? You split a deck of cards in two, you turn a card and see who has the higer value and so on. When I grew up I played a similar game with cards with motorcycles, cars, or planes. And instead of each card having only one value they had 6 to pick from. I wanted to build that game to learn framer and to play it with my kids. You can see the current iteration here: http://share.framerjs.com/zzq0tbhb0xw7/ It's work in progress and I've only focused on getting the gameplay far enough along that I can test it with my kids. I have not focused on visual design or microinteractions yet. Lot's still to do. However, when building the game and learning framer, I ran into several things that stumped me. I presented four of those yesterday in Seattle. Here are four small projects to highlight those issues. Hope they are helpful to others new to framer. Images just show up nicely: http://share.framerjs.com/bhocdsybidzb/ Opacity 0 is not the same as visible false: http://share.framerjs.com/d82bjg4iskcy/ Where you put ignoreEvents matter: http://share.framerjs.com/aw3g0oos6rc3/ You can change animation options: http://share.framerjs.com/32gnlaftxd2t/

Hey I'm attempting to preview one of my designs for a website on mobile (I have an iPhone 7 & Galaxy S7 on hand) my framer artboard has been designed to scroll down but when I preview on device the scroll down is not working. Where am I going wrong?

Happy 4th everybody. I am still learning to use Framer and was wondering if anyone has tips or best practices on how to design for responsive? How do I show in my Framer prototype what a web page should look like in different widths?

Hey everybody! I'm trying to prototype a Card Controller that will allow user to navigate through the stack (hierarchy) of cards and to dismiss one or several cards at once. The video roughly shows how it can work. When I swipe down the top card, all the previous ones also slide down but with half speed (then 1/4, 1/8 etc). After I continue dragging the top card down the stack splits into two separate stacks. When I release my finger, only cards in the stack in the bottom will be dismissed. There's a lot of UX work to be done further, but now that's all I'm trying to accomplish as a first step. I have several questions here and would really appreciate your help guys! 1. I generate cards as an array cards[1..count] and put a listener on each of them that animates the previous one: for index in [count..2] by -1 cards[index].on "change:y", -> cards[index-1].animate properties: y: cards[index].y/2 time: .1 But this code doesn't seem to compile and I don't know why (disclaimer: I'm not a coder, just a silly designer). What am I doing wrong? http://share.framerjs.com/el10jkfoe5sf/ 2. I temporary got rid of this loop and did the work manually (http://share.framerjs.com/5b2ee1tmh4hx/), but now when I dismiss the top card, all the previous cards are obviously sliding away with it, but I don't need them to. I want them to follow the next card right until the point when I'm releasing the finger from screen. So how do I stop listening to cards[index].on "change:y" event in this case? I've read the docs and understood that I have to wrap this into named event and then call .off thing, but I can't figure out how to implement this one. Thanks guys! And here's the super-dirty prototype of how I want cards to split into two stacks, sorry for the messy code, I wrote this after a week of learning Framer with no prior coding experience :) http://share.framerjs.com/a35o84ffjugq/

Quick question, I am trying to get the actual location of the phone (iPhone). I tried using "navigator.geolocation.getCurrentPosition(success, fail);" but it always just throws an error. Any ideas? Any other ways to do it?

Hi everyone! Can someone please help me figure out how to get this to work? I'd like to be able to connect the red underline sliding bar in the nav to the swipe of each page. Right now, it only moves to and scales to the button title when the button is tapped. I'd like it to do the same when I swipe to a page as well. Much appreciated! 😁

Hi, against :) Who can help me with this question – I've made this cards in the Design mode. They have the same inner parts. But mouseOver event applies just for the first card. How make absolutely the same cards, but with different content, only using Framer?

Did something change? I'm seeing the white sidebar in the Framer app when I view a prototype in the Links tab... Anyone else running into this?

I might be missing something obvious, but is there a way to change the string of a text layer in code? This is in Framer v95. Only thing I've gotten to work so far is this: TextLayer._element.innerText = "Hi!"

Hi! Has anyone seen an example of tapping a submit button and showing a loading spinner? Thanks!

HI i am trying to hide the framer sidebar in prototypes shared with framer cloud. I heard that this is done with the options inside framer cloud itself. However the sidebar is still showing for me.. is this the way to do it? or should I also set some variable inside framer itself (like we did before)

I was trying to use the midi component and the TouchOSC app to trigger notifications in my prototype… but instead of getting one I get four signals (see the log below) which results in four notifications! Is there a way to listen to one midi signal at the time?

When working with text, is there any way to bold a specific word (say the first word) programmatically? thanks in advance!

Hey all, I've been playing around with the new parallax page component, and it's awesome, but I've run into a strange bug that I can't figure out. I've got the pages built via a loop and the parallax works for all of the pages except the last one, and I'm not sure why. Strangely enough, if I change the # of pages via the loop, it's always the last page that doesn't parallax. Anyone know what's going on? https://framer.cloud/Bukjb

Hey everyone, I tried integrating the awesome new parallax module with a vertical scrolling grid and it moves all of my images in a strange way. Anyone know how to integrate it in a way where it parallaxes the images vertically without moving them around a single origin point?

I want to put a draggable element inside a PageComponent. Is there a way to prevent the PageComponent from dragging if the user is dragging the draggable element?

I'm trying to implement a data-driven version of the Tinder Card swipe interaction, any pointers on threshold when dragging the card? Thanks!

Is there a -solid- way of getting the cursor location on mouse move anywhere? My original approach was: Framer.Device.screen.onMouseMove (e,layer)-> GlobalMouseX = e.offsetX # use GlobalMouseX later, etc. But the mouseMove event is captured by child layers. Moreover the layer parameter does not correctly point to these layers when they capture the event. e.pageX is not an option because it gets messed up when things are scaled.

The Utils.modulate function in Framer is so compact and simple – perfect for all your parallax prototyping needs. The only problem: I didn’t get it. I wrote an article about how I finally did:

Hey guys, looking into getting into more coffeescript for framer. Can anyone recommend any books?

Hi guys! Still trying to figure out my pageComponent issue. I've come across some examples that use Utils.modulate, but I'm not clear on how to use it for my needs. Can someone please help? How can I modulate the same property of a layer, unequally, from page to page in a pageComponent? For example, I'd like to accomplish something like this: layerA.x = Utils.modulate(pageComponent.x,[0,375],[0,100],true) and then... layerA.x = Utils.modulate(pageComponent.x,[375,750],[100,150],true) Can someone please help? Thanks!

Any way to control the order that Framer applies transformations (scale/rotate/translate)?

Anyone have any pointers on the easiest way to go about creating a searchable list in Framer? I don't want to have to embed a load of '<ul>' and '<li>' tags inside a layer HTML. Ideally I'd like to do it with Framers components and an input. Heres what I got so far - https://framer.cloud/Cvmim Just need to know what to put into the 'filterList' function that runs on 'keyup'. Even some quick tips to set me in the right direction would be much appreciated 🙌

Hi all. Could someone help explain how i target a layer inside a copied element. i'm trying to duplicate an element that i created in design and duplicate it in a list. The copied element has child elements i want to then target. I want to target the image in the copied item and replace it with a random image. I've created an array to capture the copied layers so i can target them by name. The duplication seems to work and i can target the y position but cant't target the image (image_1) ChannelItemList = [] for i in [0...5] ChannelCopy = ChannelItemList[i] = ChannelPost.copy() ChannelCopy.name +=i ChannelCopy.parent = Channels ChannelCopy.y = (ChannelCopy.height + 10) * i print ChannelCopy ChannelCopy.ChannelImage.image_1 = Utils.randomImage()

I'm experiencing a bug with the PageComponent. The 4th page (3rd if you count like a computer) is cut off about mid screen, and every page after that is invisible. This happens on all previewing devices (browser / app), but not in the Framer IDE. Anyone else experiencing this?

Trying to build out a prototype which filters an array of items based on user input. But running into some problems when trying to filter out layers. Attached is a quick prototype to represent this. When a user taps on a square, I want all squares that *don't* correspond in color to reduce in opacity. But all (besides the one tapped) are fading out. What am I doing wrong?

Hello everyone, do you know anyone who's used Google Analytics with a Framer prototype, or something like Optimizely, or equivalent, do to A/B tests? Do you know if Framer works well with these? My purpose is to do a diary study using a Framer prototype.

Quick protip for anyone wishing to drag&drop their own SVG icons into Design mode and be able to change the fill: If you're like me, you export your SVG icons with a) an empty rectangle the size of the artboard to ensure correct placement when dropped into Sketch etc, and b) a color applied to the icon so you can also export PNGs from the same artboard. But to change their color in Design mode, they can't have those two things. It's also generally handy to clean this up for production, and it's the main difference between the "design" and "production" versions of Google's Material icon SVGs. Enter this terminal command, in a folder full of SVG files (original files backed up with .bak extension): sed -i .bak 's/<path d="[^"]*"[^>]*fill="none"[^>]*>//g ; s/fill="[^"]*"//g' *svg And you're good to go :)

Hey guys. I have a question regarding javascript in Framer. Can we use any external JS libraries like greensock, vue etc inside of framer? Please let me know if there is any hack around it or if Framer natively supports it. Thanks!

Hello, everybody! Could you help me with this question – how to capture my animation by the easiest way for upload to Dribbbble? Could you describe your way, how you doing this action? :) Thanks!

Seems like I can't set Screen.backgroundColor to a Color since yesterday's update (just a hex string works fine). Is this a known bug?

Hi! Does anyone know if its possible to delay flow.showNext? Basically i've got a submit button. On tapping that I hide it to show a loading spinner and then after one spin I want to move to the next screen.. Any ideas? Thanks!

v96 added "animation support for backgroundColor (fill) of SVG Icons". Awesome! But shouldn't the colour be set by the color property not the backgroundColor property. WDYT?

Hey everyone, We’re very happy to introduce one of the most requested features to date: Framer Gradients! Create the gradients you know and love in Design, then switch to Code to add dynamic and interactive effect for a UI that truly pops. We also updated Color Presets so you can organize, edit, and delete your colors and have easy access to your favorite swatches. More on this release here — www.framer.com

After being a member and following Framer and its community for a while, I'm finally posting for the first time. I'm building an app that allows people to share and collaborate on stories, it's called Balloon. User autofollows new stories from their Friends and Followings and can unfollow a story if user isn't interested in seeing posts from it. Or user can Discover and follow a story, without necessarily following the user behind the story (so user doesn't autofollow all new stories from that profile). This way, user is always in control of the content she/he sees in the feed and removes the noise and clutter. It's like creating a micro-FB-page for anything I do with Friends or topics I care about. I've hit a small wall while prototyping with Framer. In the vertical userFeed, I've added a horizontal Page list ("Your balloons") which is inside the vertical list, but that horizontal list keeps returning to the starting point every time I try to scroll it. Any tips/tricks how to tackle this? Thank you so much!! https://framer.cloud/FIZOh v.1 recently became available on the app store. I would love to hear your feedback how you think I can improve the app. You can find it here: https://appsto.re/dk/cOfikb.i

Is there a way to define a 'page rect' for a PageComponent that's different than the width and height of the component? I have a long list of items I want to be able to scroll through, but want the scroll view to 'snap' to the closest sub-layer.

Hi everyone. Does anybody have any opinions/experience with importing symbols from Sketch into Framer? As far as I can tell the default import script ignores the existence of any symbols outside of groups, which it flattens. Seems to me that depending on the project, this approach to symbols might not be optimal (ie. requiring manual unlinking or layer-grouping before Framer import). Or am I missing some configurability in the import system?

Hi everyone, How can I change the color background of the presentation mode? I tried the code bellow, but no success... layerA = new BackgroundLayer backgroundColor: "rgba(110,255,0,1)"

Can I safely ignore .js files and just commit my .coffee files to fit?

got native camera access working in Framer on iOS 11 😱

New CarouselComponent module allows you to generate a scrolling carousel of items in a variety of configurations. https://github.com/bpxl-labs/CarouselComponent

How come Screen.backgroundColor = new Color("#F3F4FA") throws an error?

Quick question: is there (or will there ever be) an easier way to replicate the idea of css's :hover besides saying what to do on MouseOver and then returning it to normal on MouseOut?

I was under the impression that Sketch Mirror is also just running a web server, since it gives you a local URL like Framer Studio does. But Sketch Mirror works over USB even when my phone and laptop are not on the same network. Any chance Framer would be able to replicate that magic? On some corporate WiFis it's often a pain to get Framer on iOS to connect, and prototypes can take forever to load if it does. Sucks a lot of time out of my day, especially when I'm testing it on 3-4 different devices in parallel.

How can I make a layer created in the Design tab scrollable?

Hey Frameristas! I'm currently writing a Medium Article on the workflow I use to setup responsive native mobile prototypes using Framer Flows. I mainly use it for iOS but also want it to work for Android. I'm running into one little bug. I use showOverlayBottom to display the keyboard, and it works great on iOS and in the browser on a desktop, but on Android if you tap out of the keyboard sometimes it goes to the previous screen. I don't want to use "modal:true" unless I absolutely have to. Does anyone know how to fix this? If no one has a fix I will use this keyboard (https://github.com/imaaronjames/Simple-Android-Keyboards) for my Android examples. Here is my project that you can take a look at https://framer.cloud/fVdlE/

Hey everyone! You might have seen this one come by in the Framer Gradients video but today I'm sharing the full prototype to play with! Here’s how you can use States to switch between different gradients for a seamless background transition. On Dribbble https://dribbble.com/shots/3637563-Planet-Gradients Full prototype https://framer.cloud/aNMsU

Heyo, I wrote up some thoughts about making really dynamic prototypes with Sketch and Framer. Let me know if you have any other tips or techniques!

https://framer.cloud/IWKcv Z index problem. The texts are obscured by the colored layers on Chrome whereas it works well as intended on Safari. I tried to order layers by adding a numbered index to each layer. What would be the problem?

Just noticed that Origami has a live stream patch, which got me wondering can you prototype Live Stream in framer? Anyone has experience or thoughts on how to do it? 🤔

Hey guys, I’m wondering how to do the following: Text layer Blue in the loop gets its text from an array. When you click on one of the blue text layers, text layer Red appears. Now I want the text value from whatever blue text layer you clicked on, to be passed on the Red one. How does that work? Thanks in advance! https://framer.cloud/VrcjF

Just thought I'd share this. https://vimeo.com/218412997 I'm curious to see how Framer will grow with us to help define emerging interaction models.

Hi Framer-ers, love all the improvements lately! Maybe you can help me with a challenge I'm having related to the new Design tab. When I create a layer in the design tab and bring it into the Code tab, I don't actually see the layer in my code (as you would if you dragged an image file on to the editor). I see the layer on the left in the list of layers, and I can click on he circle to add an animation, state, etc., however I don't know how to see the later in the editor. This is causing weird issues for layer order, and it happens whether or not I create a target in the design tab. Thanks for your help!

When I use ScrollComponent.wrap() on a single layer it works. But, when I use it on a layer that has children it doesn't. (it also seems to collapse the wrapped layer in a strange way.) Why? See without children: https://framer.cloud/qOmAn And with children: https://framer.cloud/AKrxo

https://www.behance.net/gallery/54518037/PWA-BuySell-Bikes-Online

can you guys help me to find the 'share' button? i think there was the button on the upper bar in the framer. I'm spending my time on it. i just want to sleep....................🙃

hello Framer ppl like always, i bumped into a problem while making this prototype i was making an interaction which pops-up buttons from ur longPress coordination (like Pinterest quick menus) i managed to make it somehow, but it works only on Framer Studio or mac/PC web browser if i run this prototype on mobile, it doesn't work the way it supposed to does anyone knows what the problem is ? thank u !

Hello Framer users, Do you work really hard to prepare UI Motion Design? But, developers do not know how to implement your vision? I know how you feel, because I experienced similar situation many times… This is why I have created a simple template to specify motion to developers precisely. This article, based on my experience with UI animations, may help you solve issues with mentioned communication.

Hi :) I just started out with framer. I have never coded before but Framer get me to learn fast. I wonder if someone could put me on direction about Artboards and Layers. If I make the deisgn i want on different artboards, am I able to get those layers onto the prototype just as modals and anything else without having them on the same artboard? I hope I explain it correctly :p Thankful for all help :)

Hi Guys. Can someone tell me a practical scenario where the following 3 functions will be useful. layer.convertPointToCanvas(point) layer.convertPointToScreen(point) layer.convertPointToLayer(point) Thanks in advance!

Hey everyone! I have to figure this out in a day and need some help: How can I design a dial that plays a tune as the user scrolls in a circle?

Hello! I'm currently a UXPA office for the Pratt Institute chapter and I'm looking to schedule a framer workshop for graduate students. If there are any framer teachers in the NYC area that would be willing to host a Saturday workshop please let me know! We would compensate you for a 3-hour workshop. Looking forward to hearing from any and everyone with ideas on a great instructor.

Hey all, I'm running into two issues with Mirror. The first is that it doesn't respond to different levels of force touch. The second is that it doesn't seem to support alternative fonts. If you mirror the example prototype, you'll see that the animation is sluggish and the label font is Georgia, even though it's set to Source Sans Pro. Is there a way to fix these issues?

Framer.cloud is down. I should have a few dozen projects in there, but it's showing none. Framer app is not able to upload as well. Wifi works fine for me.

Just downloaded the newest version and building a prototype from scratch in Design. Anyone know if you can edit the html of the text you create within Design, after you make it a target?

Ok simple question: When i've made a few Artboards in Design view and I switch to code view I can see my first Artboard in preview mode. How do I flip to vieweing other artboards I've created?

When I create a text layer in Designer, can I manipulate its text later in Code? As in, myTextLayer.text = "my modified text" # doesn't work Also, print myTextLayer.constructor.name # prints "Layer", not "TextLayer"

Working with mapbox and wondering if anyone has an idea on how to add a framer layer to the mapbox map layer. I can add layers via: https://www.mapbox.com/mapbox-gl-js/api/#Marker but would be much better to be able to write the markers with framer layers. Any pointers would be great!

https://www.behance.net/gallery/54616437/Bike-App-Buy-Sell-Mockup

Hey guys! I just downloaded framer for a trial period. 3 times in a row, my entire computer crashes while I try to import a sketch document to framer. Any ideas on how not to crash it? The only steps to reproduce this is basically -> 1- Open framer 2- In a new document, use the Framer import. 3- Select the open sketch file. 4- Watch the world burn.

Hi folks, any idea how I can get an input to focus on a click event on a button when being used with the flow component. Basically I want the password input on the second screen of this prototype to focus when I tap 'Done' on the first screen. Seem to be getting some weirdness with this when using within the flow component. -

Hi.. Can anyone quote a quick scrollX and scrollY animate example... I usually animate by changing y values to give a scroll effect. Thought this might be more accurate but don't know how to use it yet.

Can we have backgroundColor come up ahead of backfaceVisible in autocomplete pretty please? I always want the former.

Hiya all! Here’s an example made using the all-new Gradients in Framer. Swipe seamlessly between a set of artboards, brought to life with a few subtle parallax effects. See: https://dribbble.com/shots/3643999-Gradient-Pages Play: https://framer.cloud/download/signed/alSeQ/3/?studio=1

Hi. A Framer newbie here. Are there any thorough tutorials for coding in Framer with Sketch imported designs? Most of the coding tutorials I've seen are for accessing the layer structure from a design done within Framer, but the same code doesn't work for Sketch imported designs.

Is there a way to change the color of an icon that was added in design view via code?

are there any differences between a reload triggered by a code change and a user-initiated reload? I have some text layers that show up correctly on a code-triggered reload, but are misaligned after a user-triggered reload

Just to see if I could, i used tone.js and framer to make a (very basic) musical instrument. Need sound obviously.

Hello ! Is there any Framer freelances here or a website where I could find a list ? I'd like to have a good prototype from a Sketch file (one landing page + checkout)

Hey all....quick questions: Is there are a to disable and/or edit the overlay on the FlowComponent? I would love to be able to use .showOverlayTop a sticky header that only appears on scrolling. Right now this can only be used as a modal. I'd also love to be able to just edit the color/opacity of the overlay itself when I AM using it as a modal :) Let me know!

Hi Framer Team, I accidentally stumbled upon this while looking for Framer examples http://framer.com.s3-website-us-east-1.amazonaws.com/examples/ Long story short I found some code which seems to be deprecated and is no longer documented but still works. I just wanted to bring it to the team so they decide whether or not it should be mentioned in the docs. Koen Bok

Hey Framer community. I have a question about structuring content for large prototypes. I've got a fairly large prototype that is starting to drag and I'm hoping some of you might have some pointers on how best to streamline the code to improve performance. Unfortunately I cannot share the prototype itself but I crated a quick dummy prototype that mimics the way I'm structuring content on a small scale: https://framer.cloud/nPcBY Basically my architecture goes like this: 1. Create a library of custom classes for reusable components (extensions of the 'Layer' class) 2. Set up the pages within a Flow component where each of the components will live 3. Create instances of each of the components and stack the content to create a series of pages. This worked well in the beginning but as I add more and more instances of each of these components it's really struggling to keep up. Some of the pages have up to 5 instances of a given component repeated but with different sets of content. The benefit to this is I can add to and edit content quickly for each page. If anyone can spot any opportunities i might have to reduce the scale of this thing, that would be awesome.

Hi there. Is there a way to crop the canvas according to my sketch artboard?

I got Framer running in Glitch. If your remix this project, you'll be able to code, preview, and share your Framer prototype from the browser. Here's the project for you to remix yourself: https://glitch.com/edit/#!/glitch-framer

Hi! Anyone here based in São Paulo, Brazil? I am looking for people using Framer in the area to understand what topics/formats would be nice for a meetup.

Hey everyone! Long time no see! I just shared a fun and simple prototype on Dribbble that we used to show off Framer Gradients. It leverages simple scrolling with the FlowComponent and has a smooth looping 'currently typing' animation. Take a look — https://dribbble.com/shots/3647055-Messenger-Group-chat

I've noticed that hints (the purple boxes that show what elements are clickable) do not work when using the FlowComponent. Has anyone else seen this? Any work arounds?

Hints don't seem to work for the FlowComponent. I tried adding the .enable call to a function on the event which triggers the flow component... head scratch time! Framer.Extras.Hints.enable()

Hey Framers, I'm trying to make an infinite carousel of pages so you could swipe through the five or so pages and when you get to the fifth one, the next swipe takes you back to the first. I've been trying to manipulate PageComponent into doing this and not having much luck. I've tried adding new copies of the pages, but you can only add dynamically at the end. I've tried reordering the array in pages.content.subLayers using shift, push, pop, etc. but even with a call to updateContent, the page component doesn't seem to like what I'm doing. Has anyone successfully reordered the pages of a page component? Or is there another angle I can take to making the pages loop?

Hi all, i'm having some trouble with flow components. Here's an example prototype: https://framer.cloud/cgbTS I've got two pages set up, a red page and a blue page. Then a flow component with a yellow background and a simple header with a back button. The back button is tied to the 'showPrevious'. Then each page has a link to direct back to the other page when clicked. The issue: Given this setup, I don't have any interactions that would show the yellow background. All of the commands i've programmed link to the red or blue page OR back to the previous page, but the yellow page shows up sometimes. If i click through too quickly on the pages, i'll land on a yellow page. OR if i click through red/blue several times and then use the back button twice i'll get the yellow page. Can anyone help me wrap my head around what's going on here?

Feature Request for Video Prod: Video Export, Bigger Video Preview. I have been working on Video Tutorials on how to use the app that we are creating. Maybe if you guys know on hacks for my Framer -> Premiere workflow, I won't need these features anymore.

Has anyone noticed since Framer switched to 1x, hairlines aren't visible in the device preview on the desktop app? :(

Does anyone have a living room app prototype that they'd be willing to share? I'm unable to find an example of one, and need to figure out how to go about prototyping one in framer. Thanks!

Hi everyone! I made an Atom syntax theme inspired by the juicy Framer code editor syntax colors. Some of you might enjoy it 😊 https://atom.io/packages/framer-new-syntax

Hey Framer people. Question for ya. I'm working with Json data sets and I'm trying to create a layer and link to that layer via a 'flowComponent' within each 'tile'. So basically, each data set has a large image and a small image. The small images make up a menu. When i click on the small image, I want to create a layer with the large image and flip to it via 'flow.showNext'. https://framer.cloud/jyKoJ Anyone know what the best way to go about this is?

I'm running against walls. I'm trying since two days to add markers to my mapbox map. I started with this tutorial https://blog.mapbox.com/power-your-framer-prototypes-with-real-location-data-da67ac1115b2 and failed. I tried many things but I just don't get it. Sadly I'm not allowed to share my prototype so I created one with just the map. https://framer.cloud/qBopC I don't get it.

Hi guys, I'm having trouble with this PageComponent bug. From video you can see it snaps to the next page when you tap the first card of the stream. Seems like it only happens to first two items and I suspect it has something to do canvas size and item size within the stream. But can't really find the solution to get around it. Anyone experienced similar stuff and has answer for this?

Hi guys, having a small roadblock here. So i have a screen to validate phone number here, and what i want to prototype the experience is that when this input field has 4 digits inputted, i will instantly move to the next screen (success). For the input field I'm using an input module. Is there any possible way to simulate so? Cheers, have a nice day :)

Hi all, the Android app isn't working since the update. Am I the only one experiencing this? Thx in advanced.

Text input One of the things that is frustrating me the most with prototyping tools is the ability to enter text. With framerjs you would have to do something like this: http://codepen.io/akolchenko/pen/cdfim Thats a lot of overhead if I was to prototype a sign up flow for example! Framerjs imports sketch files, so it would seem logical that it also would recognize a text field, and its css styling and thus be able to make the text either dynamic or input. Maybe it would be worth while to have a component like ScrollComponent? I don't want to have to use tools like Axure to achieve this :(

If you're like me, you've found it a bit challenging to make a button in Framer that behaves well in a desktop prototype. Here's a short example of how to get a nice button working with a TextLayer using 100% code: https://framer.cloud/eXQJL When you edit the text of this button, it will automagically resize to fit the text. You'll get all the expected cursor behavior when clicking on (and mousing over) your button, and color editing is also fast and easy. Hat tip to Ryan Smith for introducing me to the idea of using a TextLayer as a button.

Hey! I just shared a simple to-do example on Dribbble. It uses our latest Gradients feature to animate a subtle highlight when completing a to-do. It also transitions between various layer styles from the Design tab. Check it out here: https://dribbble.com/shots/3650721-Gradient-To-dos

Hi all. I have an html input built in to my framer prototype, and I have some text outside of it that I want to be purple when the input is focused. Right now I have the color change working onTap, but I really don't want it to stay purple. Any idea how I can target either a focus or a keyboard?

Hey everyone, does anyone else experience crashes under Hight Sierra Public Beta?

Hi. I'm trying to use a conditional to monitor a state change. I can't seem to get it to work. Here is a little example project I did. Basically what I want to happen is when the user selects layerB I would like to check and see what state layerA is in. If it's "off" I would like to change the state to "on" If the user selects layerB and the layerA's state is "on" then I would like nothing to change. Thanks in advance for all your help.

Here’s a quick approach to navigating levels (multiple VR Components) using the VR Module in Framer. https://framer.cloud/qzOZe

Looking for someone that may be available to work on a Framer prototype. Designs built out in Sketch. Starting immediately. Send me a note.

why isn't that poll pinned! Add to the list: flexible text component in Design...The Text needs to graduate to a TextLayer something quick. not being able to modify the text (aside from using the html property) and not being able to vertically expand based on size of text is uh...noy.....YING. also symbols. we have a neat workaround for it at the moment, but man, we need first class symbols.

I'm trying to figure out how to affect the perspective of a layer that's rotated in 3D. If you take a look at the video, the rotating layer changes perspective based on its position, relative to the center of the screen. But the docs say "Perspective is disabled by default," which doesn't appear to be true (unless I'm misunderstanding this). How can I disable or lessen the apparent perspective shift on this layer?

Scenario: You are designing an app and want to show it to your team via a framer prototype. - You need to show your app when working normally with content loaded in it - You also need to show an empty state - It also potentially has a number of edge cases e.g. error messages / content not available How do you communicate these alternate states to your design and developer team? Do you include it somehow in a single prototype link? Do you create multiple links? Do you create a static PDF document to document the alternate states?

Dear Framer, Real collaboration tools would be amazing. Right now multiple team members cannot work on the same project. It makes it really hard to collaborate with a team on larger projects. It would be awesome if my cloud account allowed me to manage my team and then my team could work on and upload updates to any project in our cloud gallery. Currently that is impossible and the error message is super unhelpful. The text is cut off and the try again button obviously does nothing but trigger the error again. The "learn more" button just takes you to a marketing page that tells of the wonders of collaborative cloud team editing... it's a bit infuriating to be honest.

Hi guys, there's a small roadblock. So, I have 6 arrays. And I have to change all layers of five arrays when I hover the cursor on any layer of the sixth one. I can not do it. I would be grateful for the help. https://framer.cloud/KHIYe

Using the module "InputField" how do you get the font to scale properly on Device and in the preview window? Preview window is fine, but the device its tiny.

Another one using the InputField module. Is there a way to get the height of the keyboard when its open so I can adapt the UI around it other than guessing?

text.font is broken in latest Framer Library. https://framer.cloud/AQNQM

Hello! A little bit off Framer, but still a huge step for Designer-Kind 🙌 There's an overview of a new Abstract. Hope you'll find it useful!

why scrollComponent doesn't work with more than 2 objects ? in my case, soon is a group on homescreen. but when i tried to type new scrollComponent for the next page "detail", the "page" page won't appear.. no errors found but the code was broke. any idea how to fix it?

For some reason I can't seem to edit the text within a text layer I created in Design. This is possible right, I'm just missing something?

I have a PageComponent with cards and need the animation for the next and previous card to start while dragging the current card. My animation only starts on drag end of the current card (apparently that's the default behavior). Is there a way to do that?

Hey Frameristas! I'm currently trying to add a scrollable layer that sits on top and can be scrolled over a page component full screen background. Obviously a scroll component won't work, since it blocks the page component behind it, so I tried messing with the draggable property, but I'm having trouble trying to get the layer to behave like a normal scrollable layer instead of a draggable one. Any help would be appreciated! Thanks :) https://framer.cloud/lVSUZ

Jesse Dodds Thanks for approving my request to join :) Hey Everyone. I have a newbie question. I have a layer set to animate when onClick. This animation changes the border color, border width, and radius. For some reason on the onClick and the animation initiates, a purple color appears as the border color and then the intended border color appears. I'm curious to find out, is this normal or is there a way to get around this? I've tried `Framer.Extras.Hints.disable()' but that I believe isn't the issue. Any suggestions will be very helpful. https://framer.cloud/pAVIw/

So I'm in the process of trying to figure out how to go about making an Apple TV prototype in Framer. I've taken a peek at David Fumberger wonderful prototype at https://framer.cloud/tpCbQ/ for dissection. However, for some strange reason, when I open the prototype in v96 of Framer, all the layers look like this. Does anyone know how to go about fixing this? It's kind of hard figuring out what layer is what, when they're all named Untitled. Thanks!

Hey all, I'm currently trying to modulate the blur of an image in the current page based on the scroll of a scroll element on top. For some reason, pager.currentPage.blur works, but pager.currentPage.children.blur doesn't work. Does anyone know how to target the image inside the current page? Blurring the current page itself produces an undesirable halo edge (see video), so I would like to only blur the image inside the current page instead. Any help would be appreciated. Thanks! https://framer.cloud/lVSUZ

Quick question: How to snap to last page of page Scroller? (card9) in my example. Ignore the fact my code uses "card3" it doesn't work regardless

Hi. I'm trying to catch cursor position, but can't figure out where is the issue. How cursor.x could be bigger then screen width?

[EDIT] This comes up a lot, but how to make all the bottoms line up, and not grow from the top? [ANSWER] Inside your loop, specifiy maxY to a parent container (pagescroller in this case) __for layer, i in bars ____layer.originY = 1 ____layer.maxY = pageScroller.maxY Hope this helps anyone stuck on the same problem!

Using font "SFUIText-Medium" - looks awesome on my Mac but ugly as hell on my iPhone, any idea why?

Anyone else just update and then encounter a weird bug where "style="zoom:2;" is no longer applied to some text layers?

Hello there! Big thanks to all of you shring ideas. I have just started to use Framer, it is my firtst time coding. I just wanted to ask if somoen ever done a iOS map slide up and scroll? As in iOS maps app, you are able to slide up some suggestions when searched and when you slide all the way up you are then able to scroll a the list of suggestions. Anyone that know and understand what I am trying to say? :) My best Daniel

Tess Gadd I cheated :P I joined both now and it is 90% close to what I want. The problem now is that I want it to change color according to each tab it passes. Currently it only changes color to the tab that is clicked and slides all the way there. Please help...

I just built this little color picker component for a desktop prototype I'm working on, and I thought it might be useful for some other folks: https://framer.cloud/SjpGG

I'm flinging around layers with momentum turned on. Is there any way to know .onDragEnd, (when framer does its momentum simulation), the point where the layer will animate to at the end of its momentum animation?

Has anyone come across any tutorials or even just general guidelines on building prototypes in Framer from scratch (either in pure code or combining the design tab and code) while following Atomic Design Principals?

Mapbox Framer Question: I'm currently using a mapbox layer in Framer and the prototype works fine in desktop environments. However, when I open the prototype on an iPhone the panning/zooming of the map goes twice as fast as the touch input. I figure this is probably due to a pixel density issue between Framer and the Mapbox element. Anyone familiar with this issue? Code wise I basically used this:

Hey Frame folks! Any idea why my dial isn't able to scroll in a circle?

Hey everyone! I was working on a small project where we wanted to have a dynamic greeting message based on the time of day. I got something pretty rough working after a few mins 🙌🏼 You're welcome to use this snippet, I might try to make it into a reusable module.

Is there a way to create an element in the design tab... target it and then replicate it within a loop in the code tab? Seems like it should be the most straight forward thing in the world but I can't seem to get it to work?

Is there a way to collapse layers in the Design mode? If not, I hope that can be a feature in a future release.

Under the premise of set the page of the max height, how to ensure that the blue layer in the center of background picture

I love what Tim, Joshua and the team built with Abstract – a central way to collaborate on design. You should check it out if you use Sketch. This has been tried many times before by very talented people, but is still a huge unsolved problem in design. Abstracts approach is smart, a really polished Mac app on top of git, and I really think this could help with re-use, organization and workflow for teams.

I'm trying to understand the .map function a little more. How would I map 24 units (as layers) to each day? So each day would have 24 hours? Thanks everyone!

Hey there! With the latest Gradients release for Framer come a lot of new possibilites. Check out this nifty little prototype that swaps out pre-defined gradients to add colorful filters to your favorite photo! Pro tip: Try out your favourite photo by swapping out just one line of code! On Dribbble: https://dribbble.com/shots/3653789-Gradient-Photo-Filters Prototype: https://framer.cloud/ouEPl/

well, i tried to give tasks to a group of layers .. can anyone pls help? i stuck here ..

Hello all: New to Framer and I'm wondering if it's possible to place a PageComponent within a FlowComponent. The interaction I'm trying to achieve is to have a paged onboarding carousel (as offered by the PageComponent) and a button on the last page that will take you into a another screen of the app. At present the button on the last page is not allowing me to flow into another screen. It is registering a click, however it's not registering the flow. Appreciate any help Very rough initial attempt:

Text layers created in Framer Studio's design tab, is there a way to change its color in code? Tried .color but in vain.

Hello every one, i have have a question regarding text layers and the new designer view, form some reason i cant rewrite/change text layer text that was created on the designer view, am i missing any thing?

Is there an easy way to design a layer in the design tab and then in code convert that layer to a class? e.g I design a simple button, target it in code so it appears as my-btn, and then somehow make a MyBtn class (with all the properties of my-btn) so I can have multiple instances of the MyBtn class throughout my design? If it’s not easy - any suggested work- arounds would be appreciated.

Hey there Framer peeps, love the gradient feature. I'm trying to use it in a prototype on top of type + blend modes, however blendmodes don't work correctly unless the gradient is out of any container... does this ring any bell? blendmodes only working correctly if the gradient is in the root of the doc, not inside a container...

Some people ran into the issue of having a draggable layer with clickable contents and having the click event fire when they were dragging the underlying layer, which is not what they want. https://www.facebook.com/groups/framerjs/permalink/535898816537194/ I think I have a solution for this. It's pretty simple actually. It just compares the position on the screen on TouchStart and TouchEnd. It's easier to see for yourself in this project: http://cl.ly/1N1R0L3y0g0t If this solves the issues, I'll add it to the Framer core. Edit: updated the project for because layer.screenFrame is now a property.

Hi people. I need help. Have two events on one layer: onTap and onLongPress. The problem is: if onLongPress is executed, onTap event is executed as well. Is any solution available?

Hi there, i'm a newbie. At the moment, i'm doing an app likes "flipboard". User can drag left - right to change screen and up - down to read screen's content. Is there a module that can handle this issue ? Thanks for watching.

Quick question about how event listeners work: I have a parent with a mouseOut event listener. If I add an onClick event listener to a child layer then when the user mouses over the child layer the mouseOut event gets triggered. Basically I want the user to be able to click on something in a hover state. See the wonkiness when you hover on the sidebar, then move down to click on the user icon.

It was tough for me to quickly change percentages, or colours to whatever i'd like in a previous Statusbar I encountered, so I wrote a module to generate a status bar sans images today. You can give it a carrier, percentage, and network, as well as change the colour to whatever you like. It also shows the legit current time on your device. the layer names show up somewhat nicely in the inspector to boot You can play with it here: https://framer.cloud/HzHyu and if you're a githubber, download it here: https://github.com/jonmadison/iOSStatusbarFramer

TIL that command+esc exits a code fold. Game changer.

Hey guys! This might be a silly question, but are my individual shapes/symbols, etc. supposed to import into Framer from my Sketch file, or are just the artboards expected to import? I'm trying to play around with animating this button (color, size, etc.) to figure out how the workflow would work, but the symbols and shapes don't seem to be importing... Any help would be appreciated! (sorry for the re-upload)

Hello everyone, I am unable to view any of my prototypes or any framer cloud link on my framer for android app. Does anyone else have this issue ? Is there a way to get around this ? or is there any other app that i can use to view the prototype on android devices? Thanks!

Has anyone here had experience with Keyframe vs Lottie? Pros and cons of both and integration with Framer?

I'm working on this problem (can you solve it before I do?) How do you change a variable's value through a function, then update the value through an .onClick event, which changes the loop below? See the attached image. [ANSWER] Coming soon!

Anyone know the best method for embedding an iframe into a framer prototype? I've got a loading animation made with GSAP in angular and am trying to iframe it into my framer prototype.

After requesting some help from the Framer team, I've received a couple of examples that I can't access. The URLs take me to a page that says I don't have permissions. Anyone know how I can access these? Here's one of them: https://framer.cloud/pgKdW/

Hi, y'all! Framer newbie here. I was trying out the CameraLayer(https://github.com/ktcy/CameraLayer) and got stuck on running on both Android Chrome and Framer app. I did turn on the camera permission from Android settings but had no luck. Is there a method to see cameraLayer from Android Framer app? If so, how can I switch between front and rear camera? Here is my newbie project.(Nothing really to see...) https://framer.cloud/eRidk

Hey all, I'm very new to Framer, but really enjoying it so far! Looking for guidance on the below question, is it possible or am I being dumb 🤔 Can I put a loop within a loop? In the UI I've got a tracklist for each day that scrolls vertically, and each day is a swipeLeft to reveal that tracklist. Any help massively appreciated!

Hey everyone, having trouble with alpha videos/gifs in framer. For some reason I am seeing a background when the source file does not have one. Any ideas?

has anyone ever used a bluetooth enabled dial such as this Griffin PowerMate to control a framer prototype? I'm not even sure what to call it to search for any samples... would just need basic navigational control from it.

Hey there, any folks out in Boulder, CO interested in starting up a Framer group?

You know what would go a *long* way, Framer team? being able to add arbitrary key/value pairs to a visually designed layer, in the Designer. I'm now in the business of creating reusable visual components, and this ability is fundamental to make this very pleasurable for component consumers.. :D

Hey, question... I imported a Sketch file into Framer, the artboard dimensions in Sketch are 360x527 but when it imports into Framer, the dimensions are 512x1216. How can I adjust the canvas size in Framer to be the same dimensions as the Sketch artboard? thanks

Is it possible to add an SVG path to a layer (using its HTML) so it is scaled when the layer itself is scaled?

Hi everyone! Does anyone have a simple example of a header carousel that's navigable using your keyboard? I'm having a hard time trying to figure out how to make it myself.

Anyone experience client crash with the latest High Sierra beta? Can't open the application at all :-(

I'm new to Framer and have created an iOS prototype using the Flow Component. Is there a simple way to allow this to scale proportionately (not responsive) to fill any iPhone device? Will it break browser preview? I've read and tried several techniques from this group. But none take into account the Flow Component. Thanks.

Hello lovely bunch, I'm creating a component that—like FlowComponent—takes in custom layers as headers or content pieces. This prototype might make things clearer: https://framer.cloud/rUthi/1 I think the setter/getter part might be the key here, but I didn't get how to use it concretely yet. Any suggestion on how to implement this?

Hi :) Still learnig all the basics in Framer and are right now trying the Flow Components. Any idea how to override the Framer flow.showOverlayCenter to close the modal on an custom made button made in design mode? Appreciate any help :)

Came across this awesome Sketch plugin for Material design. Might be useful for some people. (: https://websiddu.github.io/sketch-material/ Demo: https://www.youtube.com/watch?v=JnB5SIbwE40

Is there a way to enable two-finger scrolling? I have mouseWheelEnabled... but a lot of my users that I'm testing are on a laptop and trying to scroll with a track pad :/

Hi guys ! I'm a newbie to Framer and i'm just messing around some ideas and trying to figure out how all this works and I got a dumb question for you guys. How can I animate the way the overlay shows using the showOverlay command ? I'm not a dev I'm just a graphic designer having a lot of fun with this tool so I may lack a lot of logic for the code part. Thanks a lot !

Hello friends! Is there a way to fix layers in Framer? I'm currently trying to change the position attribute through the layer style, but it doesn't seem to be working (see here: https://framer.cloud/VBTuK) Specifically, after the initial click on the screen, I'd like the title and author to stay pinned where they are!

Hey Everyone! Trying to do a simple button nav where a button clicked is selected and the other buttons are deselected (scale up and scale back effect). I have my buttons in an array and through a loop but looks like I'm having issues with the conditional. Is there a way to write this with "state" events or are there any other more efficient ways to write this? My buttons click to scale up but the buttons that are not clicked don't scale back.. btnArray = [btn1, btn2, btn3, btn4, btn5] for btns in btnArray btns.states.a = scale: 1.00 animationOptions: time: .25 curve: Bezier.ease btns.states.b = scale: 1.25 animationOptions: time: .25 curve: Bezier.ease btns.stateSwitch("a") btns.onClick (event, layer) -> if this.states.a = true this.animate("b") else btns.animate("a")

Firebase Module / Reference / Examples: https://github.com/marckrenn/framer-Firebase #firebase #framer #database #backend #module

Hey, everyone! There is a problem with interacting with the sublayer of copied layer. It's undefined. How to solve it?

i'm trying to add a text layer with sf pro display as the font but it keeps reverting to sf ui text why tf

Is there a way to set the draggable.constraints to a parent layer vs. static xy coordinates? I can't seem to find this in the docs.

Dear Framer Community - can you add placeholder text in Framer Design, then update with dynamic text. If text reflows, can Layers below be pushed down?

Guys , what's the best way to turn a prototype into a High resolution video?

Hello guys, I am trying to add an SVG file from a Lingo library, I tried both drag and dropping it from there or from my Finder but unlike Sketch, Framer turns it into a SVG image with no folder structure, How do I import it correctly?

Hey everyone, I've been trying to get my simple Apple TV prototype to work with my keyboard, and I just can't seem to get the carousel to work right. Essentially what I'm trying to do is have the keyboard left/right keys to navigate the header carousel, and when you press the down arrow, the first row of the movie cards scrolls up. As of right now, it works just fine, but that's because my header is just a static image, and it doesn't do anything. Do you have any suggestions as to what I'm doing wrong? I've commented out my other two headers images, as well as the code for them, because it just starts giving me errors. Any help would be greatly appreciated.

Hi :) Is there anyone that have used the page = new PageComponent.wrap(content) thar are deisgned straight from design tab and can show me how its done? :) Thanks!

Quick flow component question: Anyone know how to do an overlay transition on a custom transition using Flow Components? Thanks!

Hey everyone, I'm trying to integrate a video in a prototype, and the video works as expected in the preview window, but it doesn't play in the mirror app on mobile for iOS. Anyone know what's going on?

Why does this not work with one click? It cycles through them but only on multiple clicks, thanks line.states = a: rotation:90 b: scale:.5 line.onTap -> line.stateCycle("a","b")

Just posted Part 2 of my tutorial series on 'Prototyping Apple Watch Notifications in Framer' #framerstudio #ux #prototyping https://steemit.com/technology/@mindandmagicltd/prototyping-apple-watch-notifications-in-framer-part-2

Hey Peeps! I have two artboards and would love to tell a button on the first artboard to onTap -> "now show the second artboard like its a page the user goes to". How can I do that?

Ooh, a tutorial! Hey everyone. After my last post (https://www.facebook.com/groups/framerjs/permalink/1208201975973538/), Paul Kooi asked if I would do a little code walkthrough of how to make the color picker. I started down that path and made some videos that walk through the early stages of making this prototype. There are three videos so far, and they take you through: 1. High level structure of the file 2. Manipulating color with HSLA 3. Starting to code the selectedColor portion of the view If this kind of thing is useful, I can continue this series to the end. I can also create videos on other topics. I'm looking for a few specific pieces of feedback on these videos: 1. Am I explaining things clearly? Is there any part of this that could be explained better? 2. Is this video at the right level? I know there are folks in this channel who have varying levels of experience with coding. Are there parts of this I should add more detail on? Is there too much detail? 3. What other kinds of videos and tutorials would people like to see most? What are the most challenging areas for people? I could do more videos about creating specific components, more programming basics, more stuff on building bigger prototypes, more mobile, more math, more fun artistic stuff. What do you want to see?

checkbox.states.chbx_off = backgroundColor: "" I want to cycle through a check box on and off states, how can I make the fill transparent once its been filled?

Hello! I am putting together a talk I am going to give about design tools at a conference later this summer (https://360idev.com/sessions/right-%F0%9F%9B%A0-s-job/). Given its collaborative features, animation support, responsive layouts, and running costs I think Framer is super interesting. I am building out a design in Sketch first, and then re-building it in several other design tools to compare features, ease of use, community, and resources. I will be bringing the newbie perspective, but I will not have the day to day experience nor expertise that comes from being a frequent user of Framer. Since you have a lot of experience with it, could you tell me a little bit about what makes it so great? What makes it your app of choice? Any pro-tips for beginners? Are there any pain points? What else is in your design toolbox? Thank you for your time!

Hey there. I'm still having trouble using a video with an alpha channel in framer. Here is the video I'm trying to imbed. Any ideas?

Hello. After I set flow.header to a particular layer, how do I reset the flow header to default/undeclared state? ? I want a sticky header for a few screens in my prototype, but don't want the header to show up in other screens.

ok so I'm going to jump deep on this but first, can you write JS as of right now in Framer? I don't know JS and just started to fully learn framer (big shoutout to Adria Jimenez for his Udemy course, many thanks!) but idk if I should learn CoffeeScript and then move on to JS. I'm a little lost and was wondering how you guys wrapped your head around it

Hi Framers, Quick question: Is there a way to hide or move "made with Framer" box when sharing prototype? Currently, it's covering logo on my web page prototype. Thanks!

I tried recreating the Twitter like button in Framer. Let me know what you guys think! https://framer.cloud/GcmSS

Hi everyone! Does anyone have any examples of controlling the scale of an element on drag for mobile? e.g. I have an oval that I want to scale up and down as I drag back and forth.

Anyone from Mapbox here? Any news on the dataset example for latest Framer? I tried the code bellow but didn't work... mapboxClient = new mapboxgl(mapboxgl.accessToken) Help me please! ; ) best

Hey y'all, Got a few issues that I can't seem to solve... Basically, I'm trying to make it where when you click on an item, it fills the whole screen while the other items fade out. Also, I want the image to resize to fill the whole screen. The things I can't figure out: 1. How to remove the clicked item from the scroll content to fill the whole screen (and how to place it back once clicked again) 2. How to fade out the other items behind the clicked item 3. How to resize the image inside the clicked item to 1440x1440, centered Any help would be appreciated! Cheers.

Does anyone know how to enable direction lock on a Flow Component? I have a nested page component within a flow comp that scrolls and it's causing issues. Thanks

Has anyone made a dropdown menu inside Framer? AND is there simpler way to do it, perhaps HTML inside framer? Saw the example Andrew, referenced: http://share.framerjs.com/cqrhhbupi4qu/ IMO this example uses a lot of code for a dropdown and wondering if there's a better way of building out an interface with multiple dropdowns.

Hi all, is there anywhere to restore a project after a crash??? edit: FIXED :) TQ Framer Community :)

Hello ! Have you any idea how to loop this without refreshing your web page ? I tried to look at the loop tuto but can't make it work. 😕😣

Hi guys, I was wondering if you could use loops to create event listeners for multiple objects? Using an iterator/for loop and #{} also didn't work (i.e. for i in [1..10], "check_#{}".onTap....)

Happy to announce the first Bangalore Framer meet up. If you've dabbled in or curious about @framer you should attend. RSVP here.

#entered in Code… works :) tGoodbye = new TextLayer text: "goodbye" textDecoration: "underline" #entered and targeted in Design… not working :( tHello.style.textDecoration="underline"

My first Framer Project! Check it out: https://framer.cloud/pWjFx https://dribbble.com/shots/3619498-NJ-Transit-Home-Concept

Does anyone have some good examples of desktop apps, I'm exploring the idea of prototyping some drag and drop column based interactions for a CRM style system.

Hey y'all! I just shared this snazzy Weather app example prototype we created for the Framer Gradients release! It features some fun animations and has a very simple setup to get started with. Let me know if you have any questions or things you’d like me to explain :) Take a look at the prototype — https://dribbble.com/shots/3663172-Weather-app-Gradients-example

Hey guys, how about setting text on TextLayer created in Design mode? I created simple table cell in Design mode. It's structure is like: cell: – title – text I would like to copy designed cell and fill it with data by doing something like : for cellData in data: newCell = cell.copy() newCell.title.text = cellData.title newCell.text.text = cellData.text But there are 2 problems: 1. I can't refer to cell's title as newCell.title, only just newCell.subLayers[0] (which is painful) 2. Text from Design appears as Layer in Code instead of TextLayer. How to deal with that?

testDrive: Use the latest version of over 50 Framer modules in under 20 seconds, without all the usual module-nonsense. Example: https://framer.cloud/SObDp/ (loads giphy-module) Code/snippet: https://github.com/marckrenn/framer-testDrive Including some community favourites like: • adapt by Sigurd Tapio Mannsåker • CameraLayer by Keishi Tsuchiya • devicepixelratio (dpr) by Jordan Robert Dobson • find (ƒ) by Andreas Wahlström • inputField by Jordan Robert Dobson • VRcomponent by Jonas Treub • and most of my own modules like Firebase, QueryInterface, ParallaxComponents and giphy (with more to come) + many, many more All you have to do is to include the testDrive-code/snippet at the top of your project and then either define … testDrive.modules ["inputField", "giphy"] … to include specific modules OR simply write ANY function or class of those 50+ supported modules and testDrive.autopilot will AUTOMATICALLY download and inject the respective module for you. Maybe it's a bit too magical (as in too unpredictable), but I think it's a pretty cool feature regardless – you should definitely give it a spin! :) --- And yes, this is a terrible hackjob and all, but the primary goal of this thing here is to (hopefully) spark a discussion about the subject of providing and using modules, as the way those things work right now is, in my eyes, just way too cumbersome for a prototyping tool. Honestly, I wish this was of higher priority for the team. If you agree with me, let them know in this thread. (Also, if you want to have your module included or removed, please let me know.)

Happy Friday everyone 🍾 I'm trying to animate a circle like this great example, but its not working in Framer studio. http://share.framerjs.com/8quev4una33g/ Would anyone know why. Thanks!

Hi! Any idea why the rotated rectangle keeps changing its x and y location while changing the width? I'm trying to animate a pressed checkbox but it looks really weird.

Hi folks, I am working on a scroll component and need the following behavior to happen. Tap on a cell = cell height expands. Only one cell needs to expand on tap not all. Have you done this before? Pls suggest... Thanks!

Hi guys, I cannot seem to log in into Framer. I keep getting a No Connection error message, even though my Internet connection is working. I've tried rebooting the app, the system, re-installing the app etc but to no avail. Anybody who knows what to do? I'm using v96 (the latest version).

Not great with Fonts. Does anyone know the best practice to embed a Typekit font into a Framer proto? Thanks

Simple suggestion: would love the hotkeys labeled in the context menus, so i can passively learn them

I’ve been trying to mimic the equivalent of Sketch’s nested symbols and overrides in Framer code. https://framer.cloud/uFIEr Firstly, if anyone knows a cleaner implementation then let me know. Currently, for some reason, the blue backgrounds of each instance of the header are duplicated and draggable and I’m not sure why this is happening?

Hey folks, Is it possible to blur in design mode?

Hello guys, how to get custom font using in Framer Design to Framer iPhone Preview?

A bit more of a complex question regarding loading views with data. Is there any built in solution, or preferred method, to manage state of a view created in design mode, and then filled with data? Each time the data changes, do you have to completely destroy and recreate the content within the view? Or is there a way to revert to the view's initial state and then repopulate with new data? Hope that makes sense and thank you!

Could be a Framer Beta only issue - certain layers do not show up in the Framer Preview app, though everything works fine in Framer Studio and in the browser through Framer Cloud. Leads me to believe that Studio and Preview aren't talking properly :)

anyone else been seeing this? i've seen this issue for a few versions of Framer.

Did you know you can use Goo with Framer to make complete mobile games and absurdly awesome prototypes?! Time to level-up! Press ‘W’ on your keypad to fly up and either ‘A’ or ‘D’ to move my Goon around! https://framer.cloud/AaWBa

Hey guys, I'm trying to get real data from strava api (or any oAuth process), but when requesting the accesstoken with xmlhttprequest I'm getting the error "Origin http://127.0.0.1:8000 is not allowed by Access-Control-Allow-Origin" Does anybody have an idea how to solve this? https://framer.cloud/Sk0N0l2Ee

DrumComponent arranges layers on an animatable Y/Z "drum". Example: https://framer.cloud/NmVja/ Module: https://github.com/marckrenn/framer-marcsOtherModules/archive/master.zip testDrive.module "DrumComponent" While the component does NOT come with any interactive elements out of the box, it can easily hooked up to a scrollComponent or a draggable Layer to recreate iOS-style pickers. Other potential uses: Clocks, countdowns and -ups, speedometers, slotmachines ... This was written late last night in less than an hour, so please have mercy 😅 #thisishowiroll

How do I store a image in an array? I want to make a loop with containers containing diffrent images.

anyone knows how to tap a button and everything is reload?

How can i create a new layer and fetch its name from a string variable? for e.g. layerName = "strandA" new Layer -- name : layerName

I want this style of Apple Music , the shadow is the album pic’s blur. but I don’t know how to code it, anyone knows? Thanks so much.

Question. I noticed that when you have a layer whose parent is set to clip that perspective gets turned off. Is this by design, a limitation or a bug?

Hi! I'm trying to change a numeric value based upon a scroll event. So when an object is vertically scrolled from 0 to 300, the value should gradually grow from 0 to 300. Is this possible? I could not work out values in combination with a scroll component. Thanks for the help!

Is it possible to add a Layer outside the PageScroller content, but link it as the parent for each page?

Hello people. Is there a way to create a "image" grid from loops and arrays where the "cells" that makes up the grid have diffrent sizes? Do I have to make a grid that consists of more than one loop? I don't know if this makes any sense?

Hey guys, Is it possible to use the "input field" module from Jordan Robert Dobson from text layers created on design mode? Ex: Create a text files on design mode/target/create input field on code mode. Is there a tutorial on how to do this? Thanks!

i made a prototype based on a gif i saw on pinterest was just practicing cuz i got some time after the last project first time using "Design" section, and was quite useful https://framer.cloud/swYLS/ Reference -> Say 🤑 by Stan Yakusevich 💥 for Heartbeat.UA

Hey guys, How can I create a list of cards from Firebase data, from a profile card template created on design mode? I created ONE card, and successfully pushed data . How can I have a list of cards, for all data pushed from Firebase?

I’m trying to learn firebase (total noob) so I can populate data into a loop (database of users with names, email, location, etc…). I tried following the tutorial by Marc Krenn but I realized his use-case isn’t really what I want (i think?). I already have the database imported in my firebase project. What’s the best way to go about getting those values and plugging them into my loop?

Any hacks on getting a Framer project to run locally on an Android device? The goal here is to reduce any latency. I can get the Github open src working, but ideally I would just hack my project's app.coffee or index.html to get it running. Right now I'm getting a bunch of TextLayer errors. Most appreciated!

Help needed fixing an interaction/animation Hi all, I need some help fixing or optimising a prototype that I'm working on here: https://framer.cloud/iltXo When the users scrolls the content up the image scales up and the carousel hides. When the user scrolls down the image returns to it's original size and the carousel returns. The problem is that the performance is really poor and the scrolling affects the animation speed (try flicking the scroll up or down fast to see what I mean). Can someone suggest a better way of implementing this? I've also attached a video of roughly what I'm hoping to get to. Thanks! Matt

Is there a way to require a module that isn't in the project's .framer folder? Was hoping to do something like require("~/My client/My project/Modules/MyModule"), but no luck. It's a bit of a pain to keep making sure each prototype has the latest version of the shared modules for the project.

Is there a way to enable the Mousewheel on an autogenerated ScrollComponent? Setting the property does not work.

Hi guys! How can I start a radial color change on the position of the cursor? I know how to retrieve the cursor position with TouchMove but not how to turn that into a color animation. I'm having the cta on this page as an example: http://www.adidas.nl/climazone Thanks for the help! This what I got so far: # create button background bt = new Layer y: 50 width: 200 height: 50 backgroundColor: "lightblue" test = new TextLayer text: "123" blue = new Gradient start: "#05F" end: "0DF" radialAnimation = new Animation bt, gradient: blue #Probably need to combine the next two bt.on Events.TouchMove, (e) -> cursorX = e.x cursorY = e.y test.text = cursorX + " " + cursorY bt.onMouseOver -> radialAnimation.start()

Hi Framers! I was wondering if I can download the vector files of the icons framer provides in it's design tab? I need it for a static presentation to keep consistent with the icons in my framer design :). Thanks in advance!

Hey framer kids! When you push a Framer prototype to the Framer Cloud, is there a way to disable the sidebar on the left that displays the creator's user name, image and product description? I don't mind the branding, but I've had some users getting mentally "hung-up" on the sidebar during user testing Let me know and thanks!

Hi there! I need helpr to figure out how I can get this scrollOnmove to work. I have a list component that when scrolled triggers other layers. I like the "A Button" and the name and avatar face to animate at the Start and End of animation, simply put toghether with the top backgrond. Any touhgts?

Hey guys, does anyone know how I can detect if the wifi it’s on or off in your mobile? I want simulate this case example for display error messages, when the wifi is off.

Hey everyone, I’ve got my prototype working in a semi-hacking way, but I was wondering if anyone knows how to do this in a non-hacking way. Currently, the way I’m able to animate child elements of the copy is by targeting the element via the correct index of the children array. This works ok when there are only two elements to animate, but I’d like to add more animating elements. Is there a way to target child elements accurately other than using the correct index in the children array?

Here’s a brand new SliderComponent example of a Type Tester. It allows you to change the size, weight and letter-spacing of the text. Learn how to use the draggable.updatePosition() method to create an incremented slider, how to visualize values and more. Hope this helps! :-) http://share.framerjs.com/g27oweafsrps/

Hi Everyone. I've got a break between contracts coming up and I want to notch-up my Framer skills. I have basics - create layers and behaviours. Allowed myself 5 full days. What would you do in that time? Any great links? Thanks!

Hi, is there a way to set a default Font? I was thinking something like Framer.Defaults.Layer

Hi all, I just wanted to share a concept I've been working on for discovering movies using trailers: https://framer.cloud/ouOJl You can use the mouse/touch to navigate or use the left/right arrow keys. Thanks to the Framer team for making such a great tool! Matt

Hi! Anyone facing issue with launching Framer? Every time I open the app, it crashes immediately. I've attached the error screenshot. Do you guys know what could be the reason? Thanks!

Can someone please explain to me why this returns an error? rowThrow=()-> if rlayers[i+1].index/2==1 y=0 else y=maxHeight rowThrow() Thank you

Hey all, I am new to framer and am having trouble with changing screens on click. I am sure it is a small mistake somewhere but I can't seem to figure it out. When a user clicks on a picture of “anne” on the “home” page I want it to lead to a new artboard. But for some reason the new screen is appearing behind the scroll of the home page instead of over it. Any advice? This is my code: flow = new FlowComponent flow.showNext(Home) #message alert screen ANNE.onTap -> flow.showNext(Message_Alert) scrollbar.draggable.enabled = true scrollbar.draggable.horizontal = true scrollbar.draggable.vertical = false scrollbar.draggable.constraints = y: 0 x: 0 scroll = new ScrollComponent size: 1050 scrollbar.parent = scroll.content scroll.scrollHorizontal = true scroll.scrollVertical = false

In a recent project at work, been handling with many hi-fi images in one prototype, so I needed include image pre-loading step or disabling interaction until all images are ready for user to be able to use prototype flawlessly. I think there're already many existing modules out there, but there might be something new in my module, so sharing it out anyway :) There're three usecases. #1. Have array of image urls, load everything and draw prototype. http://share.framerjs.com/ojxo4rg9ps5o/ #2. Have array of image urls, draw prototype first and check progress. http://share.framerjs.com/qqgozodflrp5/ #3. No pre-defined list of images, draw prototype anyway and pull out image links and check progress. http://share.framerjs.com/xbdkmxxpe794/ Compare them. http://codepen.io/jimoong/full/xVereB/ Hope this being useful for some folks in this group.

Is there a way to apply borderWidth per side in code? I can do it in Design view, but when I go to change it for a particular side, it doesn't change.

Hi guys ! I'm trying to make a conditions and I need to compare the current artboard to an other one. Someone know how to achieve that ? Thank you :-)

Anyone know why I can't modify a layer that's targeted using childrenWithName? E.g. On click do something like this: Card.childrenWithName("Details").visible = false

Hey all, is there any way to resize an input field based on the length of it's value? I'm using the input module at the moment and I can't figure it out

I have an imported Sketch artboard inside of a vertical scrollable flow component. There is an accordion and onClick the rest of the page (layer below the accordion) moves downwards by increasing its y-property. However when the accordion is expanded, the rest of the page is cut-off. I tried to increase the height of the artboard together with flow.scroll.updadeContent() but it doesn't work. Any hints?

HELP NEEDED Struggling to get an array of pages to change page (from right to left) every time you click the 'Continue' button:

Importing from sketch -- has anyone had issues with showOverlayBottom positioning the modal in the center of the screen and not anchored to the bottom of the screen? I've even tried overriding the y property of the overlay and it didn't work. any help would be greatly appreciated!

Hi all, Does anybody have a solution to the problem of previewing a Framer (website) prototype at 1920x1080 in a browser? My preview shows up nicely but with a large white border around it. I've tried setting the scale in Framer to 0.333, and in the HTML file to 1, (and vice versa), along with editing the isFileLoadingAllowed() part of framer.init.js Any ideas/suggestions welcome. Thanks

Is there anyway to calculate the remaining screen space to centre content vertically when the Native Keyboard is up using Input Field module?

Hi guys, new to Framer and quick question: I'm designing in Framer with the iOS-standard SanFrancisco font. When I'm previewing my prototype in the Framer app for iOS, the text has a different style. How can I prevent this without setting all text in code?

Just curious. Can Framer scale text when the viewport size changes? Example: on Desktop size viewport I want a header to be 24pt. When I scale the viewport to mobile size, header changes to 14pt. Think CSS media query type behavior with breakpoints. Thanks in advance!

Hi all, Trying to create a function that changes the attributes of other layers in my prototype (e.g., you click on a button, the function triggers and changes the background color of the prototype). In order to make it as flexible as possible, hoping to pass the target layer, as well as the target attribute, through the function each time. But the attribute (in this case, its backgroundColor) isn't a recognized variable. And if include it as a string, Framer doesn't recognize it. Anyone have a suggestion on how to make this work? Attached an example to illustrate the problem

Has anyone build a full web admin/dashboard using Framer? Wondering if framer would be a good option, or would be too complex...

Dear guys, I made a module, DynamicLoader, to enable load scripts and stylesheets dynamically in Framer. In the past, we can't load external scripts and stylesheets easily in app.coffee. Instead, we had to modify the index.html to load 3-parties libraries and load all files instantly when opening framer prototype. Hence, I made DynamicLoader to help you loading web 3-parties libraries, such as Firebase, d3.js..., dynamically. Have a good time with DynamicLoader and please let me know your opinion! Here is the demo with chartist.js: http://share.framerjs.com/go6hise0lidu/ Check DynamicLoader here: https://github.com/LucienLee/framer-DynamicLoader

Hi everyone! I'm new to Framer and tried it with this project:https://framer.cloud/RLWPM, and I want to ask if it's possible to use modules with design mode? If so, then do you have any examples? Struggled a lot as a clumsy code starter, Huge thanks!🤕🤕🤕 The basic idea of the prototype is a stack of cards_layer which contains a single selection question, and the card move right or left depends on the answer. Each card has the same interaction. I started from the design mode and manually copy paste the function for each card (feels stupid and also it's difficult to expand the card number >< ) I checked the docs/tutorials of modules and loop/array but didn't find any example start from design mode yet. 🙈🙈

Always I had a question, why framer for prototypes or what's the plus for use, apart for interact on my own mobile? Help to the developers? why not use after effects, Flinto or Principle ? Can any developers answer me? :)

So what do you think about new Figma2.0? :)

Hi all, wondering if there's an easy way in framer to convert a layer into an image?

Hi all, I'm getting this error message with my framer prototype: Error: Can't scroll to this layer because it's not in the ScrollComponent. Add it to the content like layer.parent = scroll.content. Everything seems to be working properly, and I can't figure out how to get rid of this error. I'm not trying to scroll to a layer that's outside of the parent. I created the parent-children relationships in design mode, and I'm manipulating those layers in design. Any suggestions?

Quick spring question: what values do mass, damping, and velocity take?

Cash Money for Solution!! I need a working prototype by beginning of May and so far I've got 2 problems: 1. Mapbox Dataset integration is not working 2. Grid functionality works only partially At this stage I'm happy to pay someone to help me solve these issues in framer via fb or Skype. Comment how much you'd charge in USD and let's get this done! @Moderators I'm not sure if this post is against terms of use and I apologize if it is. Cheers

Check out my new Button module. Add, style and create buttons with custom actions and pre-defined behaviors.

I know this has been suggested a bit recently - it would be great to more easily create components in design mode, and port them over to code mode. Instead of using design mode purely like Sketch and then animating, to be able to create your base state and then push data through in code mode would be tremendously useful - seriously a game changer allowing us to rapidly proto with data to create a pseudo realistic experience :)

Sometimes I get lot in Framer Design and have no idea how to get back to the layers... Any solution? cmd+3 is not working.

Hi all, When importing screens from Sketch to Framer, the graphics in the preview tab appear pixelated. Does anybody have a solution for this?

For some reason, when I rotate a layer (layer.rotationY = 180) in Framer, the layer appears blurry/pixelated. If I set `rotationY` to `0`, the blurriness/pixelation disappears. Prototype is here: https://framer.cloud/rwrMJ For some reason, it doesn't appear blurry in the prototype link above, but it does in the preview in Framer. I've attached an image to illustrate the issue I'm having. Any help is appreciated. Thanks in advance.

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.

is there a way to draw a triangle * in the design tab?

Hi Every one, small question, is there a way to disable the dark layer when using ..showOverlay() on flowComponent? Thanks

Hey guys, I'm wondering about referencing a Layer from Json data. Say I: 1. Have some Json data I want to create buttons out of containing the text for the button + the destination (link) 2. Layers set up in Framer that correspond to the links in the Json data 3. A function that creates a button with a link to the layer via a FlowComponent 4. And a loop that creates a button for each item in the Json data that SHOULD pass in the layer it needs to link to as well. Any ideas on how to go about this? When the data is passed back into the flowComponent it's not being read as a layer:

Framer Design Gotcha: Assuming that the font you choose in design will be available on the prototype. T.T How do we make it so? I know how to make sure my font shows up with code, but not on a designed TextLayer... is there a special way to bundle fonts? or do we have to still go old school with layer.style in code?

I cannot repro this one -- but has anyone witnessed their designs suddenly shrinking (by a factor of 2, or * 0.5) upon reload in the viewport, and staying that way for some unspecified time, in which case it grows back again to it's expected size? i have no idea what's going on here. I'm even printing the width of the layer and it's saying 375, my iphone 7 port reads 375x667, yet visibly not stretching across the whole viewport. I have no idea how to fix it, it seems to fix itself after lord knows when. (a restart, and a removal of framer.generated.js don't work) please make it stop

I do enjoy using Facebook to come to this group, but I often find that I get sucked into the social media vortex when I come here. A friend of mine mentioned this in an article, and it's been pretty awesome so far. I can come here, share and contribute and not get distracted by Facebook's machine-learning-optimized time-sucking newsfeed.

Hi, Frameristas. I've not been that active here recently, but I'd like to welcome 2017 with a little gift. I've just finished getting my new AudioAccess module ready for prime time. It's now on github ready for your prototyping needs. What is AudioAccess? It's a module for Framer that simplifies and exposes a sound API so that you can: - enable microphone input in your prototypes - record microphone input - play back the recordings - can load and play back audio files from the local file system - can output the live input to speakers or headphones Happy New Year! (feedback welcome)

Hey all, has anyone experienced click/touch event fickleness inside a scroll component when testing on an actual device (in my case a Galaxy S5)? Specifically, when you have a conditional that prevents things from happening when scrolling is active to prevent unwanted actions when someone is scrolling with their finger but unfortunately the scroll event almost always fires whenever you tap the screen which makes click/touch events not reliable in this scenario. Even the demo example http://framer.com/examples/preview/#scroll-n-click.framer has problems registering a click/touch event on a real device.

Is there a way to fix the conflict between scrolling and tapping events? The problem appears when tapping events are nested inside a scroll component? My prototype consists of a simple grid that scrolls. On this grid there are several pictures that you can tap to interact with. But when you just want to scroll you will accidentally tap the images. Is there a solution?

Hey everyone! While creating prototypes I got sick of having to manually create the iOS status bar or import it as a Sketch layer in order to have realistic looking prototypes. So, I created my own module to mimic the iOS 11 status bar with a few features to set color, signal strength, battery level, show the actual time and use a blur effect on its background. I thought some folks here might find use for it so feel free to try it out and let me know your thoughts! Sample Project: https://framer.cloud/FfCCx Module: https://github.com/JonSul-LLC/iOS-Status-Bar

Hey all, designing for mobile for the first time in awhile and came across the need to use vibration for simulating global nav on Android. Works well in Chrome with the attached code, but it's unsupported in the Android Framer app. Any thoughts on future support?

I've been tinkering with generating simple interface sounds and simulating haptic feedback using the WebAudio api. For example, a low frequency pulse can be a surprisingly good simulation of a phone's vibration, and works well on a Macbook. Video + sample project

Does anybody handoff styles from Framer Design? Is it possible or shall I buy for developer another Framer?

Hey! There is an issue with running the prototype on iPhone. No errors in desktop Framer, but there appears an error in iPhone Framer app, when pressing the button: "ReferenceError: Can't find variable: animate"

Hey! Thanks for adding dynamic type! I was wondering if there is an easy way to format a value like layerA.width into a time format like m:ss, so i can display a time value based on the width of a layer that i am animating – anyone has some tip how to do that? Thanks!

Framer seems do not work on macOS 10.13 Beta. Even Framer Beta does not. Any quick fix?

Hello guys. Do you have UI issue ? When I'm using the framer webview and a real device, the position of my icons are not the same. It's broken on my real device and the tap doesn't work... (screenshots below) There is some weird stuffs happen also (picture 2) when I click somewhere else in a wide screen. Does anyone has this issue and may help ? Many thanks

Sanity check for us 😁 What is the biggest missing feature for you in Framer Design that holds you back from using it over other apps?

guys is there a way to stop a ShowOverlayCenter() from displaying the dark overlay, I just wanna take advantage of the simplicity of FlowComponent to create UI elements that appear and disappear without the black overlay appearing all the time

Will someone open up this very simple project and tell me what's going on, here? This looks to be buggy, and it's a major block on some work i'm trying to do here. Seems that I can't get reliable frame (or x/y) values from elements positioned outside of the viewport. https://framer.cloud/OLclG when i print the position of the boxes i laid out in Design, they are not the same values that i set them up in on design. when i throw them in a scroll component, they seemingly reposition themselves to reflect the values printed on screen.

I'm just getting a chance to delve into the new Design/Code workflow and had a question. I have a scrollable sidebar on a desktop web app I'm working on. I created all the elements in the sidebar that I want to scroll and I wrapped them in a parent layer and set that layer to clip so it doesn't show children that go beyond the parent's frame. Then in Code I wrapped the parent element in a scroll layer. However, it's not working like I expect. The children layers are getting clipped and moved around. Can you overflow content to a parent layer like that? Or should I have an empty layer there in Design and add the layers I want programmatically in Code? Thanks!

Hi All! This is my first post here and I'm relatively new to Framer. I'm trying to achieve this effect. It's a static image but you get the idea: sliding left or right with show one or the other of the visuals. Thanks!

Hey! I am trying to change the fontWeight (and fontSize) of a text on MouseOver. Right now it works but I can't make it fluid with the animation. Anyways to do it without making it two layers fading to one another?

Hey! I've been having problems with Utils.isChrome() method returning false on Chrome/iPhone and, ironically, Utils.isSafari(), is returning true (still on Chrome/iPhone). Any idea why this is happening?

Just a quick demo about checking the connectivity status via navigator.onLine. https://framer.cloud/JZkvS

When creating a movie from framer, does everyone just use Quicktime to screen capture? Or is there a better/more efficient way to do this? (click dragging to screen capture is getting quite tiring..)

Hey everyone! Yesterday we launched Dynamic Type for Framer. As with every release we've created a bunch of prototypes for you to play with and dive into the new feature. Check out this run tracker prototype featuring a countdown, timer and run stats! https://dribbble.com/shots/3693969-Dynamic-Type-Run-Tracker Full prototype https://framer.cloud/lBlfS/

I'm trying to apple shadow to png with transparency. Is there a way make a shadow only under the icon, not under the full box?

Hi all! I’m very excited to introduce Dynamic Type! With this release, we wanted to give you the ability to do more with TextLayers. Now you can set custom styling in Design, while manipulating the content of your TextLayer in Code. Read more about the release and check out some examples to play around with here — https://framer.com

I mistakenly typed wrong email what was in wrong email format ([email protected] without dot com) And now I cannot login again. No way to re-type email. Shouda having email format checking in input.

Currently using a scroll composition and scrollY. ScrollY's value updates as I'm scrolling but when I release and allow the layer to keep scrolling scrollY stops updating. Any idea as to how I can continually grab the scroll position even when I let go? Thanks!

Hey all! Does anyone know if you can use Utils.randomChoice without duplication?

Pretty excited about some of the things that this new release allows. This project creates a template card in the design view and uses https://randomuser.me/ to grab 10 user images and their associated data. The data is then populated into copies of the card. Every time the project reloads you'll get a new set of images and data. With this technique, you can really start designing with data. You can see in this video how powerful this is. Doing things this way forced me to make design decisions in a different way to account for longer location names, a variety of images etc. Feels like the future. We're getting there. Framer team, you'll also see a little bug here when I try to select the text drop-down immediately after changing the text's color. ;) https://framer.cloud/UyVBS

For those who still like using Framer Library outside of Framer, I've updated my framer-bootstrap project to grab the latest build of Framer Library: https://github.com/alexchantastic/framer-bootstrap

Can anyone give some pointers on how I might build a form text description field. I'm trying to simulate a text field with multiple lines already in it and you are clicking into it to edit. I've been playing around with Jordan Robert Dobson's InputField class, but this only seems to work with single line text input. Also thought this example might help, but the link no longer works https://framer.com/examples/preview/#chat-bubbles.framer :(

This little weekend fun project turned into a mini nightmare thanks to the TouchMove "event" differences between browser/phone. I hacked it a bit with this line: if event.offsetY y = event.offsetY else y = event.pageY Any suggestions on handling that different in the future? Anyway, for the fans of First We Feast #HotOnes, a unnecessary Framer rendition of the Scoville meter. 🔥🌶

Hello guys, there is the simple prototype https://framer.cloud/jSozD/ with a function inside that allows you to clean print-console while you are coding. Works fine for me ;-) #print.clear()

I mistakenly typed wrong email what was in wrong email format ([email protected] without dot com,...) And now I cannot login again. Shouda having email format checking in input.

Hi, Framer crashing every time I open in iOS11. It was fine yesterday...

FramerJS Seattle had a much more cozy meetup for number 19. We demoed projects, made up zany prototypes on the spot, and drank a fair amount of beer. Thanks to Jordan Robert Dobson and Rich Zarick for hosting. This community rocks.

Hey guys, I cannot use Framer even though I purchased a currently valid license. As I understand I should be able to run framer on two mac. I t works on one of them. *Personal mac:* - Pushed into trial even though me valid license shows up under Framer › License with the expiration date in the future and the correct asdactivation number. *Company mac* - Trial Expired - Activation Error "no activations left for this number" This is frustrating and confusing. It might be caused by lack of usage/updates over a longer time — because of a shift of priorities (as this is likely to happen in a startup environment like mine :/)

Is Framer app working 100% on iOS 11? Thinking of upgrading the beta, but worried that Framer won't work...

why framer doesn't have scroll event in the left picture?

Hello guys, i start this weekend in Framer. And i don't understand how to create a element through code and this show on a specify page. The element renders only on the first page. How to make this render in the second page? Thanks a lot!

Hi everyone, is it still possible to add Framer prototypes as web apps on your iPhone home screen? When I add to the home screen and open it back up I still have the safari UI. I haven't touched anything in index.html and it is set to allow as a web app so not sure what happening here?

Is there a way to allow text to overflow a textbox? Struggling with the bounding box breaking ligatures

why the grammer is out of date ? could Framer modify the docs？？ layerA.onClick->

when i click the board ，the syntax always disappear？why

Hi! 🙋‍♀️ I am working on an embedded UI prototype with the size of 1020x200px. I have custom sized artboards with this resolution, but I can not get the preview to show it. The minimum height in the preview is 250 it seems? Do you know a way to custom the preview to the right size? Thanks!

I can't login to cloud anymore

How do you loop a design layer? As in, you made a group of elements in design mode, and now you want to loop them. I can do it just fine if I code the layer in. Design/code confuses me because you don't call the layer yourself in the code.

Hi, I'm having some trouble with Framer Design/Android. Here's how my design looks in Framer vs how it looks on an actual phone (Nexus 5X). I'm having similar issues with designs imported from Sketch, too. They look fine within Framer (or Safari browser), but seem to have different coordinates when viewed through the Framer android app. Am I doing something wrong, or are these known issues? Prototype: https://framer.cloud/bLjri

Hi guys. In design mode, when I drag an image from Finder on to the Artboard, I can't see the image. The layer is transparent. In Code (and device preview) it is visible just fine. What am I doing wrong, please? Thanks!

Hello every one, does any one have an idea of how to interact with MapBox datasets inside framer.. Say i already have the map up and working within framer and the map have a dataset icon which i would like to interact with, change properties like opacity, scale, and even to give it onClick/Tap actions. Would very appreciate it! Thanks

Hi guys, how can i set the transparent value of the knob of an silder? I dont want an transparency here. THX.

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!

Having some difficulty with flow components. I have a header and footer set by default. I then overlay a layer on click, and then overlay yet another layer on top of that on another event. The issue is, when going back from the third layer, the footer randomly appears on the second layer, even though it is overlaid. Seems like a bug. Any workarounds?

hello guys, I am studying the docs, kind of re-learning things, so far it's going great but I came across this example in the Objects section and I can't figure it what is it about " The string-based notation is useful when you want to generate an object with different states in Framer. layerA = new Layer # Add states within a loop for i in [1..3] layerA.states["state#{i}"] = y: i * 200 " Can someone elaborate? , What are they're referring to?

Got no response, is anyone experiencing the Framer App crashing?! on iOS 11? A big part of my job is putting my ideas into the hands of others and it won't even open on iOS 11...anything?

Hello all, has anyone tried to run a Framer prototype locally on an offline device?

[SOLVED] getting an error when initializing the flow component :( TypeError: undefined is not an object (evaluating 'this._stack.length') I think, the error is on line 82 of FlowComponent.coffee (but I could be wrong) get: -> return @_stack[@_stack.length - 1]?.layer

Hey all - am I missing something w/ the new Text Templates? textToChange.text = "${downpaymentAmount}" textToChange.template = 40 Doesn't seem to change anything in my proto!

i'm trying to animate a whole group, but it doesn't seem to see the group name as an existing variable in the 'code' side of framer. Why is that?

Is there a way to import custom SVGs into a prototype so that drop shadows are applied to their shape like icons in design view, rather than their bounding box?

Hello. I have 1 layer, height = 1000px I have 1 button When I click the button, I want the layer to scroll or "animate" to an x coordinate of 100. The goal is to have a single long layer that I can visually design into different sections. Final design will have "previous" and "next" buttons to scroll to different sections.(by changing x value) Easiest way? Thx

My macOS is 10.13 Beta (17A315i), Framer v97 is always crash, what should I do?