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

What is Framer? Join the Community
Return to index

January 2015

January 02

Joshua Tucker
Far from a lean execution (I can't be quick my first few times, right? :P), but I am super stoked on this interaction. https://dribbble.com/shots/1864677-Pull-to-Sort I have some questions though on some of the code and would greatly appreciate some help! The project is available here: http://cl.ly/20103n0X2E1i 1) My resorting based on where I release is not working. I have a currentArray that captures the order at start and then sets itself equal to another array that reflects the order I want when I release on said area. currentArray doesn't seem to be setting to that array and passing that into the function. Thoughts? 2) I don't remember the exact error, but Framer Studio will sometimes give me a script error "202" that is related to ')' not being in the parameter list. It doesn't necessarily hinder the usage of the prototype, but it resets placement here and there. Anyone encountered this before?
4
Joshua Tucker
Is there any documentation that explains what characters cannot be used in the title of a Framer Studio project if you wish to mirror, or why some might not be supported (if it's related to javascript or something)? I had a project called "Task-it – Sort" and it wouldn't allow me to grab the Mirror URL until I removed the "–". Otherwise, it just shows blank "http://".
2
Svet Denkov
Hi FramerJS prototypers and fellow UXers! Happy New Year to all! Quick question: where can I find sample .sketch layouts for Framer? I already dissected Jay Stakelon's workshop examples, but wanted to take a look at some more complex files (read multi-page and multi-artboard setups). Thanks in advance for any leads and cheers!
7
Joshua Tucker
I have been able to integrate Hammer.js events into Framer (thanks to an experiment post by Ed Chao), however I am not able to figure out how to change the defaults of a Hammer event. Any ideas?
2
Patrick Wong
Hey ya'll, I just published this article on Medium. Framer was an invaluable tool for building some of the earlier prototypes.
4

January 03

Mike Arndt
I'm leveraging a negative number from .scrollY that you can get on mobile from over scrolling. Is there a way to achieve this effect on desktop?
3

January 04

Daniel Alvarez
Maybe this question has been asked before. I'm a Windows user, how can I start using Framer?
1

January 05

Jeff Lin
Hey guys, Does anyone know hoe to animate a "New Layer" to move in a curvy path? Thanks the green play button in this example is what I am talking about!
2
Daniël van der Winden
Yo folks, what is your experience/workflow with handing off a Framer prototype to a developer?
0
George Kedenburg III
Has anyone had success using contenteditable divs instead of regular inputs? Doesn't seem like they're working in Studio...
6
Svet Denkov
Just came across this CoffeeScript resource. Note that this is a PDF:
0

January 06

David Lee
Happy new year :) This is my Day-1 prototype with Framer. I skimmed through tutorials and examples for a few hours and made this, feeling the power and potential of Framer. I purposely made the same example that I made with Form. I'll probably write an article about the differences of them :) http://share.framerjs.com/kz4ia331j43r/ http://www.youtube.com/watch?v=dv6ddZc1GaI
9
Jordan Robert Dobson
Is there an easy way to hide the print log after it has displayed? Digging through the Framer object I can't seem to locate it. Perhaps it's elsewhere or this isn't advised. I'd like to use it as a quick way to show a message based on an action Then have it go away. I could just make a basic singleton type class for this I suppose. Thoughts?
3
Liu T
I define a class which contains a layer. Then use Utils.interval to generate instances of the class. Problem is, the newly generated layers are always display on top of other screen elements. I tried to assign Z value to them or use placeBehind, but the problem still exists. Any one could give a help? Thanks.
2
Gregory Dean Hall
When saving examples URLs to home screen, I cant use the interactions as the whole browser moves up and down.
11
Ma Thieu
Hi, i opened Framer yesterday for the first time. I imported my design from Sketch containing 3 artboards. I saw the first one (by default) but i didn't succeed to see the second or the third one. I looked on the internet but nothing really helped. Does anyone have the solution please? Thanks Mathieu
2
Koen Bok
I got back from a nice holiday. I did make some promises to look into stuff on the road. If you are desperately waiting on something for me to look into let me know here :-)
2
Jacek Stryk
Is there a way to swap a layer image on the layer click event? And animate it? I want to change the layer's image on click to a different image and control the way to new images appears. Something like: Layer1 = new Layer({x:0, y:0, width:1440, height:660, image:"images/img1.png"}) Layer1.states.add({ image2: { image: "images/img2.png" }, image3: { image: "images/img3.png" } }) Layer1.states.animationOptions = { curve: "spring(500,12,0)" } Layer1.on(Events.Click, function() { Layer1.states.next(); ---== OR ==--- switch between two layers in an animated way? Layer1 = new Layer({x:0, y:0, width:1440, height:660, image:"images/img1.png"}) Layer2 = new Layer({x:0, y:0, width:1440, height:660, image:"images/img2.png"})
3

January 07

Rémy Saddour
Hi everyone , I recently begin on FramerJS and I have a little problem ... I would like to share a public manner prototype, after some research I found this url http://framer.link/ and the tumblr , I read this " framer Added : // urls Directly to Any open zip file GitHub gist gold links , aussi see http://framer.link " but I have not managed to do what I want. I guess I missed something in the ideal I would like to have the same type of preview as examples that can be found on the website of FramerJS . Thank you for your help
0
Joshua Tucker
When using maxDragFrame, how do I set the height to be above the current y value of the layer? Example: I want to be able to drag a layer up and have it stop at the maxDragFrame.height value. But, I can only get height to work from the current y value down (increasing positive value of y).
1

