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

What is Framer? Join the Community
Return to index

January 2018

January 01

Angga Risky Setiawan
Hi. What's wrong? I am trying to make an animation for my Header using scroll animate. The first animate is working but when I am trying to scroll up the header is gone. Project file: https://framer.cloud/jjyma
3
Neil Everette
In the new framer, it doesn't appear as though you can target a shape to manipulate it in code view. Am I missing something on the new update?
4
Cordova Putra Handri Ansyah
Good evening from Indonesia, and happy new year ! 📣 It's 9.56 PM here, and I finished made another tutorials, which is building and redesign Quora mobile app UI/UX, which is fun to do and work with. Watch now : https://youtu.be/qRL5kLS1hHs Hope it helps the community, and thank you for all the support (377 subscribers now, thanks a lot !). Let me know if I missed something 😉
1

January 02

Colin Sygiel
Is it not possible to target a shape (i.e. circle, square)?
1
Colin Sygiel
Hi all, I'm relatively new to Framer and started working on prototyping a web application, with multiple pages. I got a few questions: 1. Do you mainly use the design tab to design all pages with content and then apply code where needed, or do most framers work mainly with the code tab? 2. Related to the first question: Is it common practice to have a hybrid approach where you design components and then use code to structure components on the page/make re-usable? 3. How do you structure the hierarchy/organization of your pages? Do you make a FlowComponent out of the homepage and then link all other pages using flow? Big thanks, happy new year!
1
Ryan French
Hi. Happy new year to all. Since I've updated to the new Framer I can't work out why this animation now isn't working. I'll attach the file below. Basically, I am trying to make sure the yellow anchor box is above the blue box. Does anyone have a solution? I think it might be one of those really simple things I am overlooking :)
1
Dawson Beggs
Quick question, is there any reason why I may not be able to target a layer in Framer? It seems sometimes I create a shape (a rectangle for example) or an artboard.. (and use camelCase to name it) however - am not able to create a target... on that layer. Thanks for the help!
2
Jono Hunt
I tend to duplicate the same elements (buttons, animations etc.) often, and have managed to find out how to reuse the text style and animation for different layers (see the 1st screenshot). I've been trying to do the same with layer properties, but haven't been successful. If I could make them as a variable I could edit them once, and (for example) all the buttons I've created would update and look the same. You can see what I've tried in the 2nd screenshot. Any ideas on how I can write a layer's properties as a variable and then just use the variable for different layers? I guess I could set each property as a variable: myX = 100 myY = 200 myOpacity = 0.5 then layerA = new Layer x: myX, y: myY, opacity: myOpacity layerB = new Layer x: myX, y: myY, opacity: myOpacity etc… Just wondering if I can do it the way I tried in the screenshot?
5

January 03

Trần Thanh Vũ
Hi framer! I have a problem when using Touch event function. I test with this simple code: Apple_iPhone_8_Plus.onTouchStart (event, layer) -> print event On framer studio, its show: » <MouseEvent {isTrusted:true, point:{x:3.238276163736979, y:439.3815104166667}, contextPoint:{x:3.238276163736979, y:439.3815104166667}}> While on Frame Preview app (iOS) it shows only: {isTrusted:true}> So I cannot access event.point on Framer Preview. All of my code which use event.point.x or event.point.y are useless. Does anyone know how to deal with it? Thank you very much.
1
Keith Lang
I'm on 106. If I update to 107, can I continue using my project (with many artboards) or will I have to start something new?
3
Camilo Sanchez
Hi, I don't know if this has been asked before here but how can I handoff code to velocity.js? There's so little documentation on that. Thanks!!
1
Sauraj Babu
Hey everyone! sharing a small homescreen concept i made in framer (also included the file). https://dribbble.com/shots/4059717-Trillbit-Home-screen ( like and follow <3 )
1
Angga Risky Setiawan
Hi. How to make an animation like Uber map does? When you 'Confirm Pickup' the map has an animation (angel, scale, etc).
1
Cordova Putra Handri Ansyah
Good day from Indonesia ! Recently, I got a message from someone at Facebook to re-create Instagram app-design via Framer. Well, then I tried to build one, and customized it as a dark mode Instagram 😉 Link : https://youtu.be/v3p4-U8e5UM Hope it also helps the community, and I beg huge thanks for everyone whom support my works so far. Sorry for some stutters, I got some fever recently. PS : Thank you, Framer for recently sending me some goodies and planning to put my tutorials on their website. I do hope that it helps anyone whom interested to explore the realm of UI / UX.
0
Laura Leonard
Hi, I'm a beginner so apologies in advance if I sound silly. I'm following the Framer intro course and I'm on the images and effects video. I can't see how to clip the album artwork to a rectangle as the demo shows, but I understand that's in an older version than what I'm using (v108). I've tried a frame/shape in case that makes a difference, can anyone advise please? Also the images I drag in are blank for some reason. Is this because I'm on a trial?
3
Nathan James Yates
SOLVED: Framer Design Mode: Targeting Issue – Hey Framer Community, maybe I'm being dumb but have a question regarding targeting in the new design mode. Why can I only add Targets to Frames, layers are non-targetable for some reason. See attached GIF.
3
Melvin Eudell Hogan
Note on auto-nesting. It appears auto nesting with text objects only works if you first nest from the frame sidebar by dragging your text into the frame you'd like to nest it in. If you then drag it out and back in ( although not sure why you'd do this ) it will auto-nest.
1
Julian Manuel Varanda
Hey everyone, quick question. How do I enable mouse scrolling on scroll components? Here is my code referenced from Components snippet: # Variables rows = 16 gutter = 10 rowHeight = 200 scroll = new ScrollComponent size: Screen.size scrollHorizontal: false scroll.content.mouseWheelEnabled = true # Loop to create row layers for index in [0...rows] cell = new Layer width: Screen.width height: rowHeight y: index * (rowHeight + gutter) parent: scroll.content backgroundColor: "#00AAFF" hueRotate: index * 10 Even with "scroll.content.mouseWheelEnablced = true" I still can't get mouse scroll to work.. Am I missing something? Thanks!
1
Hans-Joachim Belz
A beginner' s question about the Design Guide in the "Guides" section framer.com: The text section "Layout & Hierarchy" seems to suggest, that automatic hierarchy (also called automatic nesting) will work on rectangles (or more generally layers/shapes) - see picture from the video on the web page. But the article "Frames vs Shapes" from help.framer.com states, that only frames provide automatic nesting. Now, I am confused. 😊 Am I getting the concepts wrong? Or are these different versions of framer?
1
Paweł Ludwiczak
Do you guys have any tips & tricks for improving animations performance on Android devices? I've got a prototype with bunch of animations/transitions. It works perfectly fine when I preview it on mac's Framer app but when I try it on Framer Preview on Android device (in this case: Samsung Galaxy Tab S2) it becomes a bit laggy: - reaction time on events (click/tap) sometimes feels longer - all transitions and animations look more choppy So I wonder if there are any special tricks or best practices to make everything faster and smoother on devices that don't like moving elements :)
2
Cordova Putra Handri Ansyah
Good morning from Indonesia ! Another tutorial's published. In this video, we're going to combine every basic to advance knowledge to build and carefully design Twitter UI (Dark Mode) and it's Moment feature as well. Watch here : https://youtu.be/bGfCpyKPLbE Hope it helps the community to grow better. Thank you for everyone's support. Let's make 2018 a good year for Framer community worldwide to grow greater. PS : Let me know if I missed something along the way 😉
2
Dawson Beggs
Is there a simple way to turn off "overdragging" - may not be the correct term, on a scroll component? Thanks in advance!
2

January 04

