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

What is Framer? Join the Community
Return to index

October 2017

October 01

Lukas Guschlbauer
πŸŽ‰ Symbols Update! πŸŽ‰ Apart from a lot of other improvements, you can now add common events to your symbols! A simple example for a use-case would be events that every button has, like hover, active etc... ... Another step closer to making the Framer-Workflow cleaner and easier! πŸ€“ Hope to get more feedback and would love your contribution on Github! [Prototype] https://framer.cloud/IpDbI [Github] https://github.com/der-lukas/framer-Symbols
2
Isaac Fagerli Schneeweis
Is there a way to do a click event on the Framer canvas itself?
1
Joanne Walter
Just getting started with Framer, and wow it is a powerful prototyping tool. So many of my google searches the last few days have lead me back to this group. So huge thanks to you all.
0
Ansh
Hey! Just started with Framer. Is there any way to add animation to each states seprately? If yes then please guide me :)
1
Utsav Shah
Hello. I've been trying to get data from Spotify api following this https://medium.com/@samthorne/using-the-spotify-web-api-in-framer-dc6a48bf0494 guide. However, setting the window.location to the url shows an unexpected error. See screenshot. How do I fix this?
3

October 02

Sergey Yashchuk
Hi guys, Can some one please help me with the Slider component. I'm trying to create a slider wth the gradient. Gradient reveals when user drags knob from left to right. The problem is that when I assign gradient to the fill it scales instead of distributing across the width of the slider (i guess it's by design). On the other hand it distributes fine when I assign gradient to the background/image of the slider, but now it reveals from the other side. I also tried it to rotate 180, but it did not work :) Thanks!
1
Sam Kilbey
Hi, I was wondering if anyone could help. I have made a mock up of my prototype to make it more simple. https://framer.cloud/CXNte When I click on the orange square I have an overlay from the tap that shows greys out the background and pushes layer2 on top. On the next screen if you click the red box then it uses flow.showPrevious() - The transition for this makes it look like it just slides up. Is there a way to get my first transition to do the same without the greyed background. Hope that makes sense? Cheers, Sam
1
Scott Johnson
Uhh. Can someone explain what's going on here? My prototype was working fine a couple days ago then stopped working and started doing this.
3
Kerrie Gallagher
Hi Framer Friends! I added Utils.loadWebFont("Roboto") to my code and it renders properly on Android but not IOS. I'd rather test on IOS bc it works smoother. Any ideas about why Roboto font isn't showing on IOS device (iPhone6)?
2

October 03

Kevin James
Hi All, I'm trying to create this. Do I create it as a layer and populate and duplicate via info in an array? If this is not the best way suggestions are welcome.
4
Lukas Guschlbauer
Is there any way I can work on the same prototype on multiple machines without creating a new prototype on Framer Cloud? In my opinion the behavior should be that if you download the prototype and you're logged into Framer Studio with the same user as the creator of the prototype, it should at least be an option to update the prototype in Framer Cloud, without having multiple instances of it!
1
PrzemysΕ‚aw Baraniak
What kind of specs for motion design do you make? When you create animated interaction, you know that making it in Framer is just a first step. The final solution will amaze users only when front-end developers will implement motion precisely. To achieve that the right specs are needed. This article includes the comparison of two most popular types of UI motion design specification methods. I believe it may help you make your work more efficient.
2
Midani Asli
Hi Is Framer fir prototypes only or it works for production ?
6
Louis Currie
Is there anyway you can hide {s} with a custom value?
3
Chris Keith
I've been using the text input module with a fair amount of success but it doesn't seem to accommodate multi line input. Can anyone point me to a module that supports that or is there some kinda work around I can pull off?
5
Laurynas Levickas
Hello, I am still a newbie, and I'd like to find out if it's possible to add custom animations onto #FlowComponent itself, to make standard "Pull" animation from one screen to another, something a bit more fun and creative? I bet it is possible, can some of you fellow frameristas share the insights? Thanks in advance. :)
1

October 04

Martin Menzel
Hello Framer Pros, I'm kind of stuck with my prototype and could need some help please. In my prototype I want to use a Slider to "scroll" through a stack of images and only show one image at a time, imagine a flip book. I did make it work with an onScroll event on a ScrollComponent itself, but linking the image stack and the knob position proved difficult for me. I would appreciate the help. In short: every slider position should match one image in the image stack and I can go through it with dragging the knob.
1
Erik Drouhard
Hi everyone, love Framer and what the team are trying to accomplish with it. Some feedback; It would be awesome if Framer Design had better handoff and export features. Spending time on a prototype that you basically throw away, even if it’s very helpful for idea generation, just feels wasteful. Why invest time in Framer Design (even if it’s a great experience), when I’ll eventually have to recreate all those assets in Sketch/Figma/Photoshop? And why not improve the Sketch/Figma/Photoshop import functionality? I get that you guys want to make the best design tool around, and integrating other design tools with yours is a hard problem. However, this just makes it harder to sell Framer to my team. Especially since, currently, you’ll still need those other tools to create the finished assets. IMO, it’s time consuming and causes needless friction to have to go back into Sketch to create the production assets. Framer has been extremely helpful for prototyping, and I’d love to see it become more. Thank you for creating such a helpful tool!
4
Matias Seijas
Hey guys! I've been playing with Adobe XD today, and I'm wondering if there's an easy way to import these designs into framer. Does anyone have any experience with this? Thank you!
6
Johann Kasuch
Hey Frameristas, Any secret hotkeys for closing and/or switching folds?
1
Jon Arnold
Hi guys, with my circle animation module you can also visualize progress very easily. You decide if there is a counter or not. Change the gradient color, thickness, size… https://dribbble.com/shots/2979702-Progress-Animation More information: https://github.com/ServusJon/SVGCircle-Module-for-FramerJS Thank you so much for Koen Bok, the Framer team and the whole framerjs community. You are so helpful! Keep exploring and design the impossible!
7
Callum Nowlan-Dias
How can I linearly infinitely animate a layer around the middle of the canvas? An example of what I'm after is attached. What i'm struggling with is setting the point of rotation, what is the most efficient way of doing this
6
Arnav Sameer
Hey guys, I'm trying to push a bottom window over a modal but unable to do it by completely keeping the window outside the artboard, Is there a way to make it travel from outside the artboard to inside? Currently I've taken a y = y-1 into the artboard It's working but I want to know if it can be brought from completely outside the artboard as well!
1
Jonas Treub
I'm playing around with making ThreeJS work in Framer. Giving it a similar API and making it compatible with the normal layer events and animations. You can follow along by checking this project. It is regularly updated. Don't forget to check out the history in the sidebar to see a lot of iterations. Props to Emil for inspiring me to integrate this in a module, he is working on something similar. https://framer.cloud/HkTKe
5
Ruben van Gaalen
Hi guys! I'm looking for a way to simulate the feature whatsapp has where you scan a qr code via camera, so you can use whatsapp on a computer (see picture). So camera module -> recognize qr code -> trigger event. Any ideas on this? Thanks in advance!
1
Abraham K Kiros
hey guys, I need help. πŸ™πŸ™ I designed in the design mode active state (stateFilled) and inactive state (stateUnfilled) for a button. Now when clicking it, I want it to switch to stateFilled and clicking it again I want it to go back to stateUnfileld. here is the framer code
0

October 05