January 08

Isa Bison
Huh. Framer is attempting to load images that aren't part of the Sketch file, but with the same name as the super container?
8
Kwangbae Lee
Hi everyone. This is my first day try on Framer. It took about 4 hours to get used to it and 6-7 hours to make this simple transaction. Hope you guys like it. (source here: http://framer.link/www.dropbox.com/s/84vemwjg4sqxl26/Framer1stTry_kwangbae_20150117.framer.zip ) Since I haven't learned how to code, one of my colleagues helped me to understand CoffeeScript. (Thus, this is my very first codes that I wrote myself!) Me and my team are considering using Framer on my current project. Pretty excited to add interactions on prototypes. ;)
0
Matthias Kampitsch
Hi everyone, I want to create a prototype of a hierarchical app which has a tab bar. I can't get my head around how to solve a tabbed navigation in combination with subviews like a real iOS app has. Do you have any suggestions?
1
Logan Merriam
I'm using the code from the draggable momentum example: http://examples.framerjs.com/#draggable-momentum.framer How would you stop the element from going past a certain x or y value?
2

January 09

Amy Casillas
Is there an event I can listen for that tells when all items have been initialized and displayed on screen? I have an opening animation, but it is starting before everything is completely ready.
4
Igori Kim
Hi everyone! This is my first Framer prototype, just an example app for print pictures in few clicks. I'd like to hear your feedback
0
Priscilla Gomez
I searched this up but didn't find that anyone has asked it before so here it goes... Is there a way to publish/export your prototype without requiring framer to be installed on the machine you choose to view it on? Thanks in advance.
3
Matt Wujek
Hi everyone, I was having a hard time figuring out how to limit the scrolling on an element. I made a little example that only allows scrolling within a container. You can add a threshold that allows the content briefly move outside the container. Let me know what you think! I'm not sure if this has been discussed before, so I apologize if this is a repeat post. source here: http://mattwujek.com/scrollFramer/
3
Jardson Almeida
Hi everyone, I just wanted to share with you all my first Framer prototype. This is an experimental work of a cooking app, that helps you to find good places to eat based on your interests, like Yelp, Foursquare etc. I worked on some interactions such as the app content animation, cards selection, changing location and skip. I'd like to hear your feedback. Also I wanted to say a special thanks to Peter Lada for all the help with the code.
14
Albin Martinsson
I'm sitting here trying to get a scrollview to work. I'm using masks from sketch but I can't get it to work. Can you guys tell me what I'm doing wrong? My code looks like this but the scroll still won't work properly. I can only scroll for about 1/10 of the gradient rectangle. untitledLayers.container.scroll = true Here's a screenshot of the folderstructure. Help would be greatly appreciated!
2

January 10

Matt Wujek
Hi Everyone, I've been working on a prototype with a lot of sliders, so I made a function to considerably condenses the code. Hope that you guys can use it for your projects! Demo w/ source here: http://mattwujek.com/slider-demo/
3
Vikar Zhang
Is there a way to change mouse style to default as the system's? I mean if I want to use framer to make some web prototypes, I don't need mouse to be like a circle. Or is framerjs only made for mobile projects?
4
Junhyuk Jang
Joshua Tucker 's 'detecting hand posture' idea can be use like this. right handed user will see 'go to the top' button on the right, and left handed user will see it on the left. thank you, Joshua. It's brilliant idea!!!
10

January 11

Joshua Tucker
I can't seriously be having this much fun! Haha. Thanks to Ryhan Hassan and Ryan Gonzalez dabbling in WebKit Audio, I focused in on learning some of it also. With some HTML5 /WebKit audio, got a visual spectrum working!It's a good start to some interaction I want to test. The song is called "revive" by coyote kisses. (P.S. I'll post the source for my other gestural project sometime today - sorry for the delay).
2
Matt Wujek
I have this animation working pretty smoothly, but if I change the radius of the circles, the X and Y position are a little off. Any thoughts? Code here: http://pastebin.com/Fz17ypJ4
2
Matt Wujek
Simple carousel with buttons centered at the bottom. Demo & code: mattwujek.com/slider-demo
4

January 12

Erik Berndt
Hi! I just started using Framer for prototyping our app. Such a great tool! Thank you! However, I still have a problem with mirroring to my Nexus 5, which has a screen resolution of 1080x1920. My prototype is the same size. When testing it on the phone it only shows a part of the prototype I see in Framer. When I susbstract 1/3 of the pixel and change the canvas size of my prototype to a 720x1260 it is not displayed properly within Framer, but perfectly on the device. With an iPhone it works perfectly. Do you guys experienced the same and have a solution for me?
2
Stephan van Heest
Hi there, Just a quick question: how do I get the FramerJS artboard size? I'm using the iPhone 6 template, when I try Framer.Screen.height or window.Screen.height it returns : 988. I expected to get 1334
4
Koen Bok
Pretty excited by all the cool contributions this weekend: Improved draggable by Devin Abbott: https://www.facebook.com/video.php?v=10152528894311583 Basic Carousel by Matt Wujek https://www.facebook.com/video.php?v=10204318539540979 Path Animation Proposal by Tisho Georgiev https://github.com/koenbok/Framer/pull/151 Gestures based on hand positions by Joshua Tucker https://www.facebook.com/groups/framerjs/permalink/622842064509535/ And much more examples (see the group). These projects are so good that I'm pretty sure they will in some form end up in the core of Framer, which will benefit everyone using it. If you are thinking to contribute too, I'll be making a nice page with wanted features on the GitHub repo that will contain ideas to work on.
5
Jerehmie Cannon
Hey guys! I just bought Framer over the weekend, and need some help getting started. Anyone have a link to a current tutorial?
9
Joshua Tucker
Can HTML elements added to a layer (with layer.html) be changed by their Framer equivalents? Example: I have a layer that is 100 pixels wide and 100 pixels hight. I add a canvas element with layer.html that is the same width and height. If I change the layer's width and height, will it change the canvas also?
7

January 13

Paolo Dagrada
https://www.facebook.com/paolo.dagrada/media_set?set=a.10205833218493010.1073741828.1334017016&type=3&uploaded=6
0
Jon Arnold
Writing a loop like this gives some weird output: ============================ randomPos = -> print Utils.randomNumber(0, 1) Utils.interval(2,randomPos) randomPos() ============================ Every two seconds it will multiply the numbers of times the random number is printed. I only want one random number every 2 seconds… Any ideas? Jorn van Dijk Koen Bok Benjamin Den Boer
8
Jerehmie Cannon
When I try to open the HTML files, I get this error. I read the documentation, but it's pretty technical. Is there an easier fix?
6
Rafael Puyana
Hi guys. I have been playing with framer as a character animation tool. This is the first attempt to do so, and I will be posting more of these guys soon. Let me know your comments about it.
5
Matt Wujek
How do I access arrays/objects inside of the "states" object. I would really like to use the orderedStates and previousStates objects! This screenshot: console.log( layerA.states )
4
Harsha Vardhan R
Hi all! Is anyone else facing the problem where Utils.isPhone() is throwing up as 'true' even on an iPad? Any solutions, as I am facing this right now. Thanks!
0
Tarun Chakravorty
Hey framer people, quick question on scaling layers: When you scale a layer to (say) 0.5 from 1, the layer scales from the very center. Is there a way to scale from say, the bottom center? or top left? Is there a "transform origin" kind of property ?
2
Stephen Crowley
I have two artboards, one with vertical orientation dimensions and the other with horizontal dimensions. When I rotate the device the horizontal layer cuts off. Anyone have any thoughts on this?
6

January 14

Adria Jimenez
Hello everyone, A while ago (in November) I posted an issue here in the group that it was not possible to debug with framerjs. Is there any progress/news on that issue? Here you can see my post: https://www.facebook.com/groups/framerjs/search/?query=debug
2
Thomas Veit
Hey guys, noob here... I'm looking for a step by step tutorial for sketch and framer.. I already fail trying to select a layer or layergroup within framer... :-( Any help or links are very appreciated
2
Joe Lifrieri
Had a bug today related to device rotation and content getting cut off and found the solution thanks to Cemre, thought I'd share it here: # the problem A video is playing in portrait mode. When fullscreen is triggered, I call Framer.Device.rotateRight() to rotate the device into landscape. The video's content has been rotated, but the player's dimensions are being cropped to the dimensions of portrait mode, leaving a large black empty space to the right of the video. (See screenshot) # the solution Opening the DOM inspector or resizing the window fixes the problem, so we just needed to trigger a redraw via Framer.Device._update() after the player element finished animating into place. Hope it helps.
4
Joshua Tucker
I've noticed that when mirroring with Framer and using events like "TouchMove" in a desktop browser, once you hover + move over the layer in question, it detects it as a move, even though I have not clicked down. Is this avoidable? Am I doing something wrong?
4
Jon Arnold
How can I read out the current state of Utils.cycle(["1", "2"])? thank you!
1
Harsha Vardhan R
Hey guys, wonder if someone else is facing a problem with Utils.isPhone(). My tablet is being recognised as a phone for some reason. Any solutions? Thanks!
5
Dave Feldman
In an earlier version of Framer, there were several handy shortcuts and features built into the Photoshop import. For instance, you could append various strings to the layer name to achieve things like scrolling and dragging. Are these still around? Are they documented anywhere?
0
Mohamed Tedjani Meftah
Hi, this is not a framer specific question, I’am trying to achieve a roulette like effect while scrolling, this is how far I have got [http://j.mp/1ycadNB] the problem I’m having is that on the extremes the Y position is a bit high (see photo), and I would like it so that the boxes form a circular path. Full Framer File: http://j.mp/17FdeKH
0
Koen Bok
Today's small update has an important security fix. I strongly advise everyone to upgrade.
3
Matt Wujek
Quick question: I need to select multiple items from my Sketch file. How do you do this? This was what I tried and it didn't work :( allButtons = [btn1, btn2, btn3, btn4] allButtons.style = { … } allButtons.states.add({ … }) allButtons[0].on Events.Click, -> …
8
Shuangshuang Li
Hey Framer.js pros, I want to start using Framer, but have a few questions. 1. does Framer work for prototyping web apps as well as mobile? Most examples I’ve seen are about mobile. 2. how does Framer handle complex workflows? I know it works really well on animating the interactions of a single screen, but how about a flow with many screens with possible conditional validations? Thanks!
9
Stefano Fois
[ Framer + Sketch 3 ] [artboard flow problem] There is a method to create a flow with clickable framer between artboard a document Sketch3? ei. Artboard01 "on click into framer imported" -> show artboard02 ... has anyone tried or found a solution other than export images of each artboard and correlate them as images I hope I have explained my question correctly thanks in advance
0
Dave Feldman
Can someone point me toward an example of how to create a Layer subclass? Thanks!
1

January 15

Noah Levin
Is there a quick / simple way to capture click position on mobile safari? event.x only seems to work on desktop framer / chrome. Basically I want: Thing.on Events.Click, -> print "Click Position X:" + event.x Where instead of event, something that actually works
19
Hugo Mingoia
Search screen transition I did for the new version of an app called Openbike Now. Not sure everything is perfect, but I'm still learning FramerJS, so don't hesitate to share your thoughts !
5

January 16

Nicholas Sheriff Jr
Best web browser for prototyping with Framer ;) - http://getquest.co
5
Noah Tsutsui
Hey guys, I've been away for a while. Is there a great browser/Mirror solution for Android yet?
6
Mike Brand
I'm working through this tutorial on how to get Parse and Framer to work together. When I get to the part where I write the query Framer shows a drop down sheet that asks me to log in. It rejects my Parse log in details so I'm not sure what's happening here. Can anyone shed some light?
9
Jordan Mauriello
We would love to showcase your work on our brand new site redesign! I would just like to invite those in the group to submit any original, creative projects to howww.com. The benefit of submitting is you could, potentially, get your work featured on the website and broadcasted across Howww social media channels, if your work wins a Honorable Mention or Case Study of the Week award. We would love to showcase your work!
1
Fran Pérez
Hi guys. How can I stop listening to layer.on "change:y"?
4
Matt Wujek
I know how to change the cursor on Framer, but how do I enable mouse-wheel or trackpad scrolling?
2
Jorn van Dijk
What can we do to improve the user experience of the first 15 minutes with Framer?
23
Harsha Halvi
Are there any plans to make Framer Studio compatible with Linux as well as Windows anytime soon.?
1
Jon Arnold
Is there a efficient way to use a loop to generate similar layers with slightly differences? What I have: labels = ["stockCountLabel", "sumPriceLabel"] for i in labels i = new Layer() i.width = screenWidth i.height = 80 i.x = 0 switch i when "sumPriceLabel" i.html = 200 i.y = 580 when "stockCountLabel" i.html = 600 i.y = 422 else i.html = "yolo" i.y = 400 i.backgroundColor = "transparent" i.style = { "padding": "0px" "font-size": "60px" "line-height": "1.4em" "text-align": "center" "color": "#333" } I would like to access stockCountLabel and sumPriceLabel later in code and use them. I know that I am overwriting "i" in my code… Thank you for your help!
10
Jason Ogle
Why does Framer insist on autocorrecting my variables to initial caps on hard return?
2
Marc Grabanski
We're running an online/in-person workshop on FramerJS with Jay Stakelon February 20th! https://frontendmasters.com/workshops/framerjs/ Attend remotely with HD video and chat or come to Minnesota and attend in-person. Tickets come with instant replay videos, DRM-free, edited video downloads of the event plus 6 months access to our other 30+ master courses. For those who cannot afford the fee we offer the chance to win a free ticket: https://mjg.wufoo.com/forms/framerjs-workshop-giveaway/ Hope you can join us! :-D -- Marc Grabanski CEO, Frontend Masters
0
Dave Feldman
According to the docs, hidden Photoshop layer groups will be imported as hidden Layers in Framer. But even in a very simple test file, I can't get it to work — anything that's hidden doesn't get imported. What am I doing wrong?
2

January 17

Joshua Tucker
I've been spending the last few days working to address a problem I think is really important – right handed versus left handed use. So often do controls/menu options/etc. cater to one side or the other, making it difficult for a number of different people. Lots of trial and error and research/reading later, I think I've come up with a solution for my app on how to detect whether someone is using their left hand or right hand to open my menu. That way, I can decide how to display options accordingly. Check it out! https://www.youtube.com/watch?v=yxJzN7ncbuc&sns=fb (Code/Sketch file coming soon – gotta fix a few things).
19
Isae Aldy Beausoleil
i was wondering : did anyone of you used framer.js for a desktop application or for a production ready app? not just for prototyping
1
ShekMan Tang
I've an layer group that's set to be hidden in Sketch (3.2.1). After importing to Framer (1.9.42) , I can't set it to visible again. I've tried both setting its opacity to true and opacity to 1, but still not showing. Am I missing something? Attached example
12
James Caruso
Curious, is there a way for me to scroll the frame to a certain position? Say, if I'm 3000px from the top of the viewport and I wanted to animate a scroll on click to 0px.
6
Simon Lessing
Patrick Keenan, Koen Bok & Ale Muñoz Is the Artboards-to-States plugin still working or has something changed in how import is done to Framer Studio? I can't really get my head around how to use it, it feels like it was created slightly before Sketch & Studio became BFFs? Thank you!
1

January 18

Simon Lessing
Koen Bok & Benjamin Den Boer Is there any place where you list potential improvements for Framer Studio? Or some place where we can wish for features? As an example, I bet you're thinking a lot about how to improve the autocomplete - I know I do. ;) Granted, all you Sofa elites are both awesome designers & coders, but I think that many in this group are designers and we could probably flood you with a pile of good and bad ideas for such a feature. You could just pick out the few good percent and throw out the rest...
6
Kai Oliver Reuter
Hello guys, I've implemented a share url from mapBox into an iframe. That's working fine but it seems to be that the farmer layer blocks all the touch events. I can't interact with the map. Hope you can help me. Thanks!
5

January 19

Jorn van Dijk
We’ve bundled Sketch and Framer to kick-off 2015! Get them before January 25 and save $55 - http://sketchandframer.com
5
Fran Pérez
Is there any specific reason why .bringToFront() affects animation performance only in retina displays + only the first time the call is triggered? It's happening with fairly complex layer structures though. But just when I remove the bringToFront it runs smoothly again… e.g.
1

January 20

Andrew Vy
I'm creating some boilerplate app code, and I'm trying to add new custom events to views. https://gist.github.com/andrewvy/1704d42702abb0ce11d4 For some reason, it doesn't seem like the event gets added to the new view?
0
Jackson Chu
I have a horizontal draggable layer inside a vertical draggable layer, and would like to be able to differentiate between when I'm dragging up/down vs. left/right. The problem I'm having is when I'm dragging horizontally and the vertical drag is also being triggered when fingers don't drag along a perfect x-axis, and vice versa. Is there a way to either trigger some kind of detection for the orientation of the drag accounting for potentially a slight diagonal drag or perhaps in other words define the range for which a drag is horizontal vs. vertical then enable the appropriate draggable layer?
4
Jason Ogle
Framer noob here. Where can I learn more about what Utils is/does?
5
Koen Bok
I did a braindump on Framers' most wanted features. If you were thinking to contribute, start here. Suggestions are welcome too! https://github.com/koenbok/Framer/wiki/Contributing:-Wanted-Features
6
Joshua Tucker
Is there a way to clear Utils.interval? Or use one of the other Utils functions that would allow me to call clearInterval (or its equivalent)?
4
Jorn van Dijk
Only 5 more days until the sale ends! Get Sketch and Framer today and save $55 – http://sketchandframer.com
1
Nick Bewley
Feature Request: Being able to get x, y values on mouseover in studio (maybe while pressing alt or option?). In general, some interactive representation of values a la Inspect Element or Dev Tools. Currently jumping back and forth and tweaking to dial in exact values.
1

January 21

Tin Kadoić
Located in NY and want to come to talk about your experience w/Framer? Talk to me. More info at
1
Mark Graham Dunn
hi guys, quick question. i would like to change the device template to a custom one (an atm screen). can anyone help me out what to do? thanks.
3
Noam Elbaz
Hey everybody: sometimes my Framer file get really long and unmanageable. I basically learned code through FramerJS. How can I break my framer.js file in to parts. and hook them up together? Can I make a function in a separate file and reference it in framer.js? How do I tell framer.js file about the other js file?
7
Stu Greenham
Sorry if this is a stupid question guys but I am looking to present a mockup on my iPad but when I mirror the to the device I am seeing the device on screen. It doesn't appear fullscreen like I want it too. When I do the same for my iPhone, the mirroring doesn't show the iPhone itself and just displays it full screen. I have an iPad Mini Retina btw. Any ideas of what I am doing wrong?
1
Joshua Tucker
Got a new perspective on scroll/direction lock - thanks Devin Abbott for getting me thinking about the topic! Investigated, prototyped, and came up with a potential new layer of interaction on a scroll view using scroll lock as more than just a "safeguard". Totally solved a problem I have wanted to "fix" for a long time.
9
Joshua Tucker
Has there been consideration to adding Mirror to the Share menu, to consolidate? I accidentally click Share instead of Mirror often because I'm so used to the Share Icon being simply an action menu :).
0
Mark Graham Dunn
hi all, is it possible to traverse a list of subgroups inside a parent group to get to a layer name example - Group A -- Subgroup 1A -- actionBtn -- Subgroup 2A -- actionBtn -- Subgroup 3A -- actionBtn
6
Jeff Chang
Hi everyone! Framer newbie here but loving it so far! I ran into a problem though: I set it up so when I click on a button, a flyout comes over it. The thing is that the button underneath is still clickable... Is there anyway I can disable it? Sorry if it's a stupid question!
6

January 22

Maykel Loomans
== Issue with Sketch Symbols == After debugging with Cemre, we found that there is an issue with Symbols. When you turn something into a symbol, it's child layers don't react to attributes being changed. Example File: http://cl.ly/451Y053w0h44 While visible is false on TGSubgroup, it's still visible in the viewer. cc Koen Bok: any ideas?
2
Jurian Rokven
Hey everyone, I have a question about animating multiple layers. Can i create a function to animate multple layers at once? i've tried this but it doesn't work: animationA = new Animation({ layer: layerA, properties: {x:0} curve: "cubic-bezier(2, 1, 0.2, 1)", layer: layerB, properties: {x:0} curve: "cubic-bezier(2, 1, 0.2, 1)", }) Any suggestions would be really helpful. :)
8
Gavin McFarland
Does anyone know of an article that talks about animating colour or CSS styles?
2
Koen Bok
Hey everyone. Framer is doing well and we're looking to expand our team quite a bit this year, mainly on the engineering side. If you know great engineers that love to work on tools point them to this: http://goo.gl/fNs45l
0
Jon Arnold
The Framer Sharing Feature is awesome, but I am having a problem here: http://share.framerjs.com/i8sfwobgyi16/ In the console it says: Uncaught SyntaxError: Illegal return statement Thank you!
0
Dave Feldman
Is there a way to bypass Framer's "local file restrictions" warning if I know I'm running in an environment where that won't be an issue?
2

January 23

Jihwan Kim
Hi. I'm facing a problem with docs viewer... like below.. How can I solve and go back to initial page.. It happened after clicking the link in the docs..
2
Vikar Zhang
Is there a way to add layer options after I created an Animation object? I want to build a template animation, and when a layer needs to use it, I clone the animation object and set layer for it.
3
Koen Bok
Last call! Our Sketch and Framer bundle ends tomorrow.
0
Pedro Carmo
Anyone else having a similar issue when using Mirror on their phone?
2
Tom Mudgett
Hi Everyone - Is there a way to create a layer at the exact point where I click my mouse? I've been trying to use event.clientX and event.clientY to the x and y positions but the layer is off by a couple of pixels. Any suggestions would be helpful. Thanks.
8

January 24

Kevin Cannon
Hey guys. What's the best way to draw a simple line from point a to b. I will need both handles to be draggable, but what's the simplist way to achive that?
8
Jihwan Kim
Thanks a lot for quickly solving the previous problem in docs viewer. So from yesterday night I can use the docs viewer again.:) Anyway unfortunately I'm having other question about using "Video Layer". I obviously have done well attaching some videoclip in my prototype. But it just only works on the present mode and preview mode. Actually I wanna show this videoclip on the mobile using the mirror mode. But the "Video Layer" presents and changes the blue color image layer. Does anyone know how can I show the perfect videoclip prototype with mirror mode?
0
Amy Casillas
Is there a way to stop all animations that are currently running? I have a layer that is superLayer to a number of layers, and there are animations running on each of them. I'm trying to find a way to stop all of them at once without directly calling each one that may be running.
2
Josh Ackerman
Hello, How can I call layerB.bringToFront() after layer is finished animating? This is my current, failed attempt: button.on Events.Click, -> # some layer animations Utils.delay .6, -> if not layerA.isAnimating layerB.bringToFront() At the moment when I click on "button", layerB instantly moves to the front, rather than waiting .6s and checking if the animation is over. I would like some layers to animate before they disappear to the back. I can post the project if the context would help.
8