Victoria Koval
Hey everyone, I need your advice! how do you upload your animation from framer to dribble for example? I totally cant figure out it... I would be really appreciated =)
8
Nathan Llewellyn
Can anyone tell me what .push does?
6
Michael Weisert
I need to add a class name to a framer layer (not the 'name' property). Trying to leverage a javascript library in Framer that requires I add classnames to the div elements. Any suggestions?
1
Shkodran Arifi
Hi guys, How can I make the rotation speed based on drag force/speed ?
2
Nique Woodhouse
Hey everyone! I was wondering if anyone knows a way to customise the transition from one flow component to the next? For example: splash_img.onAnimationEnd -> flow.showOverlayRight(onboarding1) animationOptions: curve: Bezier.ease time:0.5 Or am I being misguided/not understanding how to use the tool? (If context helps much: I am using the design tab to layout each frame/artboard of an onboarding experience. After an animation has finished on the first frame/artboard, I want to transition to the next frame/artboard. Thanks so much for any help!
0
Angga Risky Setiawan
Hi, someone please help me how to make a firework when I press the button. What I did now is manual. Is there an automatic way to do that?
0
Groingrugroin N'Golo
Designer question here. I'd like to be able to create a list of interactive text inputs, to make like a todo-list, with all elements on top of each other, like I could do with a basic array. So I'm using InputModule but I'm not so sure about the way to code it. I managed to do it but I believe it's really not the best way do you have advice to make it more clear ?
0
Roma Klyukin
Hey, guys! What is the best workflow for prototyping and show up on dribbble if I don't want to use device images in fullscreen view and still need downscale preview in code mode because of small notebook screen? Thanks in advance!
0
Joseph Brick
Hi! I'm playing with force touch (onForceTapChange, etc.), modifying a sample from the Framer Book, and it works like a champ when in Framer preview (using my Mac's trackpad). But the cloud version doesn't respond to any of the ForceTap messages using the same trackpad. Any ideas? https://framer.cloud/rHqxZ
2
Yasin Arık
SOLVED: It's pretty basic by using a "directionLock = true" property. Hi fam! I have been enjoying Framer trial for a few days, thankfully :) I asked about if it is possible to run Framer on a "H*ckintosh" Answer is, yes it runs flawlessly but it took a week to build and successfully run macOS ( 10.13.2 17C88) and I was about to freak out. (PS: I'm ashamed for pirating but in the end, depending on the result of my project, I will certainly buy a MacBook. It is a win-win situation for both me and Apple.) As I searched many articles on Medium, videos and resources before I started using Framer, I was able to do a very good start. I am currently trying to create an Instagram copy. I don't want to use any manual implements. In other words, I want my prototype to be based on generation with code. Even making a reproductive and real data populated (JSON etc.) copy of the main feed tab in Instagram is enough for me. I will share the results and contribute to our active and helpful community. My question is: So, I can create pageComponents in a scrollCompenent as we scroll through posts in Instagram feed, using "for loop". And pageCompenent is used for multiple photos in a post. The problem is when we change the pages in Instagram to see other photos in a post, Instagram feed stops scrolling and vice versa. When we scroll through posts, Instagram detects it and stop changing pages. I tried using "if" statements but couldn't make it work. How can I do it?
1
Cordova Putra Handri Ansyah
Good evening from Indonesia. Dear all respectful members of worldwide Framer community, my project files are currently on upload process. In near future, project files are accessible through my video public shares as usual on this group, Twitter and YouTube videos. Thank you for all the support. PS : Thank you, Framer for making me the official thumbnails of the videos. Later, videos are publicly accessible through Framer official website 😊
0
Adam Mazurick
This may sound silly, but I want to be as inclusive as I can in my prototypes. I want Women to be well represented in an upcoming project. In preview all the hands are male if I am not mistaken in Framer. Could we add some Women? I frequently use these mockups.
0
Bob Zubkoff Jr.
I am having trouble getting something to work. I am trying to create a sticky nav. similar to this https://www.agdaily.com/ So there would be an ad or content above the nav, then when the nav bar reaches the top of the browser, I want it to stick and you should be able to keep scrolling through the content. I need to make this happen with a flow component if possible. Can anyone out there trouble shoot this? I have a quick mock up file link here, it wouldn't let me attach for some reason. https://we.tl/ncAWG4Hh2K
1
Jon Arnold
Is there a way to get the Tap/Click event to work while the end of scrolling is still happening (momentum still running)?
3
Oscar Martínez Germán
Hi, how can I blur and focus the input layer
4
Michael Weisert
Does anyone know how to make the preview not snap to the code editor? It makes Framer nearly impossible to use without a second monitor (working on a desktop app and preview is pointless unless I can make it larger).
2
Ania Banaszek
Hej hello! Is there a way to add states to audio 🎶🎶🎶 files? I'm trying to recreate a simple play/pause button behaviour when on the first click, audio starts playing, icon changes to "pause", on the second click, audio stops playing, icon changes to "play" state. While I can handle the icon changes with states I can't figure out how to apply the pause state to audio.
7
Jacky Lee
Are there any ways to make scroll.mouseWheelEnabled = true scrolling inertia behave the same as the native browser?
1

January 05

