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

What is Framer? Join the Community
Return to index

September 2016

September 01

Kyungsik Yoon
Hello, folks. I am newbie to framerJS from Flash. Is there a way to handle continuous event in framerJS like enterFrame in Flash?
7
Caitlin Charniga
Hey guys, I have a set of layers imported from sketch that will all have the same fade-in animation, but with different delays. Is there a way to do this with a for loop as opposed to adding states to each individual layer? Thanks!
1
Jeff Lin
Hi guys, I'm trying to write a class but ran into trouble. It works perfectly if I put in one parameter for the constructor, but it fails if I put in more than one parameter. Anyone knows why? : ( New to class, thanks in advance!
3
Randy Huynh
Can FramerJS animate CSS styles? I'm rather new, so this might be a newbie question, however I haven't found the answer in the documentation or elsewhere online. I have a layer with HTML text containing "Seattle" in it. And I want it to change font-size on an event. I've tried guessing at the animation code, but haven't been successful.
7
Michael-Owen Liston
Hi Framers, I’m still quite new to Framer, but on firing up Framer Studio today to do what I thought would be a super-straightforward prototype—the hubris!—I was getting constant crashes and unexpected behaviours. I don’t expect anyone to go on a bug hunt for me, but I would like to know if these are known issues, to avoid them in the future. 1. I import a Sketch file (≈7MB) 2. Layers have been grouped and show up as anticipated 3. I setup some layer states to move a side nav panel in/out, and bind these to an onClick() event Unexpected and unwelcome behaviours: 1. layerName.states.next() doesn’t exactly “animate” the Sketch asset; it just appears/disappears, after a ≈1sec delay. The exact same code in a clean project, with layers created inside Framer as opposed to Sketch assets, produces the intended animated transition without delay. Update: I was able to get it animating smoothly as intended just by removing the Artboard in the imported Sketch file. I didn’t expect Artboards to throw a spanner in things, is this a documented issue? Is it context specific? 2. Insta-crashes on attempting to access Screen.width, like so layerName.add.states ~ stateA: ~ ~ x: Screen.width - 172 I also got it to crash on at least a few occasions with just numeric values instead of Screen, but Screen and/or Screen.width was crashing it 100% of the time this afternoon. Am I writing dangerous code? Or is it something else? Here’s a link to the project, which of course is now stable and working as intended for the first time all day: http://share.framerjs.com/vlnhz0la84dw/ Millions of thanks in advance!
1
Ahmet Bekteş
Hi Folks, I have a custom product design(remote) with a different screen. I want to change the background image " Iphone and hand" to our custom design. Is it possible to do that? Some tips will be awesome!
4
Baisampayan Saha
having a hard time accessing project on android phone. In mac app....only a the passcode is shown and on the android framer app a sequence of numbers and digits appear. even though only one project is open in mac, several numbers are shown in the android app. Figuring out which combination is the correct one is a super tedious task....phew... :(
1
Rohan K
Is it possible to specify color values in Utils.modulate? I am trying to change the color of a layer from red to green as it's x coordinate moves from 0 to 375
3
Bahtiyar Ahmatjan
How do we block a certain layer's scroll property after some button is clicked? ignoreEvents function seems not to have effect on ignoring scroll.
2
Aalok Trivedi
Does anyone know why the layer labels increase by 10 when I tap the button again to switch to its default state? Just curious...Will this affect anything if I want further interactions with any of the layers? http://share.framerjs.com/jzvidf0ljplg/ I followed the Apple menu example from the site.
2
Sergey Voronov
have couple of dribbble invites, post your work samples here to get one:)
10
Ray Yip
Can i hide a layer from FramerStudio's layer list? or something like list folding?
6
Caitlin Charniga
Hey guys! Does anyone have any really basic examples/tutorials of building a form?
1

September 02

Rafael Marin
Here's a simple example I made today, to demonstrate how to calculate the distance from a touch event to a given layer. Thought it could be useful to others.
1
Bahtiyar Ahmatjan
It's easy to animate opacity of a layer, but how do we animate visibility of a layer? like fadeIn and fadeOut in jQuery
3
Charlie Deets
Hey there. I wrote up a library of 26 snippets. They are short repeatables to speed up your workflow, but they are probably also helpful to those who are newer to Framer as reference. Hope you enjoy!
11
Patrick Burtchaell
If you use Dropbox to quickly host Framer prototypes, you won't be able to do so after October 3, 2016. Dropbox is "discontinuing the ability to render HTML content in-browser via shared links or Public Folder." You'll already know this if you are subscribed to account activity alerts from Dropbox, but I figured I'd pass on the word in case anyone is not. :)
3
Gregory J. Orton
Hi, so I'm trying to use 'navigator.mediaDevices.getUserMedia ({audio: true, video: false}) ...' in Framer. I saw this post here: https://www.facebook.com/groups/framerjs/permalink/726252404168500/ and it seems that Safari doesn't support getUserMedia at all? Is this true? We can't get microphone input from users at all on Safari Mac or iOS? Sad face.
3
Andy Fuchs
Is there a reason why I can't set a layer's draggable.constraints and keep the same layer's draggable.momentum at false?
2
Retroceso Retroceso
https://www.youtube.com/watch?v=qI303iFdSSs
0
Felippo Teixeira
Hello guys! Yesterday we had the first Framer JS Meetup in São Paulo. Thanks for those who came and gave us the opportunity to share Nubank’s experiences and excitement about Framer. Special thanks to the Framer JS team for all the support, you guys are great! We prepared a simple tutorial covering the basics of animations, states, events, conditionals and loops. We think it may provide a structure that can serve as a base for more complex prototypes. http://share.framerjs.com/uknm0tfkd7r1/ Cheers!
2
Ee Venn Soh
Is that possible to change the hint colour throughout the whole prototype in an easy way? By default it is purple.
1
Dave Crow
Here's a little code snippet I've been using to add a hidden slow motion toggle to my prototypes. It's handy for our devs to be able to toggle slow motion on and off when working on complex animations.
2
Gregory J. Orton
Anybody know if we can create 'canvas' elements in framer? 'new Canvas' doesn't seem to work?
6
David Phillips
I'm using Sketch import to bring in a bunch of art boards. Art boards that I have set up as symbols don't import into Framer... Is there a way to get them to?
3
Rand Moh Lafi
hello there :) i want to ask a question and please help me :) i have two select (drop down list ) one called categories after selecting one of those categories the data should be fetched in 2nd select which is called items so items depend on categories . i am working this using javascript backbone and marionette and jquery .. how can i do such thing ?! #please_help
0

September 03

Vikar Zhang
Hey guys, I met a problem when using scroll component. I try to use "if scroll.content.y > 120 then scroll.content.y = 120 " to limit the distance of scrolling. But it jumps all the time. I don't know where the problem comes from.
5
Matt O'Donnell
I'm getting Application Errors every time I hit undo. v69. Anybody else havin issues?
1
Gregory J. Orton
OK, check this out - managed to enable audio input from microphone and output via speaker and visualizing in canvas element. (Only tested working in Chrome+Firefox mac. Doesn't work in Safari - instructions in prototype)
1
William Séverin
https://www.facebook.com/groups/codeurinformatique/
0
William Séverin
https://www.facebook.com/groups/codeurinformatique/
0

September 04

Kelvin Chen
Hi, this's my first time to design a watch face with Framer JS. Here's the first concept, the Red Line controls the black needle who with a little red ball, and than shows the Second. The white one shows the Minute while the blue ball shows the Hour. You can check the animation with http://share.framerjs.com/yxk799qa5h8w/ Love to hear your feedback : D
4
林郁琇
When editing class + constructor by Framer, errors as the picture shown when input more than one porperties. Anyone knows how to solve the issue? Thx in advance!
1
Sander Värv
Can someone explain the meaning of layer.idx? I've seen it used a couple of times, but can't find anything in the documentation about it. Is it a shorthand for indexOf? When would you use it?
4
Karol Piwowarczyk
Hey, I use Framer ViewController for my new new project. https://github.com/awt2542/ViewController-for-Framer i hava a one, little problem. When I click to "profile" button, I see "profile" layer but in wrong position. I will want have layer shifted by 200px. See on this: http://share.framerjs.com/r6wmtp0wjjcq/ Thank for your help!
2

September 05

Oleg Frolov
Hi there! Here is switcher which I am going to use for my next work. I wanted to create a control that includes a switcher and label. Prototype — http://share.framerjs.com/bjew409dhc84/
1
Peter Gr
Hey all, has anyone used php in their framer projects? Curious to see if any examples or tutorials exist :)
2
Ray Yip
How do i use Framer to design at 1x?🤔 I don't want to specify the scale factor for every devices and pixel ratio.
5
Tojo Rakoto Ramanantsoa
Olà guys. Quick question : how to disable animation for a PageComponent? Just a quick appearing / disappearing of the pages. in this case, my page switch is triggered by butons, not any type of scroll, thus animation is not needed. Thanks :)
1
Sigurd Tapio Mannsåker
Dave Crow's post the other day got me thinking you could/should mess with the delta value for fun, so I made this quick proof of concept: http://share.framerjs.com/t1ajo9d67wlj/
3
Jayphen Simpson
Hey guys, I'm new to Framer and am beginning to use it as part of my workflow to create prototypes directly from my Sketch designs. Obviously Sketch integration is quite new, but I wanted to clarify a couple of things with how it works now – Firstly, it appears all groups are imported as raster. Am I missing something here? As a result of the above, manipulating groups imported from Sketch is not really possible, unless it's just changing the x/y/z. Right? My first prototype is at http://share.framerjs.com/h1h0k8auw1yo/. In Sketch, the buttons 'Like', 'Own It', 'Done' were all shapes which I originally tried importing in to Framer. For the animation I tried resizing the shapes directly, but it did not work as anticipated. I ended up hiding the button shapes in Sketch before importing, and re-creating them in Framer directly. Am I missing something here, or is this basically the expected workflow for now?
1

September 06

Adam Mazurick
I figured out how to properly create cube maps for the VR Component. I will write a tutorial on Medium. http://share.framerjs.com/cz7up4czl1bs/
9
Sadok Cerv Rabadan
Why do I always see this when looking at a prototype on desktop? I'm on latest Chrome, El Capitan.
3
Riccardo Zecchini
Quick question: is there a way to import only one artboard from a multiple artboards/pages Sketch file? (case: early design phase, lot of sketching, I’d like to select only a concept/idea (artboard) to add a bit of interaction and explore it further more). Thanks!
3
Adam Mazurick
https:[email protected]/1-dribbble-invite-available-62dba55c58c1#.74akb8jtk
0
Jorn van Dijk
Check out the lifestream from Seoul in the Framer Korea group! https://www.facebook.com/groups/framerkorea/permalink/861273370670979/
2

September 07