January 25

Joel Leví Hernández
Any way to ignore all child events as well ?
6
Guy Haviv
Hey all, I'm implementing a quick prototype with Framer Studio that implements some vertical scrolling via draggable.enabled with speedY - this doesn't work when mirroring through a browser to my iPhone. Any idea on how to fix it?
2
Nick Bewley
Whats the best way to emulate .thing { position: fixed; bottom: 0; } in framer? I tried this on my layer, but no dice. Thanks for any ideas!
2

January 26

Christopher Sybico
Hi guys, Framer or Sketch seems to ignore transparent layers inside the group when exporting. I wanted to include the transparent bounds to have a bigger tap area - like the example below instead of 192x128, it will only export 27x40. Is there another way to do this?
7
Benjamin Den Boer
Hey all - we're looking for new prototypes to include in future Example page additions, other sections and future site updates. If you have been working on something great that you'd like to see featured - now is a great time to share. :) [email protected] (or [email protected]) (or message me here)
9
Noam Elbaz
Hey everybody: How can I map drag distance to a property... As I drag one item, I want it to proportionally scale another object?
3
Stephen Crowley
Getting a 404 for framerLayer DevicePhone (https://resources.framerjs.com/static/DeviceResources/iphone-6-spacegray.png), trying to view on dropbox- anyone else?
4
Christian Johansson
Hey, I want to have different animation curves for in and out animations during a state change. I see that I can set layer.states.animationOptions but that will give me the same animation for in and out animations. Any nifty way of dealing with this and still using state changes? I guess it can be done by triggering different predefined animations and not using state changes?
4
Chris Lee
Anyone have an iPhone 6+ device frame pre-formatted for Framer?
1
Koen Bok
We just blasted by 5k users in this group! Pretty amazing, and thanks for all the contributions!
0

January 27

Noah Levin
Is there an easy way to draw things on top of the device frame without creating a custom frame? I know how to if I edit the files outside of studio, but wondering if there's something similar to BringToFront that works on top of the entire device frame?
8
Adela Mrazova
Hello, I am a Sketch3 Designer, but I cannot code. I am trying to use Framer and it is really impressive :) I am stuck just in the beginning - could you please help me? I am importing a Sketch file to Framer. The Sketch layers are in groups. After import, the sketch file (mockup.sketch) appears in the viewer and there is following sentence in the code: # This imports all the layers for "fr1" into fr1Layers Sketch = Framer.Importer.load "imported/mockup" I want to target the different layers, but I dont know how - On framerjs.com there is : This allows you to target all of the imported layers within Framer. All of your imported layers are placed within an /imported folder, which are then included in your prototype. Could you please help me, how to do it? What should I specifically write? Thank you very much :)
10
Kate Pincott
Hi All, I am a Sketch3.2 UI designer learning javascript for first time as we speak. Q1 ) When I import my sketch file, what am I meant to see? I don't see anything in the viewer and no layers appear in the code? I made sure the artboard in sketch was x:0, y:0. Q2 ) Are most people exporting their assets manually by drag/dropping them in the window instead? I saw a few github exporter scripts for sketch 3.0 So I dragged a later in as you can see, but I still don't see anything in the viewer?
5
Irfan Mir
Hello guys, I'm a long-time js dev and I'm interested in using Framer for rapid prototyping. I have a few questions before I purchase based on my usage of the trial: How can I change the background's colour to white instead of black? Does my prototype have to be rendered in the iPhone to the right? How can I make a layer have fluid dimensions, I've done .width = '100%' but that doesn't work. Is there a way I can do this? One last thing, how can I add box-shadows to layers? Thank you very much!
12
Koen Bok
Heads up: I'm going to take the offline.html files out of default projects because it works pretty unreliably. I'm working on another way to get offline previews (modify one of the ios clients to cache everything locally).
1