Anton Kosarchyn
Hi, does anyone faced the performance issues with the textLayers? It seems like they're forcing the synchronous layout render each time the prototype loads and during interactions. It's ok if prototype contains the few of text layers but could cause drastic performance flaws when there are plenty of them especially during animations. Noticed this when tried to debug my prototype in Chrome dev tools.
7
Nathan Llewellyn
Is there any way to create an if statement where the condition is checking if a certain item from a list was clicked/selected?
4
Paul Kooi
Forgive me if this is simple. I have a container layer with a loop running inside it creating a number of layers. When the width of the items created in the loop exceeds it's container. I'd like it to wrap following the standard box model. Can't seem to get this to happen. Thanks in advance for the help
3
Satbir Arora
I have a layer eg. "button" with blue color and I have defined states as one (green) -two (red) -three (yellow). Now I want to switch back to original state i.e blue. Can I? but without defining the color and using any reset or previous command. Any idea? Thanks,
1
Cordova Putra Handri Ansyah
Good morning from Indonesia Hereby, I am sharing some of my recent project files for anyone to learn and explore the depth of Framer awesomeness. Messenger : https://framer.cloud/PmdYI Instagram : https://framer.cloud/Tlqnj Quora : https://framer.cloud/VEGOE Twitter : https://framer.cloud/amjYP PS : Please use the file wisely. Hope it helps !
0
Neil Everette
I have another small bug that is occurring. This one in the mobile app. On my flow component, when I call flow.showPrevious() it opens the bottom menu. In this movie, I'm tapping the back button - which calls the flow.showPrevious() method. You will see in the video that the bottom menu keeps opening up.
3
Robin Fox
So I've been working on a prototype where when a user clicks the edit button, they're able to delete selected cards. That part seems to work just fine, however I seem to be having trouble when there are two cards left. Instead of moving to the left edge, I seem to have a residual "border" layer taking up that space, and so the two remaining cards don't move over. I've been using this old prototype for reference, because it's what I'm trying to recreate, just on a smaller scale. So a lot of my code I use comes from this. http://framerjs.club/photo-gallery/ I made a small video showing the problem. Does anyone know why this is happening? https://drive.google.com/file/d/1MnNmKpt0ev0qIYSmE1oml5UYgHZtzrHA/view My prototype https://framer.cloud/EnCGh
1
Oleg Frolov
Hi there! Tried to experiment with classic UI controls in terms its AR/VR using.
0
Benjamin Den Boer
Here’s a Framer example I’ve been playing with, one that highlights how to design with real data—in this case, BTC prices. 💵 ✅ Load JSON files ✅ Rendered with SVG Polyline ✅ Convert currency ✅ Display historic data https://dribbble.com/shots/4065235-Framer-SVG-BTC
2
Jaanus Kase
Hey guys. What better use of Christmas holidays than playing around with Framer FlowComponent. I ran into a few things I can’t quite figure out. Essentially what I am doing, is setting up two artboards side by side in Design view, and then doing a FlowComponent custom transition between them in Code view. A few questions around that. 1) (how) can I control the custom transition animation timing and curve? 2) how do I set up onTransitionStart handler? On the transition object, or FlowComponent instance? I can’t seem to get it to fire, and I couldn’t find any examples. 3) the reason why I need to hook into onTransitionStart is that since the frames/artboards are next to each other in Design view, the x and y coordinates are 0:0 only for the first one. So in order to make them appear on top of each other, I thought I’d hook into onTransitionStart to reset the coordinates of affected frames in code while keeping them nicely separate in design view, but maybe there is a better pattern/best practice for resetting these positions for transitions?
6
Harald Stangl
Hey guys, does anyone know how to stop a draggable or scrollable that is moved by momentum? Like when you flick the contacts list on your smartphone so that it scrolls by itself and then tap once to stop the scrolling.
5
Nathan Llewellyn
In this example here each time the create button is clicked, a new row is created in the UI. In the code, the new row layer is pushed into an array. What is an efficient way to make each new row clickable?
1
Vladimir Strashkov
Hey Framers, I need your help! I have a strange issue with pixelated lines in iOS mirroring app and mobile Safari. On the laptop the project seems to be fine – the lines are as straight as retina could get them. But on iPhone suddenly some of the lines are stepped and pixellated, just as if the screen PPI has dropped down for this specific element. Here's a project you can see the bug in https://framer.cloud/sictD https://dribbble.com/shots/4053651-004-One-More-Card And the screenshots illustrate the issue. Any thoughts why this might happen?
1
张梦田
For Star Wars fans -- https://dribbble.com/shots/4070671-BB-8, https://framer.cloud/OsYZV
1
Harald Stangl
Hi, is there a way to apply momentum to a Draggable or the content of a ScrollComponent via code?
0
Johann Kasuch
hey guys, for my new portfolio i had this idea of animating the outlines of my initials by device orientation. added some behaviour when scrolling content too. mobile only: https://framer.cloud/IriLE
0
Neil Everette
I've been having an issue with Framer studio where the UI will suddenly disappear, and only reappears once you zoom out to 10%. This happens on multiple macs in our office. Attached is a video to demonstrate.
7
Cordova Putra Handri Ansyah
Good morning from Indonesia In this tutorial, I am recreating Facebook Messenger by implementing the symbol modules as requested by a good friend whom work as a Product Designer in India. Link : https://youtu.be/FK8cJ_2R-j4 The project link is included on video description too. Hope it helps the community to grow better.😊
2
Angie Marie
Hi all - I did a search, but couldn't find an answer. I need to make a quick tree diagram that allows the user to collapse/expand sections (similar to a folder structure with collapse/expand arrows on the left). Any thoughts on how to best approach this?
11
Johann Kasuch
Hey, I'm experiencing a strange bug in the framer ios app. it seems like the proximity sensor put's the app into standby. Running latest iOS and app version, with framer v106. Anyone with the same problem?
2
Joe Day
While loops. Why does Framer Studio not like them?
5
Camilo Sanchez
Hi, is it possible to have layers with gradients with multiple color points in framer? I read in the docs https://framer.com/docs/#layer.gradient that you only can have a starting and an ending point. I'm trying to animate a bar with multiple gradients like this one. Thanks in advance for your help guys!!
4
Josef Richter
Hi Framers! Udemy has huge discounts and you can grab this Framer course for $10: https://www.udemy.com/interactive-prototypes-with-framer/ Why I'm posting this? There's a lot of questions from newcomers here that stem from the same problem: lack of understanding of elementary coffeescript.. While I'm a big fan of "learning by doing" and strongly encourage it, at some point, we all need to take two steps back and (re)learn the core principles to give our knowledge some solid foundation. Trust me, it will pay off. And don't be intimidated by coffeescript - it's the most human-readable and friendly language ever created 🙂 P.S. I'm not affiliated with Udemy, nor the course author, I haven't even taken the course myself. But does seem to have coffeescript basics covered and there's the promo, so I though I'd share.
1
Michael Weisert
Hey everyone - I have a prototype that integrates a 3rd party library. This library allows you to drag around the boxes on the screen. When running it in preview, it will only work if I hold down the command key. In the website, it doesn't work at all. I'm guessing I need to enable something?
2
Yasin Arık
SOLVED: .slice() and parseFloat() commands do the job. Hello everyone, I want to create a mini database for my prototype. I have plenty amount of image (more than 150) and I want to place them into photo holders in an order. Let's assume there are some rows and columns to be created by code using loops. What came into my mind is that if its possible, I want to give such names (or ID numbers) to my image files that "says" the row number and column number (maybe parsing the ID string but I don't know). For ex. photo name list = [101 102 103 201 202 301 302 303 304 305 401 402 403 404] When it reads "101" it is the first row and first column. 101 102 103 201 202 301 302 303 304 305 401 402 403 404 How can I make this conversion in Framer? You can tell the solution or ideas generally. If you go in to details, it would be a favor but the general logic and maybe some commands are enough for me to research. Thank you sooo much :) ************************************************************************* EDIT: It will be a custom layout. I can already generate posts and photoPages with random numbers and random photos. Now, things are going to be more specific. The first number in "401" is "4" which will be telling Framer to do a for loop for 4 times. This will generate 4 Instagram posts. The last number in the ID will be telling Framer (For ex. in "305" it is "5") to do a for loop 5 times. In this way, I will be able to create Instagram posts and photo pages in each Instagram post just by using a photo ID list. I will update the photo ID list. I do not want to use hard coding which tells how many photos will be in that particular post and how many posts will be created. Lastly, I will simply call and place all of the images to their places that I create.
4
Jaanus Kase
There’s a bit of API inconsistency that’s driving my OCD a bit nuts. On a FlowComponent, showPrevious() goes back multiple steps in a stack. The layer state API only has concepts of “current” and “previous”, so layer.animate "previous" goes back only one step, and if you repeat the call, it just keeps cycling between latest two states, no matter what happened before. Is it possible to do a stack of states that you can unwind also for layer states, similarly to how it works with FlowComponent?
1

January 06

Iván Flores
I just publish a new Framer Module to use Mapbox JS out of the box, it only requires the access token (which it's free). It has options to load custom styles, define size, zoom, center and even use the API to add markers and animate them. Check it out, all feedback and forks are welcome. https://github.com/NocheVolta/FramerMapboxJS It is worth mentioning that this module is inspired by John Sherwin's project on how to load Mapbox in Framer.
0
Joseph Brick
I was looking in the Framer github repository, and noticed there's a component (undocumented) called CircularProgressComponent. So I goofed around with that and made a pie chart class: https://framer.cloud/ukhnY [EDIT] Fixed the bug that scattered the slices everywhere at certain resolutions
1
Jonny Howle
Can anyone help me by trying to open this prototype in Framer Preview https://framer.cloud/qibjz ? This is my first time using Framer and when I use Framer Preview (both from tethering over wifi or opening a framer cloud link) my prototype is simply a white screen. It is just a static design at this point. No code applied.
1
Camilo Sanchez
Hi, guys @ Framer I found something in the docs you can update here: https://framer.com/docs/#color.models
0
Josh Peters
So I've use a For loop to build out elements for a vertical bar graph. When they are created they are generated from the maxY point going upward, but when I create a function to change height randomly on an event, they grow in a downward direction. How do i get them to alter the height going up instead?
7

January 07

Josh Peters
I bound a shortcut to Create Target, but it doesn't actually work. Is this a technical constraint? This would be a nice workflow improvement.
1
Jangala Nikhileswar
Trying to recreate a card expansion/ collapse interaction but when multiple cards expand, the bottom cards are being clipped. Have tried to scroll.updateContent() and it is still not working. Can any one guide me on this! Here is the Framer link
3
Eduárdo Martinez
Hey.....soooooooooo since we are all nerds here (is nerd even a thing anymore?) check out the color trends from Pantone for 2018 & 2019 on my blog im trying to make something. Just trying to share my love for art with graphic design blogs and other groups. Have fun designing...after you read this... :D
0
Armand Arana
Is it possible to create an icon in sketch and add it to the framer library of icons?
4
Benjamin Den Boer
Hey folks. Here's a new PageComponent example with page indicators. You can set a custom amount of cards, and the indicators will update accordingly (and stay centered). It also every-so-slightly animates cards on page switches. Included properties 'n methods: - page.horizontalPageIndex() - page.animationOptions - page.on "change:currentPage" - page.previousPage Hope this is helpful! :-) http://share.framerjs.com/x0li6cnk4pc4/
12
Chris Wang
hey Framer crew, is customization beyond changing the preloader image possible?
1
Jack Bush
Hi, I can't seem to make one shape a child of another shape, or target them. Is this a bug or am I doing something wrong? Thanks
1
Krijn Rijshouwer
Hey all! Just shared this colorful static book store design we used in last weeks design release (also included the file). https://dribbble.com/shots/4048190-Book-Store-Designed-in-Framer I’m also going to give away 8 Dribbble invites. Have a chance to get one by sharing your own designs that are made with Framer in the comments below!
10

January 08