Chris Camargo
Two part question: 1. Is there a way to get Framer to identify all of the currently running animations (on any layer), and if so... 2. How can I get the properties for that/those running animation(s)?
4
이정익
Hey guys, It is my personal project which I did. Some of it is homage of Jongmin Kim who is google interaction designer. But bounce ball animation is not work perfectly. # Jongmin Kim's material animation web site http://material.cmiscm.com/ And made photo album view concept prototype to use framer js. Thank you for share to allow photo my Instagram friend :) # bounce ball http://share.framerjs.com/0o7adldh14ic/ # arctangent drag version http://share.framerjs.com/aznxltk95dai/ # arctangent animate version http://share.framerjs.com/8orsxb19ku5o/ # photo album http://share.framerjs.com/biqndghlg3fh/ # dribble page https://dribbble.com/shots/2941057-Photo-Album
10
Adam Mazurick
This is a follow-up post to a post I made about using Framer for VR/AR Prototyping. It's Part 1 of a 3 part deep dive on how to incorporate Cinema4D into your Framer.js workflow.
12
Joon Won Lee
Jorn van Dijk teaching how to use framer for beginner
1
Ben Bate
Hi everyone, Just trying to get to grips with the basics. I'm trying to get the add button to also close the menu after it has been tapped. Basically I want it to perform the same action as when the overlay is tapped. Could anybody help me understand how to do this? http://share.framerjs.com/h8di78y49r4f/ Thanks
3
Fausto Pérez
Hello! Anybody from Madrid (Spain) in this group? Thank you!
5
Gregory J. Orton
Whenever I try to use the mirror option - either open in Browser or Copy Link, framer crashes. V69 + El Capitan. Anybody else have the same issue?
1
John Sherwin
Hi Folks, This is probably a basic programming question but I'm trying to build a counter in Framer and need to increment in value of 1. I can get it to start but can't figure out how to get it to calculate the current value and keep adding one up to a max of 10. Heres the prototype - http://share.framerjs.com/j948fd38mkao/ Appreciate any help. Cheers!
2
Adam Mazurick
I followed a really cool tutorial on Prototyping VR Experiences with Framer. Does anyone know of a way to convert Panorama Shots taken on iOS to cube maps for use with the Framer VR Component? http://share.framerjs.com/w8eld0skih1x/
6
Kelvin Chen
I've wrote a tutorial to show how to make this prototype step by step in Framer. It's for beginners, here's the link https:[email protected][email protected]r-part-1-4b22cca049b6#.yf719fk0v
2
Danny White
In NYC on the 21st? Head on down to Framer Sessions at ustwo. Jonas and Sara will be here with Framer goodies and giveaways for people who show prototypes, and we have Atif Azam talking about vocalizer.io
0
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 :)
7
George Otsubo
Hi, trying to understand layer.draggable.layerCursorOffset (getting the x and y coordinates relative to the draggable layer) From the docs it says if you tap the top left corner it will return {x:0, y:0} But when I try to see and print out the coordinates I get completely different results..?
0

September 08

Robert Thompson
Who else is a User of FramerJS that is a Programmer with Design Experience: I am a programmer + designer, which can sometimes be difficult as things have been changing in the past 4yrs quickly. I’ve used Greensock GSAP, I’ve done ES6, I use Swift in everything now from AWS Lambda servers and EC2 images.I also have a very extensive background in what was a good product (flash, uh-uh :-/) from the year it was introduced in 1996-97 as FutureSplash. So I, and I'm hoping others here, have a deep thirst for good design and the ability the produce real products and responsive sites from a product like Framer. I’m looking for ways to develop a Plug-in, or somehow use Framer to use it’s Coffeescript (and its models like Utils) to export to either ES6 / ES2015 Javascript, or in the case of Xcode, Swift code with Resources into XCode; even playgrounds. Some may have heard the news that Google is already branched off a project from open source Swift which is very-very exciting news as it will directly compile to NDK (native dev kit) and be high performance.These are interesting times.
3
Kevin Layton Burd
I don't know what Im doing. I downloaded this program and I have no idea what Im doing and I didn't think it would be as difficult as it would be for myself(the technology insufficient) but it is, any suggestions on where I can go for some basic tutorials and help. Thanks for any advice!
4
Alex Gough
Hello Framers! I was wondering if anyone knew a way of enabling drawing or inking in a Framer JS prototype? Something similar to how Snapchat (and now Instagram) lets you draw stuff? (For example, like in this gif I found: http://www.socialmediaexaminer.com/wp-content/uploads/2016/07/ap-snapchat-change-color.gif) Thanks in advance!
3
Rafael Marin
Here's something I find extremely useful to provide alternate designs inside a prototype without duplicating the entire Framer project (hence avoiding the subsequent pain to maintain multiple codebases): Using window.location.hash. Here's an example: This prototype displays different layers depending on what it finds on the URL: http://share.framerjs.com/dhtebqaenpbl/ http://share.framerjs.com/dhtebqaenpbl/#greennav http://share.framerjs.com/dhtebqaenpbl/#yellowpage http://share.framerjs.com/dhtebqaenpbl/#greennav-yellowpage I hope it may be of any help.
3
Raveesh Bhalla
Hey folks, I just released a very early alpha for Proto, an Android app that makes it easier to view (and save) Framer prototype links on your devices. Going to be building out a few more features over the coming weeks, but would love to get some feedback, suggestions, etc. You can join the early access here: https://play.google.com/apps/testing/app.proto https://play.google.com/apps/testing/app.proto
1
Hoyd Breton
Yooooo, I always found your Spring Curves tool handy – y'all pulled it down? I used to hit it here 👉
3
Jon Arnold
Hi Guys, I built a simple to use SVG circle module: https://dribbble.com/shots/2934342-SVG-Circle-Module-for-FramerJS Hope you can use it for your next prototype. Looking forward to hear from you. And thank you Henrique Gusso for writing this article which inspired me to build this module: https:[email protected][email protected]
2
Giovanni Caruso
Any known bug recreating the flip effect?Tried both states (playing with rotationY and opacity) and the flip module but as long as I keep a background layer, no way to get a proper flipping effect for my cards :/. Jordan Robert Dobson ? :)
3
Jon Arnold
Inspired by the Apple Event Invitation I made this little particle animation. Have fun:
2
Sergey Voronov
I just want to give kudos to awesome people in this community. All very inspiring and trying to help each other. I never seen such responsive community before. You all guys rock:)
2
Koen Bok
Framer Studio update with solid performance updates, better error reporting, updated snippets and more.
17
Paul Kooi
Is there a way to set a child's parent relative to the parent's position? In other words. I have a container that has a Y value of lets say 250. I have a button. I want it's parent to be the container. But I don't want it to offset y:250 when I tell it that the container is it's parent... all thoughts help is greatly appreciated thanks ... also is there a way to avoid passing down visibility from the parent to the child? I'm basically trying to animate many elements at once... I want to control them with something that is invisible
2
Matthew Wagerfield
Hey everyone, is there a way of requiring modules outside of a .framer project? I have a series of .framer projects within a directory that I want to share common code between and don't really want to be copy and pasting these files into each of my .framer project's modules directory as they could easily fall out of sync. As a programmer, I am used to being able to require modules outside of a directory by doing: var myModule = require('../../some/folder/myModule'); ...but this doesn't work inside Framer Studio. I appreciate that the CoffeeScript compiler might only be looking at files within the .framer project, so I'm happy to write my external/shared modules in JavaScript. Could someone please tell me if this is possible, or what the best solution is for keeping this files in sync. I don't really want to publish my modules to NPM...
4

September 09

Giovanni Caruso
...seen this one?
7
Javier Eduardo Treviño
it's been out for a while but I was wondering, how do you guys feel about Swift Playgrounds?
3
Julian Veerkamp
Hey everyone. I'm struggling with adding a blur effect to a NavBar in my Prototype. I know how to get a simple Scroll Component(Just an Image) blurred behind the NavBar. But my Prototype consists of 2 other layers which are moved, when the ScrollComponent is moved. I created a rough, simple concept. http://share.framerjs.com/hd8cgibiu1kp/ Basically I want everything which is under the NavBar to be blurred. How could I archive this?
13
Jai Mitchell
I've always seen people talk about "Utils.globalLayers(sketch)" being the default way to make Sketch layers global – but Koen Bok says here that `{button, navbar, profile} = sketch` is "better" way to do it… Is anyone able to direct me to more info around how this works or why it's better? I assumed I'm meant to replace the "button, navbar, profile" part with my layer names, but either way I can't seem to get it to work :-/
1
Elliot Nolten
Hey guys, first of all, amazing update on Framer! However right before this update I used this line of code to determine if the device has a retina resolution 😅 What is the best way to this now the Desktop device is deprecated? Thanks!
1
Kelvin Chen
I just finish the part 2 of tutorial for this Android wear watch face prototype. Part 2 is for the animation, please check: https:[email protected][email protected]r-part-2-97427580bdd3 Thanks!
2
Gracjan Złotucha
I have a question, it's any text editor in Framer Studio?
1
Lukmanul Hakim
Thanks for allowed me to join here. I'm Lukman and i from Malaysia. I found this Framer JS from YouTube and i would like to learn more about this. I'm working as Website Administrator and not much familiar in Mobile Apps such Python and etc. Perhaps all members can help me since can consider im Newbiee in this field. Thanks
2
Emmanuel Henri
Where could I find UX design interns (with FramerJs training)? Any UX/design universities or bootcamp you'd recommend?
6
Emmanuel Henri
When exporting a prototype, how does one change the background behind the iphone...could I add any picture behind the iphone...for example if it's an app about fitness and you see a gym in the background....
3
Kushagra Gour
Hi FramerJS people! I am excited to present to you the new release of "Prototyp" http://prototyp.in/ - a free web app based on the amazing Framer.js to let you prototype on any platform. The new app comes with new sleek interface, user profiles, mobile previews and more! Go ahead and create awesome interactions :)
4
Baisampayan Saha
found out a small bug today. I have created a prototype which has page component. The pages of the page component are created using a for loop. I have two arrows for navigation. One at the left and one at the right. I have another button which when tapped snaps to a certain page. Now on both the left and right arrows the behavior is that it snaps tp previous and next page. But when I tap on the button which snaps on a particular page and then I use the left arrow for snapping to previous page, it takes me directly to the first page instead of snapping to the previous page...thought I had a problem with my code, so downloaded a pagination example from here and tested it out. Check out the prototype below for the bug. This does not happen with snap to next page function.
4
Kévin Baës
Hello, I made a page indicator system where the last element is transformed into a button. But the change of position does not work the first time... I do not understand why ??
2
Florian Pnn
Hey everyone! Is there a way to trigger a build update from outside Framer Studio? I'm working on some modules and I want to preview it directly from my own simple Python server. Is there a hidden CLI we can use in the framer folder to launch a build task?
3
Ben Ellis
Hi there, Please forgive my limited knowledge of coffeeScript, but does anyone know if you can bind a keyboard event to a layer in Framer rather than the window or document? Basically I want to bind an event on artboard1 e.g. left arrow key, and then go to artboard 2. Then on artboard 2 have a new set of keyboard event handlers to do different stuff i.e. left arrow press would go to artboard 3. Hope that makes sense, thanks in advance. Ben
2
Алексей Черепененков
Hey, everyone! I have a small question. There is the function, which builds the interface from elements in Array. After clicking on the button I want to rebuild the interface with the new elements order. The question is: how to run this function again? Thanx
2

September 10