January 28

Diogenes Brito
What's the easiest way to get the current device's frame? I need to lay some layers out relative to the edges of the device frame, or the viewport when viewed on an actual device.
2
Matt Bogado
HI there! I'm trying to put together my first prototype in framer and I can't seem to figure out how to add different animation speeds and springs to different elements. Right now all the elements move at the same speed and in a linear format. Here's the work in progress: https://dl.dropboxusercontent.com/u/4240806/framer/proto1/index.html Any tips will be much appreciated. Thank you!
4
Dave Feldman
I'm having a really weird problem with prototypes sizing themselves wrong on Chrome/Android. I'm modifying the viewport meta tag to set the scale to 0.3333 (this is a 1080x1920 screen), and things are coming out at the right size, but the prototype doesn't fill the screen—there's a wide white border on the right and bottom sides, and anything that should be there is clipped. Framer.Device.screen.width is reporting at 980 rather than 1080, which corresponds roughly to the width of that white band. I've tried everything I can think of — different scale values, manually setting the width and height in the meta tag, manually setting the width and height of the layer itself...but no dice. Even weirder, it seems like at least some of the time, refreshing the page (or just loading it again) makes the problem go away. Any idea what's going on?
6
Pietro Schirano
Hey guys! What's the best way to stop a scrolling layer at a certain point. As you can see in the video, what I'am trying to do is stopping the button on the top of the view. The button as the other elements are sublayer of a bigger transparent layer where the scroll event is applied. Right now I am animating the button trough next states but as you can see is pretty buggy and it's hard to guess the exact speed and curve of the scrolling animation. Thanks a lot guys!
5
James Wenzel
Is there a place where I can see an example of a sticky header that comes into view on scroll and moves out when the user scrolls back to the top?
4
Min-Sang Choi
Hey guys, I'm invited to this Interaction Design Meetup at Google SF Office to show my personal works (mostly the stuffs you might have seen but) and chat about prototyping. If you're interested, RSVP at the url below.
13
Max Petriv
How do you completely uninstall Framer Studio on OSX?
11
Chris Conover
Jorn van Dijk, any chance you could serve device frames over https instead of http or just bundle them in Framer Studio? I'm serving on a secure server and don't want to allowed mixed content. Thanks!
1
Kevin Cannon
Is there a way to globally disable the print command, so that I can disable it when mirroring it to my mobile? It’s ruining my prototypes :)
5