Neil Everette
Midway through my prototype, my footer disappeared from my Flow Component. The content inset is still at the bottom and shows an empty spot, but I can't seem to get the footer to show up again. Any ideas?
4
Konrad Bayer
I have created a button class module. Is it possible to draw a frame in design mode and assign this to behave as an instance from the button class in code?
4
Niels Flindt Koelmeyer
Does anyone know what I'm doing wrong here? Trying to make a sidebar with some list items that each has three states - default, hover, clicked - basic tab stuff: Only one item can have a clicked state at a time. Yet somehow, I'm running into errors: 1) I can have multiple items in clicked state and 2) onMouseOut, a clicked item will have both a Default state and a Clicked state. Does anybody have an answer? Thanks https://framer.cloud/iwGET
2
Fabian Degenhardt
In the latest version, when i draw e.g. a rectangle in Design-Mode i can't target it anymore when hovering the layer. I can only target Frames … Can anyone please tell me if i'm overlooking something? Thx
3
John Smith
Is it possible to change the direction of how pages progressively disclose when calling the showPrevious() in a flow component?
1
Ian McClure
Is there an official place to report bugs in Framer? Should that be done on the Git page? I've stumbled upon a couple minor things.
1
Stan Tan
[SOLVED] Hi all, im missing something here, but dont know what's that. How do i not get Negative value when click on minus button? :/
1
스시
Hey guys. plz help me. I want make the interactive grid when i touch screen. In sketch, I made many rectangular and I grouped them. so,I thought I need the "rectangular's content.y" from sketch. Is there a way to solve it? good day guys
1
Rohan K
how can i use scrollToPoint or scrollToLayer with the flow component? Neither of those seem to work with flow.scroll
1
Cordova Putra Handri Ansyah
Good evening from Indonesia This is a special one hour length tutorial video which explain how to carefully design and prototype YouTube Video Player using Modules. Watch now : https://youtu.be/XOmX_Ti9apk Hope it helps the community to grow better ! Notes : My tutorials are available on Community Tutorials section in Framer official website, thanks to those brilliant and awesome guys at the company. Happy learning ! 😊
0
Ashwin Khurana
Trying to learn how to best chain animations, specifically for fading in/out different text layers. Can't seem to get the second text layer to fade out like the first one did.
4
Adhithya R Kumar
So how do I use the flow component for Android prototypes where the bottom system navigation does not animate but I need the page to animate. If you look at the example below, the system navigation animates as well. Any ideas on how to do this?
2
Pratik Shah
Hi everyone! I have two Dribbble invites to give! How to get one: Send me a link to your portfolio or your best dribbble shots (800x600 / 400x300 ) and a link to your profile on [email protected] Winners will be announced on January 15. Good luck!
1

January 09

Patryk Adaś
Has anyone tried face recognition in Framer?
3
Tem Wong
Framer auto complete with Sketch import is not working since I don't remember when, does any one know how to fix it?
0
Neil Everette
I'm having trouble getting an overlay to show over a flow component. Any idea of what I'm getting wrong? In the prototype, tap on the toggle button in the footer.
2
Chris Wang
I'm trying to make a slider for page scroller on desktop web, what's the best way to make it Auto-Hide when scrolling stops like how the native Mac scroll bar works? I tried ScrollAnimationDidEnd but it only works for dragging events, not mouse scrolling. here's an example of making scroll bar for mobile.
0
Jean-Michel Proto
Good morning Framer, My aim is to make a transition between two amounts in a text layer as smooth as possible. I've set numbers to be monospaced, and used the template formatter to display two decimals. However, not as smooth as planned. I've found out that when the transition has to display values ending with a 0, this one is not displayed at all, breaking the 2 decimals rule. It makes the width of the amount change multiple times during the transition, making the element wiggle. Is there anything I can do to force the display of the 0? Thank you!
1
Rajeev Ranjan Kumar
Getting issue with Student purchase discount with Framer. Can you help me out with this ?
1
Cordova Putra Handri Ansyah
Good evening from Indonesia Here's another tutorial updates, which covers about prototyping using real data (JSON) in Framer. Real data is a paramount importance in saving lots of memory spaces in our prototype by adding pre-defined datas with robust codes. Watch now : https://youtu.be/JbW2FJgWVWk Note : Hope it helps the community to grow better. Thank you for all the support 😊
0
Ryan French
Hey all. When my developer opens Framer the design tab appears to be blank. Even though there are designs there. Even opening the beginner tutorial from the welcome screen, the design tab is still blank. The code is there so it seems like there's an issue with the design tab. We have made sure we are running the latest Framer. He is on a trial but that shouldn't be the problem. Very frustrating, when I send him something in Framer he can't see it. Anyone else had this problem and know what to do? Big thanks
4
Paul Schouten
Hey everyone! For the CES I had to create a demo in quite a short time which I like to share here. Framer turned out to be ideal for this. Now running at the TomTom booth in Las Vegas :) https://framer.cloud/HQPmY (works best in Safari)
4
Giulio Cheapone
Hello everyone, I am trying to render a dynamic text shadow not only opposite to where the mouse is but also the further away you move the mouse the more blurred the shadow becomes. Can anyone spot what I am doing wrong with the "givemeDistance" function?
0
Josh Peters
Questions about Flow.transition I started with the Docs example and have tried to modify it for my own needs. When I modify the name of the transition states from (layerA, layerB) to (one, two), the transition animations will not work. The layers seem to reorder, but then the whole proto flakes out. If I change nothing in scaleTransition() it works fine. Insight? The state names aren't looking for anything specific, so why does layerA, layerB, seem to be the default? Basic prototype for reference/modifying: https://framer.cloud/LOkUc
1
Chris Bindloss
Hey all, is there a on blur event for an element? In other words, how can I trigger an event for a layer when anything but that layer is clicked?
2
Chris Wang
If I drag an image to design tab and then remove it, the image is still in the design folder, will it get loaded when the prototype loads? (I want to maximize load performance for large prototypes)
3
Joseph Brick
Hi! I notice that the smart sizing that you specify in Design (aligning right on resize, etc.) doesn't persist on layers created using layer.copy(). Is it supposed to?
1
Max Campolo
Hey everyone. Has anyone had a problem with a project that had work in it being empty when opening? It seems like my files still exist in their saved location but when I open the project it is completely blank. Not sure if something got corrupted and if there's a way to fix it. Any help would be appreciated! Thanks!
3
Vlad Mafteiu Scai
Is it in any way possible to show a UI component built in code show up in the design tab?
1

January 10

CJ Gabriel
Hello! I'm a newbie to Framer and have been looking to learn for quite some time now. Besides the resources provided by Framer, is their any other resources I should be aware of pertaining to learning as a beginner? I've recently just purchased the Udemy course on Interactive Prototypes with Framer so I'll probably just start there. Anyway, any help would be greatly appreciated. Thanks!
11
Chris Wang
Can I add adaptive layout behaviors to code-generated layers?
4
Junha Kang
hi, is there a way to link a URL to a layer? i wanna do like, "layer.onTap -> (Open URL)"
1
Michael McKain
Hey all, I'm having two issues with a scrollComponent wrapped on an existing layer. These two list-menus in the photos scroll horizontally and the lower menu continues to get cut off in code. The upper menu is fine. I've messed with the pins, frame size, position, everything I can think of but it either ends up in the wrong position or cut off somehow. Is this a glitch with using the Scroll Comp on an existing layer? There is a lack of documentation on using components with existing layers. Secondly, is there a way to make onTap or onClick disable if the menu is being dragged/scrolled? If I drag the menu from the clickable menu option, it will end up flowing to the next screen. This happens on mobile and desktop and I am trying to avoid that. Thanks so much!
3
Benjamin Den Boer
Here’s a low-fidelity example of SVG stroke animation using the dashOffset and dashArray properties in Framer v108. Hope it helps. 💫 https://framer.cloud/QLDMO
6
Anton Kosarchyn
Hi, guys and gals) I'm trying to copy layer (declared as a custom class, eg "album") via layer.copy(). The issue is it's not only copying the content of the layer, but seems it also creates another instance of the same class inside that layer (greyed in the layers tree panel, see the screenshot). What I'm doing wrong?) Code: https://framer.cloud/MOPHL
1
Abraham Okorodudu
This is probably a simple question, but how do I stop the app from being dragged around the screen? My sample app has that "inertial" drag, and I can't figure out how to get rid of it.
2
Vladimir Strashkov
Framer, What to do, if the module that worked in previous versions doesn't work in current? Here is the prototype: https://framer.cloud/GsHTW I tried to use vibrant.js to grab colors from images. It still works fine in Framer preview window, but not in the browser. Any ideas why?
2
Tamir Pomerantz
Hey ✌️ Anyone having trouble with the mapbox-gl API lately? it just stopped working and shows a black screen (haven't change a line of code, just updated framer to V108). Works perfectly on framer.cloud.
1
Michael Weisert
I'm building a responsive prototype. When I resize, I've noticed that scroll components can't be targeted to resize. Each time I resize I add 'scroll.width = Screen.width', but this doesn't seem to have any effect. The screen cuts off at the original width and won't allow me to expand. Any ideas?
6
Wouter Walmink
I might be missing something in the docs, but how do I get around this problem? *Problem* I have a layer that animates on Events.MouseOver, and has a couple of children. When I hover of the children, the MouseOver event triggers again. *Question* How do I make the event only trigger when entering the layer, not also when entering the children? Is there some way in Framer to stop events from bubbling up? Or is there an option to avoid triggers from children? Maybe it's because I don't understand what object the "event" exactly is, that I am getting. Is this a native event JS object? Thanks :)
9
Moritz Kuhn
Just a quick question: is it possible to have a specific element as cursor symbol. For example let's say a square sized 250 x 250 px. Any help is appreciated, thank you.
2
Bhaskar Ravi
This is a question regarding Framer Beta specifically, so it doesn't apply to most users. Still want to get the group's thoughts: It's is an experimental feature, but I'm confused as to why the team has enabled us to target top level shapes in code mode? This starts to blur the lines between shapes and frames, and makes things more confusing IMO. What's the primary difference between a frame and a rectangle now? I'd love to know the intention of making shapes targetable - at the moment seems a bit redundant, especially when shapes were serving their own unique purpose before.
7
Chris Wang
Is Framer based on Webkit? I noticed that the Mousewheel scrolling only works in Chrome and Safari but not Firefox. Is it possible to make it work in Firefox?
1
Erik Lundgren
Is anyone else having trouble importing layers from Figma. After import the project import folder contains no images and the json/js files are empty. And after import I get a Utils.domLoadDataSync: imported/[email protected]/layers.json -> [200 OK] error. Any hints are welcome. Thanks!
1
Victor Lebeau
Hi Framer people, I'm a product person at Wavy. We're based in Paris and I wanted to know if a few of you were around and would be down to talk about Framer. Kind regards and thanks for the acceptation !
1