Omeed Chandra
I often find that importing Sketch files into Framer takes an absurdly long time--both Sketch and Framer hang for sometimes 10 minutes or more. These aren't particularly big Sketch files, and at other times the import process takes just a few seconds for the exact same files. Anyone else had this problem?
2
夏洛克
Hey everyone,I got a problem with new version Framer... I try to setting something or binding event in layer's sublayers use for-loop,but something wrong...It will always run the last element in for-loop.Is it a bug ? or I miss something? Thanks~^^ my share project : http://share.framerjs.com/y71uz1facv5n/ code is very simple: LayerStack=new Layer .height:100 .width: Screen.width layer1=new Layer .width: 100 .height: 100 .backgroundColor: Utils.randomColor() .parent: LayerStack .name:"L1" layer2=new Layer .width: 100 .height: 100 .x:100 .backgroundColor: Utils.randomColor() .parent: LayerStack .name:"L2" for item in LayerStack.subLayers .item.on Events.Click,-> ..print item.name
2
Mazvydas Bartkevicius
Hello, guys! I just recently found Framerjs an amazing tool, to share my ideas with a community. And I need your help. I'm currently studying and I can't afford to buy the licence. I really want to work as a UI designer of interactions. Maybe there are in this community who could help me? Sincerely Mazzy
3

September 11

Emmanuel Henri
Are there best practices for importing files from Sketch? I reorganized my artboards so each item inside have their own folder but besides this anything else? I'm getting some weird results like a background from another artboard showing on the screen...is there a way to make all artboards not visible and then select which ones are visible based on events? Or is there a better way to do this...? You see my export of sketch to import in framer
3
Jon Madison
"Automatically reload when a coffee or js file in the modules directory changes" -- THANKS. :D
8
Jethmal Sharma
Porto v3.1 – Responsive WordPress + WooCommerce Theme Free Download click here:- http://linkshrink.net/74tbme
0
Yfat Eyal
Hey everyone, I am playing around with using UI Sound with the Speech API - so that after the speech is recognized an audio will play, and not having much luck. There happen to be any related audio/UI Sounds tutorials out there? Early Rough Prototype:
1
Emmanuel Henri
For developers in this group, how much of your framer code have you leveraged for the actual website when doing highly dynamic landing page?
2
Jon Madison
just started desktop prototyping in Framer Studio. wasn't there a time where there wasn't a giant rendering of a macbook for the output screen? it's taking up a gang of space, vs. a simple Safari window, especially since the theoretical site won't be running full screen. Is there a way to change the shell to a Plain Old Window for non-canvas preview?
1

September 12

Jonathan Zazula
Messing with Jonas Treub's VR Component and George Kedenburg III's slider component to preview music in a new way. http://share.framerjs.com/q0hk78tchdd1/
4
Regi Ellis
Deactivated a license on an older laptop, tried reactivating it on the new laptop with no luck. Seems this bug is still hanging around. What is the best way to have my licenses deactivate so that I can keep using the product?
2
Andri Sigurðsson
Hey guys, I'm using a custom fullscreen device and I'm building a web app prototype that I want to show in an actual browser. Not using a device image. What I want is for the prototype to always fill the width and height of the browser window. So if I resize the browser window, the prototype also resized and fits 100%. Is this this possible with Framer?
1
Aalok Trivedi
I'm trying to create a pull up drawer similar to the behavior for the iOS drawer. I have it working pretty well, but I want to know if I could have used more efficient code. Any thoughts would be much appreciated http://screencast.com/t/54SOZ2Hum http://share.framerjs.com/fdtkhu1r33zv/
1
Baisampayan Saha
Marc Krenn Thanks for the firebase module. Made remote user testing of prototypes a walk in the park now... :)
2
Krijn Rijshouwer
Hey all! This September, we've got some really exciting meetups happening all over the world. Tomorrow, our community in Japan can join Jorn van Dijk and Koen Bok at the Tokyo meetup. If you're nearby, you should definitely check it out! Learn more about the new meetups and check the list to see if there’s one happening near you → http://framer.com/meetups/ If you don’t see your city listed, we’d love to help you host one. Find out how here → http://framer.com/meetups/#host
1
Saurabh Mathur
I have a pageComponent where scrollVertical is set to false. My onScroll listener runs conditional code switched on .direction - which was always 'left' or 'right' until a few days ago. I don't know if it has anything to do with the framer update, but I updated FramerStudio and my project. But now .direction returns 'up' and 'down' along with 'left' and 'right' all the time. Any clues what could be happening?
3
Alvaro Lourenço
Anyone managed to stage completely 3D elements with VRLayer?
7
Jonas Treub
Here is a little example of a resizable window component. Great for trying out responsive Mac or web apps.
3
Jon Arnold
Here is module that allows resizing prototypes very easily. I use it to view my prototypes that were originally built for an android device on an iPhone. The preview performance on my iPhone is much better compared to an android device.
6
Tarun Chakravorty
Hey friends. Question about dragging: I'm trying to drag a layer so that after a certain threshold it slides away from the screen. Here's what I have so far: http://share.framerjs.com/3q5eh7jilccz/ When I drag it down, the layer does slide away, but as soon as I let go of my mouse, the layer comes back up. Any idea why this is happening?
1
Paul Justin Farino
Hi all! Next Thursday(9/22), there is a Framer meetup at Pivotal Labs in Los Angeles. We're super excited to have Val Head present and kick-off the LA chapter. There will be food, drinks, Q&A, a raffle and the opportunity to network. You will also have the opportunity to hack on prototypes and learn Framer towards the end of the night. Special thanks to Kenny Chen for leading this initiative and setting up all of the logistics. Please RSVP below so we can get an accurate headcount for space, food and drinks.
1
Karol Piwowarczyk
Hey everyone! I will want to make fixed element in the bottom of browser window (fixed while scrolling). When the blue box will touch the stationary element, it should attached to fixed element. Preview is in the picture. Thank for reply!
3
Jon Arnold
Hi guys, what is the simplest way to animate an element on a path or circle to do something like this:
6
Adam Mazurick
I’m looking for some documentation on incorporating live video into my Framer.js prototype.
1
German Bauer
Is there documentation on the current state of the highly useful Utils... library somewhere, or is reading up the code on github still the best way to find out about its capabilities? (I wish some of the functions would be documented)
3
Kan Grace
I use quicktime to do the video recording and the file usually over 3m. Any recommendation on the compress tool which can do compress and keep the img quality as good as possible? how did you guys compress the gif under 1M?
3
Michael McKenna
I'm trying to create a nav that has a label on hover. I created a loop and have a column of buttons and each button has a child layer that is the label. I'm having trouble with scoping. onMouseOver event errors out saying this.children[0] is not a function ... I want to eventually fill the hovers with sketch layers that are labels. Any ideas? This concept seems easy if the event were just a property but trying to target the child trips me up. Thanks ...
1

September 13