Amrit Mazumder
I'm using d3.js with Framer and I'm having some trouble getting events to work. When I append the svg to Framer.Device.Content, events work fine. But when I append the SVG to a Framer layer, events don't work anymore... Example:
3
Zissou
Framer novice... I have built a quick example of my issue here... https://framer.cloud/YJJhu If you open in Framer I have added comments. I have three header buttons that when clicked I want to bring in from the different directions - at the moment showNext only brings them in from the right, and overlays don't cut it as the content is no longer scrollable Any suggestions would be greatly appreciated
1
John Cross Neumann
Hi all. I'm creating a desktop prototype and trying to recreate Alvaro Trigo's page piling js: https://www.alvarotrigo.com/pagePiling/#page1 I'm having trouble getting the mouse to trigger the pagination. Scroll up triggers one transition and Scroll down triggers the other. I've tried a few thing and have it working with swipe, but since it's a desktop prototype, I really need the mouse to trigger the flow component. Any help would be greatly appreciated! Thanks! https://framer.cloud/Eshoe
2
Taylor Palmer
Hi, I'm working on a prototype that creates a new layer everytime you drag an image from a panel. Can anyone take a look through my code to see what I'm doing wrong? I'm using the function CreateShape() to create a new layer, but after the second layer it breaks.
4
Cezary OΕ‚owski
Hi guys! I'm a total newbie to Framer but I'm really motivated to learn. After completing the course by Pablo Stanley, which was great btw, I wanted to design something more complex. So I started recreating the Instagram app just for fun. I have a problem with "Stories" section, I want it to be scrollable with a list of photos but I don't know how to do it. Also, I noticed that both scrollComponent are visible when you tap on the first icon "You" to see a story. I bypassed that with a states with opacity:0 but I know that is a dumb solution because they interfere with flow.showPrevious(). If you could explain it to me, it would be great :) Thanks!
1
Bob Zubkoff Jr.
Working with scroll components and my project has quite a few layers. I am having an issue when I go in to code where my layers are not in the correct order. I tried to manually place the scrolling content behind the items I want it to appear behind with this code: scroll.placeBehind(secondaryNav) it doesn't seem to be working for everything though, any suggestions?
1
Josh Krauth-Harding
I haven't used Framer in a little bit and it looks like I'm no longer able to change fill color of shapes? Anyone know?
3
Benjamin Den Boer
Hey all. πŸ‘‹πŸ» We just launched Voyage, a travel-themed interactive UI Kit. It’s a beautifully-designed app flow from splash screen and trip booking to currency converter. Every artboard in Design has been hooked up with custom animation in Code. ⚑️ Download the Voyage UI Kit and share to win an annual subscription of Framer (also applicable to current users) β€” http://bit.ly/2g6eoFR
5
Sadok Cervantes Rabadan
Hey guys, maybe one of you knows what's going on here. I'm prototyping for desktop and I want to scroll with the mousewheel but it's not working, does anyone know why? Thanks!
3
Jason Sparks
I just downloaded a font 'Source Sans Pro' and installed via Font Book, where it is now showing as installed. I was hoping this would automatically appear in my Framer design tab fonts dropdown but no such joy. Any ideas?
2
Benjamin Den Boer
Hey all! Here's a new ScrollComponent example that highlights a swipe-and-scroll interaction. All cards are scrollable, and can be deleted by swiping them either left or right, to which the rest of the cards respond accordingly. The interaction is based on your dragging velocity and your dragging distance. It includes a few nifty tricks 'n methods: - directionLock and directionLockThreshold - Events.DirectionLockDidStart - updateContent() - draggable.velocity Hope this is helpful to some of you tinkering with the new ScrollComponent and Draggable! :-) Download: http://share.framerjs.com/po5q94qatbzh/
10
Alex Maxim
Hi guys! I am new-new to Framer but I love the whole concept. I have no experience with coding, whatsoever. I work with Sketch & Flinto (for transitions/ animations). I downloaded the Framer tutorials and I am trying to follow the logic. Would've loved to be able to do screen transitions and connect layers and do micro interactions with autocoding (you undersand why :D ) Is there any other way to understand the syntax and the flow code in Framer, so that I'll be able to do cool prototypes as seen in many examples? Thanks! ;)
6
η©†η½•ι»˜εΎ·
Hi guys, just a quick noob question. Does the studio no longer add the .gitignore file to the project anymore?
3
Sergey Voronov
Anyone from Frankfurt interested in hosting/attending meetup at first week of November? can help with talks and such, will be in the city that week.
0
Oleg Frolov
Privet, tovarishchi! Just experimented with on/off button interactions. State machine became better.
3

October 06

η©†η½•ι»˜εΎ·
Hi guys, A day of frustration and headache and I am here again. I have a page component and the pages are draggable within constraints. I want to set there initial Y value to be a little bit down and then be able to swipe them up like this. https://framer.cloud/PATRt However, if I do not put them in a container and I don't want to, it breaks as here: https://framer.cloud/TAJdj I would appreciate if anyone can guide me why this is breaking.
1
Alan Travis
JinJu Jang I used your breathing circles as a basis for some playing I wanted to do with trig and animations. I initially coded it so that I could morph back and forth between the cos or sin wave and back to the circle. after that I added a Utils.modulate on the radius so that I could create a 2D nautilus / spiral... After that there was no stopping until there were some fun animations... Anyhow I thought it looked cool and wanted to share with the group.
3
Eugene Joonsup So
Hello everyone, Is there a way to embed Framer project in html DOM other than using iframe? It seems like Framer always creates a wrapper div at the root level.
1
Alex Gilev
Hello everyone. I'm pretty new to Framer and currently working on website prototype. I want to trigger animations based on scrolling (when an element enters the viewport), for example: 1) Scroll down and 'Section1' fades in and moves 30px up. 2) Scroll down further and 'Section2' fades in and moves 30 px up. ... and so on. I tried to use: scroll.onScroll -> if scroll.scrollY > 900 ... but I feel there is a smarter way to trigger the animation when an element is in viewport rather than calculating the distance manually and write 'if' statement everytime for every section. Also, tried to search in the group but didn't find anything for my case. Any help would be appreciated, thanks guys! πŸ™πŸ»
2
Callum Nowlan-Dias
I want to decrease a counter by 1 every time listIcon is clicked, but the decrease is only firing once. counterValue = 3 counter.templateFormatter = (value) -> Math.round(value) counter.animate template: counterValue listIcon.onClick -> print "trigger" counter.animate template: counterValue - 1 How can I get this to fire until the counter is 0, where it stops?
3
Wendy Lim
Hey, I've been using ajimix's Input-framer module for the first time. It's all going swimmingly except Why is the blue box when I focus in on a field slightly offset from my actual field?!? See screenshot. It's driving me a bit nuts. Any idea how I can fix this? Here's relevant bit of code: typehere = new InputModule.Input parent: card x: move.width + gutter*2 width: 250 height: listHeight name: "typehere" type: "text" text: str.substring(1, str.length) color: "#000" fontSize: 14 fontFamily: "Georgia" backgroundColor: "rgba(255,255,255,1)" borderColor: "rgba(202,202,202,1)" padding: "0 0 0 10" borderWidth: 1
1
Wolfgang Rispler
How does framer handle the font style that are set in designer. A text field with a system font and in code with print text.fontFamily results in null. Actually I am trying to match set system fonts to css styles globally.
4
Oleg Frolov
Hi guys! Just explored a concept of image gallery that I'm working on.
1
Javier Eduardo TreviΓ±o
How can I have Framer Preview display custom fonts? they look alright inside Framer Studio and in Safari but when I preview it on my iPhone it defaults to a generic font. is there a specific way to include it? I guess it makes sense that is not being displayed as I added it from Typekit just like I would do in Sketch or Adobe CC. I know there must be a way to include it like in a website but I can't figure out the Framer/CoffeeScript way of doing this
1
Morten Just
I'm probably missing a detail here. Does anyone know why the second screen is black the second time I get to it?
8
Nidhi Jaiswal
Hi, this is a newbie Framer question. I need to see my prototype that I developed using Framer on the Android device. I downloaded the Framer Android app. While the Framer studio gives me an access code to preview it, the android app wants a url. I am confused where to enter the access code in the Android app to preview my prototype. Thank you all for the help.
0

October 07

Destiny Fox Kanno
Hello everyone! I have an iPhone 7 prototype I'm building for a client, and I'm having difficulties with how to export it so that they can access the prototype on their iPhone. I know we have Framer Cloud, but is there a way to provide a more smooth experience? Thank you in advance!
3
Christopher Murray
Hey folks. Looking for some help with onClick events that appear onMouseOver. Every time I try to click on the player controls, the onMouseOut event triggers. Can anyone help me keep my hover state up while engaging with my player controls? Here is the example: https://framer.cloud/LIiLc
1
Bandar Aljahmi
Hey, I'm trying to display a custom font on my prototype by changing font family and it's working well until I tested on my iPhone I got a normal font. Is there any method to make it work on the iPhone?
1
Adam Deher
Question about animating multiple shadows. Is it possible to apply multiple shadows to a layer in design mode and then animate those individual shadow properties in code view? In the example below, I have created an additional state to my layer. It has two modified properties- the radius of the layer and shadow3. When I cycle through the states of the layer the radius property animates as expected, but the shadow3 property only animates from the default state to state A. It never animates back. Am I missing something? Thanks for the help.
3

October 08

Isa Bison
A module for drag and drop, and other things. https://github.com/IanBellomy/Pair
5
Alex Gilev
Hey guys! Hope everyone is having a great weekend. I've come across with the bug while exporting a desktop prototype and previewing it in Safari. Scroll just doesn't work, it kinda moves 1 px down instead of a normal speed on scroll. In Chrome, everything works properly. Any idea how to fix that? Thanks!
1
Dmytro Zaliznyj
Guys, have anyone faced this error? I constantly face this one.
1
Emil Widlund
I made a quick snippet showing how to create an infinite Sine Wave-animation pattern in Framer. Feel free to modify, copy or whatever you want :) You may wonder why it's not using the common animate-method. The reason is that we want to use time as a dynamic value for every frame we're rendering, which isn't doable with the animate-method.
1

October 09

Elliot Nolten
Hey guys! I designed some pages in Framer, made a FlowComponent out of it. But... I don't want fixed headers and footers. I know silly me, but I want the header and footer scroll along with the rest of the page's content. How do I do this?
2
Cezary OΕ‚owski
Hi, quick question: is there any way to make a password input with asterisk printing inside? I'm using Input-Framer module.
2
Steve Ruiz
Playing around with SVGs in Framer, lots of pretty possibilities. πŸŒ€
2
Sandor Rozsa
desperately needed – help from a framer veteran:
8
η©†η½•ι»˜εΎ·
I would like to thank Alex Maximets for pushing me to get another one done. I am just trying to play a small part in the community. Hope this can bring some good prototypes alive.
0
Javier Eduardo TreviΓ±o
what's the best course to learn as much as possible about Framer? I am starting a company with two friends with different backgrounds ( front-end web, visual design) and we're looking for an extensive, premium course to be able to learn it really well
2
Alex Gilev
Guys, do you know why the desktop prototype looks blurry in Chrome? I've tried everything, importing 2x, scaling, nothing helps.
3
Taylor Palmer
The Slack invite page seems to be broken (getting a 500 error). Any other way I can receive an invite?
3
Steve Ruiz
More SVGs:
2
Shanshan Li
Hi everyone, I have a question need you guys help. Does anyone know how to change the cursor in framer? I want to design an icon for my website, which could take place of the cursor we usually use. Thank you very much.
1