January 11

Javier Eduardo Treviño
I am on a monthly subscription, but I don't know how to cancel Framer, help please?
3
Herje Wu
Hi. I've looked on the web and in the Tes Mat Framer-book but I fail to find information on how exactly you're supposed to reference layers if you've imported a project from Sketch. I wish it was as simple as sketch.parent.child.childofchild.etc but obviously that's not the case. Do you know of any documentation that could help me here please? I need something from the ground up on this. Thanks / Herje
3
Alexandre Lordelo
Zoom sensitivity Hey guys, Is it possible to set Zooming to be more sensitive? It's really annoying yo have 50%-100%-150% range....
1
Cordova Putra Handri Ansyah
Good evening from Indonesia I received many requests about Material Design lately, so I decided to explain and share a basic tutorial of building material design (Ripple Effect) to the community whom interested to add such amazing touch to the projects. Watch now : https://youtu.be/x4JMUH8nR9U Hope it helps the community to grow better !
1
Javier Eduardo Treviño
what's your favorite tool for converting your Framer projects into GIF's or videos for embedding? I wanna start doing this for my case studies but haven't found a definite option, any tips?
18
Cordova Putra Handri Ansyah
Good afternoon from Indonesia Curious in building your own Google Now with Material Design?. Here's the tutorial for it. Hope it helps the community to grow better and awesome ! 😊 Watch now : https://youtu.be/hjiNIHWx9D0 PS : Material Design is a prototyping gem, and for almost a month, we've been through lots of project practices already. Thus, I will be sharing lots of Material Design-related tutorials for future videos. Please support my works by subscribe or follow my Twitter for updates !
2

January 12

Edgard Kozlowski
Hi, in the end of 2017, I got into Framer (a bit late, i admit) and really liked it! I wrote a post telling a bit about my experience building my first prototype there: If you see any errors in the examples, please, don't hesitate in telling me 😀 https://medium.com/@edkf/real-data-prototypes-with-sketch-and-framer-30c7446fd3cc
2
Armand Arana
Hello Everyone! I was hoping to get some assistance. I have tried importing a file into sketch and unfortunately my Framer Canvas is blank. When I hover over the names of the layers on the left side I get position values but I cant see anything. Thoughts?
1
Neil Everette
Anyone know if a footer in a flow component can be hidden for certain pages in a flow?
2
Alexandre Lordelo
Is it possible to share all screens via cloud? Like sketch example bellow?
1
Ola Laurin
Anyone managed to get the caret position when using Framer Input module by Benjamin den Boer? I can't retrieve it using selectionStart.
0
Tom Ellwood
Hey - As it's possible to get the flow.current after flow.onTransitionEnd, is it possible to get something like "flow.next" on flow.onTransitionStart? I feel like this would be more useful for hiding and showing header/footer based on what page you're on. Unless there is an easier alternative?
1
Ricky Ros
Hello, I am new in Framer and need some advice. How can I use the layer to make the mask based on the alpha channel. What I need is to place the child image over parent(mask) and to make sure that the child image will be clipped by borders of the parent. But when I do CarMask.clip = true the clipping is applied to the rectangular area and not for the visible area(like alpha mask). I am not sure if it is possible by standard Framer tools. Please help with advice. Thanks.
2
Jason Valalik
Hello all. Any reason why this prototype with an iframe would disable the "play" button? I can get the video to appear in a parent container, but the play button is dead.
2

January 13

Josh Peters
Sort of frustrated by the lack of documentation and variety of approaches on SVG files in Framer. I don't know the ins and outs of the technicals, but this illustrates how WTF this is currently. Why doesn't "boxFill.style.fill" work, but all the other properties do? Is it possible to have various situations defined in the future, because this isn't simple.
2
Kurash Dmitry
Hey gang! I'm completely new to framer and trying to build my first animation with it. And as you could guess, I require your assistance the great coffeeScript elders. What I'm trying to achieve – is to imitate a loader. I want these two rectangles move right and left, for about 4 times. I've added two states for each rectangle and trying to cycle through them and somehow add repeat:, but I don't know how, because stateCycle just goes to the first state and then nothing happens. What's the best way to do it? I could go for enormous amount of layer.animate and the layer.onAnimationEnd another layer.animate, but I feel that this is wrong. Any guidance, elders? Thanks!
4
David Antonio Vilca Obregon
¿Cual es el problema de la calidad del prototipo en cloud? Se ve todo borroso :s ¿Alguien sabe que ocasiona esto? Thanks https://framer.cloud/kgCGc
1

January 14

Jonas Treub
Hey! Today we’re proud to unveil vector editing, fully integrated into Framer. From Frames, Vectors and SVGs to Handoff, the entire tool was made as a true labor of love by our team. With this new design feature set and our prototyping interface, Framer is now the only tool you need to create everything from detailed icons to high-fidelity interactions. Update to v107 to check it out and be sure to drop us a comment with any feedback — http://bit.ly/2BECqRU
21
Paul Kooi
Hi. Anyone know how to get "mouseWheelEnabled = true" to move through a vertical page component? Thought it would just work... silly me 😊
2
Justin Fraga
I am not finding that Canvas.image, nor BackgroundLayer actually do anything.
1
Justin Fraga
Hi Friends, I'm attempting a larger format prototype where I switch between multiple "views", which are parent layers holding a a mix of imagery and scroll components, etc. I am having a lot of trouble finding a method that allows the active view to also be "on top" so gestures will register. It seems like "bringToFront()" isn't working when I try to initialize one of the views as the default, for example. I'm also having no luck using ".index". All views appear to be siblings so I don't know what's wrong. - Should I use opacity or "visible" for the inactive states of the views? - Do I need to place all the views into a super layer for things like indexing to work, even though they're all siblings now? ** What are some general methods others have used when attempting something similar?** Thanks in advance!
3
Patryk Adaś
Is it possible to address particular layer without wrapping it in Frame?
5

January 15

