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

What is Framer? Join the Community
Return to index

August 2015

August 01

Keith Lang
I'm working on a project that's reasonably large and have some of the functionality in a custom Module to keep the code manageable. However, my process to update the module is 1. Copy code out of .coffee text file 2. Paste into Framer Studio so I get the nice IDE 3. Once fixed, add exports. back to appropriate places 4. Copy and Paste back into Text Edit with myModule open 5. Save I would love to simply edit the Module as another document in Framer Studio, but I can't open the .coffee into Framer Studio. Something I'm missing? Many thanks!
3
Arvi Raquel-Santos
Anyone else getting a blank viewer when using iPhone 6 Gold and iPhone 6 Space Gray? Cause you know, Gold is best! ;) I saw a post about blank viewers but with 10.10.4, I'm on Yosemite 10.10.3
9
Jeff Lin
Hi guys, I'm trying to make a “PageComponent" that swipes to the left or right endlessly, with looping pages (3 pages). The link below shows how I achieved it, but the code is complicated and messy. Can anyone think of a simpler and faster way to do this? Thanks http://share.framerjs.com/dk5y0qbrvseg/
8
Rapha Ël
Hi guys :) How can i block an element to a specific state (on click)
2
Michał Jarosz
Hello guys, do I really need creating new variable for each layer? I mean: new_framer_layer = framerimporterobject["layername"] why the hell i have to every layer create this way? Any automatic function or maybe idea for next version?
1
Sander Värv
I'm trying to create something similar to a kanban board and I'm a bit stuck. How can I get the first three columns to be populated with rows? I should probably give each column a unique name, but how do I do it inside the loop? Here's what I got now http://share.framerjs.com/r06dcq9rrnsf/ Any help is appreciated!
6
Jordan Robert Dobson
3D Rotation with Z Axis Depth Source: http://jrdn.io/c7SG Here's an example of how to setup your layers to get depth on your Z Axis when rotating on your Y Axis. I was having some trouble getting this to work in a project so I stepped out and started a simple example to try to find the proper way to set this up. It appears as though you need to enable the preserve-3d transform style and make sure that layer does not clip for z-axis depth transforms to work properly. I worked out the solution and figured I'd share with you all. :D
14
Greg Housset
I'm working with a PageComponent and wanted to know if there was any way to read how many pages are in the PageComponent? Currently, I'm adding a page to the PageComponent on a click event and want to be able to read the number of pages for use in a conditional statement. Thanks for letting know!
2

August 02

Katie Wu
Does anyone know why this PageComponent cuts off the top part of the second page? The second page is taller in height than the first, but I'd want it just to snap to the top of the second (the part where it says "4" in a gray bar)!
1
Benjamin Den Boer
We're really excited to introduce an all-new launch experience for Framer Studio. We worked with Noah on a new welcome window, better default projects, links to the community and learn pages, a new email introduction course and recently opened prototypes. Here's an extensive write-up about what's new and the design process (including prototypes) behind it: http://blog.framerjs.com/posts/welcome-window.html We hope you enjoy this release!
23
Danny White
Is it possible to draw layers 'outside' of the canvas, as in outside (and on top of) a phone frame? I want to add annotations/comments to projects, for clients/teammates to understand which parts are interactive etc. See attached photo as a rough example. Cheers!
9
David Vismans
What is the easiest way to capture a screen recording of a framer animation?
12
Dávid Udvardy
I had a bit of a pause in the use of FramerJS, and now after a few months I am ready to start again with a new project. However I am still stuck at the very first moment I try to preview the proto on device, as it still applies some sort of multiplier and cannot go real fullscreen. A layer with width screen.width and height screen.height is supposed to fill the entire screen, shouldn't it? In the past I could overcome this by editing the generated index.html and the config.json files, but it no longer has the required effect. What am I getting wrong?
2

August 03

Christian Hagel
As a framer newbie http://prototyp.in/ really helped me get past the very initial stage. I am not associated with prototyp.in, just saw it in my twitter feed. Great work.
4
Dan Clarke
is it possible to change the SliderComponent to vertical rather than horizontal?
7
Dan Clarke
Me again! Anyone have a good resource for learning more about modules? I have a module in a project but I would like to position it to whatever location I desire. I'd also like to duplicate it within the project?
14
Benjamin Den Boer
Congrats to Alexander Vanvik for officially being our 8000th member! :-) And thanks to all of you for your support and awesome prototypes!
1
Axel Thorwirth
Hi, I'm having a problem connecting android Framer app with my mac to see preview. Yesterday it was working perfectly (with my home wifi) and now the application doesn't "see" my mac since I changed wifi because I'm at work. Can someone help me or had the same problem ? (sorry for bad english skills)
2
Keith Lang
Small thing: the auto-complete for numbers is a little distracting… if I'm setting a variable to a single digit integer I get auto completes for things like 0px' and '2d' and '40px' etc. Wonder if you might consider some different logic for numbers, for example having just the single digit number be the first thing on the auto-complete list, or disabling until a 2nd digit matches?
0
Sherwin Dai
Curious about how to change the canvas size? I am using Framer Studio now, but the default device viewer doesn't include my Nexus 6, which will be used to test my project. Any thought?
4
Anton Kartashov
Hi everyone. I have a problem with two simultaneous events. When the second (card.on Events.MouseOver, ->) starts, the first one (back.on Events.MouseMove) don't work. And a question: What a global object can I use for events happening on the whole screen (like "document.on", "window.on", "Canvas.on", "Screen.on")?
3
Antonio Krämer Fernandez
fiddling around with svg animation in framer and now I'm wondering how to get the position of a svg element… any ideas?
14
Katie Wu
So I'm having trouble nesting a ScrollComponent as a page of a PageComponent. I clipped the ScrollContent to the same exact height and width as every other page in the PageComponent, but when I swipe to that page, it doesn't align properly. If you hover over the fourContent group, it says it's at x:0, y:0, but you can see that it's hanging off the screen. :( The problem is in the fourth page:
3
Aaron Paterson
Just got this Tutorial from Jorn. Completed it myself so, great touch keep it coming. Anyone know where I have to add the "curve, linear, ease" transition to make the doors slide slower?
1
Bimma Bimma
So we're building a demo we want to run on an iPhone 6 that has a short video clip embedded. However we bring the app up on the phone, the video is "blued out" with a play icon, but nothing happens. We've tried using the Share link, all browsers (including Frameless), and hosting the files on our server, recompressed the video multiple ways - nothing seems to work. Everything works fine via desktop browsers. Just not working on the iPhone. Were we wrong in thinking that video would work when running Framer demos on device?
6
Dan Clarke
Hi everyone, I want to animate the height of the layer. But I want it to animate upwards from the bottom. Currently the x,y sets the location and height extends down from this point. Can I invert this? thanks!
4
Jimmy Young
I'm having a problem exporting sketch artboards into framer at the wrong size. I'm not quite sure what I'm doing wrong?
10
JT DiMartile
I thought I could put an asterisk on the folderName* and get the framer sketch importer to not create individual assets with sub folders. Was that removed or am I taking crazy pills?
4
Koen Bok
Coolest and most clear tech explanation I ever saw.
9

August 04

Koen Bok
We're hiring! We're looking for fulltime engineers to join our team in Amsterdam. If you know anyone great, put them in touch with me: [email protected]
1
Giovanni Caruso
From Cooper.
0
Troy Mcilvena
Is having a ability to upscale Sketch files during import process a feature that gets requested frequently? This is probably my main pain point at the moment, unless I'm doing something wrong. I still like to create source artwork at 1x, especially for Android design. It makes the import/reimport process quite cumbersome to get assets into Framer Studio for creating and testing xxhdpi and xxxhdpi prototypes.
27
Sean Mateer
Is there a way to not clip layers that overflow artboard boundaries when importing from sketch, or does import only work for objects visible within the artboard? I thought someone had posted it the other day, but I lost it.
3
Michael DeFazio
Is there a difference in setting up a scrollComponent in Studio and simply editing the app.js file? I can do it easily in Studio of course, but I get an error when creating it directly in the app.js.
0
Bala
Hello all, looking for someone to make a prototype on framer using my design, Anyone interested ? :)
0
Josh Ackerman
I have recently been using d3.js with FramerJS. I am wondering how Framer relates to various other HTML elements. For instance using d3.js, I want to add an SVG file to the body, I would write - vis = d3.select('body').append('svg:svg') .attr('width', w) .attr('height', h) where w and h are integers. This works fine in fullscreen mode, although when I switch to a specific device, the device blocks the layer(s) I created. Is it possible to directly access the device to draw layers onto?
1
Mario Borg
Hi, I'm working with 1x boards in Sketch 3, is there a way to turn 1x boards into 2x or 3x when viewed in framer?
1

August 05