Joris Hoogendoorn
Hello Framer people, Question about child layers of a copied layer; I use "Entity = rel.Entity.copy()" to duplicate a sketch designed group called "Entity". I rename them in the same for loop to "Entity1, Entity2, ... etc". The next thing i want to do is changing properties for child-layers inside my new Entities. But stuff like "Entity1.Basis.StrokeTop.y = 10" doesn't work... I'm a framer beginner, so i do not have any clue... Can someone see what i am doing wrong?
5
Chris Wang
Is there a way to change the color theme of Framer Studio? Sometimes it's really hard for me to see the layer structure with all that reflections on thunderbolt display or macbook screen.
1
Giovanni Caruso
Hi! Trying to recreate a PageComponent with a parallax effect. This is the code I came with: page.content.on "change:x", -> if page.content.draggable.direction is "right" image.x = Utils.modulate(page.content.x, [0, 300], [288, 650], true) else image.x = Utils.modulate(page.content.x, [300, 0], [288, -100], true) While it is ok when dragging to the right, I can't get the correct behaviour on the opposite. #headScratching
2
Lukas Lineker
The access code when I click mirror is 5 digits but on the Ios app it asks for a 6 digit code... Anyone else found this? How do you get around it?
6
Ban Nguyen
Wondering if you can set ??? Framer.Canvas.width = number Framer.Canvas.height = number Thanks!
1
Shahrouz Tavakoli
Hey friends! I'm trying to incorporate real data into my prototypes, and I get an error when trying to load my company's data. Any help would greatly appreciated! Attached is the code I'm using and the error message.
2
Jon Madison
I <3 you Framer Studio. It's the thing that'll get my designers amped to do some interactive prototyping. At least that's my hypothesis. The better it gets the more we can win 'em over. :) When will we see module import from the GUI? If i had the source to the GUI i'd try to write it myself this week, haha. Somewhat Akin to Sublime's Package Control...eh, eh?
2
Rafe Chisolm
Hi Framer Team! I swear every couple of weeks you are blowing minds with the pace of updates you're making - first and foremost thank so much for your continued work, being so engaged with the community, etc. The value proposition is very clear when expanding the use of Framer with other team members. The latest update that included various form factors made me wonder. Are you able to share if a method to create custom, shared templates across a team is on your roadmap? It currently works to create custom modules/templates, but for quality control across a team/or teams it'd be awesome for a team member to be able to select a pre-loaded template of locked down, approved styles for a given design. Obviously a tall order, and probably has implications for version controlling etc. but hard to not be constantly inspired how much Framer is evolving. (Screen attached, not sure if what I'm suggesting is clear) Thanks again for all the amazing work, leaps and bounds past the alternatives in my opinion!
1
Seung Jun Park
Hello! I'm a designer who's studying the Framer. I would like to share all the data and information I collected while I was studying. Although I didn't do any designs, I worked in variety of interaction videos and basic applications and its function. I tried to make it as similar as possible. The coding I wrote may not be the perfect answer but I did my best based on the studies and knowledges I had. For people who study the Framer, I hope my codings are helpful.
8
Aaron Yih
I'm trying to make a confetti animation where onhover, the confetti explodes out and falls to the ground where it accumulates as the event is triggered over time. I've been playing with this, but I'm not sure how to bound the particles to a specific box or prevent the particles from being attracted to the magnet on the way down. Any ideas or alternatives?
5
Angie Marie
Does anyone have a great example they can share of a Search demo (like a practice tutorial of Google Search) -- I'll take anything that shows the interaction of clicking into the search bar, showing a drop-down, allowing you to type, moving the search bar into position (from middle of screen to top and/or fading the background to focus on the search bar). Any help would be appreciated! I'll take a good tutorial or just demo code. Thank you!
1

September 14

Chris Wang
Hey guys, I'm playing with videos. Is there a way to disable using the iOS native video player? Whenever the videos in my prototype plays, it switches to the OS native player and takes up the whole screen.
1
Karol Piwowarczyk
I want to check scroll.y Looking on: http://share.framerjs.com/n61mnvkqgyud/ It works ONLY WHEN I HOLDING mouse button or touchpad in Macbook. What can I do to check scroll.y when I scrolling and LET button? See the video.
1
Kyle Gardner
Hello Framer people! I'm using Benjamin Den Boer's video player (thank you) and am getting an odd "skippy" effect on playback. It happens in my prototype and in the updated version of the player download (http://share.framerjs.com/ls45f54htojk/) I noticed if I don't update the downloaded file above it works fine... perhaps the skippy effect is due to the most recent update? Any ideas on a fix? Thanks
4
Ashanya Indralingam
Hey Amsterdam designers: Framer is hosting an in-house meetup this Wednesday and we'd love it if you could come! Most of you have interacted with the team through this group, so this is a great opportunity to meet our designers and engineers in real life. We'll be hosting sessions for all levels, showcasing prototypes from the community and giving you a first look at what we're currently working on. RSVP here (to get in on the pizza & beer) — https://nvite.com/AmsterdamMeetup/cba3 Check out the Amsterdam FB group here — https://www.facebook.com/groups/frameramsterdam/
3
Max Krylov
Hey everyone! Please recommend what are you using to correctly scale your prototypes on different screen sizes. I'm using FramerScaleToDevice module, and it works great in Framer Studio simulator, but it fails on a real device. Probably I'm using it not in a proper way... Here's the module's github: https://github.com/ServusJon/FramerScaleToDevice I looks like Framer.Device object representing simulator's screen, not the device one? My original idea was to have biggest size of screen designs (e.g. iPhone 6+) and scale them proportionally (with all child layers on them) for each screen size. Maybe I should use different approach to manage initial design sizes? Here's my sample project: http://share.framerjs.com/kjtyr8t3l09i/ Thanks!
6
Sergey Perepelkin
Hello, guys! I want to use Classes in my work. For example, create Class that includes Navigation Bar and Content Spaсe. All other elements I want to put inside Content Space. But it writes that Content Space is not defined, when I'm trying to use it outside the class (for parenting). Help! I don't have framer studio so there's link to my example http://sergeylask.ru/framer/class-problem/ and there's to my coffeescript file http://sergeylask.ru/framer/class-problem/app.coffee.
2
Márcio Ribeiro
Hello framers, I’m doing a prototype with +- 5 videos (each one in a different view) and when I test in Framer everything works fine, but when I'm using on iphone (tested with frameless, frames or safari), just the first one plays. Anyone having similar problem working with VideoLayer component too?
1
Ahmet Bekteş
Open from URL for Framer Studio?
1
Igor Shepel
Hi everyone, Here is the idea of how to make shopping exerience more natural and smooth on mobile. Check out the prototype on device https://dribbble.com/shots/2913060-Product-View-Interaction (tested on iPhone 6). Thanks a lot Joshua Tucker for accelerometer module, very helpful!
5
Giles Perry
I'm trying to embed a Framer prototype on a Squarespace website using an iFrame: <iframe src="http://share.framerjs.com/478kta5wx0wn/" width="100%" height="600px" scrolling="no" style="border:none;" ></iframe> It works fine on desktop, but when the page is viewed in Safari on an iPhone, there's no image of a phone around the prototype and the you can only see the top left corner of the prototype. Any ideas how to get this to work?
2
Daniel Alvarez
Anyone has a prototype of Framer + Mapbox or Google Maps API?
2
Александр Всехвальнов
Hello Framers! I have a problem and me need someone who can help. I'm trying to create animation for loading screen and use 3 states for one of my objects. The problem is that animation between states are not smooth. It start to switch to state 1, when delay, when switches to state 2 and delay again. The same problem when trying to switch between animations (not states). How I can design smooth animation between states with no delays.
2
Paul Kooi
Is there a way to customize the device image used to frame a prototype. Say I want to create a generic phone or other type of device with my own png... Thanks.
2
Koen Bok
If you want to embed a Framer project into your site, you can easily do that with an iframe. Here is a simple example:
2
Ash Adamson
How do I go about reading and understanding all the properties about a layer? I'm assuming I have to dive somewhere into files, but unsure where to start.
3
Marty Laurita
Hey Framers, Having trouble with a new prototype. It's a pixel measuring tool and I can't get it to work quite right. Click the BG once to set the first point, twice to set the second point, and three times to reset. 1. It only works if you click from the top-left to the bottom-right. 2. If I want to drag the crosshairs around, the location doesn't update properly and the width/height of the box doesn't track properly. Thoughts?
1
Joshua Tucker
Morning all! Has anyone been able to duplicate / copy a Framer context before? I am building a (large) desktop prototype that uses tabs to switch between views. I want to be able to create a "default context" so anytime I create a new tab, it will copy the default context with all the layers I created inside it and when I switch between tabs, the state of the context is saved. Thanks!
2

September 15

Ben Adam
Is there a way to access the window alert() method from framer?
2
Michael Van Havill
Hey guys, are there any sound solutions to making frame scale up for the 6plus. Designs made for the 6 completely fail when viewed on a 6 plus. I'd be happy for scaling or simple a black frame.
1
Blaine Billingsley
Is the Preloader broken or am I using it wrong? I have it at the top of my file here http://share.framerjs.com/0c5h71ebcs47/ but it doesn't seem to be preloading.
1
Floris Verloop
Yesterday’s Framer meetup at our Amsterdam office was hot but awesome! Lots of amazing work was showcased and I spotted plenty of hacking going on around the office. Since our event coincided with the meetup in London, Jonas and Sergey used this opportunity to demo live data by chatting within a prototype — definitely a crowd favorite! Check out the photos and make sure to join the Amsterdam group. The next meetup will be on Wednesday, November 16th. See you then! Amsterdam Group: https://www.facebook.com/groups/frameramsterdam/ https://www.facebook.com/media/set/?set=oa.1845299025690317&type=3
1
Che Harvey
Hey everyone! I just started learning Framer two days ago, so I apologize for coming off like a total fool, but I'm trying to slide through different layers by clicking the same button. I'm looking for best practices. Should I delete the button and create a new one to do the next animation? I just have a feeling that if I'm doing repetitive actions, there has to be a less complicated way that will help me in the future. Thanks! And I'm really looking forward to being part of this community.
1
Niels van Hoorn
Framer Meetup Amsterdam
25
Joe Day
While loops. Why does Framer Studio not like them?
4
Jimmy Ebeling
Hello Community, as a UX designer, Flinto is my prototyping app of choice currently. I would like to learn Framer JS and wondering what people use to learn the fastest? Is there a series of video tutorials or anything like that out there? 🙌🏼
3
George Otsubo
Hi, what's the best way to disable a touchStart event inside a scroll component when you scroll? The reason I'm using touchStart instead of click is because there is a scale down animation when you tap and a scale up animation when you touch back up inside the scroll view.
1
Giovanni Caruso
Hey Benjamin Den Boer! Messing with the AudioPlayer module. Some issue I can't solve: unless by dragging the knob (which I would like to hide), there is no way to see the progressBar advancing. Any hints to solve this one?
6
Francois W Brahic
Hey guys! Is there a way to display a parent layer in front of its children layers? I seem to be unable to bring it forward, but I am new to this so I'm probably missing something obvious! Thanks.
3
Paresh Ravi
I am trying to hide the scroll component. Could someone help me. When I move from page 1 to page 2, I am not able to scroll on page 2 as the scroll component on page is above page 2.
1
Koen Bok
I often enjoy reading up on math behind concepts I use everyday, especially when they are very well illustrated. This article is really good.
4

September 16

Adam Mazurick
Hi fellow Framers! WebRTC Question. I have a huge ask and need help. I need to test and validate a hypothesis quick. I need to take my prototype which now relies on static video and now make a live video-conferencing app prototype. I need to know what next steps to take. So basically my prototype needs to display a live video of each participant. I believe WebRTC is the way to go based on some preliminary discussions. Has anyone done this? I know WebRTC is new and buggy and half implemented.
3
Jerry Lin
Hi! This is a framer work I found in our group. Does anyone know why the .switchInstance will lag in back? Thanks for any suggestion!!
1
John Lee
Hello you loop-lov'in, dynamic-layering Framer'ers I had a question, (funnily enough) about targeting a dynamic layer's HTML CSS property using an onClick event. Attaching a screen shot of where I got to and it dun-not work... Your help is always appreciated (grovel, beg, whimper...)
2
Sergey Voronov
During last Framer JS London meetup and excellent showcase by Rhys Merritt there was a question on using custom fonts in Framer project. So i have created quick github project on that with description https://github.com/mamezito/customFontsFramerJS. I describe how to use external fonts from fonts.google.com, use iconfonts and use fonts that you store inside your framer project
0
Abdul Waheed Khan
Hi framers i am just going to start framing but thing that stops me is that i have no any idea about the tools or languages used, is anyone out there to Guide me ?
2
Eli Beitzuri
I'd like my prototype to scale so it fits whatever device is being used. I'm using Framer.Device.contentScale which works in the browser, but not on actual devices. What should I be using?
4
Fausto Pérez
Hi folks! Here we go! This is actually happening! Super excited to announce Designit will host the first Madrid Framer Meetup! On Friday, November 4th at the Designit office in the Madrid city centre. 30 spots available, pizza and beers on us! Looking forward to meet you there!
0
Damion Parsons
Newbie here. How do I adjust the x position of an object on screen to the size while resizing the browser? Any ideas? thanks
2
Florence Lafite
Hey everyone, I’m very new to Framer and Javascript/Coffeescript so I apologize if my question is silly but I’m stuck! I created a simple animation with an onClick event. I want to start a new animation from one of the elements that popped up from the 1st animation and after browsing the internet and the book from Tessa Thornton I still cannot manage to move forward. I’m going to copy my code in a comment below. Basically I want to click on “High” and generate a new animation from there using the elements “Low” and “Medium”. Do I need to stop the onClick event and if so how? Do I need to remove the previous states and create new ones? Thank you!
9
Nate Sanders
Hey I'm trying to pull off a truncation using CSS ellipsis and it all works except for the ellipsis. Anyone have experience with this in the past?
3
Thomas Britton
Hi everyone, Just getting started with FramerJS and have run into a problem which I can't seem to solve. So basically I am importing my sketch file which succeeds but in the Canvas I do not see my art boards. My art boards start from (0,0). I only ever see a part of my first art board when I change the device to a 'Macbook Pro' I have attached a screenshot of what I see. Anyone have any ideas? Thanks Thomas
2
Marty Laurita
Hey Framers! Well, it's happening...Boston Framer meetup! #Bostonframer https://nvite.com/BostonFramer/ac44 https://marty43.typeform.com/to/gTSYo0 We have 40 spots open, food, drinks, some swag, and most importantly, awesome Framer talks and workshops! If you're interested in being a mentor, or better yet, a speaker, please contact us/leave a comment. See you there!
1
Kennen Pflughoeft
In honor of the NFL season kicking off, I'm sharing an NFL Viewer concept app that I built with Framer. It was just for fun, but feedback's welcome!
2
Rohan Singh
Curious to learn if there's a Framer D.C meet up group ?
1
Sergey Voronov
Guys, any progess on android perfomance improvements? we had some talks in May I suppose
5
David Townsend
Hi guess I am seeking help on hopefully a simple question. I have created a draggle object with a constraint and I want to use its y value to change the opacity values of two different layers. http://share.framerjs.com/p9qi8fs4vnyp/ So in the project I am sharing. I want to take the y value of the handle and have it change the opacity value of LayerA if the handles y position travels between 611 to 0. would translate the LayerA opacity value between 0 and 1. Vise versa if the handles y position travels between 611 to 1233 I want it to change the opacity values of LayerB between 0 and 1. Any help would greatly be appreciated. Thank you
3
Kévin Baës
Hello! I try to make an animation where when I make a swipe on a layer , it performs a 3D rotation. There are 3 layers. The problem is the perspective changes depending on the position of the layer . Is it possible to have the same perspective for each layer , regardless of their positions ?
13

September 17

Benjamin E Saravia
Hola! I just finished this little experiment/practice. It mixes Framer and GSAP. Their SVG timeline has its benefits. Hope you like it. Source: http://share.framerjs.com/aixurv6auj92/
2
Ash Adamson
Getting a really weird error when trying to run a function that changes background color of a layer inside an array. Works fine without the else statement, breaks when I add the else. Anyone know how to go about debugging this? Really annoying because the error is thrown but code still works.
5
Malcolm Ellis
Hi All. I see that any single asset seems to be capped at 32mb, for sharing. Anyone know what the total file size cap for a project is? thx!
2
Martijn van den Broeck
Hi folks! For a one week school course about micro interactions I dived into the world of FramerJS. Here is the result, let me know your thoughts :)
16
Paul Rich
Is there a way to prevent over scroll content like here?
3

September 18

Cantona Hagvinprice
Hello Folks, I'm looking for UX/Ui designer for my fitness app project. Anyone here? /Cheers
4
Yfat Eyal
Hey Everyone! Wanted to know if it is possible to use 360? with the VR component? or just 360 video in general?
3
Adam Mazurick
Great resource for figuring out bezier curves. http://cubic-bezier.com/#.17,.67,.83,.67
0
Isaac Weinhausen
Nerd alert: Couldn't help it.
15
Дмитрий Никифоров
Hi everyone! Here's my simple prototype where i want to accelerate or decelerate the timer depending on the slider position. But the timer behaves unpredictable. Any thoughts how can I fix it? Thanks :)
1

September 19

Daniel Alvarez
For those using Framer JS without Framer Studio in Windows or Mac, what is the best way to preview and test prototypes in devices? Either iOS or Android.
3
Mazvydas Bartkevicius
I had noticed that's some prototypes from https://framer.com/gallery/ are messing around as they not supposed too or even not working. https://share.framerjs.com/lxadkhmxumng/
3
Jai Mitchell
Is there any way to limit the max size a prototype shows in the browser when you share a link to a project?
2
Karol Piwowarczyk
Hi! I have one, small question . How to center layer in another layer - 'layerB' in 'layerA' (without “parent: layerName”)? http://share.framerjs.com/mvfjhbob5phy/ Thanks for help!
2
Daniel Maniés
Hey, if you rotate a mobile device and then select a desktop device you get this (screenshot) and can't rotate it back. It's not a big issue, but it could be confusing for a second :)
4
Damion Parsons
Hey group, What's the best approach to a multi-page experience? How do I go about setting up my Framer project to transition between multiple pages?
4
Adam Mazurick
Has anybody used a framer prototype with Arduino? If so let me know....
16
Cory McArthur
Hey everyone. I've got an issue I'm trying to work out in framer, and I'm not sure what the deal is. I'm trying to drag and drop shapes to simulate our new android app for Lucidchart. But it won't actually copy the layer after the first drag. Any ideas?
3
Alin Meceanu
Hello Framer humans I have a small questions regarding the animationA.start(). Is it possible to trigger an animation twice? Right now I can trigger it once by 2 different events, but can't trigger it twice.
2
Jon Arnold
What is the best way to have a draggable layer with a dynamic resistance? I tried to use this example (https://examples.framerjs.com/#draggable-basics.framer) but with the new framer version changing the speedY dynamically doesn't seem to work. Thats my version: http://share.framerjs.com/m9hyub1h0bh1/ Thank you!
1
Jon Madison
What is the best way to suppress/eat Framer error messages? I've handled an error in the UI, but for whatever reason (i'm working on tracking that down) it still results in a console error, that gets ultimately displayed on the prototype on the device. Its not fatal and I don't care to show this error to the user. Is there a way to suppress these errors from showing up in the UI?
2
Ray Yip
A simple hack to let you design at 1x for iPhone
1
Karol Piwowarczyk
Hello everyone! In FramerJS Studio, when I want scrolling, I must HOLD button on touchpad (Macbook). Can I do it like in the browser? (without hold the button) Thanks for your help!
1
Yeseul lee
Hello Framer I would like to share my 2nd project on Bechance with Framer. I have designed the conceptual app by myself for getting used to Framer Js. Through the challenge, the program stimulated my interest more and I felt this time was so much easier than the first time. I believe I’m getting improved even though it is not noticeable. I will keep working hard! Though the code is not extraordinary, I hope you enjoy my projects. Thanks 😃
6
Ben Ellis
I wonder if anyone can help me. I put together a simple prototype that has 6 products, each with an image and then a heart icon. The heart icon is made up of two separate layers, an off state and an on state. The off state is visible by default and the on state is invisible. I want to simply toggle the states once the user has tapped on them. I can do this if I manually position all the elements and name everything individually, but I thought I would try and create everything using a loop. I can toggle the first layer on/off using 'this', but not the second layer. Here is a snipper that runs inside the loop, there was another bunch of set up code, but I have removed for brevity. Thanks in advance Ben for index in [0...5] myLayer = new Layer myLayer.states.add on: opacity: 0; myOtherLayer = new Layer myOtherLayer.states.add on: opacity: 0; myLayer.onClick (event, layer) -> this.states.next(); myOtherLayer.states.next();
3