October 10

Roy Schmid
Hi everyone, I'm quite new to Framer and only worked on a couple of smaller projects so far. I'd really like to learn a lot more and be more proficient with it, so I was wondering if there are any recommendations on how best to learn Framer, in terms of learning resources (tutorials, videos, books, etc.) I do have a coding background, but a lot of other people that are interested in Framer may not have background. I've found this Framer eBook online - https://framerbook.com/ - and was wondering if anyone would recommend it? If someone has used it I'd love to hear what your thoughts are... likewise any other good resources (paid or free) would be greatly appreciated. Thanks a lot :D
8
Jonathan Dang
Anyone else experiencing really slow import times? I'm running Sketch and Framer on a late 2013 macbook pro and sometimes importing my file hangs my machine entirely.
3
RenΓ© Schiebelhut
Hey guys. Is there a way to animate text in a button (on click) from left to right instead of the initial middle based animation? I got the idea from inVision (when you want to delete an artboard for exmaple and the icons show up from left to right). Thanks for help.
4
Arturo Goicochea
I don’t know of an equal or better alternative, feature or community wise, but honest question here: is there any chance/thoughts/possibilities on moving the Framer of Facebook? Why I ask this: the Framer group is the only thing keeping me on Facebook. If it is only my case, please ignore this post, but thought there *might* be other people for whom this is also true?
10
Martin Halik
How to slow down mouseWheel scrolling? is way too fast :(
1
Mohammed Morsi
Hi Framer folks, I've got a question for Framer power users who've been using it for 2+ years. Do you find yourself using Framer Design in really big prototypes or you just code the whole thing? Coz it feels faster to me as for someone who've been using it for 2+ years. if you also have anything to add please feel free to write a comment below Thanks πŸ™Œ
9
Wojciech Dobry
Hello Folks! That's me again. I just wrote the article about real data usage in Framer. #Framer + #API = ❀️
1
Jason Valalik
Has anyone created a drag&drop functionality for rearranging items?
0
Sergey Voronov
AR in Framer! OR maybe just video layer :), that works both on desktop (highsierra) and ios11 stored on cloud. will not work locally live sample - https://framer.cloud/DjFni github https://github.com/mamezito/videoLayer
6
Bhaskar Ravi
Interesting issue. SF UI displays fine in the Framer Preview app, but SF Pro doesn't render properly (defaulting to Times NR I think). I'm running iOS 11 - has anyone else had this issue? Thanks!
2

October 11

Jon Madison
only tangentially related to Framer, so apologies in advance. How is Framer able to get the list of open Sketch files? is it doing so via Cocoa APIs? Closest i've found is NSRunningApplication, but can't figure out how to grab open files. In particular I'm trying to figure out how to programmatically determine which Framer projects are open, and nothing jumps out in NSRunningApplication (except some seemingly deprecated fields in the Accessibility API)
1
Javier Eduardo TreviΓ±o
How can I make a video play and stop on a Tap Event? Also is it possible to store the functions inside states so it just cycles states onTap? here's my code Malta = new VideoLayer width: 408 video: "images/EF%20-%20My%20summer%20in%20Malta%20(720p).mp4" height: 240 x: 0 y: 0 opacity: 0 z: 5 perspective: 100 Malta.states = a: html: Malta.player.play() b: html: Malta.player.pause() playIcon.index = 1 playIcon.parent = Malta playIcon.onTap -> Malta.stateCycle() Malta.opacity = 1
0
Grzegorz RΓ³g
Framers! πŸ”₯ After months of hard work I'm releasing my project with UI/UX courses. You'll find a 6-hour-long course on Framer there! Please, support me on https://www.producthunt.com/posts/learnux-io Thank you! πŸ™
2
Felix Lorsignol
Hi, I'd like to open a prototype that I've made with the Framer Preview iOS app, but it's unable to open them in-app. Furthermore, my company's network policy doesn't allow to "discover" my Framer Mac app, so I am unable to open the prototypes in app. How can I download the prototypes into Framer app??
5
Alvaro Lourenço
Is it possible to set "Pin" positions and "Flexible" dimensions by code?
7
Hassan Khan
Hi guys, this is a design related question and not about Framer. I need to find the mockup for the following image but I dont know what they are called. I tried to search keywords like iphone plain white mockup 3D etc but could not find them. If anyone knows what they are called or where can I find them, that would be great
2
Nathan Llewellyn
Hi y'all. I'm super new to Framer. What is the best way to create a prototype with text input (for a form)?
2

October 12

Jason Sparks
Working to a deadline and pulling my hair out with this. Why are some of the layers on my second screen not showing? It appears that they exist off screen, offset somehow. No idea why they are not consistent. On the first screen, click the 'Male' button and observe how on the next screen only the 'Next Question' and 'Back' link are in their correct relative positions. The whole priceContainer isn't in view.
2
Louis Currie
Dear Framers, did anyone figure out how to animate an SVG graph?
5
Shengqing Liu
Hey all, I am new in Framer. I have a question here. I have created 3 squares in design tab. In code tab, how can I set a class for these 3 layers in code tab? That I don't need to program the same mouseover animation repeat 3 times.
1
Tommy SundstrΓΆm
Trouble with the code? I'm sure many here already know, but to me this was news: Framer has a debugger. Just write "debugger" anywhere in you code, and the code execution will stop there – if you have the debugger window open. (Open it by clicking β€œInspect” in the lower left corner of Framer Code window, or shortcut Cmd-Alt-i.) Now, what you will see is the messy javascript code, not your original nice coffeescript. Still, it can be quite helpful for digging out the information that you need to find your bug. The tools I find most useful are: * Hovering over a variable you want to know the value of. * The details sidebar – a small icon in the top right corner. This shows the current values of all variables. * Being able to execute the code step by step – controls in the top left corner.
1
Isaac Fagerli Schneeweis
A request for the design–part of framer: Make the scrolling smoother. Having the scroll jump from 150% to 200% in one scroll is annoying. Couldn't it be as smooth as in sketch or XD?
1
Wolfgang Rispler
Is there any way to have commit messeages with versions that are uploaded to the cloud?
0
JL Flores Mena
Is it possible to pass all text styles for a TextLayer in just one attribute? Right now I have to use both "color" and "font", I'd like to use only one. (I've tried "font" and "style" but it's not working).
4
Minjong Lee
Hello! Does anyone have the same issues with draggable? When I attempted following code, layerA.draggable.enabled = true layerA.draggable.horizontal = false layerA.on Events.DragEnd, -> layerA.animate properties: y: 0 the draggable element jumps and positions into random y points not to y:0. Am I missing something?
6
Bhawna Sharma
Hi Guys, i am currently busy with my concept design for a native app. It's about a webshop that sells camping and winter products. This is the website www.dewitschijndel.nl. The problem is that my company wants something different in the app, so not a webshop but something else what can be relevant for the users. Do you guys have any idea's? Please let me know!
1
Dmytro Zaliznyj
Guys, this is my attempt with my friend that we`ve made during the weekend to implement D3 Library into Framer, we`ve managed to view the chart. But for now, it does not make anything more than that:) Maybe someone will be interested to cooperate on this one.
3
Alvaro Lourenço
Where's the default scope used by Framer/CoffeeScript for global/unscoped variables?
1
Sarah McDermott
Hi everyone! Has anyone ever tested a Framer prototype with Validately (https://validately.com/)? I built a prototype that responded to screen sizes and it worked on my HTC 10, a Samsung S8+, an iPhone 6, and a Pixel, but when the testing agency ran their test, the prototype was really zoomed in. The user was testing on an HTC 10 and a Samsung S7. When she tested on an iPad, it worked great. The woman running the test went back and tried it on some older Android phones and on some iPhones with no issue. I'm thinking that the software affects how the prototype recognizes screens sizes, but I was wondering if anyone has had this problem before and if they were able to fix it.
0
Nathan Llewellyn
I'm prototyping a web app. I've imported two artboards from Sketch into Framer. Each art board represents one step in a multi-step from. What is the best way to keep the header but swap out the content of the two art boards?
1
Jithesh Ramesh
Any idea why this is happening when I am trying to get Framer Modules to work
1
Alvaro Lourenço
What's the use for this little lock in Framer alignment tools?
2

October 13

Wonyong Choi
Hello~ Framers!! I made prototyping for the mail app concept. I hope you enjoy it. :) check the prototyping here. http://share.framerjs.com/fho1wd8qr4nb/ Thanks~
6
Sam Kilbey
Hi, very quick question, how can I get the blue circle to fade in, the same way it fades out? At the moment it just pops back but I was it to gradually expand. Thanks!
1
Nathan Llewellyn
One more question for the day...how would I create a sticky website header if I'm importing from Sketch?
1
Nathanon Inplub
Im try to fix ios kit but it still oversize from preview frame. How to fix ?
2
Mike Brand
What's the best way to recreate actions that show up on the swipe of an iOS table cell? I tried the following, but the cell jumps around Layer.onSwipeLeft (event, layer) -> swipeDistance = event.point.x-event.start.x Crush.x = swipeDistance
2
Jason Sparks
Can anyone point me to a Framer demo/project that covers the Accordion UI pattern please? I Googled but could only find screen shots or videos - I need to see it in code and I swear I've seen one before somewhere but can't track it back down.
3
Murilo Ravani
Hi everyone! It's possible to use Framer on this? Mac Mini Apple 2.4ghz Core 2 Duo 8GB of DDR3 memory HD 160gb Intel Ssd G2
3