January 29

Dave Feldman
I'm trying to implement both short- and long-click actions on a layer. Looks like this is pretty straightforward with Event.TouchStart and Event.TouchEnd. But, having written it, it would be nice to wrap it up in its own event that I can apply to layers, e.g., Event.MultiClick if I wanted both short and long in one event; or Event.LongPress to handle just the long one. Is there a way to do this?
1
Julian Camacho
In order to learn Framer JS I decided to replicate the new Spotify’s Discovery interaction.
5
George Kedenburg III
Hey guys! I just put my second Parse + Framer guide up. This time we're creating a realistic login flow that registers users and remembers who they are. Check it out and let me know what you think!
4
Fran Pérez
Hi guys, is there a way to check if a layer has states defined?
13
Joey Lamelas
I'm having problems with rounded corners in Safari on the iOS. It shows up just fine on the Android and my computer. Anybody else have this problem?
7
Dave Feldman
Request: It would be super-neat if the Photoshop importer could import a hierarchy of layer groups (maybe down to a user-defined level, or even just two levels), so I could create a Layer hierarchy in the PSD instead of in code.
6
Hugo des Gayets
I've tried to recreate the Yosemite dock using Framer. That was fun !
6
Jo Higgins
I've created a prototype that has animations on keyboard button presses. Is there a way to prevent a keyboard event from starting until the last animation has finished (to avoid button mashing)? (In axure, I can do this with the wait function, in flash I just disabled the button and enabled when the animation was finished). I'm very much a beginner so your help explained in a basic way would be great! Thanks :)
9
Peter Hilgersom
Hi guys, I created my first little framerJS project. Really like the tool! I hope you can give me some tips based on this project. I bet I did a lot of overcoding ^_^
3
Stephen Crowley
"But the bigger story might be that as more tools like Framer appear on the market, the advantages that redound to designers who can code is getting even greater with every passing day" Awesome!
0
Fredy Mendez
Hi. How can I create a link with framer studio ?
3
Doug Proctor
Hello! Does anyone know if it's possible to add 'animationOptions' to individual states, rather than having to apply the animation options to all states?
2
Zoltan Ray
Is it weird that scaleX in this case returns the expected values (0 > 1) but the effect on appearance is binary? The indicator layer doesn't appear to scale and only appears at the top of the range, when scaleX = 1. I applied the same dragging input and modulate to other properties like rotation which worked fine. dragLayer.on Events.DragMove,-> indicator.scaleX = utils.modulate dragLayer.y, [-200,0], [1,0], true
5