September 20

Christina Zou
Hey guys, is there any way to get around the 32mb file size limit? I need to use a fairly large video that I can't compress to get near the limit. Thanks!
1
Sayid He
Hi everyone, I found an interesting random effect code and I want to turn this code to Framer js grammar, can anyone help me? Here is the link:
1
Adam Mazurick
Krijn Rijshouwer thank you! My T-shirt just showed! This T-shirt is so nice! I can't wait to rock this at work!
5
Ee Venn Soh
To remove the nested tree structure within the doc is that intentional or just a bug? It makes life harder to browse.
2
Adam Mazurick
Hey Framers! Quick question. Need any resources or help making a Arduino LED Blink using firebase and framer. Not familiar with firebase. Please help! Giovanni Caruso or anyone please!
7
Jon Madison
If anyone cares to know, it may be shared already, but when writing modules I find it best to embed my images as base-64 strings. Granted this will not work for all browsers, but most modern browsers will let you use base-64 images. I've gotten into the habit of using the "html" property of layers heavily. :) I encode my images using this site: https://www.base64-image.de/ (you can use any converter really) then drop them in a json "resource" file, so I can call them as a variable in my <img src>" tags. It allows my modules to be "self contained", i.e. no passing around a separate "image" dir. Currently file size limit at base64-image.de is 1MB (which usually should be plenty--think of something else if it's pretty large). I'd think that it may cause issues with FramerJS preloader (i.e. just won't work Because you can't preload by image name), but any other prominent issues? My prototypes are performing just as snappily as anything else so far... Let me know if you'd like me to elaborate or share an example.
1
Jon Arnold
Good morning! I am still stuck creating a draggable layer with a dynamic resistance? I tried to use this example (https://examples.framerjs.com/#draggable-basics.framer) but with the new framer version changing the speedY dynamically doesn't seem to work. Thats my version: http://share.framerjs.com/m9hyub1h0bh1/ Thank you!
7
Giovanni Caruso
Hi all! It took me a while, but here we are with a quick report after the Framer Meetup Milan. 15 guests (profile: UX/UI, UX Researchers) with (mostly) some coding skills and no previous Framer experience. I've opted for a light presentation followed by a workshop aimed at covering the basic of the tool (+ some immediate reward). Autocode rocked and in general there was a positive and proactive approach to Framer Studio (so that we left the place 1 hour after the official schedule and I've already got some interest for a second meetup :D ). Most wanted: 1) a more robust sharing feature with password and access to shared projects (Axure like). This was unanimously considered a must for a widespread adoption. 2) the integration with some user testing product. 3) export of sort to go from Coffescript to Xcode (or whatever). Here the proto I've prepared for the event (http://share.framerjs.com/7wbe0uiyrgr1/) and some pictures (courtesy of the UX Book Club Milano). Let me thank Sara Surh and Elena Stoyanova for the invaluable support and Benjamin Den Boer for the on-the-fly fix to the AudioComponent module.
9
Eelco Lempsink
Here are some notes about ordering layers. I’ve seen a bunch of projects the last few weeks that try to use the ‘z’ to order the layers but trip over a difference in Chrome and Safari how this is handled. In short, using the ‘z’ works in Safari, but not in Chrome, but you should not use it to order layers. The ‘z’ value is not the z-index, but the z-coordinate in 3D space. If you want to order the layers, you should use the ‘index’ property or the ordering functions (like ‘placeBehind’). Here’s a small project to showing the differences:
0
John Trabelsi
Hi everyone! Ok I FINALLY did the jump and started using framer. I'll most probably have my team using it as well really soon. Quick newbie question for which I can't seem to get the answer. When using a FOR loop to create layers, how to you refer to a specific layer and change it's properties independently? Searching for the answer got me there (screenshot) but as you'll see the dot1.backgroundColor = "red" didn't change the color of the layer. Thx guys!!
5
Leanne Wilcox
Hi everyone I'm struggling to prototype an "unfolding card" style animation and was hoping someone may know of an example for something similar that they could point me to. I've found a few "flip" style examples and have managed to get close, but never seem to be able to get it unfold at the right points. Any help would be much appreciated, thank you! I've illustrated the rough effect I'm after.
5

September 21