October 14

Gautam Bose
Has anyone tried using an external library to handle apple pencil input? Wondering about something like this:
0
Johannes Wong
How do I get these measurements to show up along with my alignment guides? I don't see an option to turn them on.
3
JinJu Jang
Hi everyone, here is a fun prototype to share. (Waaaaa it's 3D!!) https://framer.cloud/doVdo/ Telling the truth, this one is seriously simple to implement despite how it looks. Nothing is made with real 3D or svg, they are 6 squares with simple X, Y rotations. (Based on Muhammad Athar 's code.) For animation, x2 looping animations at the end. If you are even more interested in this topic, here is where it all began. Fun! https://www.facebook.com/groups/framerjs/permalink/1282682718525463/
5
张琨
Hey all, today I saw a gif online and really curious how to code it in Framer? anyone knows? i know it is pretty hard, but thanks a lot of anyone have any idea about it.
7

October 15

Yana Georgiev
Hey gang! I made a thingy
1
PrzemysΕ‚aw Baraniak
Hey Framer users, Do you agree with me that UI Motion Design is now one of the most important parts of digital product creation? If you would like to extend your knowledge in the matter of UI Animation - I have gathered lots of useful content in one post. You will find topics like Principles of Motion, Design software tools, additional training, workflow tips and even how to make motion design specs for your creations. Do you know other interesting articles about Motion Design? Feel free to let me know, I will add it to the article. Thanks!
0
Keith Lang
Is there any way to easily copy example code from in-app documentation so that the spaces convert to tabs correctly, instead of Β·Β·Β·Β·Β· ?
3
Joseph Reni
does anyone know why if I use y: Align.bottom if I want to add additional pixels to it, I have to remove the space from after the + sign. so "y: Align.bottom +4" but if i'm not using Align.bottom there HAS to be a space. I'm not a developer so go easy on me.
2
Aurimas Preilauskas
Hey all. Newbie question - can I (somehow) export Framer artboards in .png's?
2

October 16

Wouter Van de Kamp
Heya! I noticed something strange today! I recently switched to Figma and started importing some artboards today. While doing so I noticed that some colors where getting a different value, like they are washed out. In Figma they are bright but in Framer they are missing some hue. Anyone aware of this? Not sure if this is still visible in the attachments because of the image compression and screenshot quality.
1
Emin İnanç Ünlü
I realized that in design mode we're not allowed to use half pixels! I was going to set height of divider to 0.5px but I can't do it. I guess I have to do it in code until it's supported.
3
Karina Kozinsky
Can I make this in Framer, I mean flip the layer with axis in 45 degrees
2
Joscha Ilge
Hi everyone, I’m currently looking for a tool that’s able to preview prototypes on Apple Watch. I read in a post on medium that this should be possible with framer, but framer preview seems to be available only for iPhone and ipad. Is there somebody with experience on this topic? Is it possible to preview your prototypes on Apple Watch? If yes is there some documentation available how it works?
2
Work Mike
Hey people - can someone confirm or point me to a tutorial of the best way to use custom fonts? I keep seeing different posts that seem to offer different solutions. Currently I have my custom font in an assets folder and I'm able to call it using utils.insertCSS and have a new layer & setting html style that works but how do I apply this to text objects in the design view? I have several screens all complete and not sure if I need to create these in code for this to work or if I can target them and then apply the style in some way...
0
Paul Wan
is this hidden feature in TextLayer ? I can't find it in Framer docs ! # you can set "autoSize" for a textLayer(Frame) in the Design mode !
3
η©†η½•ι»˜εΎ·
A question from the Framer people. Is there a way to add the border on the outside?
2
Stavan Himal
Hello friends, I have these two layers which I want to rotate through onClick event. Can anyone tell me what should be my fixed anchor point so that I can rotate it from these points? Thank you!!
1
Joseph Reni
Is there a way to autocode text layers? (not styles but typography?)
2
Zlatko Petrov
Looking for a freelancer - full stack Framer prototyping. PM me if interested with portfolio details, rate and availability. Thx!
0
Taylor Palmer
Hi everyone, I'm about to jump on some usability tests with customers and I have red Javascript errors showing up at the bottom of the prototype. Is there an easy way to hide these?
2
Groingrugroin N'Golo
Hi guys ! I'm a beginner in Framer and I'm working with array right now. I have an array with elements from the design page : playlist = [playlist_1, playlist_2, playlist_3] for i in [0...playlist.length] playlist[i].opacity = 0 And then I want them to have the same animation on hover of each individually but I'm stuck there, how should I declare my Events.MouseOver function in relation with the array ? Thanks a lot guys !
2
Julio Angulo
Hey all! I'm working on a prototype for a web app to be shown in a browser. Is there a way to center the contents of the framer prototype so that it shows in the middle of the page all the time? Thanks!
1
Greg Becker
Wondering if there are any Framer peeps in Portland who might want to start a meetup. I just purchased my license and would totally come to learn.
4

October 17

John Smith
I've been running into a strange issue when importing my own icons as SVG's. When I output them via sketch I will edit the file via a text editor to remove the ' fill="#FFFFFF" ' attribute. By doing this I've found that I have complete control much like the icon used in the icons panel. Yet when I position them in my layout, via design view, when I view it on the code side the icon is shift 20 pixels below from where I position it (on the design view). I have to offset the 20 pixels to match the design when viewing via the code view. Is there a reason why this is happening? Is it because I've removed the fill attribute in the svg file?
5
Alex Gilev
Does anybody know why Framer's native preloader doesn't work while using in the desktop prototype? My proto is image heavy and I wanted to add a preloader to show animations after everything is loaded. I used this: Framer.Extras.Preloader.enable() Framer.Extras.Preloader.setLogo("images/logo.png") But it doesn't work. Images load slowly and I can't see any preloader. Anybody had the same issue before?
1
Jonathan Harvell
Is there a way to create an array of dynamic text layers? For example, 6 different timers that rotate through a text layer as you tap a button
1
Lukas Guschlbauer
I just created a Framer Group for my hometown Graz! Anyone from the area should join! Our first meetup is going to be on the 30th of November! More infos will be posted in the group soon!
0
Karan Murthy
Landing screen , few more to go and I will be posting the gif
2
Ben Ellis
Hi all, Looking into using Framer to prototype a TV App experience for a client here in the UK. I want to hook up a physical TV remote, capture the keystrokes on the arrow pad etc and then translate that to control a prototype on screen on the Mac. Have seen these articles here: https://medium.com/@johanstr/game-controllers-and-framer-de77610704d4#.a4yw8ynrx here: https://medium.com/framer-prototyping/apple-tv-prototype-with-framer-using-game-controller-59f1fc3d3b0f#.wcog76qr7 and here: https://www.orderedbytes.com/controllermate/compatibility/#apple/extended_usb_keyboard and was wondering if anyone had any tips/experiences they could share? Thanks in advance. Ben
8
Keith Lang
Trying to embed a framer prototype in a Mac app, it displays, displays, but doesn't animate. Read everything I can…Trying to avoid embedding a server, since it seems it *should* work. Plist has Allow Arbitrary Loads in Web Content. The Framer file loads correctly in Safari with Disable Local File Restrictions ON, so it seems it *should* work. Anyone got a hint about what the Framer file needs that I'm not giving it? I've tried numerous ways to load the URL too… π™½πš‚πš‚πšπš›πš’πš—πš *πš›πšŽπšœπš˜πšžπš›πšŒπšŽπ™ΏπšŠπšπš‘ = [[π™½πš‚π™±πšžπš—πšπš•πšŽ πš–πšŠπš’πš—π™±πšžπš—πšπš•πšŽ] πš›πšŽπšœπš˜πšžπš›πšŒπšŽπ™ΏπšŠπšπš‘]; π™½πš‚πš‚πšπš›πš’πš—πš *πšŒπšŠπšŒπš‘πšŽπ™ΏπšŠπšπš‘ = [πš›πšŽπšœπš˜πšžπš›πšŒπšŽπ™ΏπšŠπšπš‘ πšœπšπš›πš’πš—πšπ™±πš’π™°πš™πš™πšŽπš—πšπš’πš—πšπš‚πšπš›πš’πš—πš:@"/πš‘πšπš–πš•/πšπšŽπšœπšπ™ΎπšŸπšŠπš•.πšπš›πšŠπš–πšŽπš›/"]; π™½πš‚πš‚πšπš›πš’πš—πš *πš’πš—πšπšŽπš‘π™·πšƒπ™Όπ™»π™ΏπšŠπšπš‘ = [π™½πš‚πš‚πšπš›πš’πš—πš πšœπšπš›πš’πš—πšπš†πš’πšπš‘π™΅πš˜πš›πš–πšŠπš:@"%@/πš’πš—πšπšŽπš‘.πš‘πšπš–πš•", πšŒπšŠπšŒπš‘πšŽπ™ΏπšŠπšπš‘]; π™½πš‚πš‚πšπš›πš’πš—πš *πš‘πšπš–πš•π™²πš˜πš—πš = [π™½πš‚πš‚πšπš›πš’πš—πš πšœπšπš›πš’πš—πšπš†πš’πšπš‘π™²πš˜πš—πšπšŽπš—πšπšœπ™Ύπšπ™΅πš’πš•πšŽ:πš’πš—πšπšŽπš‘π™·πšƒπ™Όπ™»π™ΏπšŠπšπš‘ πšŽπš—πšŒπš˜πšπš’πš—πš:π™½πš‚πš„πšƒπ™΅πŸΎπš‚πšπš›πš’πš—πšπ™΄πš—πšŒπš˜πšπš’πš—πš πšŽπš›πš›πš˜πš›:πš—πš’πš•]; π™½πš‚πš„πšπ™» *πš‹πšŠπšœπšŽπš„πšπ™» = [π™½πš‚πš„πšπ™» πšπš’πš•πšŽπš„πšπ™»πš†πš’πšπš‘π™ΏπšŠπšπš‘:πšŒπšŠπšŒπš‘πšŽπ™ΏπšŠπšπš‘]; [πšœπšŽπš•πš.πš πšŽπš‹πš…πš’πšŽπš  πš•πš˜πšŠπšπ™·πšƒπ™Όπ™»πš‚πšπš›πš’πš—πš:πš‘πšπš–πš•π™²πš˜πš—πš πš‹πšŠπšœπšŽπš„πšπ™»:πš‹πšŠπšœπšŽπš„πšπ™»];
0