Jordan Robert Dobson
It looks like Framer prototypes will work on Windows Mobile phones now if you have Edge. I'm still testing this out and will report back more... but this is promising! I did some tests today and only had a failure on -webkit-filter effects (blur, contrast, brightness, hue, etc...) I think you can likely enable it with about:flags however. I need to dig in. The only issue I see now is on the touch screen desktops... the touch events don't seem to work. The mouse apparently works fine though.
5
Daniel Lee
When working with pages and page components can you tweak the bounce, over drag and more? I'm working on a prototype and I have the velocity threshold at a spot I like, but the page drags too much when I am performing other scroll operations within the individual pages. Any recommendations for the finesse of bounce and drag on PageComponets? page = New PageComponent page.bounce = x ???
5
Pete Schaffner
Made a little module to help you with your material design work. It has a pretty flexible API that aims to stick close to the spec and only expose the base properties that make up "material": elevation, surface reaction, color, etc. Let me know what you think! code: https://github.com/peteschaffner/framer-material example: http://share.framerjs.com/wm1z4fn6nmfv/
15
Keith Lang
I don't know about anyone else, but I use the heck out of the console as I'm debugging my code. Small idea, not sure if possible, but to be able to click on the » next to a line in the console and be taken to the (print) line of code that generated it.
0
Jorn van Dijk
We're looking for engineers to join our team in Amsterdam. Here's a page that describes what we're looking for. Get in touch if this is you!
0
Joshua Tucker
Hey all! If any of you are attending Framer Sessions 03 this evening and are up dinner beforehand or something, let me know. I'm driving from out of town so I'll be coming in earlier.
0
Olivier Cedrati
Hello guys! Check the experiment on a new interaction made with Arnaud Le Roux on Google Inbox inspired by my app Idematic. https://dribbble.com/shots/2181775-Google-Inbox Here the link to try-out: http://share.framerjs.com/mnyp4cbpaz17/ Idematic app: https://itunes.apple.com/app/id973486398 Special thanks to Pete Schaffner for his surface reaction effect: https://github.com/peteschaffner/framer-material
0
Dan Clarke
Hi everyone, I'm working on a problem for a larger project and I was wondering if I could get some help? Essentially I want to animate the state of 2 layers sequentially. To do this I've created the layers and then added them to an array. I then want to use a for loop to count using 'i' and if the array point matches 'i' then change the scale of that layer, if it does not match then do nothing (or a different scale). Currently I have the loop working for changing the scale for matching array point, but it just runs through and matches both array points. using an 'else' statement throws an error of "unexpected indentation". Any thoughts? As a side note, can I alter the rate at which the for loop runs? My using Utils.delay in some way?
5
Văn Công Bằng
Can i use Framer studio with another libraries, for example snapsvg ?
4
Guillermo Romero Jr
Trying to recreate the scrolling that's in the scroll example on the website: http://framerjs.com/learn/basics/scrolling/ The issue I'm having is that any time I scroll what is inside, it bounces back to the first layer in the ScrollComponent. I turned off bounce, but then everything is very jittery. Any insights? Maybe extra code that isn't shown in the example?
0
Jason Nelson
Is there any way to globally suppress all "print" commands? Right now I am commenting them out keep them from showing, but that can be error prone. It'd be great to be able to have as a publish setting or a global statement you could make in your document to display/suppress them.
2
Guillermo Romero Jr
Hey Framerites, I've been learning Framer and Coffeescript and put together a list of resources that I've found in my journey. Feel free to pass it along! http://bit.ly/1Doue75 ** Updated 6 Aug with links shared in the comments. Keep 'em coming!
11
Alasdair Cumming
Hi everyone. Would be awesome if you answer the below. Still trying wrap my head around what role framer sould play in the design process. I realise there's no 'right' answer, but interested to see how you're all using it. I use framer to...
7
Carl Cooper
I'm looking to create a few layers through a for loop, animate each one, and then destroy it but only one layer is being deleted. Anyone have an idea of how to do it? Here's my code: for num in [0..10] layer = new Layer animation = layer.animate properties: y: 1000 delay: num animation.on "end", -> layer.destroy()
1
Matt Barr
First off I must say that Framer Studio is certainly one of the best pieces of software out rn imo. ⌘+F may or may not be the primary way I navigate my code haha.. would love to see something like clicking on a layer in the inspector pane and jump to the loc where it's instantiated. Just a thought
1

August 06