Ilter Canberk
Did anyone check out Snapchat Lens Studio? https://lensstudio.snapchat.com/ Seems quite similar to Framer. Could be handly for designing 3d stuff.
0
Chris Wang
Is there a way to stop a state animation, I'm thinking something like "layer.states.stateName.animation.stop()" ?
1
Adam Mazurick
I am really excited to share a journey with you that took 6 months to complete. Framer was essential for 3DUX and 3DUI, Experience Prototyping and rapid iterative prototyping and evaluation (RITE). All prototypes were done entirely within Framer. Words cannot express how much your vector tools helped. This journey would be a life-changing learning experience that would involve working directly with the Leadership at Mira Labs in Los Angeles, consulting with my friend and supervising Professor Dr. James Oliver from ISU and analog prototyping with Matt Stern while travelling through the Yucatan Jungle doing ethnographic studies. Thank you to the Mira Team, ISU, Apple and the awesome team at Framer for access to your (then) Beta tools. Please check out the medium article. If you feel like you would benefit from a follow-up tutorial on exactly how we used Framer, I can do that too. https://medium.com/@adammazurick/social-experience-design-for-mobile-augmented-reality-head-mounted-displays-b722e61037fb GIT Repo this week Alter Light promo video this week
8
Andy Jakubowski
Solved: you can in fact assign states to and animate SVGLayers built in Design once you Layer.select("<name>") them in Code. ======== Hey folks, is it now possible to assign states to complex shapes and animate them? I’m trying to design a shape using boolean operations in Design, and then change its state with Code. I can only target Frames in Code, but those can’t be edited beyond a rect with a borderRadius. I can access my SVGLayer with Layer.select(), but it doesn’t seem like you can animate that in Code. Has anyone achieved this? Any tips? My project: https://framer.cloud/MIJQr Thanks and have a great Friday!
1
Jason Sparks
I hope this isn’t too off-topic, but does anyone know of any decent books or learning resources on UI design? Specifically the type of UI micro interactions and mini animations that Framer is so good at prototyping. I keep looking at some of the examples on sites like http://uiinteractions.com and think it’s a whole art in itself that I know little about - just some basics to begin practicing with would be great.
1
Niels Flindt Koelmeyer
https://mobile.twitter.com/Stammy/status/940653220153630720/video/1 Hi all. I've found that Twitter used Framer to prototype a new feature concept. I want to replicate this, but I'm not sure on how to go about it. How are they able to generate new input fields and control the spacing between each on hover? I guess one way would be to manually hard-code every interaction and state-change, but how would you go about coding it in the most efficient manner? Any ideas would be helpful. Thanks
2
Kit Rod
How can I use framer on Mac Elcapitan?
3
Daniel Marqusee
hey all. is there a way to upload an image in a prototype? Example being someone being able to upload a profile image of themselves.
4
Eddie Ecker
Does anyone know if it's possible to pin a page component to a river page? I'd like the user to hit the page component when y:1400, but it seems that the component is always present in the viewport...
0
David Antonio Vilca Obregon
Hola amigos, este es mi primer artículo sobre Framer para la comunidad en español, son unos ejemplos sobre Flow Component nivel básico, muy pronto publicare más artículos y videos para quien desee aprender sobre esta genial herramienta. Gracias :) Link aquí: https://goo.gl/uavpQ8
0
Pawel Kontek
Hi, is there a way to manipulate the order of imported layers from Sketch vs. layers created in design space or in code? The *layer.bringToFront()* doesn't work and the imported content from Sketch seems to be always on top of everything.
2
Neil Everette
Is there a way to customize the color behind a flow component? I've tried Canvas and Screen, but no luck. When I overscroll a flow component page, I get an ugly black background.
3
Yeseul lee
Hello! I have studied the "search" prototype as an input module. https://framer.cloud/rmjyN But I am having difficulties in two things. 1. I want to change the y value of the two cards up when there are two search results.. 😩 2. I would like to display "no search results". What do I do? I have also studied the Accordion List example, but I think it is too hard to apply. Any ideas will help. thank
1

January 16

Sauraj Babu
Hey folks. Here's another Prototype i made over the weekend.This time its a dashboard :). you can try it out here : https://dribbble.com/shots/4075956-Plant-Analytics-Dashboard <3
1
Chris Wang
Just found a minor bug of text layer in Design mode, if you set text layer to Bold or Italic, the fontStyle doesn't actually get applied to that layer.
0
Simon John
First time with framer user hereee. Is there a different between animationOptions and options. Because the both tend to accept the same inputs like time and background colour
2
Ármin Jamak
Hi, does anyone know a way to disable the framer right-click menu? :) I know how to listen to the right click event, but the default menu keeps popping up. Thanks a lot 🙏
4
Ban Nguyen
My admin contacted you guys to renew my license but it has been very difficult to reach you and get help. Thanks!
1
Jonny Howle
hey peeps, is there the ability to create a templated image similar to template text? I have a symbol with some templated text that works fine, but i want to change the image that is in the symbol (its a logo) for every instance. I couldnt find anything in the documentation. Thanks!
1
Jonny Howle
Quick (possibly dumb) question! When creating an image layer: layer = new Layer ___image: "images/image.png" Framer out scales my image to fit the default height and width. Is there a way to set the height and width to auto so that if I bring in an image that is 300 x 100 it will remain so?
1
Adam Mazurick
Benjamin Den Boer I have a question and need some help. Shown here is an example of an animation that was made with an effect in After Effects called trim- paths. Presently, I use lottie or greensock in Framer to do this. I don’t like doing this. My question, what is the most efficient way of doing this? Has anyone used just Framer to do this with new tools? To accomplish these animations and associate them with events, I’ve used Animation Objects and lottie. Can we do this with the new Framer? (Artwork not me) A project I’m doing requires lots of this. https://dribbble.com/shots/3801824-Icon-Animation
5
Jordan Robert Dobson
Connected Points Demo: http://jrdn.io/060M1x471545 Building off my last example: https://www.facebook.com/groups/framerjs/permalink/757563177704089/ I wanted to create something where all the nodes were connected. I also added the ability to move them manually.
9
Dawson Beggs
question, I have a page component and a flow component. When 'swiping' a page component, the flow component scroll is still enabled, is there a way to disable this so that when using page component the page will not scroll at the same time? Thanks!
0

January 17

Adanma Ekeledo
Has anyone figured out why prototypes are blurry when opened in Chrome? Pretty much makes the output useless if I can't share it.
1
Armand Arana
Hi Everyone! I was wondering why I get an error message after trying to adjust the animation of a state. I'm trying to add in a Delay but when I do I get: undefined is not an object (evaluating 'ref.length') and a black canvas. Is it possible to delay a state?
2
Varun Yellina
How to get distance between frames/shapes? ⌥ key doesn't work reliably. I'm on v108. Is this a bug?
5
Tom Ellwood
Hey guys, has anyone come across (or figured out how to fix) a bug in ScrollComponents + onTap event in the latest Framer? If you try and drag an element in a ScrollComponent that has an onTap event, the event is triggered. Quite difficult to make a scrolling list of links.
4
Stephen Boak
What events, apart from dedicated Framer meet-ups, should I be attending to meet other Framer users? I'm thinking about design/prototyping conferences in particular, but curious how you all engage with the community apart from meet-ups.
2
Johann Kasuch
Hey ! Anyone else running into problems with this nice drag-n-drop module? https://github.com/IanBellomy/Pair In Framer Preview everything works. But module breaks when using Framer iOS App, no matter which device. Any ideas?
0
Jason Nelson
Does anyone have examples of animating along a curve generating by an equation? I'm trying to animate along an ellipse. I'd like the Y value to change based on the X value when dragging along an X-axis. Since I need the values to respond to change:X events I'm assuming animating along a vector won't work, needs to be generated mathematically in the code?
2
Oscar Martínez Germán
Hi, I want to make this countdown goes on reverse, for example: from 60 to 0, and when the animation finished, reset it again.
0
Justin Fraga
Class/module question: How should I target a layer created within a class or module for interactions? For example, if I'm implementing the class below, how could I then use "tiles[0].onTap ->" in the prototype? class Foo extends Layer ¬ constructor: (@options={}) -> ¬ ¬ @options.count = 10 ¬ ¬ @options.width = 50 ¬ ¬ @options.height = 20 ¬ ¬ super @options ¬ ¬ container = new Layer ¬ ¬ ¬ width: Screen.width ¬ ¬ ¬ height: height ¬ ¬ tiles = [] ¬ ¬ for index in [[email protected]] ¬ ¬ ¬ tile = new Layer ¬ ¬ ¬ ¬ parent: container ¬ ¬ ¬ ¬ width: width ¬ ¬ ¬ ¬ height: height ¬ ¬ ¬ ¬ x: index * width ¬ ¬ ¬ tiles.push(tile)
2

January 18