October 18

Maximilian Bredow
I want to change the state of a tappable layer that is behind a draggable (invisible) layer. In a different prototype I have been able to combine tap+scroll with "do", but I can't get the tap to work in combination with drag. Example prototype: https://framer.cloud/cxodp Thanks for your help!
1
Stavan Himal
May anyone please help me with creating this kind of effect?
4
Martin Halik
Is there way to [ ] clip. children layers? in Framer Design? or code only?
2
Sergey Voronov
whats the official way of getting Touch point on mobile? I bang my head through the wall trying all ways - event.x, event.clientX, event.offestX, event.ContextPoint.x and so on
1
Matt Bogado
Unsolicited redesign of NASA - National Aeronautics and Space Administration mobile app: https://framer.cloud/OQcMK/
3
Tim Kjær Lange
Is there a way to view the file names of prototypes in Framer Preview for Android? These hashed names are not super helpful.
0
Sarah McDermott
What do people use to remotely test their prototypes? Validately isn't playing nicely with my stuff right now, so I'm looking for other options. Is there anything else that does a screen & audio recording?
4
Tim Kjær Lange
Troubleshooting a Sound related issue using the built-in sound library. I can get the sounds to play in both Framer Studio and OSX Chrome. However, when I try to get the sound to play on an Android device, nothing plays. I've deployed my prototype to a Heroku instance as I'm having some WiFi-related issues in Framer Preview. Any ideas on how to troubleshoot this? I tried to transcoding the m4a files to mp3, but that didn't solve my problem.
1
Aaron Winkler
Hi all, is there a trick to setting up scrollCompents on multiple flow screens? so i have a flow and 2 screens and one overlay. first flow page carousels(scrollComponent works fine) second flow page the carousels scroll but they don't scroll enough they just snap to the start position. thanks in advance.
2
Koen Bok
This weeks Oculus keynote by John Carmack reminded me of his talk (or lecture) about physics, light and rendering. While the contents might sound heavy, his ability to explain it in an understandable way for anyone is extraordinary. Understanding the base techniques to emulate parts of reality on computers is comparable to understanding presses and ink for print designers, in my opinion. And just fun to learn. If you have an afternoon to spare, watch the whole thing and exponentially increase your knowledge on computers, nature and the whole universe.
4
Silvia BormΓΌller
Hi there, happy to announce that our next Framer Meetup will take place on November, 29th at Microsoft Munich. Also Sergey Voronov is going to join us. How cool is that!? Join us here: https://www.meetup.com/de-DE/meetup-group-framerjs-munich/events/244308844/
1
Summer Bedard
Has anyone come across a framer protoype for something that looks similar to swype keyboard? Or any drag gesture that generates an ephemeral line like that?
1

October 19

Agustin Burset
Hi! Just getting started with Framer and as an exercise was trying to imitate the maps app on iOS, but I'm not being able to think of a way of getting the background to darken when pulling up the search menu (without affecting the colors of the menu's blur in the process). Thought of just putting a black layer between the menu and the map and modulate its opacity but that darkens the menu too :/ This is what I've done so far https://framer.cloud/HdRDG
2
Ryan French
Alright guys. Could someone point me towards the best latest Framer video Tutorials / courses? Latest would be ideal so it features the most up to date version of Framer. Thanks
17
Aaron James
I'm running into an interesting set of problems. I'm listening for an onDragMove event for my scroll component. When the onDragMove event reaches a certain threshold, the header layer will begins to scroll with the scroll component. This interaction works perfectly when the screen is at 100% zoom. Once the screen is scaled, the onDragMove threshold seems to move... so that is problem 1. Problem 2. As soon as I view this on my iPhone, the prototype no longer sees the onDragMove event, effectively breaking the prototype... Any suggestions?
2
Juhana Schulman
Is it possible to alter the width of parent layer with code and have the child layers change proportionally according to the layout-rules set in design mode? Or do the layout-rules only apply in Framer's design mode?
0
Emmanuel Henri
Amazing job Framer team! Looking forward to update my courses with all those new features!
1
Caroline Craddock
Hey guys! Looking for some help. How can I display the individual layers from a group in Sketch in the imported Framer file? I've attached screenshots of my Sketch folder structure and the Framer layers. I want to be able to animate these individual layers from my Sketch file (within the StatusBar folder) - Caroline
2
Eli Beitzuri
I'm having a super frustrating experience trying to *securely* deliver my framer prototype to a 3rd party research company in a foreign country. Framer Cloud goes into an endless loop of sending a link to the invitee and then the linked page says to look for an email with a link. I tried setting up my own server with a directory that was secured using .htaccess. But the mobile app doesn't support this kind of authentication. It's cost me and my team a lot of hours in trying to find a way to make this work, and has had the effect of creating a pretty negative view of the tool. Has anyone found a good way to securely deliver these prototypes?
3
Ayman Elafifi
Hello all, if there any tutorials in Framer to build something similar to this logo animation effect?
5
Kenneth Spry
My work forbids me from using Framer Cloud. It’s important that I be able to share my prototypes simply with people who don’t have licenses, ideally for mobile and desktop. I’ve figured out how to get the index.html to load the prototype for Mac Safari by adjusting the settings, but it shows only the phone simulator in Chrome. Nothing works for mobile. If I could get some good instructions on how anyone with Windows or Mac can view/test a prototype, that’d be great. Mobile is a bonus. Thanks!
1
Felix Lorsignol
Hi, is there a way to disable the Access Code needed to access prototypes? We are running some prototypes on a screen that we cannot actually input, but is responding to events sent by socket.io. We need to bypass the access code screen and jump straight to the prototype. Thanks.
0
Cezary OΕ‚owski
Hi, I have a frustrating problem and I do not know how to solve it. I'm trying to use EventListener with inputs, so when you press "ENTER" the label and a tick will turn green. But when you do that, suddenly a strange grey layer appears on top. It also happens on Cloud. Do I have bad syntax here or this is something else?
3
Joseph Reni
is there any way to change the cmd-shift- > to nudge 8 instead of 10?
3
Jonathan Zazula
Are there known performance issues with Framer Prototypes on Android devices? Help
1

October 20