January 30

Trevor Phillippi
I've been finding Sketch Import to become unmanageable for complex animations and interactions, my temptation is to just code it all since the UI is relatively simple and easy to lay out programmatically. Is this a common approach? (Just writing all of the UI code instead of importing layers)
7
Thomas Aylott
Koen Bok, do this:
3
Jason Lang
Hey there! I'm fearful that I've missed something very obvious, but I can't seem to get calculateVelocity to print any values when I'm dragging a draggable layer. Check out my demo: http://share.framerjs.com/g4icl89zyskm/ What have I missed?
2
Jason Ogle
Really love this community. Some really smart, helpful and generous folks here. With that I have a Framer question and a guidance question: 1) Is there a way to declare layer hierarchy apart from superLayer/subLayer since once I use these I cannot seem to style both objects independently? 2) I am a designer who codes primarily HTML/CSS. but am just recently diving hard into mastering Javascript. I feel very unequipped currently to be successful with Framer. Can you guys offer me guidance on the optimal path to really be able to get the most out of Framer and execute my ideas quickly & easily? Should I master Javascript first, then Coffeescript? I’ve looked at a lot of examples, but see so many different techniques being used, I am not really grasping many patterns. Thanks in advance!
4
Callil Capuozzo
Hi all, I have been playing with curves a bit lately, but got tired of of editing them by hand so I made this curve preview sketch. It lets you adjust the values for spring in real-time to get a better idea of what the numbers do, and help you find your perfect animation. Currently this only previews the spring-rk4 with three values, but I plan on doing one for spring-dho and bezier. Please let me know if this is useful or if you have any requests! preview: https://dl.dropboxusercontent.com/u/62995/animationTester.framer/index.html source: http://framer.link/dl.dropboxusercontent.com/u/62995/animationTester.framer.zip
12
Lukas Siegele
Hi everyone, i made my little prototype with Framer Generator Version 3.0.36 . Now I want to preview it on my iPad, so i've downloaded Framer Studio. My Question: How do I get the app.js file work with the Studio Version?
5
Mark Graham Dunn
Hi all, quick question. is it possible to view the default brower scrollbars when presenting a prototype in a browser? Clarification: my prototype is larger than the browser viewport and i need a way to scroll down (via scrollbars) to show the rest of the prototype. thanks
0
Arvi Raquel-Santos
n00b question here. I'm playing around with some really basic transitions. When adding time, I'm not seeing much of a difference. between .5 and .01. What am I missing? layerA.on Events.Click, -> layerA.animate properties: scale: 0.85 time: 0.01 curve: "ease-in-out"
5
Stephen Boak
I'm importing layers into Framer from a sketch file. The canvas is the screen height. I have a layer within the canvas that is taller than the canvas. I'm trying to make it scrollable but having trouble. Any ideas?
4
Peter Hilgersom
Hi all, I have a container frame (blue in the gif), and in that a smaller frame (white). Can I align the smaller frame to the bottom of the container frame? I want to expand the height of the smaller frame and have it 'push' off the bottom to simulate a menu sliding upwards. Or is there a better solution to this? Gif for demonstration. Here I adjust the height on click, and it goes down. But I want it to go up ^_^
15
Jörg Linder
Hi, newbie question here: I wanted to do this really simple off canvas - animation (clicking on the sidebar slides the menu in from the right). However, I always have to click several times at the beginning (after loading/reloading) After that it's working fine ... What am I doing wrong?
1