Lee Jungyoung
Hi Framers, I made SF movie style typing animation using Arrays and divided letters. Wish Cole Townsend could get some information from that. http://share.framerjs.com/49todz0fker6/ :)
0
Cole Townsend
Has anyone had experience making a typing animation with framer?
3
Noah Tsutsui
Soooo, it would be pretty cool if this worked: sweetvid = new VideoLayer({video: "https://youtu.be/ES3Rnq_iOS0"})
0
Jiaxin Chen
hey guys, I am wondering how can I make different *scrollable* layers in different tab? Now my prototype can only scroll the first .wrap layer.
9
Jimmy Young
Hey guys, I was at Framer Sessions 03 in SF today and learned a lot from Noah Levin. Came back home and made this!
0
Randy Huynh
I feel like I'm doing something obviously wrong, but I'm not sure. I made a simple example that replicates the error I'm having which says, "[framer.js] TypeError: null is not an object (evaluating 'this._simulation.y')" I occurs if I drag the layer, however do not immediately release it. Any help would be appreciated.
9
Kushagra Agarwal
Is anyone else having the same problem? I am unable to "share" any prototype — always getting this error.
6
Arthur Dagard
Hi, (thx for all the help in the group) is there a way to have a twin Layer ? (like a mirror, so if I drag or put datas into this Layer the other will show the exact same thing? (I try to have Blur vibrancy over a Google Map) Thx everyone
4
Dan Clarke
having trouble with frameless. trying to run an iPad Mini prototype on an iPad Mini. But when I open the project in frameless the prototype displays at 1/4 size of what it should be??
0
Tomáš Kafka
Hi, since I bought Framer Studio 6 months ago, every attempt to share a prototype ends up with this window: Upload Failed Error: . See the console for more info. Any advice?
11
Jonatan Castro
Hello guys! I'm trying to create a prototype for hint spots for an on-boarding experience. Thanks to a friend, I've got only one hintspot working, the code is the following http://d.pr/n/1k2lH/3gfodjba Now I want to animate both layers "SDdialog" and "Themesicon", but I can only make one to work. Is there an easy fix for this?. I have also took a look at the Framer examples, and this one (thanks to another friend) was kind of helpful http://framerjs.com/examples/preview/#animation-states-array.framer#code but the problem is that I need both layers animate when the prototype is loaded and on infinite loop Thanks for any insights!
2
Noah Tsutsui
How do I add a shadow property during an animation? This doesn't seem to work. mySquare.on Events.Click, -> mySquare.animate properties: shadowX: 10 shadowY: 10 shadowSpread: 10 shadowBlur: 40 shadowColor: "#000000" scale: 2 borderRadius: 10
4
Keith Lang
Another small thing: Can Command+G (Find again) please work while the Search field is active?
1
Arron J Hunt
Playing around with filters and made a dumb thing. I'm always amazed at what Framer can accomplish and how completely easy it is to create with.
11
Cemre Güngör
Are the in-app docs not working for others, too?
8
Richard Burton
Is there a Docs changelog I can subscribe to or should I just use one of those site-diffing tools?
0
Noah Tsutsui
How about make "repeat: -1" do infinite repeat?
0
Brandon Souba
I helped teach a beginner class at the Framer session last night. I was thinking that it would be nice to have more frequent / less formal get togethers to talk shop and go over some simple Framer concepts & workflows. When: Framer Fridays. (morning, afternoon, or night?) Where: San Francisco. Coffee shop or here at Dropbox? What: 1 hour demos + 1 hour work session to have mentors help with problems Frequency: Weekly or Bi-Weekly Just an idea. I'm happy to help organize. There would be limited space per session (5-10 people). This will help keep things focused - I'd love for people to come with specific questions / issues. Each session will have different focus (Beginners, Sketch workflow, Advanced, Using real data etc). Thoughts?
21
Wouter Walmink
I'm trying to load the TextLayer module, but I get "Module textlayer can't be found". The module is in the right folder in the right project and I reloaded Framer Studio a couple of times. I can't figure out what I might be doing wrong. Any obvious reasons why adding a module might fail?
4
Øyvind Nordbø
I'm about to wrap up my first 'real' Framer prototype, but there's one thing that baffles me. I've spent the last hour trying to figure out this thing. I refuse to believe that the only way to assign multiple parameteres to an object is by rewriting the entire object for every parameter. I've tried a multitude of different to get the parameters to act as children to the object element, but with no luck, so I ended up with this solution.. Any tips on making this cleaner and shorter?
8

August 07

Dan Clarke
Is there a way I can privately share my framer designs for remote usability testing?
2
Cemre Güngör
I updated my Facebook photo album example for the latest version of Framer. This example shows how you take things out of scroll views and zoom them full screen. I tried to write a lot of comments but please give it a try and let me know how I can make it easier to understand. (Bonus: swipe to close). http://cem.re/framer-fb-photos (If you open the file, there's a link to the sketch file that I used to make this).
5
Mindy Nam
Hi guys, I'm having a problem with prototyping a button overlay on top of an element with a hover. The hover blocks the click event from the buttons. I've tried stopPropagation() but it didn't help. Can anyone help? (click on 9:00PM and then the record icon)
2
Katie Wu
So my boss is having my ass for my prototype being slow on Frameless (and the share link is slow too) - is there any way to make this faster? I deleted all unnecessary assets in the folder but it's still laggy. It's only super fast on Framer Studio :(
28
Daniel Lee
Hey guys so I'm prototyping an app which uses autoplay of videos. When I share the prototype via email and appears in safari on an iPhone the videos do not display (just missing the layer) and do not play.. I can make the video appear and play the video by tapping on the space that was expecting the video. Is this due to fact that iOS doesn't not allow autoplaying via the web? Should I be expecting at least the video frame to show up? Anybody experience this in the past? Also thank you for all the support with these questions.
3

August 08

Stella Dou
Hi Guys, I have a lot of trouble today to generate share links of my framer project. Some of the links are so slow to be opened up. I need these project for testing tomorrow. Anyone could help? Really appreciated
7
Richard Burton
Is there a property for a video’s length? I couldn’t find anything at: http://framerjs.com/docs/#videolayer.videolayer Also, is there a good way to dig into things like this in the source?
1
Sangmi Park
Hi everyone, I'm new to FramerJS and enjoy learning more and more about it. Here is a small prototype that I've been working on and the source file is included. I'm sorry that the code is a bit messy.. I appreciate if any of you could share tips for writing cleaner code with FramerJS. Thanks! source: http://share.framerjs.com/ohi2t0bqx672/
4
Nick Bewley
Hey guys, messing with the blob / gooey effect that we've seen here, but for some reason I cannot get either of the two methods to work (-mix-blend-mode vs. -webkit-filter).. I believe that I included all of the relevant properties into both, but am not sure what I am missing. Any blob pro's out there have a second to check this out? I included both attempts in the project. First method referenced by Joshua here: https://www.facebook.com/groups/framerjs/permalink/672945142832560/?comment_id=673089536151454&offset=0&total_comments=21&comment_tracking=%7B%22tn%22%3A%22R%22%7D Second method by Jordan is here: https://www.facebook.com/groups/framerjs/permalink/711114169015657/ Thanks for any ideas http://share.framerjs.com/az6bjm3gpyb3/
2

August 09

Sherwin Dai
What could be the reasons for slow performance on the Framer app? I have made a simple prototype that performs pretty well on the desktop browser but slow on a mobile browser, and extremely slow on the Framer app on Android. How can I improve the performance on the app or on the mobile browser?
0
Yuri Dogandjiev
Hey guys! new to framer here, i was just wondering if it is possible to get the scroll component or page component to be circular, so that the next element after reaching the last element is the first element again? also is it possible to animate the scroll so that it randomizes and it slows down to stop at any one page or element (kinda like how you fire a slot machine, and it slows down to a stop)
0
Rohan K
I am wondering if there is a way to create states from layers in sketch? Ive created subLayers as on and off states for some elements (freeText, videoTab, textTab) and I was planning to toggle the visibility of the child layers when clicking on the parent element to simulate on and off states. Is this the best way to do this?
3
Jay Stakelon
Hey Frameristos! Anyone want to help out and test a beta of Frameless this week before I push it to the App Store? There's a bunch of bug fixes most of all a fix for the iPad crashes, and a couple of enhancements: stay awake while using the app, frameless:// url scheme, shake to refresh like an etch-a-sketch, and probably one or two more. Shoot me your email and I'll add you!
26
Noah Tsutsui
I would much appreciate it if someone could take some time to help me with this.
3

August 10

Fabian Buijing
Hi guys! I'm trying to import my Sketch design into Framer.. I like to design @1x, but it also imports it at that resolution. Is it possible to import it at the right size automatically?
14
Stefanos Kofopoulos
I had an idea about Framer. What if an amazing prototyping tool morphs into a creative platform? I wrote this short blog post / how-to explaining my thoughts. http://titan.as/framer-js-presentations/ It hit me a couple of days ago. Framer is amazing for presentations. No more Keynote or Prezi. The example i created is simple but works. It mimics Prezi. I'm a newbie. The code is sloppy but it works. I'd love to hear what everyone thinks about this. I believe it has potential to be a game changer with support from all the great devs and creatives out there.
6
William Song
Simple radar
5
Jacky Lee
An email capture interaction I did a while ago. Had to use the querySelector to capture the value of the HTML input, not sure if that's the best way to do it. But if anyone's interested, here's the prototype: http://share.framerjs.com/jejzfss3i3cb/
1
Alex Bystrov
Hey everybody! I'm trying to prototype a Card Controller that will allow user to navigate through the stack (hierarchy) of cards and to dismiss one or several cards at once. The video roughly shows how it can work. When I swipe down the top card, all the previous ones also slide down but with half speed (then 1/4, 1/8 etc). After I continue dragging the top card down the stack splits into two separate stacks. When I release my finger, only cards in the stack in the bottom will be dismissed. There's a lot of UX work to be done further, but now that's all I'm trying to accomplish as a first step. I have several questions here and would really appreciate your help guys! 1. I generate cards as an array cards[1..count] and put a listener on each of them that animates the previous one: for index in [count..2] by -1 cards[index].on "change:y", -> cards[index-1].animate properties: y: cards[index].y/2 time: .1 But this code doesn't seem to compile and I don't know why (disclaimer: I'm not a coder, just a silly designer). What am I doing wrong? http://share.framerjs.com/el10jkfoe5sf/ 2. I temporary got rid of this loop and did the work manually (http://share.framerjs.com/5b2ee1tmh4hx/), but now when I dismiss the top card, all the previous cards are obviously sliding away with it, but I don't need them to. I want them to follow the next card right until the point when I'm releasing the finger from screen. So how do I stop listening to cards[index].on "change:y" event in this case? I've read the docs and understood that I have to wrap this into named event and then call .off thing, but I can't figure out how to implement this one. Thanks guys! And here's the super-dirty prototype of how I want cards to split into two stacks, sorry for the messy code, I wrote this after a week of learning Framer with no prior coding experience :) http://share.framerjs.com/a35o84ffjugq/
10
Josh Ackerman
Hello, Is there an alternative to bringToFront() that does not increment layer.index continually? For example, when clicking between two layers layerA, and layerB a few times, the end result is something like layerA.index = 13, and layerB.index = 12, when preferably the result would be layerA.index = 2, layerB.index = 1. Thanks.
3
Will Simons
hey everyone, I'm working on a prototype that requires me to rotate a layer on its Z axis by 24 degrees at one second intervals - i.e, continuously. Does anyone know of an example of something similar and could they could point me toward it? Cheers.
2
Katie Wu
So I've been playing around with Hammer.js for more complicated touch interactions but I'm a little stuck on how to get the transitions right. If the current page is labeled below, and the user Pinches In on the screen, I want the photo to scale down and place itself on the flowchart where it's labeled "5" in the diagram. The flowchart itself is Scrollable as well, so how would I coordinate the scaling with scrolling to the right area on the flowchart? This is very similar to Photos in iOS.
0
Thomas Law
Hey, there's something strange with preview. When I preview my prototype in Framer, it goes well. But when I preview it on my iPhone app (Framer's Link or Frameless, both), it just got scaled, just like what you see in the picture I upload. Why? Could it be solved?
14
Matt Barr
I'm trying to create a smile animation using a transparent video. I exported the video following the instructions here http://framerjs.com/learn/import/after-effects/ but when I drag and drop into framer project the background is not transparent. Am I doing something wrong? Note: Don't think animating the svg in code is going to be an option as I already animated the svg path in framer but it has to double itself to create the rounded ends which isn't the desired animation. Any help would be greatly appreciated! :)
1
Josh Ackerman
I have been playing around with graph drawing recently, and a few other things that I will post soon. This graph uses force directed graph drawing to place the nodes (vertices), and the edges are defined in an adjacency matrix. Like on Dribbble: http://drbl.in/pBsy
6
Daniel Lin
Is there a way to make "quadratic easing in/out" curves in Framer? Curves with "acceleration until halfway, then deceleration". Can the "cubic-bezier" curve achieve this?
2

August 11

Mudit Mittal
Hi all, I'm trying to prototype a horizontal scrolling list of several cards which begins by default on the second to the last card. So the content list needs to be scrollable in both left and right directions. I can't get the list to scroll to the right, on scroll end it anchors back to starting point. I know this should be easy, but I can't seem to figure it out. Can someone help please?
8
Cyrus Cheng
Why the Layer Inspector can only show informations in the simulator that on the right of the framer .Can we get improve that when we clock the layer in the Layer Inspector,both in the code and simulator show the informations about this layer,cause it always have the same name layers in the project...
4
Benjamin Den Boer
Hey all! We just updated all code snippets in the documentation. They're now written in CoffeeScript, neatly indented and hopefully easier to parse. We noticed that the mix of JavaScript, CoffeeScript and the formatting of snippets sometimes confused those new to Framer. The changes are also reflected within the in-app docs. Let us know what you think! Your feedback is always greatly appreciated.
5
Christian Hagel
Being new to framer I thought opacity = 0 would be the equivalent of visible = false and ignore events. Jordan Robert Dobson has talked me through the how and why. Sharing for other people new to framer. Long story short sometimes you want invisble elements to react to events. Use ignoreEvents. See a repro example: http://share.framerjs.com/ljam771hcis2/ Imagine you have a splashscreen, tap a button, and it reveals the main target underneath. In this case the blue button is on the splashscreen and when it fades away you see the red button. If you click in the middle of the red button you'll see that it's still the blue button that gets the click event. Download the code and try uncommenting one of the three solutions.
0
Rohan K
Is it possible to insert hyperlinks in layer touch events? Even if they only work when viewing the prototype in a browser?
1
Nick Bewley
How to trigger an event on MouseOver on the body (ie. the whole preview area)? Tried: • document.on Events.MouseOver, -> • document.body.on Events.MouseOver, -> • document.body.content.on Events.MouseOver, -> • body.on Events.MouseOver, -> • etc., etc. Can anyone point me towards that magic combination that will get me there? Thanks a ton!
4
Michael Lee
Just wrote a fun Framer intro tutorial on Medium using a kanye illustration, would love your feedback
10

August 12

Noah Tsutsui
Sooooo, I was on a plane to Korea yesterday (non-wifi enabled flight), trying to make a cool prototype, so I tried to load the docs, and... :( Have you guys considered making a Dash docset?
8
Claire Fén
Technical issue. Hello everyone. I have a weird and annoying bug.. Maybe someone would have a solution. I played with Framer installed on a machine this afternoon but haven't yet it on my personnal laptop. So I just downloaded the trial and instead of the preview pane, I have a loader constantly running... Does anyone has an idea why this is happening and how to fix it ? Thanks you all!
3
Cameron Wu
I'm building a simple desktop prototype. Is there a way to enable two-finger desktop scrolling, instead of drag to scroll?
5
Øyvind Nordbø
Hello, lovely Framer people! I have been having so much fun the last two weeks, learning and exploring Framer Studio and building my first high-fidelity prototype. It's been super simple and whenever I've had an issue, there's always an example, some docs or another person to help me. Now, I am _so close_ to finishing my first project, but there's a few teeny-tiny issues that keeps bugging me, and I can't seem to figure out how to fix it. Basically, in the second state I've built a simple date picker with ScrollComponent. Problem is: it's a child element of a draggable container, so whenever I scroll my date picker, the entire container scrolls with it. Second, I've gotten the initial card animation to work when I tap the "Add item" button, but when I use dragging to close it and click again, it'll stick to static, or vice versa, based on however I try to fix it. Finally, I'd love to restrict vertical dragging to only downwards on the add card. Sorry for the very lengthy post! I tend to be a bit descriptive.. Any ideas how I might fix this? 😄 Here's the project file: http://share.framerjs.com/r6f7jjqnks8o/
4
贾朝阳
Why I can not preview my .html file in chrome,but I can in Edge?(Windows)
4
Josselin Ex-Nils
I have been experimenting with Framer, and I have a couple questions : 1. I have had some issues capturing the touch events both at the component level and at the page level in order to capture when a swipe was started on a a specific component but finished on another. Furthermore, I ended up updating my global state in one place with lots of conditions based on the previous state, the touch start point and the touch end point. Any good practice here to keep things clean ? (I'm not a coder) 2. I have recreated the menu / listing features of the Instapaper app and I already have quite a long file mixing component creation in loops, event listener creation, states definition, coffee functions,... Again any good practice regarding modularizing the code ? 3. I have integrated with Parse as one tutorial suggests. And I'd like to integrate with other 3rd service app. I don't see any reason why it should not work as long as they provide some kind of javascript SDK. Has anybody integrated with other services though ? Any feedback on how that went down ? Thanks for your inputs.
0
Văn Công Bằng
When i resize a layer, its content resize, but its bounding box doesn't, right ? So if i resize and change its placement at the same time, framer will use the bounding box's x & y, not the content's, is there anyway i can use the content's x & y ?
2
Siavash Shabanipour
I'm trying to add 2 states and a state switch to all the layers in my array but it's only working with the first layer in the array.
8
Денис Дрожжов
How do I check if a layer has state with certain name? I tried something like layerA.states("stateN"), but it doesn't work.
2
Noah Tsutsui
Hey... is there a way to create two instance with identical properties, but unique names using a for statement? Something like, "for layer in [card1, card2]"
3
Tomáš Kafka
Hi guys, I need an advice: is it possible to put all measurements in logical pixels (iOS points)? That is, if a bar should be 44 points high, I'd love to be able to set it's height to 44 instead of 88 (which I need to use on retina iPhone). So far I had to recompute everything manually: scale = 2 s = (n) -> scale * n px = (n) -> s(n) + 'px' abc = new Layer({ height: s(44), style: { fontSize: px(16) } }) It kinda works, but it's really easy to forget to wrap a number in a function call and then I spend time searching for a bug ... Did you solve this in a better way? There is Framer.Device.contentScale which does exactly what I want, but only in preview mode, things are 2x smaller on real device.
7
Cameron Wu
I spent a while trying to figure out why scrollToPoint() wasn't fully animating to the right position. I ended up replacing it with scroll.content.animate instead, which did exactly what I wanted to do. scrollToPoint() seems to ignore arbitrarily set scroll.content.height, and uses contentFrame().height (or something like that) instead - did I observe that right?
2
Chantal Jandard
I searched around and couldn't find anything on this. When I copy a layer, a semi-transparent blue 100x100 box appears on the copied layer. Does anyone know what it is and how I can get rid of it?
9
Samuel Gates
Has anyone found a way to get around the pixelation that occurs when scaling up images or Sketch layers? It appears my image resolution is stuck at its initially imported state instead of allowing for flexible scaling. Example: An image is 1920 x 1080 in Sketch when originally imported, but scaled down to a smaller thumbnail size. In Framer I wish to click on the thumbnail to expand the image to a larger size. Framer only acknowledges the image dimensions at the scaled down thumbnail size in Sketch, ignoring its potential to scale up while retaining quality. Thanks!
3
Keith Lang
Has anyone ever seen examples where a layer with html doesn't render unless the Console is showing? Any tricks to make it work?
3
Logan Merriam
Is there a way to reference one property of a layer in another property when creating a layer? Trying to do something like: layerName = new Layer width: 100 x: this.width
14
Arvi Raquel-Santos
Question on masking. I've set up this file to mask an image but when I apply the mask, my image disappears. What am I doing wrong?
2

August 13

Berend Holtland
I'm making a module for Framer that does basically this: http://fian.my.id/Waves/#examples There's only one thing i can't figure out. I can't seem to track the position of the mouse within the layer properly. I tried event.mouseX and Y but it gives back the position of the mouse within the entire frame. Any idea how to solve this?
10
Giovanni Caruso
I'm having some trouble with the ScrollComponent and the "for loop". Any idea how to assign the "y" value for the layer "avatar" so to have a rectangle below each card?
1
David Louie
We used Framer for user testing and working out the details of the latest release of our visual review tool Hightail Spaces (hightailspaces.com) http://dlouie.me/HightailSpaces/allcomments3.framer/
1
Dan Clarke
Hi all I'm having some difficulty running my prototypes in framer (android) and frameless. When I run the prototype it appears quite a bit smaller than I presume it should do? Is there something I should be doing on code to scale to the type/resolution of the target tablet/iPad that I will be running it on?
1
William Song
If anyone is into random stars...
2
Caitlin Charniga
Can I add an image to a PageComponent?
3
Aaron Paterson
I'm using the frameless app. Do you know how to load apps at full screen from framer studio?
2
Rhys Merritt
Hi Guys, I am trying to create a simple prototype to give a product owner a feel for how I would like screen to screen interaction when navigating through an app we are making. I would like this to loop continually, so he has a nice tactile feel for what I want to achieve. The problem is that I can't figure out a simple way to get the layers ordered on each Touchend event so that it can actually loop continually as the user keeps tapping. I think this should be a simple solution, but I am clearly not seeing it.. I tried adding an extra state which moves the layer to x:750, but it seems to conflict with the other states that fire on each event for that particular layer. I would really appreciate any help with this :)
5
Josselin Ex-Nils
I've been experimenting lately with Framer, and I'd like to have your thoughts on a couple issues I have been dealing with (I'll do it in 2 posts for the sake of clarity) I have recreated part of the Instapaper app which involve swipe gesture on list items to bring up options regarding the said item. But the swipe depending on its direction and the state of the ui can as well bring up the left menu or do nothing. From a UX perspective it makes sense. But to reproduce that in Framer I've had the following issues : a. A list item on which a TouchStart event is triggered, does not receive the TouchEnd event if this is triggered on a sibling so I have to catch it higher up in the layer tree and store the information of the element on which the touch was started in order to take the proper action in the TouchEnd. b. The next state following an event depends on several variables (TouchStart position, TouchEnd position, previous state,...) which to already some complexity in conditional statements for only a couple features c. My code is already a mix of UI elements definition, states definition, event handler definitions, helper functions, state transition functions, with some global variables here and there... with no real structure So my question is : are there any best practices regarding : 1. dealing with events and state transitions (I ended up having one big function handling all the events and going through the conditionals every time it is called) ? 2. modularizing code ? (End of 1st part)
1
Andy Cetnarskyj
Are there any resources other than the docs around extending classes and components? I've read various Coffescript sources on inheritance but what I'm not finding is anything in detail about what is extendable in framer classes?
2
Pedro Piñera Buendia
Hello! I'm Mobile Developer and our designer uses FramerJS for prototyping. He shared with me some prototypes with animations that I haven't been able to reproduce on iOS. We're trying to find the animation curves but we don't know how. Does anyone know how to generate them in order to import them in the iOS project? Thanks in advance
1
Mattias Alfborger
Is there a way to export to video. so that you could use Framer studio as after effects etc. Or is screen recording the only way?
1
Ezekiel Aquino
Hello everyone! Quick noob question: is it possible to make use of event emitters/listeners in Framer? Something like: Button is held -> emit('toggle', args) then anything within the prototype can listen to this event and react accordingly? :) thank you !
3
Brandon Souba
Looking to print the x/y position of the pointer / mouse after a click. Any ideas on how to achieve this?
7
Isaac Weinhausen
Does anyone know the name of the syntax highlighting theme Framer Studio uses? Would like to use the same one for my text editor. =)
3

August 14

Jordan Robert Dobson
If you're in the Seattle area come out to the third Seattle FramerJS meetup tonight @ 6:30 https://www.facebook.com/events/1470132399975502/
0
Ed Lea
I'd like to modify values passed in to my Layer class extension. So if I pass in width, I'd like to have a method that multiplies that by a factor that I also pass in. The idea behind this is that I want to pass @1x values but for Framer to draw them @3x or @2x depending on what device I'm previewing in. https://gist.github.com/ed-lea/2b079e4319eaacda53b7
8
Gage Batubara
Our first prototype with FramerJS and now we love to use it in our interaction team at KMKLabs
0
Pete Schaffner
If you've ever found yourself wanting to extend the functionality of any of the Layer, VideoLayer (or other class) properties without overriding the original, this is for you: http://share.framerjs.com/vp32dbccvb2t/ In short, call/reference `<BaseClass>::[get|set]<PropertyName>` while defining. This is also really handy when subclassing Framer classes.
2
Kev Craven
I'm trying to make 372 layers appear sequentially, starting with 1. Can anyone point me in the right direction?
2
Anette Hete
Hej Folks! Finally I convinced my Executives to use Sketch and Framer for Production. After making a little Demo (which can be seen here: http://quader.github.io/framerjs-watch/ ) I now start to make my first „real“ prototype and have some questions. My first component is a Button Group, similar to a Bootstrap Button Group. I've read that I can set Hover or Active states through css, is there any way to set it directly in coffeescript?
10
Andreas Wahlström
Background blur added to Webkit Nightly! Works great with Framer. See: https://www.webkit.org/blog/3632/introducing-backdrop-filters/
7
Arron J Hunt
30 minute challenge: Build a simple particle emitter
7
Arvi Raquel-Santos
Is this the simplest way to do a chained animation using states? Or is there a simpler way now?
4
Arvi Raquel-Santos
Any examples out there that listen to the X or Y position to determine the starting position when using Utils.modulate? I assume it'll look something like this [originY, 200]??
6
Christian Hagel
Do you know the game "War"? You split a deck of cards in two, you turn a card and see who has the higer value and so on. When I grew up I played a similar game with cards with motorcycles, cars, or planes. And instead of each card having only one value they had 6 to pick from. I wanted to build that game to learn framer and to play it with my kids. You can see the current iteration here: http://share.framerjs.com/zzq0tbhb0xw7/ It's work in progress and I've only focused on getting the gameplay far enough along that I can test it with my kids. I have not focused on visual design or microinteractions yet. Lot's still to do. However, when building the game and learning framer, I ran into several things that stumped me. I presented four of those yesterday in Seattle. Here are four small projects to highlight those issues. Hope they are helpful to others new to framer. Images just show up nicely: http://share.framerjs.com/bhocdsybidzb/ Opacity 0 is not the same as visible false: http://share.framerjs.com/d82bjg4iskcy/ Where you put ignoreEvents matter: http://share.framerjs.com/aw3g0oos6rc3/ You can change animation options: http://share.framerjs.com/32gnlaftxd2t/
2
Kev Craven
I have this button, which is essentially a 'like' button. When pressed, the stroke draws itself around the path. I want it to reverse the animation when clicked again as if you'd 'un-liked' something. Any help appreciated!
5

August 15

Jiaxin Chen
Hey guys, I want to make a sticky header like Facebook or Instagram does. I don't find some examples like that, they are all like iOS sticky header. Some examples?
7
Guillermo Romero Jr
Trying to host the html and all files generated by Framer Studio on a server to share the prototypes privately, within the company. Any time someone tries to use the link to the index.html file, all that shows up is an image of the iPhone with nothing in the screen. Any ideas?
5
Hugo van Heuven
I've got a project where I'm parsing through a who bunch of dicts. In Framer studio everything works peachy, yet in Frameless the main view doesn't get populated.. I suspect somehow the parsing breaks in Frameless, but i wouldn't know why... I can't really share the project unfortunately and I can't repo the bug in a test project. So the question is: Has anybody experienced troubles with Frameless, and what could be reasons why it displays different? Maybe if I know some of the common problems I can investigate...
3
Brandon Souba
Working on a light meter for old film cameras.
18

August 16

Isaac Weinhausen
Hi Frameristas! I've been really excited watching this community share their ideas, experiments, and work with Framer. It's a great tool, and this community is even better. That's why I'm really excited to offer my first contribution, Animation Collections for Framer.js. https://github.com/isaacw/framer-animation-collections Here's the basic idea: Animations are core to Framer, and beautiful interactions usually involve more than a handful of animations. Managing and chaining these to play in sequence can become manual and laborious, especially when we're talking about 10 or 20 or more. Want to tweak the timing or change the order? Forget about it. That's why I wrote the Animation Collections library. These classes make chaining animations together painless. It'll give you more control over your scenes & transitions with less spaghetti code. Objects can be used with each other (think nesting) for even more control and flexibility. Click here to see it work in action: http://share.framerjs.com/fdma26px2f39/ This is the first of hopefully a handful of Animation utilities. Try and it out and let me know what you think. And if you're a seasoned developer, I'd love to have your eyes on my code for any major gotchas. All feedback and bugs are welcome! Cheers. -isaacw
11
Rick Martin
Hi everyone. Just a quick question here. I'm aware that a layer can have HTML: e.g.: # Layer with HTML layerA = new Layer layerA.html ="Hello" But are there any more details out there about what else can be done with HTML? I'm trying to hyperlink an image layer, and I'm just wondering if it's possible. I expect "this is not what framer is for", but I thought I'd ask anyway. Thanks in advance!
2

August 17

Денис Дрожжов
Is there any way to utilize group masks when importing to Framer from Photoshop? It seems that Framer imports Sketch and Photoshop layers differently, and not in favor of the latter. When Sketch group has a mask, the layer in Framer becomes the size of this mask. Unfortunately Photoshop group masks are ignored or imported in a strange way. Without masks it's really hard to make, for example, buttons which have large invisible clickable area around them. I found a workaround like making 1% opacity layer of needed size inside a group, but this is really ugly solution. Any ideas?
2
Campeón Victory
Hey framer family! I am a beginner with framer and loving it. So I am trying to make ORB switch states when background is clicked. However, it is saying that the state I created doesnt exist? Did I do something wrong? Thanks for the help!
5
Kasper Andersen
Hey people I'm playing around with the Page Component, and have a question. I can see that I could use this even "change:currentPage" but it trickers every time the pages change. Is there a way to only tricker an event if it changes to a specific page/layer in the Page Component? Like if I swipe to pageThree, then a Layer on pageThree will fade in.
5
Jacob Jarnvall
Hey guys! I was given this pretty awesome link to a curated list of Sketch videos, articles and plugins for designers and developers. Thought I share it since I know that many of you play around with Sketch :)
0
Hajin Choi
Does anyone know why some of the elements imported from a Sketch file look cut off when the prototype is viewed on a browser (the share link you generate from Framer)?
5
Stefanos Kofopoulos
Hey guys. I put together a tutorial for Page Component using two real world examples from Snapchat like app. Very easy to follow. Simple and clean. It covers Page Component both ways. Using a for loop and custom layers. This is a beginners guide. All the Pros will find it boring but i will appreciate your feedback for writing and presentation. Will it help the Framer JS community to grow and mature?
6

August 18

Michael Nama Hwang
Hi folks, I'm working with Sketch/Framer for Android combo and trying to view my prototype on the Galaxy S6. Problem is I originally exported the assets in ldpi because I thought I could scale it up through a line of code and it'd run faster. Well, contentScale = 3 worked for the desktop but I can't get it to display full screen on S6 for the life of me. Is there a line of scaling code that could solve my woe or will I have to re-export the assets? And IF I have to re-export, is there a way to avoid having to convert all the numerical values to xxxhdpi in the code? Thanks much!
0
Caitlin Charniga
Can anybody tell me why my animation won't repeat? And why it looks so wonky in the browser vs. Framer Studio?
2
Ezekiel Aquino
Is anyone else having trouble with Phonegap? I've spend some time trying to figure out how to make it scale properly when its running on the device (iPhone 5s) to no avail – tried viewport meta tags.. everything still is massive! help!
1
Joshua Tucker
Richard Burton and I had a chance to meet up this weekend and jam on some Framer. We embarked on a project/module that we're really stoked about! We wanted to give you a short demo of what we are working on. We've called in Kinetics – a way to easily test animations on any layer in your Framer project with just a click (well an option + click). Lots more to come!
7
Louis Currie
Is it possible to create custom shape layers within Framer?
5
Juan Sanchez
Not sure if this has been posted already, but I'd love some of this functionality in Framer Studio:
3
Frederic Munch
Hi framers, I like to trigger to switch to a page (previous or next) by pressing a button. Have tried different things but so far nothing worked out and I couldn't find anything on stackoverflow or here. This is what I tried e.g.: myBtn.on Events.Click, -> ....page.snapToPage( pageTwo) How can I trigger a page event by a click on a button? Many thanks!
5
Keith Lang
Small thing I observed: I can build the identical prototypes in Quartz Composer/Origami VS Framer. When I show a QC to a real developer, as the discussion moves to the internal logic/heuristics/state handling/signal flow, QC just makes their eyes glaze over when they see noodles. Whereas Framer, because it's code, is instantly familiar.
0
Daniel Lin
Does anyone know where to find / Has anyone seen example Framer projects that also use d3.js?
1
Daniel Lin
How do you apply CSS styling to an entire class in Framer, and not just a single layer?
3

August 19

Jitendra Vyas
http://principleformac.com/
16
Jordan Robert Dobson
Cursor Pressed State Module Demo: http://jrdn.io/cGmo I've always wanted a pressed state for the mouse interactions when using Framer. I share a lot of my interactions / work in progress via video or Google hangouts. Often times there is confusion regarding when a press or press and hold happens on screen since Framer only has one cursor state. I set out to change that... Joshua Tucker and I created a new module that allows you to add a pressed state to your cursor for those in-browser demos. Get the module and try it out. Module: http://jrdn.io/cGkr Module w/ Subtle Cursor: http://jrdn.io/cGfm Thanks Fran! We hope you find it useful in your projects! Also, thanks for the ideas on how to approach this Brandon and Tisho. :D #framerCode
15
贾朝阳
what is the default animate?
1
Daniel Rakh
Hey all...coming from an iOS background here and getting stuck on simple JS/CS/CSS stuff is really humbling haha. Anyways, I can't figure out for the life of me on why when I add a "textInputLayer" as a sublayer of a page of a Page Component I can't seem to be able to select the text to edit. It's almost as if touch/click event is being obstructed by something else. Feels like a hierarchy issue of some sort but I can't seem to figure it out. Any ideas?
21
Giovanni Caruso
Looking for a way to modify this example (http://framerjs.com/examples/preview/#paging-basics.framer#code) so to have a more fluid effect (gradually changing opacity while moving towards the currentPage). Any reference?
0
Jorn van Dijk
This is a cool new tool from Francisco that let's you play with real data.
1
Elliot Nolten
Hey Frameristas, in a scroll component I have a couple of layers that need to scale, move or disappear. But I want to have this working for both on Events.Move as Events.Scroll. Is there a way to let the scroll component to listen to both the Events Move and Scroll? Thanks!
0
Ryhan Hassan
I've been tinkering with generating simple interface sounds and simulating haptic feedback using the WebAudio api. For example, a low frequency pulse can be a surprisingly good simulation of a phone's vibration, and works well on a Macbook. Video + sample project
10
Dan Clarke
Hi Gang I have a layer which I want to repeatedly switch between states (default, b) when it's clicked. and then when it's clicked again, go to the default state. for all I can tell this should work? but when clicking again it just layers up the Utils.Interval. It's like I need to cancel that interval somehow? http://share.framerjs.com/mlacgxact9r1/
13
Guillermo Romero Jr
Does framer save a file if you initiate an update while you have a project open?
0
Daniel Rakh
Hey...is there any update on the snapToPage() bug in the Page Component? Or can someone at least guide me on a good way to hack around it? I'd really appreciate it : )
12
Andrew Nalband
Hey Boston people! Would anyone be interested in attending/hosting/mentoring for a Framer JS event in Boston? I have been using Framer a ton and attended the last event in San Francisco with Ben Adamson, Koen Bok, Noah Levin and a ton of others and was hoping to do something similar out here in the Northeast.
15
Jay Bowles
Is there a Framer Slack group?
2
Arron J Hunt
I looked for a bit but I haven't seen anyone recreate the iOS alert modal. I'm working on creating a dynamic one that allows for complete customization of all parameters. Does this already exist?
4
Dennis Kerzig
Is there a way of stopping Framer Studio from (1) auto executing after typing and (2) executing/displaying the preview-pane at all? Some days ago I wanted to dig into the code of SpaceInFramers (https://dribbble.com/shots/2191447-SpaceInFramers), it took just a while and Yosemite displayed Framer Studio as the most power consuming app constantly. I lost a lot of battery life with just reading^^
1
Josh Ackerman
I have been playing around with dynamically controlling the cursor in FramerJS. I think there is a lot of potential in being able to very precisely control how the cursor acts and appears. In this example, you can see a large cursor, shrink so the user can accurately access a button. Like on Dribbble: http://drbl.in/pIYU
6

August 20

贾朝阳
Is there any way to copy a layer?
2
Pascal Verstegen
My kingdom for multiple cursors D:
2
Nick Mangos
Hey team. I wrote a module that transitions the background colour of a layer between two (rgba) colours. The module allows you to call colourTransition(), which accepts four arguments. module.colourTransition(layer, colour , duration, fps) For example... module.colourTransition(background, 'rgba(40, 193, 204, 1)', 1, 30) Frames per second is optional, it will default to 30. Check out the demo below. http://share.framerjs.com/m1zbxn0d61nb/ https://github.com/nickmangos/framer-colour-transition
8
Florent Gosselin
Hello Framer folks! What is your work process as a team using framer? Who build the framer prototype? Who implement it in your real product? Once the prototype is built in Framer, how do you communicate it to the engineering team? Do you share the prototype rendering only, or also the coffeeScript code? etc... Thanks for your feedback :)
2
贾朝阳
in sketch,my icon is 88 px,why is it 288 px in Framer studio?
2
Koen Bok
I'll be doing an AMA on Designer News later today!
1
贾朝阳
c1.states.next("two","three","one"); c2.states.next("three","one","two"); c3.states.next("one","two","three"); I want to run these codes 100 times or long,what should I do? I try for [1..100],but it can not.
2
Josselin Ex-Nils
(Continued) As a product manager I'm interested in integrating Framer with 3rd party solution. There is an example of integrating with Parse which I already took advantage of, but I was wondering if anyone had integrated with other solutions, for example user engagement analytics... ? If so I'd be very much interested in any feedback you would have. Thanks
6
Kai Daniels
Does anyone know why my asset is clipping like so? For the life of me I can't figure it out…
3
Danni Priscilla Hu
Have been excited about Framer JS for a while, but just started playing with it recently. While I was learning dragging/constraint today, somehow the constraint does not work properly for the layer I imported... tried to test it with a new layer created in the code, and it works fine... Can anyone help me? :( You can find the file in http://share.framerjs.com/s30gijkczzg2/
2
Michael Boswell
I find that my cursor in Framer is constantly blinking, and it's quite distracting. Memory and CPU usage in Activity Monitor are super low; I don't have much running. Anyone have this same issue?
6
Ankit Joshi
May be asked before, but does framer allow importing of (animated) gifs?
1
Денис Дрожжов
Does anybody know why this is not working? http://share.framerjs.com/h65fpfgwkfyl/ I'm trying to create a bunch of blocks with horizontal scrolling inside long vertically scrolled screen. The idea is to disable horizontal scrolling inside blocks when I scroll the whole screen. And when I scroll inside small blocks, vertical screen scrolling should be disabled. Somehow, only the last block works as intended. Others try to block horizontal scrolling without any reason. Any ideas why this happens? My code is quite awful, 'cause I'm not a programmer, sorry :-)
2
Jordan Robert Dobson
Can anyone recommend a good way to ignore all events in a PageComponent? I have a PageComponent that needs to sit as the topmost layer. Once a page in the page component is selected, I zoom inwards exposing content behind it in separate set of layers. I no longer want the pageComponent events to be triggered until I zoom back out. I’ve tried disabling scroll… but it still gets triggered on a swipe, even though the pages don’t move with it. I’ve also tried ignoreEvents… but the swipe again still triggers a prev/next page action. I need some other ideas. :/ Thanks in advance!
21
Hugo van Heuven
I've been having some trouble with large framer projects (800+ lines of code).. It seems like the code completion, or how Framer Studio searches for code suggestions is really slowing down typing. Also, the code checking becomes really slow at some point, sometimes I need to add and remove a line-break to let the check run over the code again to remove errors. I could move to an external text-editor, but I like the advantages Framer Studio gives me, like the syntax coloring and the code checking. Also, a couple of suggestions: - can Command+Shift+G be search previous instead of Goto line? - when the webview is focussed, can you capture Command+F and some other keystrokes anyway, it's annoying to have to click the editor again to get coding again. - Any way to make modules better? I'd like to have my classes in a separate file, but I have to write functions to return classes, and that's quite annoying. - Could Framer Studio have a file-browser, so you can edit your modules within Framer Studio?
7

August 21

Dan Clarke
Hi everyone I'm trying to put together an animation where a circular mask expands to reveal more of the image behind it. Like zooming out on a telescope! any tips on how to do this? Can I use masks imported from sketch? Or is there a way to create mask layers easily in framer?
2
Arvi Raquel-Santos
With animation chaining, how do I get the animation to work again after the first click? At least on my end, I can't get the chained animation to start again.
2
Thomas Law
It seems the newest version of Framer could not completely load the iPhone 6 Plus device image when preview in Chrome? Anyone else the same?
4
Tina Chen
Hey guys, is it possible to load gif file in to Framer? I want to include some animated doodle as .gif. But I don't know how to do it... Thanks in advance!
2
Rhys Merritt
Hi Guys. I have been stuck on something for a while now, and wondering if anyone can help me out. I am trying to get a layer which I have wrapped in a ScrollComponent to snap to a Y position when the user stops scrolling between to predefined Y positions. I have attached the project here http://share.framerjs.com/00r7pptqwmz3/ I have a very basic understanding of 'if' statements, so I just have no idea how to go about this. I have tried looking at other examples on other projects, but I can't seem to make sense of anything. Any help at all is really appreciated
2
Ricardo Vazquez
Hey everyone. For those of you in Toronto, we have started a Framer JS Toronto Meetup! Our first Meetup is on Monday September 14th at the Mozilla Toronto office. I'd love for you to join us! Details here:
0
Ayushi Sinha
Hi. I am a beginner at FramerJS. While importing my Sketch files, I can't get it right on the device preview. It comes half screen. What might I be doing wrong? For example, when I import a Sketch file of 720 x 1370 on Framer, I get it something like the attached screenshot. It doesn't come on the entire screen. Don't know why it gets displaced. Any suggestions?
5
Ray Yip
Share my new prototype: Card Stack http://share.framerjs.com/i8yi0bayiv34/ (Use Safari) Looking for some feedbacks
8

August 22

Benjamin Zanatta
Hi ! Is someone knows how to easily publish a Framer prototype on Dribbble please ? (and for the exclusivity -> http://share.framerjs.com/0e3oltb4b3ji/ ;) )
5
Brett Johnson
I'm having some trouble with some pretty bad scrolling lag on my prototype. Besides taking out content or shortening the PSD, any tips on how to make the scrolling smoother? I'm wrapping the content in a ScrollComponent and the PSD is around 15MB in total. Even when reducing the height of the PSD (~8MB PSD) there's some lag. Viewing in Framer Studio as well as on Frameless iPhone app. Thanks in advance!
4

August 23

Raphaël de Courville
Hello Framers! I'm looking for a way to prevent the screen from going to sleep (I'm working on an ambient display prototype). It looks like an API is in the works but not implemented by any browser yet: http://boiler23.github.io/screen-wake/ It would be great to have this option as a setting in Framer/Frameless. Do you know of any trick I could use right now?
5

August 24

Jan Janssen
Join us!
0
Денис Дрожжов
Is there a way to stop on demand long or repeated animation? I have a rotating object which I need to stop by pressing a button. AnimateStop() works, but instantly and without tween.
0
Artem Kozlov
Saturday practice in Framer JS
1
Balraj Chana
Hey guys, I've been using Framer quite heavily for prototyping during the past couple of months and I wanted to combine what I've learnt so far. I realised that you can't really get more interactive than a game! :) The game's called SpaceInFramers (loosely inspired by Space Invaders) and the aim is to hit as many targets as you can in order to progress onto the next level. Have a go and let me know what you think :) Direct link: http://share.framerjs.com/u8368m6q7iud/
14
Arvi Raquel-Santos
Can I duplicate a sketch object in code in Framer? For example if I have a star in sketch I'd like to animate that 10 different ways but want to see if I can duplicate the object in Framer.
3
Jorn van Dijk
Super cool animated video about getting good at anything, really.
4
Joseph Kim
Hi framers, Super newbie question. (started to learn framer for a week) just trying to make infinite loop animation with using Utils.randomNumber and Loop in order to express the forest at dawn surrounded by fireflies but I have no clue why this isn't working properly. After animation1, animation 2 and 3 are not working with layers looped. (Just one of them is working after 1 finished..) Does anybody have a clever solution? Thank you for reading this! http://share.framerjs.com/vybzaj0xxlln/
7
Johannes Eckert
need some javascript/coffeescript help: Trying to create layers with a function and want to address those layers later by name. Is that even possible? http://share.framerjs.com/q950i2a5jaba/ Or is my only option to create and store these in an object in window?
6
Daniel Rakh
Hey all! Just in case anyone was wondering why I was bothering you guys for help so much this past week it was because of this: https:[email protected]/the-tweetstorm-373bd7e5eb54 Here's the Framer link: http://share.framerjs.com/8qrs3dp36rey/ Don't forget to paste: “☁️⚡️” to get started. This was literally my first time using Framer or writing any JS so excuse the code quality. I just hacked it together to be honest. Special shout out to Jordan Robert Dobson who went out of his way to really help me out. And thanks to the Framer team for making such an awesome tool to make your ideas a reality. You guys rock!
3
Ray Yip
Really want something like this.
15
Joshua Tucker
Kinetics – a module to easily test spring animations on layers without re-compiling your code. Richard Burton and I demoed it a little while ago (https://www.facebook.com/groups/framerjs/permalink/723117627815311/), but we think it's in a good state to let everyone play with it! This is only the beginning! Available from my GitHub – https://github.com/joshmtucker/Kinetics. The README is a great resource to learn about how to use it effectively. I also put together a YouTube tutorial to explain it in more detail. http://youtu.be/TH7phW5KK08 We are eager to squash every bug and make the experience even greater over time. Let us know all your thoughts! Happy "Module Monday"!
4

August 25

Arvi Raquel-Santos
Can I create an array for animationOptions? I tried this and it didn't work... but then again, I'm not sure if it's written correctly. array = [layerA, layerB] for layers in array states.animationOptions = curve: "linear(600,40,20)"
4
Arthur Dagard
is there a simple way to use the iphone's camera ?
14
Joshua Tucker
Speech to text is a fun API. I tackled it a bit this weekend and put together a module to use SpeechSynthesis in Framer projects. YOLO? Check out "AfricanAnimals.framer" example on GitHub to see it in action – and learn more about African animals while you're at it! GitHub: https://github.com/joshmtucker/SpeechSynth Next fun dinky project: SpeechRecognition (only supported in Chrome's webkit, but still rad, right?) Cheers!
5
Soffee Yang
Hello all. I'm new to framer and I'm still learning it. I'm currently trying to make a sticky header that will shows up only when user scrolls up and disappears when scrolling down. I tried something like this but couldn't get it working. Can anyone help me ? Thank you very much.
1
Farid Kalirad
Which tool would you recommend to create high professional animations for websites (not mobile Apps)?
4
Kai Daniels
I can't get the green layer to be the topmost layer, anyone know any solutions?
3

August 26

Jinglu Liu
Hi, I've been puzzled by a question for a long time. One layer which have 3 or more different states, without any operations (like click, touch), how could it move to the next state animation when the previous animation ended?
8
Edgar Lechaudel
Hi Framers! I'm prototyping a personal project on the basis of the Weather App tutorial provided by Framer's team: http://framerjs.com/examples/preview/#weather-app.framer Actually, most of the interactions are working but I'm struggling with the sticky header... This one doesn't want to remain hanging at the top of the screen. I'll be very happy if someone could help me with this issue. I want the top border of the layer Compare to remains hanging at the top of the Browser screen and then activate scrolling for the layer List. The specific line that specifies this interaction is line 57 but it seems that the issue is coming from somewhere else... I've attached the Framer Project called Grid, a PNG version of the design to explain the name of the different layers and a screenshot of the Sketch layers list for this design to help you understand the layers' hierarchy. It is a Zip file. Thank you very much in advance! Cheers.
1
Văn Công Bằng
https://www.flinto.com New prototype building app, very good, does anyone try this ?
26
Jiaxin Chen
Hi, framers! I'm learning how to prototype sticky header. I just wonder what is "offset.y"?
2
Arvi Raquel-Santos
Other than Ed and Aaron, anyone else play around with particles that they can share? Looking to build an animation sequence with particles and looking for inspiration.
1
Giovanni Caruso
Hi guys. Help needed :) Given a for loop to generate 3 cards, what is the best way to target each card independently within the loop (i.e. on Events.Click)?
2
Tim Numan
Is it possible to reach and change the text in a textfield from Sketch? I'd like to draw re-usable elements in sketch and duplicate em a few times with different text in it as fast as possible.
5
Jan Janssen
Hi, just tested out Parse.com with FramerJS. I also used Handlebars to compile my HTML templates in FramerJS. You can find the demo here: http://share.framerjs.com/9sh5lcfv1upz/
4
Paul Matthijs
I'm running into trouble while trying to sequence a lot of little animations, all with different timing and properties. What is best practice for doing this? For instance, I need to start animation on three layers at the same time, with different properties and timings. When all that's done I need to animation just one of those layers again, with another set of properties and timing. Can't use states, as they share timing properties within a layer. Tried creating animations for every event, but run into problems triggering one animation while the previous is still running. Or should I just use Utils.delay for that?
6
Fran Pérez
A lot of people usually ask how to avoid firing a Click event when dragging a ScrollComponent. This is probably one of the simplest way to do it :)
7
Robert van Klinken
Hi Guys, We recently launched a new design for the Clubs in Human. With Framer I tried to figure out the best interaction to keep track of your friends' active minutes during the day. Switching back and forth between Sketch and Framer helped me a lot to narrow down on ideas. What do you think of the result? Here’s a link to the prototype: http://share.framerjs.com/591qmux1hd3l/ even better, download and try it: https://itunes.apple.com/us/app/human-move-30-minutes-or-more/id692721875
7

August 27

Kai Daniels
I'm not well-versed in programming languages and I think my conditionals are incorrect. I'm trying to do something along the lines of this? (I'm trying to remake the FAB Speed dial interaction.) Any suggestions or advice to use the right syntax?
1
Ed Lea
Trying to only listen to a Click event, but DragEnd is always fired (even if no dragging occurred) However, if you drag, then the Click event is not fired. http://share.framerjs.com/rxiq8f108sz9/ How can I call something from the Click event, without also triggering the DragEnd?
9
Baisampayan Saha
I don't know why I am getting an error while creating a new scrollcomponent....
6
Jason Hill
Hey guys, I downloaded the free trial hoping framer.js would be the solution that I have been looking for all these years and unfortunately never got to test it. Another project came up and by the time I was finished my trial was up. Is there anyway to get another bit of trial time?
4
Văn Công Bằng
I have one big layer with 10 subLayers, i want to switch each layer to the same specific state. I usually add 10 subLayers to an array and for loop for add and switch states. Is there any way i change those layers without using array ? Because sometimes, there are too many subLayers
3
Thierry Meier
I am hitting a little roadblock here. How would one go about animating a button like in the Sketch file attached? The idea is that once the button is pressed, the orange bars over the background of the button will act as indicator (they would run from left to right) that the message is being sent as well as the copy changes to "Sending.." -- such animation have been a headache a lot over the past so any help would be very much appreciated! :) Here's the Sketch file:
1
Oscar Alonso
Does anyone know if it is possible to have a layer mask with blurred edges? Thanks!
9
Văn Công Bằng
Hey guys, i know how to use module with a coffee file, but can i use a js file as module ? For example, d3.js
4
Peter Lada
Does anyone else have issues with unbinding events in Framer? I've recently run into this issue quite a few times. Is this a known issue?
8

August 28

Katie Wu
is there a way to snap to a page in a PageComponent WITHOUT calling pagecomponent.snapToPage()? I want it to quietly transition to a specific page (i.e. have it just appear) without the aggressive scrolling animation.
3
Junhyuk Jang
I love pageComponent, so I made this prototype. Instagram image swipe view concept. please check this out :) http://share.framerjs.com/q1kdkzymt7ar/
4
Cemre Güngör
Something I designed ended up not working with iPhone 4's, so I'm not making iPhone 4 prototypes. Realized Framer doesn't have any device images of iPhone 4 included by default. Anyone have any iPhone 4 device templates, so we can show them here for posterity?
7
Kai Daniels
Is there such thing as a "While" event in framer? For instance I have an area, and when I hover over that area more options appear on top of the area I have hovered. I want to again hover on top of the options that have appeared but I don't want to have the original area to collapse because I'm not technically hovering directly above it while still hovering over the new options.
4
Văn Công Bằng
Well, it's not a framer question, it's kind of a question about logic. I'm building a multi-page prototype, every page has a back button, i use variables + if/else to move back to previous page, depends on what previous page is. Is there any proper way to do it without using if/else ?
8
Jason Hill
If I am importing files from Sketch with multiple arboards, is there a good way to organize those layers? Or is it better to have all the layers on one artboard?
5