Koen Bok
Dear Framer users. What are you favorite JavaScript interface frameworks besides Framer and why? What great parts should Framer also offer in a future version?
16
Π’ΠΈΠΌΡƒΡ€ МинвалССв
Hey guys. I’m searching for library to get access to the camera device (iOS). I find this GutHub project https://github.com/ktcy/CameraLayer, but it’s working only in Web Chrome/Android. I need get access to iOS camera. Have anyone solution? Thanks.
1
Emily Rautenberg
Besides editing Framer.js, does anyone have any suggestions about editing default TextLayer attributes? For example, I can do: Framer.Defaults.Layer.backgroundColor = "red" but not: Framer.Defaults.TextLayer.fontColor = "red" So far all I've found is this: https://github.com/koenbok/Framer/issues/490 Is this still in the works? *hopefully*
2
Javier Eduardo TreviΓ±o
what are some ways to make my prototype run faster?... I am still a beginner so I don't know them, I've been using Framer for a while but only for very basic experiments. Now I am starting a company where we'll use Framer for our prototypes but I can't seem to make it run faster on the Framer app, in runs very fast in desktop Safari but it runs quite slow on my iPhone using the Framer app Here's my project:
5
Blaine Billingsley
What is the best way to do a tray that scrolls? So like, it's draggable up to a certain point, then scrolls within it. When you scroll up, it scrolls to the top and then is draggable down after that?
2
Lukas Guschlbauer
I'm currently hacking on a "Camera Button"-Prototype! If everything works well and I can somehow improve the efficiency, I'll make it a module! (Though this could actually run smoothly on a newer phone...) It's inspired by Astropad's efforts! Read about it here: https://medium.com/astro-hq/camera-button-ba3d8c493cbd
8
Isa Ojanen
Hi guys, I'm having a bit of a problem with getting a sketch file to be scrollable. My current variation of trying to get this to work is this: sketch = Framer.Importer.load("imported/Org-stats%[email protected]", scale: 1) scroll = ScrollComponent.wrap(sketch.content) sketch.content.scroll = true (content is my main group in Sketch that contains everything) But no luck yet. Help?
2
Bob Zubkoff Jr.
I am having trouble getting the flow component to work with a scroll component implemented. In the attached project I just want the button to take me to the next art board. But that will only work if I remove the scroll component. Anyone know how to get this to work?
0
Elliot Nolten
How can I enable the mouse wheel in a Flow Component?
4
Jorn van Dijk
Its a big day for design tools, so it can’t hurt to ask for upvotes around the web. Thanks! Product Hunt: https://www.producthunt.com/posts/framer-export Dribble: https://dribbble.com/shots/3883536-Framer-Export Designer News: https://www.designernews.co/stories/88491
8
Andri SigurΓ°sson
Why am I unable to upgrade to v103 of Framer? Trying to load a project created with v103 but my Framer says 102 is the latest version :/
1
Peter Ng
hrmmm any easy way to get something like Device.pixelMultiplier or Screen.devicePixelRatio? Something that will tell me what devicePixelRatio is for the devices vs the current desktop i'm coding in. Would love to get that variable to size mapbox to the right size since i'm creating it with js outside of framer at like 2x on a 1x screen.
1

October 21

Alan Travis
Check this out... I modified the super secret GridComponent and added drag and drop to it... As well as leverage the the giphy module to add stickers FTW!
5
Aaron James
Still need some help. Anyone up to accept the challenge?
2
Hunter Thompson
Is there a way to mask an image within a rectangle in the design tab? I want an image card/thumbnail to expand to a full page on click.
1
Vlad Mafteiu Scai
I noticed that when I press Cmd + D to access the documentation, the font weight used for the code is way too thin. Makes things very hard to read. Using High Sierra here.
0
Vlad Mafteiu Scai
I made a cell, made some copies with copy() and put everything in a scroll view. I got 3 questions: 1. How do I remove(hide?) the original layer? I tried hiding it but it affect the copies as well. 2. I know this.animate works on the particular copy that the user interacts with. How do I hide every other copy in the scroll.content? 3. How can I access every copy that is above(visually, not layer hierarchy) the one selected? I guess something like another for loop and counting children index in the scroll view or something.
2
Grzegorz RΓ³g
Hi there! anyone up for a beer in San Francisco, monday evening?/greg form learnux.io
0

October 22

Dave Crow
I built my first prototype using design mode. I’m using Gotham in the design, but I can’t figure out how to get the font to load outside of my local environment for text layers that were created in design mode. I’ve tried loading the font by using utils.insertCSS and adding the font files to the Framer project. I’ve also tried linking to our cloud typography.com account in the index.html file. If I create a text layer in code, I can get the font to load. But how do I define the font in the code for a text layer that was created in design mode? I’ve tried doing it through layer.style, but that didn’t work either.
2
Vlad Mafteiu Scai
BUG: When you select a circle, it looks cut. When you deselect it returns to normal.
3
Blaine Billingsley
Here's another weird one: Working with Design mode for the first time and it seems like a layer's default state is created already for layers made from Design mode, rather than at the creation of another state. Is this intended?
2
Ian McClure
How would one add an event such as .onDrag or .onTap to a subclass of Layer? Can it be done in the definition of the class?
1
Anton Kosarchyn
Hi, guys Why this code doesn’t work in Framer Studio? PS: in Chrome’s console it works fine.
10
JiHoon Lee
My first apple watch prototype with framer. draw the reserved pattern to run the app.
2
Blaine Billingsley
If I switch a state, by default it doesn't animating. However, if I print the @.isAnimating property on stateSwitchStart, is returns true. Is there a way to reliably tell whether the layer is actually transitioning or just statically switching?
3
ζ½˜ιŸ»η‘€
I'm experiencing a conflict between Drag and Click. I have tried this method but the click event does not fire everytime when it's a click. Any help?
3

October 23

Vlad Mafteiu Scai
I was wondering if there are any plans to support and export SVG animations more easily? There are some plugins or methods but they seem either outdated or hard to use.
1
Isaac Fagerli Schneeweis
Someone asked this question recently but it didn't get any responses so i'd like to try again: Is there a way to remove the device frame from preview? ...it is a bit weird to have a MacBook frame inside a real MacBook screen.
1
Thiago Butignon Claramunt
I can't make a update on upload file in my framer. Someone can help me?
0
Nathan Llewellyn
I have a scroll component with an imported sketch layer as the content. When I scroll I can't scroll the full height of the layer, I can only scroll about 1/4 of it. How would I fix this? You can see what I have here: https://framer.cloud/fNlRG Click the Next button in the top right to get to the screen that scrolls.
0
Raul PerΘ›e
Anybody else experiencing issues when trying to upload to the cloud? It's been stuck like this for the past 30 minutes.
5
Jack Hone
Hey, I've been using Bodymovin in Framer for a few days with no problem. However, now I'm trying to use multiple animations on the same screen I'm struggling to point to each animation.. Particularly with .goToAndStop() Anyone have any experience?
1
Nidhi Jaiswal
Hi, I have created a 640 x 400 clickable prototype that I want to view on a 1920 X 1200 device. Is there a quick and dirty way to make the canvas scale by 3 on the screen?
0
Chalen Duncan
Hi! How can I update a variable based on current state? modal.states.a = > image: "images/abc.png" >ids = "images/123.png" I want to do something like this, but I actually can't use an "=" inside of a state declaration.
1
Nathan Llewellyn
What's the best way to use scroll components within a flow component?
1
Ray Alexander
I'm using the Input Field Class module but it isn't blurring my form fields on scroll. anyone know how to set that up? Jordan Robert Dobson?
2
Cordell Orel
Hello ! There is only a reset for animation in the docs. I'm wondering if there is a way to reset the scroll position when you close the menu ? Thank you ! πŸ™ƒ
2
Marcus Romero
How can I reset my trial? I installed it, got busy and now my trial period is over. Will never know if it fits my workflow. How about limiting the trial in a way besides time?
1

October 24

Benjamin Den Boer
Hiya, all. I’ve spent some time creating a new module: Framer Audio. ▢️ It allows you to wrap Audio objects and Slider logic around layers created in Design. Create complete music interfaces in Design, then easily bring them to life in Code. From play buttons to volume sliders to track duration. Here’s V1. I’d love to hear your thoughts! I’ve also recorded an overview video. ✌🏻https://github.com/benjamindenboer/FramerAudio
10
Brad Singley
Is it possible to undock or move the print inspector so it doesn't cover the bottom of my interface?
1
전닀인
Hi, guys I have a question. demoDB.post("/bubbles", { # Add a new `childΒ΄-node with the following values: "x": point.x, "y": point.y, "size": Math.round(Utils.randomNumber(75,175)), "color": "#{Utils.randomColor().darken(10)}" }) when I use this code I can only send 4 of them(x, y, size, color). but I want to send x,y,rotation data when I pinch or drag the bubbles. what code should I add to find out the data and send it to server?πŸ€”
2
Dasha Pishta
Hi, guys! I have a question: I created a scroll-component, but the content of this scroll-component is now shown at all screens of the flow. How can I make this to appear only on a certain screen of the flow? I wanted to make a fixed header and only an area on a mock-up being scrolled. So I made a group layer for header and a group layer for the content (scrollSpendings) scroll = new ScrollComponent width:375 height: 576 y: 80 scrollHorizontal: false scroll.contentInset = bottom: 40 scroll.parent = scrollSpendings.content monthlySpent.parent = scroll.content spendCategories.parent = scroll.content spendingsPayments.parent = scroll.content
2
Stavan Himal
Can I use ScrollComponent.wrap() method without importing anything from Sketch? I have designed my layers in Framer Design and want to use horizontal scrolling in a flow element. Can anyone help me?
2
Carlo Cremisi
Hi guys, I am using the the Web Speech API to build a voice controlled prototype. Safari doesn't fully support the SpeechRecognition interface, so I am opening it with Chrome, as Bailey (https://github.com/baiIey/framer-speech-api) pointed out. Apparently it’s not possible to allow the microphone to start in Chrome, possibly because the page is not served via https. Anybody have experienced this? Do you know if it’s possible to tell Framer web server to work over https instead of http?
0
Chris Keith
super fun z index bug here. Im just trying to do a card flip animation. it works beautifully in a browser but it clips behind the dimming layer in the desktop app and mobile viewer app. any magic work arounds anyone knows of?
4
Boris 'Yreane' Prokhorov
Hello, framers. Sorry, if smb was asking this already. But... if I have a text layer in design mode, is there any way to change it's text with variables in code mode?
1
Slava Volkov
Hi Guys. I need your professional help. Can I display my prototype on my webpage? Not on the Framer cloud
2
Stavan Himal
Hello guys, how can I define width, height, x position and y position of a page component? https://framer.cloud/CTgeu In this example, Page Component is used at the bottom for 2 layers with videos. But, even if I swipe on white space, those pages are getting changed. I want a particular swipe area which should be above those layers so that I have to swipe there only and it gets changed. Because I will need more page components on the screen. Thank you!
1
Keith Lang
Seeing some odd behavior whereby auto-complete is not correct. Please see GIF… a) Is it just me? b) Request: a documentation window with same treatment as the Canvas window so that we can (optionally) float documentation in-view as we work. Would love a key-combo or something more sophisticated enabling on click-to-lookup.
3