Jonathan Ravasz
Hi everyone, I would like to share with you my first larger Framer project. I have been seeking for a job opportunity as a VR designer recently, so I have decided to put together a 360° interactive resume using Framer Studio. http://share.framerjs.com/ojd9q3dg5xem/
47
Rory Smyth
I'm looking to break out a lot of components from my Framer files into reusable elements. In doing so, I've created a lot of dynamic elements. Layer creation being nested inside a class somewhere. This means though that I can't select layers directly with the name I assigned to them in the loops. I give them a dynamic name value which obviously isn't the actual variable name so Framer won't pick up on it. How do people go about handling this? I could use the layerByName method, but I'd rather be able to select it as I would a regular layer. Ideas?
4
Jordan Robert Dobson
Framer JS Seattle will be live in about 3 1/2 hours from Microsoft for our 16th meetup. We'll be giving away two free copies of Framer and some other goodies as well. Here's a small example of what we'll be doing to give it away: http://jrdn.io/1F3R0k150K0N Join us with my co-host Stephen Crowley and organizer Rich Zarick and the other Seattle mentors. Check back in about 3 hours and we'll post the live stream here. See you then!
3
Koen Bok
Sierra will be great for Framer, because we get a free ride on all the new stuff in WebKit. Here is an official overview of everything new in WebKit.
5
John Sherwin
Hi folks, I've set up 2 columns and a few rows for these cards in a prototype I'm working on. I thought I had done everything correctly but for some reason that 'cardPadding' value isn't applying to the cards left side so they're pinned to the left of the screen. I know the answer is in front of me but I just can't see it. Anyone know how to get that padding on all sides of the cards even? Any help is much appreciated!
1
Jordan Robert Dobson
FramerJS Seattle 16
6
John Lee
Hello fellow Framers! How would I embed an interactive 360deg Ricoh THETA S iframe into Framer? So it goes full screen? The screen shot approach shows the entire site (header, nav etc,.), but I only want to embed the experience so it's full screen. Here's my embed code: <a href="https://theta360.com/s/f3QW1xja4hQOD9bK7pkiFPjrI" target="_blank"></a> <script async src="https://theta360.com/widgets.js" charset="utf-8"></script> Thanks!
4
Mike Brits
Hey Framers, I've got an idea I'd like to try out, just looking for the best way to do it. Is there a way to embed custom metadata into a layer in Sketch, and retrieve it in Framer? In Sketch, I have figured out that I can set userInfo on a layer (standard Javascript object key value pairs) but it doesn't look like that gets kept on a Framer import. Is there a good way to save custom data in Sketch that can be accessed in Framer? Maybe alongside the opacity in metadata? Google is not as helpful as I thought it would be. Thanks!
1
Koen Bok
I'm doing some research on dynamic layout systems for ... things and maybe even a blog post. I made a list of all the interesting approaches I could find, but I'm sure there are many more. If you know one, feel free to add it. Bonus for a description of why you think it's (not) a good approach. General discussion also welcome.
13
Nicolas Tilly
Hi! I want to know is there a limit size for files to use the Framer ios app? My proto is very slow and i can't download it with the Framer app. Thanks :)
2
Ami Clifford
I'm relatively new to Framer, and I haven't been able to find that much material online about working with photoshop and the program. At the moment I'm having trouble getting my photoshop image to fit into the framer canvas - could anyone help with this?
1
Koen Bok
We have been testing Framer on macOS Sierra 10.12 for a while, and from my first impressions it runs great on the release version too. If you do run into anything, let us know.
2
Bryan Clark
Ran into (I think?) a flaw in Framer's handling of Layer.name - if I have an array of layers, and give each the `name` of its index (e.g. 0, 1, 2 in the array) and try to get the layer's name in an onTap call, it's interesting - the layer.name doesn't exist for the 0th entry. Any chance that layer.name is 0 by default, so Framer thinks it's null?
2
Jason Nelson
Anyone have any thoughts or examples for a clean, elegant way of restricting the drag of an object strictly to 90 degree angles (horizontal *or* vertical, nothing diagonal). I've got a hack that checks for a delta after moving the layer, but sometimes it doesn't always get registered.
3
Isaac Weinhausen
Has anyone found a good solution for suppressing the browser's default focus behavior? Currently, when viewing a Framer prototype in the browser, hitting tab cycles through the ui chrome elements and once into the webpage, and then back out into the ui chrome. Can someone point me in the right direction? Guessing I'd probably need to fool around with the Window object. Here's the prototype. Works find in Frame Studio, just not the browser.
5
Ed Chao
anyone know a quick way to hide the layer inspector by default?
8
Christina Zou
Hi guys, I am building a custom video player and putting a large video (>>32mb) inside it. I am hosting the video on YouTube. Two questions: 1. How do I add a YouTube video to a VideoLayer, in the video field? I am trying the following, which doesn't work: videoLayer = new VideoLayer width: 1320 height: 750 video: [youtube url] superLayer: videoContainer 2. If I embed a YouTube video by adding an iframe into a Layer, as follows, is there any way for me to control the playthrough of the video with the Framer custom video player controls I've built? videoContainer = new Layer width: 1320 height: 750 backgroundColor: '#fff' shadowBlur: 2 shadowColor: 'rgba(0,0,0,0.24)' html: '<iframe width="560" height="315" src="[youtube url]></iframe>' Jonas Treub
1
Adam Mazurick
Advice Please: Lately, I’m having to prototype for the IoT. Making mockups of interfaces that work with physical products. This week I explored using firebase, node.js and framer.js with Arduino and Particle. I come from more of an iOS/Product Design/PM background. I’m not too strong on Node or JohnnyFive. Prior to working on IoT prototypes I was nearly complete a personal iOS Learning track that got me to Intermediate App Developer which came in handy. I’m kinda on the fence about diving into FullStack JavaScript Dev work which seems to be necessary to prototype robotics and devices. The question is this: To make IoT prototypes that connect to boards and use framer… is full-stack the way to go? If not, could I somehow stay with iOS Development?
5

September 22

Ahmet Bekteş
https://xboxdesignlab.xbox.com/en-US/customize/bumpers-triggers do you think that a similar solution can be prototyped with Framer? Any ideas and comments are welcome.
2
Koen Bok
[Update: Framer runs great on 10.12] A quick note about macOS Sierra 10.12. Right now Framer does not run on Sierra, mainly due to a lot of WebKit changes. Luckily they seem easy to fix, so we hope to have Sierra support in the beta in a matter of weeks.
10
Bryan Clark
When I see "Unexpected indentation" or other errors in the lower-left corner, is there a way to jump-to the error?
3
Jason Nelson
Hey, Framerites. Wondering if anyone has an example on a simple way to deal with the following issue. I have created a slider within a screen that rotates. When I rotate the screen the slider doesn't follow my cursor/finger when I drag it. It goes perpendicular to my direction. Other than an onDragMove action where I force it to do something else in the "correct" drag direction, does anyone have examples or an easy work around to accommodate for this? See example for problem I am describing. (Red button rotates "screen")
2
Diego Haz
Hey, guys. I've posted a video on Youtube about creating and deploying a RESTful API with NodeJS. Hope you like it. :)
1
Patryk Adaś
Hello! I want to recreate this effect on scroll / drag: https://gfycat.com/DismalMarvelousAplomadofalcon However, I only found onSwipeDownEnd/Up - It does not really do the job, as it *jumps* and transition is not smoothly correlated to the scrolling behavior. How to fix it? I assume it has something to do with utils.modulate.
3
Ade Adegoke
Hi All, is there a FramerJs project for iPad that has the home screen animation, for example when you press on the home button it close an app, etc
0
Marco Mueller
Hi everyone, I have a problem with a page component (its probably super simple): if I scroll the pages I want the dot to jump between its two positions. I cannot figure out why it only moves after the third pageelement. Any ideas? Thanks a million!
1
Robert Huber
Hi, I am very new to framer, allow me a simple question: I am trying to position and size a layer relative to the screen size: I would like the white rectangle to be horizontally centered, but vertically 2/3rds up relating to the screen size. I want the width/height of the rectangle to be 40% of the screen width/height. Can I do this without referring to exact pixel sizes, as I would like to make a simple prototype for both iPad and iPhone ? thanks for your help.
2
Koen Bok
Framer Sessions New York is tonight at ustwo with Danny, Noah and our own Sara and Jonas. They'll show some future stuff we've been working on. Join if you can!
2
Hector Jaime
Hi all. Feel like I've gotten as far as I can with the examples and tutorials on the framer site and other blog posts. Now I'm ready to do something more advanced that I think requires better knowledge of Javascript. Any recommendation for online courses/videos? Something that will skip the framerjs basics and go for something more mid-level to advanced. Thanks!
3
Aalok Trivedi
Sorry for the basic question but can anyone tell me why the counter display isn't showing the increase? I guess I need to add some code that shows the new count but I'm not quite sure how. Thanks!
1
Charlie Sneath
EDIT: Figured it out. Got the initial settings for draggable constraints on the ScrollComponent, which can be used to switch the layer back to regular scrolling behavior after it's been constrained. (Note: the draggable constraints are being set on the content layer with in the scroll component.) scrollComponent.content.draggable.constraints = x: 0 y: -(scrollComponent.content.height - Screen.height) height: scrollComponent.content.height * 2 - Screen.height width: Screen.height ----- Is it possible to toggle constraints for draggable layers? I'm trying to work with a tall, scrollable area that has 2 states: 1) freely scrollable without constraint 2) scrolling is constrained within a small area (expected use of constraint feature) As soon as I include the constraints, I seem to be locked in this behavior. Turning `draggable.enabled = false` removes ability to scroll, and trying to reset with `draggable.contraints = null` also doesn't work. Maybe I'm misunderstanding how to use this? Thanks for any ideas!
3
Adam Mazurick
Ok, struggling with a firebase problem. Uncaught Reference Error: Firebase is not defined http://share.framerjs.com/ybhd43t7dyn9/ Can someone check the index.html? I think I followed the steps properly...surely I'm missing something. All I'm trying to do right now is duplicate this experiment. http://designsprints.com/framer-screencast-firebase/
3
Jai Mitchell
Every time I try to exit from a particular code fold on this project, Framer is hanging for up to a minute – have I broken something or have I just written so much poor code that Framer can't process it all?
2

September 23

Sadok Cerv Rabadan
If you wanna prototype a full app (not just micro-interactions), with audio/video support, which prototyping app would you use? EDIT: I know theres a way to do full apps with a framer module, but from what I've seen, its neither the easiest nor the quickest thing to do.
2
KwokPing Lau
Thx for the approval
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!
6
Calob Mejias
Does anyone know where I can find a project that is an example of transitioning from a layer to a VRComponent?
1

September 24

Mike Perry
Hello and apologies, newb here. Is it possible to use the Auto-Code functionality on imported Sketch layers? Thanks
2
Robert Huber
Hi, I got a (probably very simple) question: In my prototype, when clicking on "My Profile", a second screen should come up. However, the screen is blank while it should contain content made in sketch. (I copied the method from the youtube framer Tutorial 2, but I cannot see where I went wrong) ; thanks for your help.
7
Gregory J. Orton
Yo, anyone know how I could go about importing this library into Framer: https://github.com/mattdiamond/Recorderjs the dist .js file has no dependencies, but when I put it in the modules folder, Framer whines about a missing dependency that I think comes from node. I have little understanding of node. Can someone point me in the right direction?
4
Francois W Brahic
Hey team, quick question: Colors on pngs I import from Sketch are looking less saturated in Framer than Sketch. Any clues on how to solve this? Thanks!
1
Adam Mazurick
Stuper stoked for Toronto's Framer Meetup! so far there's some serious interest in the event. If you're in Toronto, please join us. https://nvite.com/FramerFoundatio/e93b
1
Lawrence Weyman-Jones
Hi, does anyone have experience in using scrollToClosestLayer? I have a series of images within a scroll. I want the content to snap to the closest one once the scroll velocity slows down past a certain point. The only way I can seem to trigger it at the moment is if I use: Scroll.on Events.ScrollAnimationDidEnd, -> Scroll.scrollToClosestLayer(0, 0) This means waiting right till the scroll has stopped which can take some time. Any suggestions greatly appreciated.
1
Meishen Yin
Hello, team, I am validating a design feature for Fandango and I created a survey released to public. Looking forward to your response. Only 7 questions, thanks, if you have any idea, please let me know s!
1
Lucas Carmichael Lu
Hi everyone, quick q: is Framer Preview the only way to preview designs on an iPhone?
2
Junhyuk Jang
I just wanna made something beautiful stuffs. Please check URLs. First one is inspired by Korean poet Dong-ju Yoon. # the night of counting stars http://gph.is/2cHD7wu http://share.framerjs.com/ojxpva1h0n47/ # flip animation http://gph.is/2cslULn http://share.framerjs.com/pao4l5wqotqg/
2
Daniel Maniés
Hey guys, I want to have a hover state for layerB. Unfortunately using states and the style property doesn't work. What's the best way to accomplish this? Thanks in advance!
3

September 25

Guus Baggermans
Does anybody know if it's possible to create a Bounce easing without overshoot?
23
Marc Krenn
Frameristos, I'd like to share my latest side project with you: Bounce w/ faux-physics. The formula needs some work (seems like Apple uses some kind of advanced dampening method) and the overall implementation is super hacky but maybe, just maybe, it will find it's way into core Framer some day* ... Please be aware of the fact, that right now it's just a proof-of-concept which is certainly NOT ready for most real life scenarios. Have fun with it nonetheless! :) Example 1: http://share.framerjs.com/t0xysoyzxagu/ Example 2: http://share.framerjs.com/l3yqf4t0uwwd/ Example 3: http://share.framerjs.com/25tai6wmzubo/ # includes a barebone POC module ### @Koen: * layer.draggable.bouncePhys = enabled _____ground: Screen.height # or constraints height _____energy: 90 _____gravity: 20 _____bounciness: 1.60 _____resistance: 5 ? :)
10