August 29

Amy Casillas
I'm sure this has been posted, but I'm not finding it. When you use the Framer Share feature and get a URL, is there any way to update that URL with changes? It doesn’t seem to update, so I have to re-share and get a new URL each time. Thanks for any help!
2
Nils Hoenson
Hey guys, I created a little Framer module that makes it easy to overlay your prototype with a grid. I believe prototyping can play a role throughout the entire design process and having a feature like a grid could help with experimenting from the start. Download it over here: https://github.com/nilshoenson/Framer-Grid Please let me know what you think! :)
4
Josef Richter
The eternal question of handling prototype with multiple screens is back! So what is the best practice currently, please? Chris Camargo's module?
4

August 30

Koen Bok
I did a presentation on making things and Framer at An Interesting Day.
8
Sherwin Dai
So I have imported sketch file into Framer Studio, one of the layer structures are like this LayerA SubLayerA SubLayerB This code doesn't work? Is it possible to change sub-layer property after setting up parent layer property first? LayerA.opacity = 0 SubLayerB.opacity = 1
0
Kevin Py
Hello everyone, I just wanted to share with you a sample menu, with customization options. You can choose the numbers of cells, and their heights, and get a dynamic result. This is my first project, I created earlier this year, but I never thought to share.
0
Jiaxin Chen
Hey guys, I just want to know how can I make a continuous loop? All I want to do is endlessly rotate a loading circle.
3
Fredrik Ampler
Hi! Is there a way to update/refresh the prototype I'm creating into the same shared url? Each time I click "Share" in FS I get a new url (like http://share.framerjs.com/px8cafogxvhw). I'd like to update the content of an existing url so I don't have to send out new url all the time.
2
Callil Capuozzo
Made this simple game with my brother: http://share.framerjs.com/slklht3nbdjq/ Best I've seen anyone get is 750. Works best on mobile devices, should be responsive mostly. Install to your home screen for the best experience. Made during one plane ride.
10
Jonathon Toon
I spent some time this weekend converting some of the basic examples of Framer to native Swift. It's surprisingly quite easy thanks to the great foresight by Koen and Jorn to base Framer's view model on a similar concept to what iOS has. That is to say a lot of the layout concepts are extremely similar. If you've been thinking about jumping into some native iOS code, using the great knowledge learnt, Framer is fantastic starting point. https://github.com/jonathontoon/swift-list-sorting-interaction https://github.com/jonathontoon/ios-weather-prototype https://github.com/jonathontoon/swift-paging-interaction-basics https://github.com/jonathontoon/swift-tap-gesture-basics Feel free to bug me if you have any questions.
4
Arron J Hunt
After a few weeks of not being able to use modules, here's a video showing my struggles. This happens on both my Macbook and my iMac, on brand new Framer Studio installs...
8

August 31

Sungin Hong
Hi Framers! Working on a PageComponent Prototype. Thank you!
13
Javier Chávarri
I've created a iOS-based navigation component for Framer. I'm trying to make it simple to use (basically cloning iOS style and animations), but also easily configurable. I'd love to know your thoughts :) /cc Josef Richter Văn Công Bằng https://github.com/jchavarri/FramerNavigationComponent http://gph.is/1UgmX0v
5
Junhyuk Jang
I made a scroll layer with image(width:screen.width, height:screen.height). when I check this layer on mobile browser, there are croped image. how can I fix this??
2
Dennis Kerzig
Dear Framer-Studio Team, it would be awesome to see a live filtering of the elements in the left sidebar while searching in the Docs! :) I often loose the overview because of all the scrolling up/down!
0
Markus Smet
Link multiple framer prototypes together, sounds like a sensible idea...
2

Monthly archives

2017

2016

2015

2014

2013