Nabha Cosley
I think this is a newbie question: I'm taking content from a JSON source and putting it into a prototype. So far, so good. But some item titles are multiple lines, some items have subtitles, some have images, some don't — and I find myself doing a lot of this: thisItemSubtitle.y = thisItemImage.height + spacing * 2 + thisItemTitle.height + spacing / 2 thisItemDescription.y = thisItemImage.height + spacing * 2 + thisItemTitle.height + spacing / 2 + thisItemSubtitle.height + spacing * 2 thisItem.height = thisItemImage.height + spacing * 2 + thisItemTitle.height + spacing / 2 + thisItemSubtitle.height + spacing * 2 + thisItemDescription.height + spacing * 2 That seems really weird… does anyone know a better way to do this?
4
Adam Mazurick
Hi FramerVerse, hope all is well. Two requests: 1. Rulers. I need these bad. Every Interface is a layout and and layout needs structure and grid. I'm using silly workarounds now like manually using objects to create a grid. It's just weird. 2. A type of interface to manage stroking paths and adjusting curves. Here’s how I do it in Adobe. That would be wicked helpful. I'm trying to display biometric data on a new type of display and it's heavily svg dependant.
2
Josh Peters
I'm trying to on a Tap event of a button, change the stroke color of an SVG object inside of the button, while it changes the previously selected to white. Can anyone see anything obvious in here to explain why this doesn't work?
2
Sauraj Babu
I build a simple camera capture interaction on framer this week. you can play around with it here :) -
2
Neil Everette
In the new Framer studio, I'm having trouble with tap events firing during scrolling events. Is there a way to prevent this? Sample file included
11
Kyle Hinze
Anyone know what to do about frames and dropshadows? The rounded rectangles are contained within frames because I can't make the rectangle targetable in the code. I want to hover over the frame and make the rectangle have a shadow but it's on the frame instead, giving them the weird white background in the corners.
7
Sigurd Tapio Mannsåker
A few people have asked about adding your own stuff to the Icons menu, so I made this little Node package that some of you might find helpful. You still can't add them to the actual menu, but the production icons from this work exactly the same – drop them in from Finder and you can set their color in Design mode. Also, shout out to the Framer team for including a frame that matches the SVG size, so even production icons have matching dimensions! (Looking at you, Sketch) Feedback & feature requests very welcome – so far I just made it to fit my own workflow, but happy to improve it if it's useful for anyone else.
0
Steve Ruiz
Stumbled on the CircleProgressComponent and have been toying around with a "dial" interaction, where value is set by moving along a circular path.
0
Martin Halik
How to copy paste color palette between different Framer files?
0
Giles Perry
Does anyone know how to stop text layers from wrapping unexpectedly?
2
Tes Mat
Hey, I just updated the Apple Music tutorial that I published last summer on the Framer blog. Here’s what’s different: • It now uses the iOS 11 design (some details changed + addition of an extra mix: ‘Chill’) • The Sketch file uses the SF Pro fonts. • The interaction changed: In iOS 10 you just had to drag down far enough (to go from Now Playing screen to the Mini Player), but in iOS 11 you have to release. (Is actually more natural.) So earlier I used ‘onScroll’, now ‘onScrollEnd’. • The Mini Player’s background blur: Was a CSS effect, and now it’s simply set in Design. • Now uses Benjamin’s new ‘Framer Audio’ module instead of his older ‘Framer AudioPlayer’. • The earlier creative use of masking in Design, just to create triangles, is not needed anymore. We now use the shape tools. Enjoy!
3
Patrick Hansen
Has anyone got window.location.reload() to work in the Framer iPad app? I have a timeout function to reset the prototype after a certain amount of time of inactivity and it works great on the desktop and simulator, but does not work on an iPad in the Framer app. I think this might be more associated with the timer, vs. the actual window.location.reload() call. Anyone have an idea on how to have a timer that is supported by the Framer iPad app?
0
Patrick Hansen
I'm trying to figure out how to cycle through states automatically after onload of a view, and then show each state for 3 seconds. I tried: layer.stateCycle(time: 3) But it just cycles through the states almost instantaneously and stops on one of them
1
Patryk Adaś
How to trigger an action onVariableChange? Let's say that I got a counter and I want to trigger animation everytime the number in this counter changes. Thanks!
1
Yasin Arık
EDIT: This code by Isaac Weinhausen seems pretty awesome! https://m.facebook.com/groups/385961098197634?view=permalink&id=1374176629376071 Hi Fam, I'm in trouble with selecting sub layers and parents. This is not a question totally but a feedback also. Please do not consider it as a complaint. Too long; don't read: I'm tired off using layer.parent.parent.parent.parent.children[1].children[0] .... etc. Is there any simple methods? selectChild and other similar commands doen't work as expected. I can't target (not the target in design tab) layer in code tab even though they are in the objects tree. Unfortunately, I can't share the project because of privacy issues. I'm writing desperately and need help. (Searched the web for similar projects, and looked at Medium articles but what I found were generally very basic projects or their layers created with design tab. I couldn't find more professional or more complicated projects using loops inside loops, multiple scroll-page components and events) --------My Project, briefly-------- A. I have a main feed page. Inside of it -> a scroll component. That scroll component has 10 sublayers (like 10 Facebook posts). B. Every post has a pageComponent and there are 1 to 4 photos in every pageComponent (like Instagram multiple photo sharing.) C. When any of the photos doubleClicked, a copy of that photo is created and resized to cover the full screen and get blurred. (You can consider this as a new background for the next stage. I tried using a flow component here but it was not suitable) D. After having that particular image as a background, I create another pageComponent that has 1 to 3 photos inside it. This photos related with the previous posts thats why I can't use a flow component. E. Every photo page also require several info texts on the screen. I want to create those texts on a layer (a panel that is a parent for the info texts; a text holder). Every text layer changes by page changing. I want to add "E" by using Symbols module since it gives me lots of freedom about styling and placements. F. A backButton should destroy the second stage (From "C" to "E") and users can continue scrolling on other posts. HOWEVER; doing all of that gave me headache because figuring out a way to target the particular layer for the job was very frustrating every time. The reason for this may also "me". I am not an expert in coding so thats why I use a prototyping tool (Framer is the best one in my opinion tough). I think there must be a more complicated, big scaled and free project for intermediate users on the Framer's official website. Because I just can't keep going for a week. I'm stuck at this point and learning new things takes more and more time but the job done is decreased. I really believe that Framer team can create an "All in One" project and update it. Documents doesn't have all the things and many of them are written briefly. I would rather prefer such a sample project rather than new pen tool. (it's also great btw) ------------------------------- 1. I use Symbols module by Lukas Guschlbauer . It's awesome but as he already stated on the GitHub page, I'm waiting for a native solution from Framer. 2. I'm creating lots of stuff by using only the code tab. Layers act differently when they created by code vs. when they targeted from design tab. As I still call myself as pre-intermediate maybe I am not adequate to point the problem but there is an empty gap in between code and design tab to me. 3. I just use design tab to create main parts that I want to regenerate via Symbols Module. This is pretty good because using this way, I don't face with any issue while selecting different devices. Every part sits on the correct place. (BTW auto nesting feature on design tab is not always a good thing. Is there a way to disable it or a shortcut) 4. selectChild and similar commands do not work for me most of the time. Using loops and double-loops may cause this. Also using "this" command doesn't work always. 5. Framer preview app on Android runs really slow. There will be any update? That's All, Thanks for reading and I'm willing to see any ideas, links to projects that I might not have a look yet.
3
Paul Kooi
Hi. I'm trying to expand my knowledge a little bit. Attempting to make a class for a button with a label centered within it. Per the docs I've made it so I can change the height and width and other aspects of any instance of the button itself. Works great. Having trouble figuring out how I'd change the label of a specific button though???
10
Yasin Arık
Hi! I have an android phone (Huawei P9, Android 6.0) . When using Framer app, my prototype is a bit laggy. In the mac, it works much more smoothly. Is there any way to speed things up? There is also some flickering issues and it's annoying. I close all the applications, only Framer app is working on phone. Also, if it's caused by screen size, how can I solve it? I use screen.size code for the frame which is the parent of all other layers etc. Does the iOS version of Framer app works better? Because in the and I can't demonstrate my proto to investors like that.
4
Jordan Robert Dobson
Framer Layer Alignment with minX/Y midX/Y maxX/Y I've seen a few people lately ask about alignment of layers. I highly recommend reviewing these properties and getting to know them better. They greatly reduce the amount of math you have to do in layout and in your states. Start here: http://framer.com/docs/#layer.maxX You can use them when you create your layer too. So, if you wanted to create a layer and place it on the bottom right hand side of the screen you'd do this: myLayer = new Layer  maxX: Screen.width  maxY: Screen.height Hope this helps you in your prototypes!
9
Rohan K
If you can set the same name property for multiple layers using code why can’t you do it when creating layer targets in the design tab? 🤔 #justwondering
2
Alex Sewell
Hey Framer Community, Quick question. I have been using Framer for the last 3 months and love it. However, after the last update, I am having issues with the "intelligent grouping/layering." It is very difficult, if not impossible to create parent:child relationships like before. Is anyone else having this issue? And, any thoughts on how to fix this?
0
Elliott Malkin
Simple question. If I resize the Framer window, why would this event not be triggered?
5
KJ Prince
Hey everyone, I'm looking for a freelancer to help with the interaction design for a consumer facing digital product we're building in the finance space. Your role is to help us go from static sketch designs to a Framer based prototype. The product is focused around the user's interaction with _A LOT_ of forms so you'll need to enjoy thinking up clever ways to reduce friction, provide feedback, and keep the user flowing through the lengthy form driven app process. PM for details
1