October 25

Tim Kjær Lange
Having an issue with CameraLayer on Android Chrome: When I load my prototype for the first time Android Chrome uses the front-facing camera. On subsequent refreshes the rear-facing camera is being used. Does anyone know if it's possible to force the use of e.g. the front-facing camera?
2
Alan Travis
Today's fun was with creating a scrollable horizontal layer [via ScrollComponent.wrap] with an array of cards (images/chat windows/widgets/etc.) and then via click and drag/panning up and down, to be able to increase the scale of each card. https://framer.cloud/BhWMg
0
Jochen Leinberger
Hi, how would I hide an overlay which is part of a flow componet? there is nothing like overlay.hide right?
5
Stavan Himal
Hey guys, once again I am facing an issue. https://framer.cloud/CTgeu I am not able to see the shadow effect on the layers, I have created in Design mode on parallaxOne and parallaxTwo. Can someone help me to sort out that?
0
Giles Perry
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?
4
Baisampayan Saha
Marc Krenn Thanks for the firebase module. Made remote user testing of prototypes a walk in the park now... :)
2
Bob Zubkoff Jr.
I have a flow compentent set up, I added buttons to flip between two artboards β€œnext” and β€œback”. I want to scroll with the mouse wheel, this works when I initially land on the first page. flow.scroll.mouseWheelEnabled = true But once I navigate to the second page/artboard or navigate from the second page back to the home page, the mouse wheel does not work anymore. Any idea on how to fix this?
0
Carlos Santiago
hey is it a good idea to learn coffeescript and javascript at the same time? im playing with React-Sketchapp and learning Framer at the same time but its a lot to take in (thats what she said). anyways, just wondering what you guys think its the best approach
4
Carlos Enrique Mendoza
Hi Guys! I'm newbie in framer. How can made a input text?
2
Blaine Billingsley
Any tips on dealing with this? Looks like originX and originY don't work as intended on a PageComponent.
3
Eli Beitzuri
Is there any secure way to load a Framer prototype into the Framer mobile app without using a Mac? Secure Cloud is still broken. Framer is proving to be extremely frustrating for research applications.
4

October 26