September 26

John Lee
Yo yo, ma Framer'ers Thanks to the super-smart skills of Krijn Rijshouwer I was shown how to add CSS styling to an onClick event inside a loop of dynamic layers (YAY) http://share.framerjs.com/qi7oxepsy5ih/ However, I'd like to get this working like a tab – where only one button at anytime can get the active state. I thought working inside the initial loop and use @.onclick -> but this didn't work. I then thought about another loop with the initial tabs layers pushed to an Array..., alas my brain couldn't handle that today. Any advice and I'll send happy rainbows your way for the weekend (I promise!) Chi-arz
4
Charlie Sneath
Looks like Framer.Device.contentScale doesn't apply when viewing prototype on mobile device (iPhone 5 specifically) — any suggestions? / cc Benjamin Den Boer
3
Xavi Lnrs
Hey hey ✌️ I used Framer to add interactions and animations to my portfolio. It was originally made using Jekyll (jade and sass). I made a function to import html elements to Framer layers. you can check it out here: http://fxbr.surge.sh/ Note that using this approach I could use one codebase to create a Framer project that works in different screen sizes. If you want to know more details about the implementation, just ask. Also, feedback is really welcome 😊
9
Mike Perry
I've been creating some fairly large prototypes with Flinto, anywhere from 15-30 screens. Is this something you would recommend with Framer? I've noticed that most of the Framer examples out there only highlight a few interactions and screens. I know you can tie things together with components, but would it be easy to manage a large, full-blown prototype. Two examples of what we've been creating in Flinto: https://famous.co/7a46f17ef3aabb2b5f7432e1ca51b0fd.mp4 https://famous.co/dd49028064b4dec9d4c46201134d42da.mp4
5
Christina Zou
Hey guys, Marvel and InVision both offer the possibility of recording and playing back others' interactions with prototypes (https://marvelapp.com/user-testing/ https://support.invisionapp.com/hc/en-us/articles/205503919-User-Testing-and-the-InVision-Viewer-app). Is there anything like that for Framer? If I distribute my Framer prototype, what's the best way for me to keep track of how others interact with it?
3
Chris McDonnell
Hi, does anyone know if it's possible to mirror on an iPhone using the USB/lightning cable? Having connection issues over corporate wifi using the mirror feature. Thanks
2
Isaac Weinhausen
Hey peeps. Wrote this function the other day, and found it super useful, so thought I'd shared. ---- Topics: Sketch import, layer referencing What it's good for: Accessing imported layer children via dot notation, while maintaining layer hierarchy. How to use: 1) Copy and paste code into your project 2) Call 'createChildrenRefs()' on any imported layer. I prefer calling it on a root level layer. E.g. myImportedLayer.createChildrenRefs() Description: Wanted a way to access imported children layers hierarchically, without having to constantly use the childrenWithName method. I was also tired of having to lookup layers by their uniquely assigned name (e.g. btn1, btn2, btn3). This keeps it a lot cleaner and truer to my Sketch layer naming and hierarchy conventions. Note: This doesn't currently check for object property conflicts. As an example, not sure what will happen if you name one of your sketch layers "width", lol. Use with caution. :D
1
Benjamin Den Boer
You can now create vertical sliders with the SliderComponent! Simply set change the width and height, and the slider will update accordingly. To illustrate, I’ve created a new example. It’s a scrollable and sortable list of people from our Community here, included as a module. Check out the video below and see it live here: http://share.framerjs.com/vdvpzsito4yx/ Make to sure to use the latest Framer version (File → Update Framer) and you’re good to go. Hope this helps. (Chad Lonberger, Sergio Majluf & Noah Levin now you can!)
12
Orfeo Chen
Hi, I'm experimenting with Framer and encountered something odd with Snippets>Device>Content @2x. Everything worked ok until I removed the snippet, only to find the scale remained unchanged. Is that sort of a bug? Is there a quick fix for that?
4
Slava Ustinov
Hi. Please tell me how should i do scroll if i will import psd. My psd height more then viewport, so i added it to superlayer. superLayer = ScrollComponent.wrap(psd.scroll) but this scroll firing when i drag another elements. And another question. How can i duplicate psd layer? This is my project - http://share.framerjs.com/7y3yep8j5wlb/ last item and large item is draggable.
2
David Lee
The latest version seems to have a scroll bug? The same code works just fine in beta.
2
Himanshu Vaishnav
Hey guys, Just moved from some other program to FramerJS. I'm familiar with JavaScript Programing. I looked through the basic documentation and it seems straightforward enough. I know this community might have seen this question a lot but still, what are the other 'best' resources to learn and inspire from. I have an upcoming project and am very excited to use FramerJS for designing transitions and interactions for it. Thanks :)
1
Marty Laurita
Hey Framers! Ever wanted to measure screen pixels accurately? Check out my latest prototype, PixSquare, here: https://dribbble.com/shots/2984945-PixSquare Want to learn more about this and other prototypes? Join us in Boston for #bostonframer! More info here: nvite.com/BostonFramer/ac44
2
Adam Mazurick
I was just working on an experience map. Experience maps are great for creating a shared reference of any product's experience. Basically it's a document that gets consensus of the good and the bad for a product. I'd love to use Framer for creating these documents. You could create kick-ass animations triggered by specific events to illustrate experiences across multiple channels. Then you could bang these off quick and shoot them to team members. I would love some basic team collaboration functionality.
2

September 27

Lisa Sy
Hey there, I was wondering if anyone has implemented a Material Design-based bottom-sheet-to-full-screen animation in Framer Studio before? If so, I'd love to check out your code to see how you made it work (beginner here). Thanks! This is what I'm referering to, btw: https://material.google.com/components/bottom-sheets.html#bottom-sheets-persistent-bottom-sheets
2
Saurabh Soni
I was working on rethinking interactions for chat apps. Prototyped it using Framer JS and wrote a post about the same.
4
Nicolas Tilly
Very cool logo animation. For inspiration to animate things with Framer 😊
1
Sergey Voronov
guys, latest library doesn't have fallback for old animate options?
3
John Marstall
How do you refer to a layer from within its initialization? For example: for layer in [1] layer = new Layer layer.name = "tabBar" layer.height = 98 layer.y = Screen.height - layer.height works, but tabBar = new Layer height: 98 y: Screen.height - this.height does not. Is there a better, supported solution? (you'll have to imagine the correct indentation, don't know how to do that on Facebook)
6
Pim Minderman
Does anyone has different kind of 'tutorial' designs in order to practice framer? I have already done the tutorials, but I want to figure out things myself now;). Kind regards, Pim
1
Vilav Bhatt
Hello, I"m new to framer. Has anyone tried building an imessage sticker / app prototype. Wondering if there's any caveats / template to build on top of. Also, is there a way to emulate typing in a conversation flow?
1
Dan Bartley
Hey Framers, has anyone else experienced touch event problems with prototypes running on phones? Specifically along the bottom of the screen. I've tried it on an iPhone 5 and 6 and there is a dead zone of about 40px high at the bottom. ...Just did some tests. The issue appears to only exist on the Framer Preview app. Viewing in Safari doesn't seem to be an issue. You can test with this:
2
Alexander Lyabah
CheckiO Game for coders Python and JavaScript coders had been launched on Product Hunt. If you enjoy playing CheckiO and love what we are doing you can support us. If you don’t know anything about the game - forget about Product Hunt, you should try the game first. Thanks.
0
Jacek Stryk
Would love to use some other animation easing options like cirq, expo, quad, quint in Framer. Is it possible? If yes, how?
3

September 28

Adam Mazurick
At our upcoming Toronto Meet-up at ConnectedLab, here’s what we will be covering: An introduction to Framer.js looking at Interface Fundamentals, Autocode and Importing your designs. We will also discuss Framer and it’s value to your organization and tool belt. An introduction to Object Oriented Programming principles and CoffeeScript. If you’re totally new to programming, I’ll show you what resources I personally used to go from ‘no-knowledge’ to ‘proficient’ with Framer.js Basic Interactions and mobile prototyping (Beginner). We’ll make 2 demos for this. Prototyping for the IoT using Firebase and Arduino (Advanced Prototyping). A quick overview of creating event-driven prototypes that communicate with external hardware. We will then conclude by exploring Framer for prototyping Mixed Reality Interactions. We’ll explore future applications of using Framer to solve tomorrow’s problems today with a case-study that focuses on Microsoft Hololens. The meet-up is going to be really cool with some free t-shirts and swag! It’s oriented to designers and developers of all skill levels. Please come! There will be snacks too! https://nvite.com/FramerFoundatio/e93b
2
Matthew Blode
I have created an interactive tile UI that is inspired by Google Design's recent blog post. Please check it out and help me figure out how to improve it as I am relatively new to Framer. Thanks so much :) My Framer.js creation: http://share.framerjs.com/z5exzwl314as/ Their blog post: https://design.google.com/articles/making-motion-meaningful/ Edit: I updated the prototype to include comments and a new cascade effect
3
Joshua Tucker
Anyone been able to use "deviceorientation" with your Framer projects? I am trying to print out my beta ( x ), gamma ( y ), and alpha ( z ) values to start, just to ensure I'm capturing the data. However, it will only print out my alpha ( z ) value. Any ideas? orientation = (event) -> x = event.beta y = event.gamma z = event.alpha window.addEventListener "deviceorientation", (orientation) -> # This will only print if it's print z print y
7
Ray Yip
Framer Generative Art: Gooey Color http://share.framerjs.com/0197dohr3pem/
1
Chandan Manohar Raikar
Is there a way where I can define custom screen size of 2560x1600 for desktop screen? I've tried changing resolution in config.json, but didn't work.
2
Koen Bok
This is a fantastic article about how different computer graphics work, and where they are used. Lots of nice examples, with a big chance you'll see your favorite game in there too. https://medium.com/retronator-magazine/pixels-and-voxels-the-long-answer-5889ecc18190#.l85dlm5yx
2
Sam Thorne
Is it possible to use 'server side' npm modules in Framer? As in, run a service as part of the Framer package?
4
Adam Mazurick
For our upcoming Framer meet up in Toronto we're trying to gauge interest in whether you would want/find value in a live feed/free video seminar https://nvite.com/FramerFoundatio/e93b
1
Patryk Adaś
Hi, I got small issue with this template I found in the /examples; I want the previous page's scale to corelate with position of y scroll, so the transition is based on my mouse, but it does not happen instantly in the moment of page swap. I know I have to use utils modulate, however I don't know how I should define the event and how to figure out the modulate ranges.
5
Ray Yip
Here is a snippet to let you make CSS triangle easily.
5
Piotr Kuklo
Hey Framers! I would like to share with you the effect of playing with waves and SVG. Quite simple but the effect is really nice. I also wrote a post on Medium with short HOWTO do that. Please, take a look ;) http://share.framerjs.com/izcljifopyk7/ https:[email protected][email protected]kriz808
8
Jonas Treub
Hey everyone, we just shipped some new desktop design features. Most importantly, the much-requested detachable canvas is finally here! We also added a better flow for selecting devices and revised the menu options adding laptops, desktops and a TV into the mix. The Welcome window also got a sweet new search bar. Making it easy to search for FAQs in the community. Read more on the blog: http://blog.framerjs.com/posts/new-desktop-features.html
27
Jon Madison
Howdy FramerJS -- dig your documenation on the site. Is there a particular tool that you used to generate this documentation? Want to document my custom module in the exact same format if possible.
1
Arron J Hunt
Making a scrollbar add-on for ScrollComponents
9
Alena Syvokobylska
Hey Framers! I've created a chat prototype that lets you express the emotions by shake, here it is https://dribbble.com/shots/2991025-Shake-to-smile Here is the link to the prototype http://share.framerjs.com/t1awp1edqeb9/
5
Mike Johnson
I feel like I have solved this before, but I am running into a cross origin error when converting the app.coffee to app.js and trying to host locally. The following error shows up in the console: file:///F:[email protected]/layers.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. I know I should use a server, or disable origin rules on chrome or safari (which does work) however in this specific case I am loading the html file in another way and can't do either... I don't have control over how the html gets consumed (local vs server) Is there any way to make it work from the file itself? Can I use JSONP somehow in this odd case? Is it because I'm accessing it from another drive on Windows? (F:\)
5