January 19

Sarah Lim
Hey, designers! We’ll be hosting the first Amsterdam meetup of the year in a little over two weeks. Join us at Framer HQ to learn Framer hacks, see what’s in store for the product, meet the team and fellow Framer fans, and more. Have you designed something cool that you’d like to demo at the event? Let us know. We’ve set aside some super cool new Framer swag for presenters. RSVP today —
1
Simon John
Heyy, i have a frame that has an image and a rounded rectangle and im trying to clip the image to the size of the rectangle but everything i click on the framer layer and click clip, the image stays the same
1
Rajeev Ranjan Kumar
Hello Framer friends How to activate layers for code mode bcs I can't find the target "button" @ as I have marked in the Image. Please help me out with this. Thank you
5
Kit Rod
How can I animate the shapes on framer now that I can't add a target on shapes? I used the frame but now I can't animate the radius or change color of the shapes.... Pls help. Thanks.
1
Josh Goodell
Does anyone have an example of how to do a Google inbox style message opening transition? Basically the message expands, the subject fades out and reveals the message.
3
Josh Peters
Similar to yesterday. I've put the pages into an array to use with a function. Though I want to execute a Event using the Flow showNext dynamically. If you can help I'd appreciate it. Thanks
2
Steve Ruiz
Events.Click has been bugging me for a while, as it fires on mouseup events even if the preceding mousedown event occurred somewhere else. This means a lot of false clicks, such as when a user 'cancels' a click by moving the mouse off of the clickable layer (and onto another), or when a drag ends over an area with an onClick listener. Gesture events take this into account and know to cancel when a gesture's end event occurs on a different layer than its start event. This makes Events.Tap an excellent replacement for Events.Click, however I'd like to see the same functionality extended to Events.Click.
6
Matthew Mang
Hey lovely folks who work at Framer! Would it be possible to change the top of the iOS Framer Preview app to black instead of white when viewing old prototypes on a fancy new iPhone X? The white really sticks out in both dark and light background prototypes. Thanks in advance!
10
Luis Ricardo La Torre
This might be a meta question, but do designers at Framer design only on Framer or do they use other tools? If so would love to know their workflows.
1

January 20

Isaac Weinhausen
Referencing Children of Parent Layers ---- I've noticed a lot of folks struggling with trying to reference children layers from the design tab. You can explicitly set targets on children layers, but this can become tedious on large projects. Also, you can't have duplicate target names, even if they're nested in different parents, because all target names are referenced from the same scope level; in other words, the hierarchy of target names is flat. Again, this can become unruly on large projects, where being able to reference children based on their parent name would be useful, and using duplicate names for sub layers might convenient. To help with this, I wrote a Layer mixin: https://gist.github.com/isaacw/9c643e7b3f77c34d56192b5784dc7cc2 1. Simply copy and paste this into the top of your code. 2. For parent layers that you want to be able to access its children, simply call createChildrenRefs() on it, e.g. "myParentLayer.createChildrenRefs()". Make sure the parent layer is targeted. 3. Now, children refs should be accessible with simple dot notation "myParentLayer.child". No need to set up additional targets, it's done automatically for you. If you want all children and grandchildren to have references, pass in "true". See example screen for how you might use this. Notice how only one target was set, on the "view" frame, but now all the sub layers are accessible. Good luck! Let me know if you have questions/feedback.
1
Daniel Marqusee
Hey everyone. I’m putting together a larger prototype and I’m trying to condense common elements into modules. That said, I am trying to figure out how to “target” or access elements inside the mods.
6
Ban Nguyen
Does anyone have tips/examples on how to create a navigation like this google analytic using array to organize menu items and sub items. Thanks!
1

January 21

Steve Ruiz
I made a quick tool for visualising and tweaking RK4 springs.
1
Nemanja Memarovic
Hi all, Any idea how to create a sticky footer for a responsive mobile app? The responsive app is based on Chris Chen's post
2
Daniel Maslo
Any ideas why code folding doesn't work sometimes? Thanks
2
Denis Lesak
Hey everyone. Happy New Year! I am working on a mobile prototype that includes a data table with 3 scroll groups. I am trying to figure out how to bind 2 scroll groups together so that one is horse scroll the other scroll follows the same behavior at the same time. Any help is appreciated.
1
Jason Sparks
Big ask. Does anyone have an example of a well written, expandable Framer project? I’ll be prototyping a number of new features for a mobile webapp for a typical eCommerce site. I wanted to structure my code well, things like creating a base component/class that would be the parent app class. From here, I would probably extend off this the key screens (product page, basket, checkout etc). Common components like modals, drop-downs, cards etc would probably exist in the main class so I could use these easily in each of my screens. Just a little unsure of best way to code this, naming convention, separating views from actions, behaviours, states etc. Anyone got an example they are happy with and don’t mind sharing?
5
Joseph Reni
A quick note to anyone confused with the new design tab. They replaced “Layers” with “frames”, which by itself would be a small change. they also introduced SVG editing, which is easy to grasp. however, releasing both changes at the same time, seems to have people really confused. Trying to continue drawing with “R” which now draws a shape and not a frame, might give the impression that’s the new layout method, which it’s not. If you haven’t opened framer yet, I would suggest remembering that shapes are SVGs and just as you wouldn’t design a website out of svgs, you won’t in framer either. Continue using Layers ie., “frames” and you’ll be fine. Use shapes, when you need icons etc.
12

January 22

Noam Elbaz
Print Phone's current Geolocation to console: Need to get phone's current gps location. (I do not need to render a map) Looked through the group for a while but did not find anything that worked. Any suggestions? PS i'm using an iPhone and Framer App
4
Cordova Putra Handri Ansyah
Good afternoon from Indonesia. Recently, several people from the community asked about the tutorials I made, which currently in hiatus. Yes, I am currently working on something, but will be back provide more tutorials soon. Moreover, feel free to check out my works on Dribbble. Thanks to Jurre Houtkamp for the invitation. Follow me as well ! Cheers :)
0
Johann Kasuch
Quickest way to animate/count numbers up or down?
3
Chris Wang
Anyone know why SVG sometimes gets dispositioned when viewing in Preview? Halp!
2
Marc Krenn
Want to trigger stuff using the keyboard, but you're tired of looking up keyCodes? Check this out: https://framer.cloud/lHwxp/ Canvas.onKeyDown "spacebar", -> print "spacebar" git repo: https://github.com/marckrenn/framer-keyboardEvents #keyboard #key #keys #keyCode #keyCodes #addEventListener #autorefresh #triggerwarning
5
Tim Kjær Lange
Brilliant release today! One question: Is it possible to target path vertices in Code?
3
John Smith
I have created a drag and drop interaction. User can drag an object from one hit area and place it into another hit area. Depending on whether the user drags the object to a certain y position will snap the object to a specific x and y position. Yet the demo the object doesnt snap exactly into place. Can someone explain why the object doesnt snap to the hit area position?
1
Jason Sparks
Has anyone seen or got a working example of making a simple http get or put request in Framer. I’ve Googled a few older examples but they either don’t work (irrespective of whether I run them from Framer or via the Browser) or are examples that are way too complicated for me to understand what’s going on. Do I need to install a separate http module and which one?
6
Abas Mirsaeidi
Hi Responsive for All Device by framer with Breakpoint Limited Is It Possible ? why? very thanks for you answered
1

Monthly archives

2018

2017

2016

2015

2014

2013