January 31

Junhyuk Jang
Hi guys, I just made menu icon animation prototype. I use three layers to make hamburger button, but I want to know more easy way to make icon animation. Can I use GIF icon and control the icon's animate?
1
Clint Andrew Hall
So I'd like to do something a bit nuts: single-page Framer prototypes. I've got a basic script that replaces all <script> and stylesheets with their file contents, and it works great for simple prototypes. What I'd like to do next is replace image URLs of imported layers with base64 encoded images... but I'm seeing some pretty inflexible logic around loading of images. Ideally, I'd just load the base64 representation here [1], but all image urls are prepended with a path [2] and, optionally, a cache-buster [3]. I can work around those with a simple indexOf check for 'data:image'... but it's getting the base64 data into the json I'm wondering about, as well. Any good ideas? [1] https://github.com/clintandrewhall/Framer/blob/master/framer/Layer.coffee#L536 [2] https://github.com/clintandrewhall/Framer/blob/master/framer/Importer.coffee#L73 [3] https://github.com/clintandrewhall/Framer/blob/master/framer/Layer.coffee#L517
0
Chad Lonberger
Question about precompiling coffeescript and including it in index.html... currently I've defined and precompiled classes into classes.js (via Koala). It is being loaded correctly (check the print statements in the screenshot) but I'm unable to instantiate classes from within app.coffee in studio (check ReferenceError in lower left). Any ideas? Thanks in advance everyone.
16
Josh Ackerman
Hello, I recently discovered this demo with FramerJS and HammerJS. After downloading the source files I noticed it does not work. I am wondering how to use HammerJS with Framer and if it is possible/how to use other JS libraries in Framer Studio. Thanks.
1
Kai Daniels
How do I make my button have a delay before scaling and disappearing? This prototype is based on the personal contact demo in the material design reel.
5
Michał Jarosz
Can I scroll my fullscreen website prototype?
2
Stefanie Hive
Hello Framer friends! I'm new to Framer, and feeling a bit overwhelmed on where to start. I love the idea of creating a responsive prototype of a small app I created as a school project. I currently have working psd files and am already having difficulty importing the layers. Are there any video tutorials or other resources I can look to for beginner help? I've completed some codeacademy courses but still consider myself very beginner :) Any tips are welcome! Thanks.
3
Christophe Stoll
Here's a probably naive question: assume you have several Sketch Layer groups representing visual states of a UI Element. What's best practice to turn this alive with Framer? Manually (that's what I did so far)? Or is there an elegant way/trick to use Framer states?
12

Monthly archives

2017

2016

2015

2014

2013