Farrukh Karimov
Hi All, I'm creating several screens, which have a Header and a Footer Menu on the bottom. The Header and Footer are to be used across all screens. One of the screens however has a Page component. What's the best way to set up the design & code such that the elements in the Page component don't show up on all on screens? TIA!
2
Keith Lang
Feature request: When in Design view, allowing selecting a layer and hitting Enter to show the sublayers (per Sketch). ESC to go back up the hierarchy (per Sketch)
0
Π’ΠΈΠΌΡƒΡ€ МинвалССв
iOS app doesn't always see the projects from Framer. Wi-Fi connection the same. Why iOS app doesn't have USB-connection like Sketch Mirror for case if Wi-Fi connection doesn't work?
2
Viktor Suszter
Hi all, ist it true that Framer v103 don't or can't work on macosx 10.11 El Capitan?
2
Rohan K
I want to prototype a video player interface in framer. Any thoughts on if / how I can implement stuff like thumbnail preview when scrubbing the playhead, show subtitles etc. All these things are doable on an HTML5 video player so theoretically should be possible in frame too, innit?
1
Kelby Garside
I'm new to Framer and need to create a prototype of a Powerball lottery ticket. This includes selecting 5 numbers from a grid of 69 and then a drop down for a bonus number between 1 and 26 It's a long time since I did coding, but I am guessing I will need to create an array of buttons (the grid) and a counter to only allow 5 to be selected. It increments as each button is pressed and if the button is pressed again to deselect the number it will reduce the counter. I can then do a check for 5 being selected which will start the animation of the Powerball bonus dropdown to fade it in. Am I thinking along the right lines here?
2
Work Mike
Hi framers - I'm trying to set the colour of some texts out of an array (appended at the bottom of my code). When I print the values I get the correct values out but I can't set individual colours (I'm planning to do this on an event) Is there more to this that I don't understand or something simple I'm missing? alertTexts[1].color = "#f51323" descriptions[1].color = "#f51323" print alertTexts[1] print descriptions[1] They exist in a scroll component called homeCards and use a custom class called cards so is it a targeting issue?
0
Marc Krenn
The #animateOnSpline #module extends the Layer-class so layers can be animated along on a (Cubic BΓ©zier) Spline. Module / instructions / documentation: https://framer.cloud/IXlQU/
7
Floris Verloop
Hey everyone! I’m doing some research around improving our previewing apps for iOS and Android. The features we currently support include the ability to preview over Wi-Fi, save prototypes for offline use and open share links from around the web. There’s some obvious low-hanging fruit to focus on, but I’d love to get a handle on the most wanted features/improvements. Here are some suggestions we’ve received in the past, but feel free to add new options.
12
Floris Verloop
I’ve noticed that there’s a lot of enthusiasm around user testing. I’d love to figure out what we can do to make testing easier. FWIW, it is possible to do user testing using a 3rd party service like Lookback. We recently wrote about this: https://blog.framer.com/how-to-use-framer-and-lookback-for-user-research-3bdb09cbfa86. What are your biggest roadblocks to using Framer as a tool for user testing? Additionally, what features would improve our current flow?
0
Lukas Guschlbauer
Hey Frameristas! I just published my first Medium article about the camera button interaction! Hope you guys enjoy it!
1
Kasper Andersen
I have a scroll component (grey box) with "clip" set to false. Inside of the scroll I have a box (red) with a width wider than the parent. It seems like, it is still clipping the layer on the left side of the component. Is there a way to get around this?
0
Jaco Otto
I need some help, please. I'm trying to build a TV menu. I was curious how I can change the states of layers in a class in a loop. This is what I have at the moment. https://framer.cloud/HVshm How can I make one selected by default?
4
Koen Bok
Hey everyone, Niels recently improved Sketch import performance in the latest beta. If you had problems with this before, please try the beta and let us know how it works for you. framer.com/beta
2
Callum Nowlan-Dias
I'm trying to sequence some animation using states but second second state isn't executing. startQuizButton.states = one: backgroundColor: "#00FFB7" two: opacity: 0 startQuizButton.onClick -> startQuizButton.states.switchInstant "one" if startQuizButton.states.current is "one" startQuizButton.on Events.AnimationEnd, -> startQuizButton.states.switch "two" It would be greatly appreciated is some could point out where I'm going wrong
3
John Marstall
New article about advanced animation.
1
Dan Freeman
Using one of the examples framer gave us, I am trying to create a horizontal scrollComponent inside a flowComponent. When it is the first screen it works fine but if I add a click event to it as an overlay or event just as the nextPage, the scrolling effect stops working. Any suggestions?
0

October 27

Kai Pradel
Trying to figure out how to respond to an onClick event that doesn't automatically trigger an OnMouseLeave event for the underlying layer. In regular JS this is achieved with event.preventDefault but that does not appear to work in this case. Any help is appreciated.
7
Ee Venn Soh
Something interesting. Next level prototyping.
4
Justin Fraga
Hey friends, stuck on an array question: I'm designing a tab bar navigation that triggers a sound when a tab is activated with a tap. I don't want the sound for an active tab to repeat if tapped again. I am trying to use arrays for tabs and sounds so I'm not hammering out tons of code for every state, but I'm stuck on how to reference the contents of multiple arrays in a single for-loop. (Can this be done?) As a simplified example, I'm beginning by keeping everything in arrays that align: tabs = [a, b, c] snds = [snd1, snd2, snd3] My thought was that tapping on tabs[0] would trigger snds[0] and that I could do this with a single loop, because "i" would reference the correct element in each array. But the loop I'm using requires a "this" to target the specific tab being tapped, and I'm stuck on how to reference the corresponding sound.
1
Carlos Santiago
hey guys! so im playing around with Framer Preview for iOS and the prototype is running pretty slow. is it normal? am i doing something wrong or how do you preview stuff locally on your phones?
1
Kit Rod
Framer can we get this too? Niels van Hoorn
4
Yaron Tamuz
Hi all, I'm new to Framer and encounter a weird behaviour: When I try to change a layer color via the inspector it doesnt work as expected. Lets say I'm using hsv mode and editing the numbers, the color become transparent and the layer itself doesn't change at all. Is it a bug or a feature? What am I missing?
0
Charles Shin
How can I make it so that when i do flow.showOverlayBottom(screenB), it is fixed to the top and not the bottom? The issue seems to be that screenB is taller than 667 and is aligned with the bottom of the screen.
3
Work Mike
Hi all can anyone help with targeting an image/individual layer in an array? I can test for clicking on the scroll component and the last item in the array but not each individual layer/image - I've been trying to teach myself custom classes and arrays at the same time - adding a link this time ;)
20
Ee Venn Soh
Is there an API for mouseenter and mouseleave in Framer?
5
Michael McKenna
There seems to be bugs between the flow component and the design tab. The constraints and setting widths on the containers in code and also the header seem to change their mind how they should be rendered without changing anything. I would provide an example but it's not really something I can share at the moment. Anyone else experience issues between these elements?
0
Callum Nowlan-Dias
I've create an array of elements that fade in one after the other, this works well. But now I need to fade them out when startQuizButton is clicked. My second function is not working, the fade out and then fade back in again. Any pointers would be appreciated. submit.onAnimationEnd -> doneArray.forEach (layer, index) -> Utils.delay (0.2 * index), -> layer.animate properties: opacity: index + 1 * 1 startQuizButton.onClick -> doneArray.forEach (layer) -> layer.animate properties: opacity: 0
0
Aditya Narayan
Hi everyone, I created a bunch of compound objects in Framer design mode, now I have to create multiple of these with different data using "for" loop. But I can't seem to find an option to do it. The one solution that I found was to create "class" and basically create new object, but all the examples I found were building the class in code itself. Would appreciate help with this :)
7

October 28

Marc Krenn
non-linear Utils.modulate() update Dec. 14th '15: * I'm now using 'switch-case' instead of 'if-else' * implemented a proper fallback to "linear" * fixed 'easeOutCubic' and 'easeInSine' * added easeBack, easeElastic (except easeInOutElastic) and easeBounce. There are now 29/30 different curves available. * Example file got a makeover update Dec. 15th '15: * fixed bug reported by Joshua (would love to have a verification!) * example-project got another big makeover - formatting by the great Jordan Robert Dobson (thanks!) - slider now animates onTouch - temporary sliderComponent bugfix new gifv: http://gph.is/1NYwWyw infos & code @ git: https://github.com/marckrenn/framer-nonlinearModulate (new repo!) live demo / example: https://tr.im/nlModulate ### #framercode #modulate #Utilsmodulate #curve #nonlinear #non-linear
11
Ahmad Kadhim
Having an insanely fun geek-out session prototyping this AR concept to help choose art for your home https://framer.cloud/DhdlP
1
Javier Eduardo TreviΓ±o
how long will it take for Framer to switch to es6? I'm trying to decide on buying the framer book or not, there's free updates as long as the author doesn't have to rewrite all of it in es6, so I wanna know a tentative date just to not waste the money on the CS version
3
Arturo Goicochea
Quick question: I have an object holding colors. How can I pass, to a function, the property name, so that I can do colorObject = property1: "blue" property2: "blue" property3: "blue" functionName = (propertyNumber) -> aLayer = new Layer backgroundColor: colorObject.propertyNumber functionName(property1)
4
Thomas Mirnig
Hi guys! I'm new to Framer and CoffeeScript, and there are a few questions I'm already being confronted with: I'm trying to not repeat any code and that's why I want to reuse functionality wherever possible. Currently I'm building a Tab Bar with a few Icons. Each Icon has the same animation and shows kind of a tooltip when tapped. The thing is: I don't want to repeat all animation states for the every icon and the tooltip. I created a method for it (with the states in it), but I'm not able to access the states from outside. I think I may be missing out here on the concept on how I can achieve reusing states for different layers. I was hoping you guys could help me out here :) Thank you & all the best Thomas
4
Benjamin Den Boer
Hey all. Here is the Framer Slider moduleβ€”as first seen in Framer Audio. It has been isolated, updated and improved. It introduces new methods, examples, bug fixes, documentation and more. Hope it’s useful to some of you. ✌️ https://github.com/benjamindenboer/FramerSlider
1
Adam Deher
I am wondering about changing the background color of an imported .svg file. I can import the svg into design view and then change the color in design view, but if i later try to modify the color in code view using the .backgroundColor property- it changes the whole background color of the bounding box. It does not clip to the icon. What am I doing wrong? Thanks for the help!
1

October 29

Greg Soper
Framer code is currently not showing any of the layers I've made in the design tab (and yes, they are marked to be visible)
7
KΓ©vin BaΓ«s
Hello! Can someone explain to me why the first of my layers is not above the rest? πŸ˜…
3

October 30

Π’ΠΈΠΌΡƒΡ€ МинвалССв
Some designs imported from Sketch with critical error: layers automatically migrated to the bottom of the page and I can't change it.
0
Raghunath Rajaram
Can someone please tell me how to add multiple 'then' statements to a switch case. I'm getting an error (line 94) when I try to do this.
0
Work Mike
If I paste items between framer projects into design view framer appends a '_1' to the target name so I have to rename all my targets. It reads 'myItemName' in the layers list but the tool tip says 'myItemName_1 in code view' I then have to go through and rename all my objects in code view to something - I'm assuming this is due to duplicates or something. Is there a quick fix to this or something I'm doing wrong?
2
Kelby Garside
I have created a grid of cells in an array, I can toggle between default and on states where they change colour from white to red. I need to increment a counter each time a button is clicked to turn it on and reduce the counter when the cell is turned off again. I have used conditions to check the current state of the button however the counter only ever increments how would you approach this?
5
Raghunath Rajaram
Is there an event for the end of a state animation. e.g. layerA.onAnimationEnd ("state 1")? What I want to do is, when a particular state animation ends, to trigger another state animation.
2
Marc Krenn
Anyone interested in a Module for moving Layers along (Cubic BΓ©zier) Splines natively (without SVG workarounds and such)?
23
Ian McClure
I am trying to create an object that has a few @define. I have tried inheriting from nothing, Framer.Object, and Object but I get an error that @define is undefined. It works with Layer but I'd rather not inherit from it. Anyone know of any better thing to use than Layer?
2

October 31

Justin Fraga
Maybe it's staring me in the face... but where is the "clip" option in the properties panel for a parent layer? (Design mode) "To mask a layer, place the child layer on top of the parent layer, select the parent layer and click on Clip in the properties panel. "
1
Davo Galavotti
Hey guys, I made a 'fork' of the ease module demo that Marc uploaded the other day. I was trying to build a simple way to explore all the easing functions. I added some extra flair with color scales using chroma.js https://framer.cloud/vqEuS/
1
Lukas Imrich
Does framer has something similar to - target - "A reference to the object that dispatched the event" ? To be able to do something like this, function hide(e) { e.target.style.visibility = 'hidden'; } list.addEventListener('click', hide, false); Here is my piece of code, in which I am looking how to reference layer that emitted an event. Target is giving me "just" reference to div element.
6
Xin Zhong
I used Highcharts.js in Framer , but the mouse event such as hover or click didn't work .
2
Paul Wan
why Framer not support device vibration? seem to window.navigator.vibrate([200]) return Error info?
6
Alvaro Lourenço
Can Layers propagate events thorough the parent chain?
2
Tojo Rakoto Ramanantsoa
Another question : Is it possible to make a text act like a button and not like a "text"? Like say in a menu, I have text and I want it to do something when onMouseOver, and it does (change color in my case) but... The cursor transforms like it's selectable text and not like it's a link/button (like with the hand). :)
3
Davo Galavotti
Hey guys, I got a question. Is there a way to get rid of this alert? If I already took the necessary steps to ensure a decent level of cross browser compatibility, this is preventing our testing tool to perform as intended. It's been triggered by isCompatibleBrowser(), I don't know how to disable it.
1
Matt Bogado
What is the best way to share design specs of designs built in Framer without having developers have to pay for a license?
0
Adam Mazurick
Having trouble accessing certain google fonts like β€˜montserrat’. They render in the desktop but not on mobile...outside of the @Framer celebratory blog post is there some good best practice document? I use utils.loadwebfont(β€œGoogle Font name”) and it doesnt properybapply the font on preview...help?
0
Kasper Germann Kramme
Hello guys. I'm making this grid that is made from boxes (in diffrent sizes) inside a scrollComponent. I want the boxes to animate to scale: 0.95 onClick/Tap and back to scale: 1 on animation end as a sort of feedback confirming that you pressed the box. I can't seem to figure out how to be able to scroll the grid without interacting and activating the animation of the boxes. I'v tried propagateEvents but i can't seem to make it work.
0

Monthly archives

2018

2017

2016

2015

2014

2013