September 29

Robert Toshihiro Asami
Quick question - I'm trying to create a toggle button which pops out some suboptions. There appears to be a single click in the canvas that is unresponsive before I can get the animation to occur. Does this have something to do with default states that I need to change the ordering of? Here is a link to the interaction in question. http://share.framerjs.com/3gj9e20y4wzr/ Thanks in advance!
1
Christina Zou
Hey guys. I'm having a bit of a head-scratcher - I'm sharing a Framer prototype that uses a video file (included in Images folder) that I modified slightly today. In Framer the corrected video is used, but when I Share the prototype, the old version of the video is used in the browser experience. I've tried switching out for different video files, which are included correctly with no problem, but this slightly modified version never seems to get uploaded. Does anyone have ideas?
2
Josh Puckett
Someone asked for help with an accordion component in the Slack group, so I figured I'd post this here in case anyone needs some #slickaccordion action. Behavior is simple: uses an array to create a list of elements, and you can click to expand any of them and the others move to accommodate the expanded item. This isn't bulletproof (e.g. doesn't handle multiple open elements perfectly), but is pretty useful for most cases. http://share.framerjs.com/ff51agq8rx06/
4
Chandan Manohar Raikar
Hi , is there a way to convert this jquery function to coffeescript? $("#exp").donutpie(); $("#exp").donutpie('update', get_data()); and how can i call this function on click on a layer? $("#exp").donutpie('update', get_data1());
1
Kasper Andersen
I have a quick question My code: layerA.onClick -> @.copy() So when I click the layer I get a copy of it, what do I do now to actually do something to the copy. If I do another @. it just do stuff to the original layer.
1
Stefanos Kofopoulos
Hey everyone. I'm creating some prototypes with ForceTap but i'm noticing that 3D Touch is not very intuitive while testing from the official Framer app. Even the ForceTap examples from the official blog post https://blog.framerjs.com/posts/new-multi-touch-gestures.html don't run smoothly... meaning my code is not causing the delay. Also, 3D Touch works fine on my iPhone and other apps. Do other experiencing this not-so-smooth ForceTap behavior? Is it only me?
6
Joseph Decker
Hello Framer JS masters, I just bumped into a website that has an amazing front-page-scroll effect. I was wondering if it was possible to recreate this in Framer JS. http://shtick.be
2
Keith Lang
Small request: I'd love to be able to make the print/console area taller, so I can see more lines. Thanks!
3
Chad Smith
Hey Framer community. Could anyone help me out? I actually have no idea how to download and install a Framer plugin from Github. Can anyone shoot me a link or just let me know how it's done? Thanks!
2
Jiaxin Chen
Amazing improvement in Framer v71! Found these new function, so curiously 🤔
1
Keith Lang
Request: I'm often writing print 'myVariableName: ' + myVariableName I know there's more condensed ways to do that, but I'm wondering if a shortcut might make sense, for example print myvariablename: or similar. This would produce the same as the first line above.
2
Laszlo Rendas
Hey everyone, I want to preface this with I am not too experienced with Framer so this might be a bit difficult for me. I am trying to build a AR game prototype. I will need to have access to the rear facing camera but wont need to take a picture or anything. I also need to put a sketch file overlay on top. I am not worried about the sketch file but do you guys have any suggestions for how to use the camera?
3
Eelco Lempsink
We’ve been working on a better way to highlight errors in Framer, and today I’m excited to announce that we’ve just released Inline Error Reporting in Framer v71! Framer will now underline the exact code that is triggering the error. If you click the error message (or press ESC when the cursor is on the word), Autocomplete will open up a suggestions window with similar words. This feature makes is much easier to catch and fix most common errors, but if notice any errors we should add to the list, please let us know! Read the blog post for more info on this feature — blog.framerjs.com/posts/better-error-reporting.html
2
Christina Zou
I have two Framer shared prototypes that show corrupted videos in Firefox & Chrome, but correct videos in Safari. I've confirmed this happens on multiple computers. I'm on the latest version of Framer. My two Framers are linked below. The first link is missing audio for the first 3s in Chrome/Firefox, but has audio in Safari. The second link fades in from black on Chrome/Firefox and not in Safari. In both cases, the Safari versions are correct and the Chrome/Firefox versions are corrupted. Specifically, the corrupted first 3s of both videos seem to be pulling from older versions of the same video that I uploaded in the past week. I wonder if deleting all my shared Framers on the server side would help things? Example 1: http://share.framerjs.com/y4r3317tra3b/ Example 2: http://share.framerjs.com/nqnqnhfnh9pf/ I've already sent feedback (https://dashboard.devmate.com/#518/3/feedback/348) Eelco Lempsink - continuing from a previous thread, I've confirmed the Framer videos are playing back incorrectly (e.g. no audio in first 3s in Example 1) on Chrome/Firefox on multiple computers. I also played the videos in Firefox browser reset to factory settings/safe mode/all plugins disabled, videos are still corrupted.
2
Ban Nguyen
Hi guys, I am trying to create a calendar but i am stuck as you see if user clicks on a day then other days need to be back to default. I have tried .add.state but not working (I am new to framerJS) http://share.framerjs.com/eseu1uw7hcg3/
6

September 30

Janno Viiding
I'm looking for examples how to solve a scenario for user browsing new cars catalog ie either first filtering or straight starting exploring new car models of different makes; toyota; ford etc. Want to find ideas for engaging user in exploring cars and ultimately making buying easy process. Your input and experience is highly appreciated..
0
Clayton Farr
Hi all – I'm trying to be smart and save redundant code by creating a series of pages from names within an array, but apparently I'm messing up the 'smart' part. The pages are being created successfully, I think, but when I try to call one of the pages as the start page (via snapToPage) the name isn't recognized and causes an error. The same name seems to show up correctly when I print it via the page.name. Much appreciation for any help on what I'm missing here. Thanks!
1
JinJu Jang
Hi Everyone! I'd like to share a statement UI for Android. =) It has collapsing header, and list with connecting lines. This can be useful if you are working on statement list with summary header. Download link: http://share.framerjs.com/yfh1zmf5yawj/ Also, Dribbble: https://dribbble.com/shots/2993366-Material-Statement-List-Framer-download-link-attached
1
Tes Mat
Heads up: The PageComponent lost its default animationOptions in a recent library update and now defaults to an “ease” curve (instead of "spring(500,50,0)" ) http://share.framerjs.com/hontxsfkv3r2/ print page.animationOptions gives an empty object: » {} ( or should I post stuff like this at https://github.com/koenbok/Framer/issues ?)
3
Koen Bok
I just added VideoLayer to Framer. It allows you to easily add a video to a layer and play, pause, loop or skip to a point. It's also easy to get events like progress, start and ended. The VideoLayer can do anything a normal layer can do. So you can animate it or apply any effect like blur or sepia. I'll add official documentation soon, for now you can check the example below for basic usage. You will need the latest framer.js to use it, you can download it on the builds page or select "File > Update Framer" from within Framer Studio. Here is a basic example:
14
Antonio Krämer Fernandez
Hey framer team. There is a little issue that bugs me quite often. Define borderRadius: "50%" to draw a circle . Use the WYSIWYG functionality -> borderRadius: NaN . Is there a way to fix this? <3
4
JL Flores Mena
Hey Frameristos, quick question: I recently got the Framer app for iOS and I've been liking it a lot. The one thing I'm struggling with now though is that I have a very large prototype and sharing it through WiFi is taking a long time. I downloaded it for offline viewing and it took 10 minutes to download. It may be that I have very bad WiFi connection this week, or that this prototype is huge, but my question is: is there another way to transfer the prototype that doesn't rely on WiFi? Thanks!
4
German Bauer
I was wondering why it was chosen that entering and exiting a fold needed two different keyboard shortcuts. I often wanted to just peek into a fold to remind myself what's in it so a toggle would have been more convenient for me rather then 2 separate actions. While we are at it is there a way to just unfold all to the whole code? PS: I now had a few times looking at my code thinking I had accidentally deleted important stuff during a sleepy late night session, when really I just looked at folded away code. Maybe we can make the notion of code fold just a tad more prominent visually? Thanks
1
Keith Lang
Possible bug in 71: Seem like exiting a fold takes longer time after each entering/exiting each fold.. eventually a spinner is shown when I exit a fold. I've tried relaunch, no luck. #justme?
2
Jason Nelson
Apologies for the long post: Hello, all. Question around referencing variables from a module. If I declare a variable in the primary app.coffee file, is there an easy way to reference that variable from a module *without explicitly passing it* along when calling a function from within the module? Example: ---------------------------------------------------------------- app.coffee: a = "hello" module.print_a() module: exports.print_a = -> print a ---------------------------------------------------------------- Doing this, I get undefined. I know I could modify calling the function this way and it would work: module.print_a(a) If I need to reference a lot of different variables though, this becomes obnoxious. I know the following would work as well. ---------------------------------------------------------------- app.coffee: this.a = "hello" module.print_a() module: exports.print_a = -> print window.a ---------------------------------------------------------------- This could be workable, but a little annoying to declare "this" before every variable. Is there a standard "path" to getting to these variables from a module if I just do a generic declaration? TIA. I know this was a lot to read! :)
0
Daniel Caine
Hey guys, I'm sure I'm missing something really, REALLY obvious here, but can anyone be so kind to let me know why I can't get my 'card' layer to animate across the y axis? Basically, I have a click event assigned to a layer, which then animates my 'card' and it's meant to move (but doesn't). I'm printing the card.y to the console and the value is changing but nothing actually moves (at least visually).
1
John Marstall
Sometimes layers created and named in a loop can't be targeted by the name displayed in the layer list. I've seen this happen, and you probably have too. But does anyone know why it happens, and what to do about it?
3
Bäd Rick
Hi folks! Is it possible to set Background-Image size and position in this example?
11
Rohan K
Is it possible to hook up a PS4 game countroller to navigate an framer prototype?
6
Christina Zou
Hi folks, has anyone tried embedding a Framer prototype into a Facebook post or tweet, such that the user can interact directly with the prototype in-line rather than having to pop open a new window?
1
Benjamin E Saravia
Hi, a little bug: on the 'Recent files' list it repeats the projects... on my example it reads "5.1_c.framer" several times . Is this the right place to report bugs?
1

Monthly archives

2017

2016

2015

2014

2013