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

What is Framer? Join the Community
Return to index

October 2015

October 01

John Anthony Evans
Was playing with George's 3D touch but needed a tap interactions to still work. Video of result and example code here. It's hacky as it uses a timer to simulate a tap but might be useful for someone. http://share.framerjs.com/4f74zvxn99q9/
2
Knut Martin Tornes
Need simple REST APIs with test data quickly for your Framer JS prototypes? We just launched a random data generator in restdb.io. https://restdb.io/docs/random-data-generator. It's still early stages, but we would love to hear from you to improve it. It's free to use.
3
Jiaxin Chen
Utils.modulate can only use once?
1
Øyvind Nordbø
Is there a simple way to animate a color from one value to another with a gradual transition (like hueRotate), only with a solid color? (Or using Utils.modulate, for that matter) I can't seem to find this anywhere in the docs. i.e: on button tap -> transition gradually from blue to red
1
Nir Benita
How would I go about (Is it even possible?) creating interactions with liquid like properties https://d13yacurqjgara.cloudfront.net/users/27459/screenshots/1346192/filename.gif https://d13yacurqjgara.cloudfront.net/users/597558/screenshots/1998465/comp-2.gif
10
Nicolas Quod
Start my new adventure with framer.js. I just want to discover this new usefull tool, and start prototyping full UI project ! Feel free to give me advice or opinion, I share this in order to have constructive feedback and to improve my work See you at the next step. See the project here : http://share.framerjs.com/xfdovxm7mlmz/
1
Viszt Péter
Hi! Any idea why does the state of the indicators revert back to the original state after page changing? http://share.framerjs.com/samzumbvwnvu/
1
Joshua Tucker
Feature request: more flexible Studio window! Framer Studio takes the mansion and Sublime is in less than a one bedroom studio apartment :P.
2
Arron J Hunt
Playing with Force Touch on the iPhone6S and one of the default Framer projects. Thanks George for spending so much time working on it. So who is going to build a force touch module? ;)
6

October 02

Danny White
Anyone have any examples of listening to (and triggering-from) keystrokes? I'd like to page through a pageComponent using the up and down arrow keys
4
Jordan Robert Dobson
FramerCo.de Updates!!! I added some suggested posts a few weeks back and added 3 of my latest modules including: • Module: 3D Touch • Module: Cursor Pressed State • Module: Pointer Helper Class http://FramerCo.de Also, please leave a suggestion on the site you have for module, code example or tip that should be added. If you'd like to help be a contributor on the site I'd be glad to add you. :D
1
Jayaprasad Mohanan
Hi all, I'm just curious if I can just import a photoshop file with multiple artboards just the way I would import a normal photoshop file. I tried importing the file into Framer Studio and it didn't show up correctly. Am I missing something? Any help will be greatly appreciated. Thanks.
0
Nicolas Quod
Today my bias was to discover ScrollComponent Tools and some animation with sketch layer. I wanted to set breakpoints during scroll but I did not succeed. If you have any tips let me know! Feel free to give me advice or opinion, I share this in order to have constructive feedback and to improve my work See you at the next step. See the project here : http://share.framerjs.com/5oeqoxr4o6tu/
0
Knut Martin Tornes
Blogpost about how to use restdb.io to feed random test data into FramerJS via REST:
1
Kevin Cannon
Anyone know how to detect the start drag of a PageComponent? I've tried a few things, but nothing worked so far.
2
Dean Broadley
Hi all, quick question...How are you guys handling preloading of assets. This is specifically because dropbox public link is quite slow to load and I want to make sure everything is loaded before animating in...any help would be much appreciated :D
6
Aaron Paterson
Hi, about to take the jump and update to "El Captain" has anyone seen any issues with Framer Studio and using the new OS?
7
Bart Baekelandt
Does anybody have a clue what could cause this Error? It happens when I perform a tiny swipe in a pageComponent.
8
Rory Smyth
Any suggestions on the best way to preload images from Sketch? I'm hiding some layers by default and this causes slow loading when they're visible for the first time. Working around this by hiding them off canvas and moving them into place when needed. Is there any way to just get all the images from the imported folder and preload them?
3
Slghtr Khari
HELP: Does anyone, by chance, have a copy of the original framer onboarding document on their computers? the one where you click the logo and it moves/scales/blurs?
2
Peter Lada
This has probably been asked, but sometimes when viewing a project through Frameless the `Screen.width` or `Screen.height` values are incorrect. Is there a fix/workaround for this?
10
Laura Galbraith
Hey all! So our creative department has warned us not to update to El Capitan yet... but I updated framer and am getting a black screen in the app... !!! This latest version no longer works on Yosemite :( ... going to roll back to an older version, but just wanted to give you a heads up.
4
Koen Bok
I just shipped a bugfix update that fixes signing issues on 10.11 (identity unconfirmed messages) and screen size issues on iOS9. Enjoy.
2
Svet Denkov
Hi All! Where would I find a list of the previous version installation files for FramerJS? I want to roll back to a non-El Capitan install of the software. Thanks!
4
Benjamin Zanatta
Hello ! I don't know if they are french Framer users here but I scheduled a meetup on the next tuesday in Paris to talk together and create a french users community. Here is the event : http://www.meetup.com/framerjsfrance/events/223870491/
7
Arron J Hunt
After removing a page from a PageComponent (using layer.destroy()), how do I update the size? pageComponent.updateContent() doesn't do anything.
6

October 03

Benjamin Den Boer
Hey folks! Here's a new example of a scrollable to-do list. In Framer, I've created a little class that extends Layers, and adds checkmarks, input elements and sets the scrolling behaviour for each Item. For example, it checks to differentiate clicking from scrolling. All items can be edited, new items can be added and current items can be removed. Hope this helps! :-) http://share.framerjs.com/omr7won2119y/
9
Jorn van Dijk
Have you seen George Kedenburg III awesome work on Force Touch with Framer? Here’s a full blown article on the Framer blog. Go George! 👌
8

October 04

Josh Lee
So in my prototype, I have PageA and PageB. I want to disable page.ScrollHorizontal when I'm on PageA (and only allow a click to go to the next page), but enable it to allow people to swipe back. Basically I want to do something like: if page.CurrentPage == "pageA" .....page.ScrollHorizontal = false else .....page.ScrollHorizontal = true Probably missing something easy, but what is the best way to do this? Thanks!
1
Sindu Narasimhan
Anyone know of a similar android typing module (Nexus 5) that I could use?
0
Kevin Cannon
Small feature request. I'd like a SendBack & BringForward function for layering. Placebehind is nice but i'm finding it tricky sometimes to work with dynamic elements. Alternatively, BringToFront could take an argument. e.g. BringToFront(2) would place it 2 positions from the top etc...
2
Tom Hughs
Revenge of John the Baptist... Anti Rap
0
Yifen Wu
Hi everyone! I have a newbie question here... I am following this Medium post to take my Framer 101...while when I import the Sketch file, I just found the preview part of Framer is too big and found now way to resize it... Do anyone know how to fix it? Or I should add some code on the left side?
4
Peter Ng
hacked together some pinch, pan, press with hammer 2.0 since i couldn't find an example out there. setting scale and drag position with originX and originY confuse the hell out of me but this should help you get started with hammer 2 http://share.framerjs.com/riwpcvodrq9f/
13
Joshua Pekera
A little off topic, but I read this article a while ago on Medium. It demonstrates and explores the benefits of designing with actual data and what a tool like that might look like. I think everyone here would find it highly interesting. I would love to see Framer try and tackle something like this. I think their team would be perfectly suited to take it on. Cheers!
3

October 05

Jason Nelson
Is there a way to control the placement of content in your framer prototype when the keyboard is invoked? I've got an input box in my prototype and when I put focus my content weirdly crops. Image illustrating behavior and example with code here: http://share.framerjs.com/t8aamqo366rp/ TIA for any help!
5
Ee Venn Soh
I am not using Framer Studio. How do I generate a device on screen and have my prototype sitting in it. I can't seem to find any documentation around deviceComponent.
2
Joshua Tucker
Frameless 2.0.5 appears to be live on the App Store – fixes iOS 9 dimension issues. Cheers Jay Stakelon, you're da man!
2
Koen Bok
CloudFlare had a hiccup today that impacted the sharing service for some users. But it should fixed now: https://www.cloudflarestatus.com/incidents/3zcnm4rnl0vv
0
Jimmy Nordbeck
Are tabs coming to Framer Studio anytime soon? It would be great not having to work with modules in an external editor.
2
Stephen Crowley
Just a reminder that our 5th Framer JS Seattle meetup is this Thursday! Along with demos and group teachings based on skill level, mentors will be available 1:1 to help you with your prototypes. Hope to see you there! https://www.facebook.com/events/1704332906452240/
0
Pete Lindsberg
Trying to apply the same animation to several layers on click. I'm using the following code, but it doesn't work. Any suggestion? highlight = (layerTarget) -> sketch.subLayersByName(layerTarget).opacity = 1 sketch.myLayer1.on Events.Click, -> highlight ("myLayer1") sketch.myLayer2.on Events.Click, -> highlight ("myLayer2") sketch.myLayer3.on Events.Click, -> highlight ("myLayer3")
2
Giovanni Caruso
Found in my inbox. I've thought it might be of interest.
1
Baisampayan Saha
Hi, Can we draw bezier curves in framer? I wanted to create a line and then put a node in the middle and stretch it first to make a right angle and then afterwards give a radius to the corner so that it becomes an arc. Thanx...
6

October 06

Ee Venn Soh
I am seen a few examples using maxDragFrame however this is no documentation around it. Is there a better way to do this? Or it is just the documentation hasn't been updated? Apparently in the latest Framer.js build, this has been deprecated.
1
Daniel Whyte
Is there anyway i can password protect a framer prototype?
1
Xin Xin
Hello! Noticed this error on framer on inspect, even when there's no code. I already reinstalled framer to try to resolve. Anyone know what's going on here? Thanks!
1
Diego Oriani
Question, can I embed typefaces on my prototypes?
9
David Packles
Hi everyone. New to Framer. Is it possible to create a custom 'viewer' template? I'd like to create a canvas with dimensions 1920 x 1080 and I can't seem to figure out how to do it. Ideally, I would also be able to provide some type of backdrop similar to that of the default templates (iPhone, Nexus, etc). Thanks all for your help!
3
Naema Baskanderi
I have a silly question. I am wondering what is the difference between visible and opacity. I understand opacity can be set to different values. .5, etc...but I'm wondering if opacity = 0 is the same as visible = false I am hoping that visible = false will also hide event clicks on that layer
4
Didi Medina
Hey guys, new to framer. Been playing with some other tools aggressively over the past few weeks before embarking on the journey of needing to learn how to code - seems like I wasted a few weeks. I'm at the point where I get the basics and looking to dig a bit deeper, that being said: Question No.1: Any books you'd recommend to a newbie for coffescript? Something that covers the foundation and principles of coding in general would be ideal while under the context of coffescript. Question No.2: Personally I have some experience with sound design and I'm looking to test out different sound effects for interactions throughout my prototype - I'm sure this is most likely possible however, would be interested if anyone ever added sounds to their prototypes before and if they know of any cool tricks they could share that they learnt along the way? :)
5
Benjamin Den Boer
Congrats to Arthur Etchells for being our 9000th member! We're ever so close to reaching that 10k! :-)
2
Marc Krenn
Just wanted to share this superquick and messy prototype of a "peek and pop" fallback - using a "tap-hold-drag up/down" input-chain - for legacy devices without 3D touch. Nothing too fancy, really, but it feels kinda nice, so... (FYI I'm currently not having an iPhone around, so only God knows if it works properly on it.) Video/gif: http://gfycat.com/DistortedDemandingChinesecrocodilelizard Demo: http://share.framerjs.com/sdtqqg5sef0w/ EDIT: http://www.theverge.com/2015/10/15/9546639/3d-touch-live-photos-on-older-iphones-jailbreak-hacks
1
Dan Clarke
Hi everyone, looking for some advice. I want to create a circular progress bar. I.e. A dark blue circle outline that progressively gets coloured a lighter blue. What's the best way to dynamically draw this? easy on a straight line but not sure how to do it along a circular path Thanks!
3
Win Lin
Hi guys! Super new to Framer but I had a quick question - is it possible to control the drag of one layer while swiping/dragging in another layer? Ex. I want Layer A to be full screen of my device and when I drag/swipe in it, I want it to control Layer B, a small circle above/within the constraints of layer A. Hope that makes sense.
18
이정익
have a good day~fighting! ^^ http://share.framerjs.com/jnayufa4lqjv/
5
Weston Thayer
I'm just getting started importing PSDs into Framer Studio. I noticed a text layer's bounds are "tight" to the visible bounds of the text, making for a difficult hit target. Is there any way to increase the imported layer's bounds from Photoshop? I tried adding a transparent rectangle to the group with the bounds I want, but that only seems to work if it is at least somewhat visible.
2
Ben Blumenfeld
All, Ben here from Designer Fund (we work with Koen/Jorn on Framer) For those of you looking to apply your prototyping skills to huge products/startups like Dropbox, Medium, Fitbit, etc. - we want to make you aware of Bridge - our professional development program for experienced designers in SF. We'll connect you with top startups here in the bay area and you get to participate in our intimate professional development program that includes prototyping/product design as well as the skills/knowledge top designers need to be leaders at their companies: collaboration techniques, effective communication, future trends, etc. I think folks in this group are especially suited for this opportunity so I'm happy to answer any questions you have here. – Ben
18
Daniel Lin
Is there a way to get the rotationZ/orientation from an imported Sketch layer? Or, if I rotated "testObject" 90 degrees in Sketch, will testObject.rotationZ always be 0?
1
Jonathan Lazarini
Hi, I ve got a really silly question. I can't find the button to reattach the web inspector to framer studio. How can I avoid having my web inspector floating please? :3 Thanks a lot
0
Giovanni Caruso
Cool article by Juan Sanchez
1

October 07

Kim Does
I'm having an issue with my prototype looking very blurry in the browser on non-retina screens. This is not just images but also text rendered as html. The resolution of the assets is high so it looks good on devices. Framer Studio looks OK (it looks like anti aliasing is disabled, making everything a bit pixely though). Any ideas / thoughts on how to make this better?
3
Luke Goodman
Input field issues Does anyone know how to prevent the mobile safari keyboard from scrolling my viewport when I select an input field? I am trying to design a prototype where the input fields will move when selected rather than the page. If you load this simple prototype on an iOS browser you will see the issue:
1
Noam Elbaz
I can't seem to capture Touch position. I'd like to track user touch movement (x,y) at regular time intervals after Event.TouchStart Can't get anything to work.... Where do I start? Ideas? Thanks.
14
Ee Venn Soh
Is that possible to specific separate animationOptions for individual state within 1 layer? At the moment, layer.states.animationOptions applies to all states. I am using states.next() to create a toggle effect between 2 states.
3
Diego Oriani
I am facing a weird problem with the ' x ' position of layers imported from Sketch. The coordinates on Framer shows ' x: 0 ' but in the simulator the layer is not on ' x: 0 '. Has anyone faced this issue before?
4
Ed Macovaz
Is there any way to view a Framer prototype without a device frame? I'm prototyping for a desktop app so none of them are really relevant.
4
Daniel Mischler
Hello I downloaded the 14day "Framer Studio 2" trial Version for my mac. Everything seams to work fine, but the loadingwheel in der viewer window is not stopping to run. I can wait for minutes but no result appears. Even when I use the example from the tutorial video (https://www.youtube.com/watch?v=WNZBcCfawII). I restarded my Computer already and reinstall Framer Studio 2 but that didn't helped. With kind regards Daniel
2
Diego Oriani
I am facing an annoying problem when loading more than one time my Sketch file in Framer. It seems that something is messing with the ' x ' of certain layers. Note the inputField layer, it has a property of ' x: 0 '. After loading the Sketch file again the layer has shifted to a ' x: 100 '. Here's the link http://share.framerjs.com/dikk87t136u3/ Thank you in advance.
1
Charlie Sneath
When I add "mouseWheelEnabled: true" property to my new ScrollComponent, it seems to ignore the "scrollVertical: false" property. When I remove the "mouseWheelEnabled" property, the "scrollVertical" property works as expected. Any ideas?
0
Dave Crow
I’m having trouble with what seems like a simple dropdown interaction. When the menu button is tapped, a dropdown appears with a dark scrim under it. Even though I have the scrim layer set to index = 0 and ignoreEvents = true - it is still picking up click events anywhere you tap on the screen. Can someone take a look and tell me what I’m missing? Thanks for the help!
3
Peter Kubin
this is a tricky one... i guess: i am declaring an image of a layer with a path stored in an array. image : someArray[0] the image path itself within the array contains a variable which works fine at the initial call: someArray = ["http://www.server.com/"+myVariable+".html"] if i set the variable to another value image : someArray[0] still displays the image according to the path with the previous, initial variable state. it does not reflect the update of the variable. if i use the path with the variable as stored inside the array directly: image : "http://www.serveri.com/"+myVariable+".html" the correct image is being displayed. since i do not update the content of the array but only a variable within its content, someArray[0] obviously does not get updated. my question is: is there a simple way to force someArray[0] to refresh it's content or is this variable within array nonsense complete bollocks anyway?
1
Aalok Trivedi
Hey guys, Pretty new to framer. I want to create a typing indicator animation where the bubble first scales from its bottom left corner. Is there a way to set an anchor point at that position so it scales up starting from that point rather than the center? Thanks!
4
Lorenzo Ferrante
Hi everybody, Is there a way to get the geolocation in Framer Studio? Thanks.
1
Calvin Teoh
Any idea how I set an Event Listener to fire on the capture phase of an event, not the bubble? I have a navigation bar with that I need to tie a MouseOut event too, but it contains child elements which also have MouseOut events tied to them. At the moment any MouseOut from the child layers cause the parent Navigation Bar to fire it's handlers too. I know there is stopPropagation() but I have many child elements in the nav bar that don't have listeners on them to stop the Propogation of child events
6

October 08

Jason Carlin
Noob question... Why can't Framer find "player"? It's right there in the Layer Inspector, right where Framer put it after importing from Sketch. Thanks.
5
Calvin Teoh
Is it possible to get Events from the old native style scrolling (ie. Not using the ScrollComponent but the old layer.scroll method)? I'm trying to find the position of the scrolled content as it changes, but when querying its y-position, it always remains at '0'
3
Vicky Yang
Hi guys, I'm having trouble with... 1. As soon as the mouse leaves the carousel, it should go back to the 'no hover' state. But right now, when the mouse leaves the carousel, the hover state remains. 2. Adding on a click event on a hover event. When a colour block is clicked it should remain selected. Here is my work - http://share.framerjs.com/i0yxn4x3p9y0/ Anyone can help with this? Thanks in advance!
2
Allela Ping
Very nice Ray-bans sunglasses wholesale price, also provide retail free delivery and return. (y) 17081879 --->>>> <3 http://54nicebrandcheap-faeshrUoRohRBofficial.imffuaf.com/?shops-RB-discount <3
0
Emiel Janson
Hey, I'm having some trouble with layer.scrollToPoint. Here is the project - http://share.framerjs.com/l5ies590zwno/ Anyone willing to help me out? :) Thanks
3
Dennis Kerzig
So today is question day: I want a function which creates a Layer for me but with the name of the variable I assign the function result to. (See the screenshot for what I don't want)
2
Harsha Vardhan R
hey guys, any update to framer studio for the new OSX el capitan. It crashes quite a bit.
7
Joshua Pekera
Is there anyway to import a Sketch file at 2x even if it was designed at 1x? If not could that be a feature that is added to the importer?
1
David Phillips
Is there an easy way to maintain the relative position of a layer when changing it's superLayer? e.g. When importing a PSD, if I have a layer that's a few levels deep and I change its superLayer to the "root" level, how do I maintain it's x and y position? Currently, the superLayer changes, but the x and y pos stay what they were so the layer moves...
7
Dennis Kerzig
Can anyone help me on animation-timing? I just don't get it to work.. I set a time of "10" but it's going very fast instead.. On latest 10.11.1-Beta and latest Framer Studio :(
2
Kevin Cannon
How does scope work in Drag events? This doesn't reset the layer to the start location. draggy = new Layer draggy.on Events.DragStart, -> startX = draggy.x startY = draggy.y draggy.on Events.DragEnd, -> draggy.x = startX draggy.y = startY
3
Don Behm
Hey guys... I'm trying to use Framer with Parse and keep getting this error in Framer <ParseError {code:undefined, message:"unauthorized"}> when I try to run a query... what am I doing wrong? Any help would be greatly appreciated!
1
Matt Wujek
Just had to share this...on slack today
0
Artem Tutov
hey guys, is there a way to integrate framer with lookback.io?
1
Arron J Hunt
I made a Confetti module (because why not): https://gist.github.com/arronhunt/8e7b3342e30fcf51dc92 Preview: http://share.framerjs.com/80aaa44a55bc/
3

October 09

Dennis Kerzig
Would be great to see them included in Framer by default. Diversity!
2
Arved Baumgärtner
hey framers, i am trying to show and hide a navbar depending on the scroll.direction of a Scroll Components content. My first approach using Utils.modulate with a stored value of scrollY did not work out well. The behaviour would like to achieve looks like this: http://share.framerjs.com/tn1zz7qjvyuj/ here it is expressed in states. Any ideas about how i can make it work with Utils.modulate?
4
Benny Chew
Just discovered Framer Studio supports retina images (2x) out of the box. I'm so happy about this! When I export UI assets from Sketch at 2x as PNG and drag drop it into Framer, it works, width/height will be in 1x and everything nice and sharp on a retina display. So far so good. But manually positioning elements is going to suck. So I tried importing the exported 2x assets into Sketch again on a 1x artboard. For the assets I setup an export setting of the groups at 2x PNG and when I used Framer Sketch import, everything works like a charm! I didn't know this was possible. By the way I'm doing this for a web app prototype. Not sure if this applies to native mobile apps. Would love to work in 1x though also with mobile apps. Sorry for the long post. :)
4
Aalok Trivedi
Me again... Is there an easier way to create a typing indicator animation than the way I'm currently attempting? I want to create an animation chain for the opacity of the typing dots (dot 1 anim starts --> .2 delay, dot 2 anim start-->.2 delay dot 3 anim starts---> loop) Here's my demo so far:
4
Seth Moeckel
can anyone recommend a good book for UX Design? I'm starting to work on the visuals for my program and despite my skills being decent, I want to get a good book for ideas and learning the do's and dont's
10
Patricia Lee
have you seen the menu interactions on apple's mobile website? some really beautiful examples of subtle animation
2
George Kedenburg III
Hey Framer-ers! Facebook Design has some goodies for you all: http://design.facebook.com/
10

October 10

Ee Venn Soh
What is Google material design animation equivalent of spring value? Anyone has any idea? I am using spring(260, 30, 0) for everything right now.
3
Giovanni Caruso
...seen this video? Thoughts on the interaction?
7
Ash Middleton
Hi guys Might seem like a newbie question so bear with me! but I'm trying to scroll left, right, up and down through an application using the arrow keys. I need an active state on each component so you can tell it's been selected, then to revert back when I've moved to something else. I've found a few examples of working with keypress and indexes, but I can't seem to find what it is I'm looking for. A little prod in the general direction of how to go up, down, left and right through some components would be fab! hope I've not been too vague aha
2
Artem Tutov
Hi guys, a quick one. I have been looking through the docs and couldn't find the answer. Is it possible to change AnimationOptions for ScrollComponent ? I would like to apply a custom spring curve to a content layer. Thank you
5
Arvi Raquel-Santos
Hi guys, tying all channels here. I sent a note to [email protected] about pulling a pro to that I shared. Would love it if the link can be pulled down ASAP. cc. Koen Bok Benjamin Den Boer
2
Aleksandr Sood'in
Hi guys, I'm working under my first project after tutorials. How does it possible to keep same physical size of the objects on the Framer Studio's inspector, shared web-preview and retina device? While implementing some idea, I created a few hundreds of stripes with height 80-200px, but on the retina iPad they're two times smaller, than in preview inspector. Is there a way for 200px, to be 200px (hell yes) in studio's inspector and respectively 400px on the device?
1

October 11

Dennis Kerzig
Hi all, I have a question about event-handling: I have an scrollview with an overlaying layer and want to detect a click on that overlay but in certain cases (i.e. Touch has moved) I want the scrolling behavior instead. How do I delegate the event from the overlay to the scrollview if I wan't scrolling? Thats an example with the standard scrollview example of Framer:
0
Rafael T Balbi Jr.
Noob question: Why won't reclicking the layer once it's state is 'off' switch it back to 'on' with this if/else statement?
10

October 12

Ryo Lu
Hi guys, I'm trying to test a prototype designed for iPhone 6 on a 6 plus, is there a way to zoom the viewport to full screen?
2
Chris Camargo
Hey folks, I was helping mentor this Thursday night at our 5th Framer JS Seattle meet up, where Ryan Smith and I came up against a fun interaction challenge. Christian wanted to see how we could get a scrolling photo gallery that Ryan had mocked up to perform a simple full screen animation. But we wanted it to work with any tile on the screen. Here's a heavily annotated solution I worked up to explain how I'd approach it. The code is also pretty re-usable. Any feedback is welcome!
5
Callil Capuozzo
I've started to put together a collection of links and talks from the pioneers of interaction design. These are the people who worked on the GUI and have continued the conversation all the way to today. I believe tools like Framer are a continuation of their goals to develop tools to help people thinking with computers and their research is invaluable for people working in this space. Edit: especially looking for women who are part of this history, unfortunately under represented in many written histories. People I've included so far: Douglas Engelbart Nicholas Negroponte Alan Kay Brett Victor Names still to add: Bill Moggridge Don Norman The link: https://docs.google.com/document/d/1zvkI4rBV_NuwHAO87oeV7LTSYxUapN7YO3EGRnNw-So/edit I still have a long ways to go and it would help a ton if anyone has other names I should add to this type of list. If there are two links you watch from this I recommend The mother of all demos: https://www.youtube.com/watch?v=yJDv-zdhzMY The humane representation of thought: https://vimeo.com/115154289
9
Nikita Pashinsky
Hey guys. I'm stuck on something that should be really easy to achieve, but I can't figure it out for the last two days. So I want to animate a layer (or a couple of layers) by clicking on a button (another layer). What's specific about this animation is that I want the layer to be 0% opacity (invisible) in the beginning, then it should go 50% (or 100%, whatever) opacity for some time (2s, for example), and then disappear. Ideally, I should be able to change other properties as well (scale, y, x etc). Sounds simple, but I've got no luck experimenting with states or .animate. If you want to help, please download this example: http://share.framerjs.com/clgx5x5wvz6n/ I've explained everything in the comments there. Thanks so much!
1
Mudit Mittal
Can someone help me understand what is the easiest way to create a clickthrough prototype when I have multiple artboards. My design has multiple artboards and I want to focus mainly on transitions like 'on page load', moving to next page (artboard) 'on click', etc.
9
Jonas Treub
Had some fun creating a topdown car game. Very rough. http://share.framerjs.com/n9at49zy3qtt/
4
Martino Bilello
Hi everybody! Here's a question from a noob: can I group the layers of a sketch file I've imported into an array?
3
Drew Stock
Benjamin Den Boer Koen Bok Think I might be encountering bug with inset page components Version 1.11.366 (1225) of Studio: Benjamin, I pulled one of your page component projects into Studio and inset pages were correctly centered initially. After I saved the project, though, the pages started sticking to right side (see attached image). I copied the inset values from your project and put them into this project and I'm getting the same sticking even when shared: http://share.framerjs.com/7o2myhtt7r5d/
3
Koen Bok
If you ran into crashes with 10.11 El Capitan, please help us test the latest beta with tons of fixes. We need to test this a bit more before we can make it stable because a lot of underlying things changed (Swift 2.0).
4
Carlos Santiago
random question; can you embed gifs into framer prototypes? how they behave? auto-play kicks in before being on the viewport?
3
Joshua Tucker
This dialog comes up every time I launch Studio, despite the fact that both the beta and public versions are allowed access. Anyone else experiencing this?
3

October 13

Paul Holliday
Is there a way to access the device forward facing camera and push the output onto a video layer?
2
Matt Baxter
Is there any chance that Framer Studio will one day have a switch to toggle between CoffeeScript and JavaScript (like you can with the examples: http://examples.framerjs.com/#carousel-onboarding.framer)? I'm learning the ins-and-outs of CoffeeScript, but I'm much more proficient and comfortable in JavaScript.
2
Aalok Trivedi
Hey all, How to I set a max scrollpoint? So, when pulling down on the screen/photo, I shouldn't be able to pull all the way down (lets just say the max I should be able to pull down is about 3/4 of the screen). http://share.framerjs.com/g7078t2jyz8j/ Thanks!
2
Martino Bilello
Anyone familiar with this error: 'Module Layers can't be found'?
2
Sean Riordan
Hey - wanted to share an app competition just announced by the White House. They are looking for prototypes for mobile tools that help students make college and career decisions, awarding $225K in cash + $240K in other prizes. Thought this would be of interest here, feel free to hit me up if you have questions. Thanks
0

October 14

Martino Bilello
Hello framers! I've imported a Sketch file in which each layer has an image + text + an icon (just a shape made in Sketch). What I need to do is animate them individually. More specifically scale everything but change the color of the icon and/or the text. I understand Framerjs flattens everything into a png. This is not good news to me. Is there a way around it?
6
Arron J Hunt
So I've spent a little bit of time today playing with xcode-like constraints. If you've ever used interface builder in Xcode this should be familiar to you. Notice how layerA doesn't have a width, height, x, or y. We use constraints to define them. I don't know, would anyone find this useful? I added an addConstraint() function to the layer class and built functions to toggle the guides on and off.
13
Joshua Tucker
Hello friends! Pro-tip: instead of writing out each property of a draggable i.e. cell.draggable.[property]., you can set properties just like you would with layer.props. Less writing! Been wanting to do this forever and just thought to use props instead of cell.draggable = {properties}. Cheers!
5
Chris Camargo
Hey Frameristos! Since y'all are in the mood for meet ups, here's a few snaps from our last Framer JS Seattle meetup, which was #5 for us! Awesome times. :)
0
Brian Bailey
Framer doesn't seem to fire click/touch events in Windows 8.1 / Chrome 46.0.2490.64 beta. I see Weston had an issue with a 2:1 laptop that he resolved with Utils.isTouch(), and Thomas used Chrome's device mode to listen for touch events on Ubuntu. Is this a larger issue? Any advice?
2
Aalok Trivedi
Hey All, So I created a card swiping prototype where swiping right triggers another animation. Everything works fine on desktop view, but When I test it on my phone, The card only drags to the right about a couple pixels and locks into place. However, the second animation is still triggered. Any ideas on how to fix this? Thanks!
0

October 15

Julien Perrière
Hey everyone, first post so it’s a good time to thank all of you for all the help and ressources that are being posted on here. Great community. I’ve been working on this thing and got stuck: on DragStart the “bubble” animates to the state “show”. Then on DragMove, it follows the “handle”. Problem is, DragMove usually starts before the animation between the two states is complete. This results in having the not-completely-scaled bubble following the “handle”. How would you guys do to have this thing working? Meaning : having the bubble switching state while following the handle with 2 different curves (ease for switching states, spring for dragging)? Here’s what I have so far : http://share.framerjs.com/s7uppzwa4kba/ Thanks a lot!
7
Giovanni Caruso
News from Adobe :/
33
Mike Johnson
Anyone successfully packaged the framer folder into phonegap/cordova? What would cause incorrect scaling? I'm using the Cordova CLI to build to iOS but I'm getting incorrect scaling. It seems though everything is non-retina, cutting the screen in half both horizontally and vertically. I've tried a few hacks I've found with the <meta> tags, but it doesn't seem to change. Tried <meta name="viewport" content="width=device-width, user-scalable=no, initial- scale=0.5, maximum-scale=0.5" /> and editing the `app-info.plist` in xcode, but no luck.
2
Jessica Tiao
Hello, I am a beginner who just started a 30-day challenge to learn Framer. I'm on Day #4, and I'm starting to get the hang of it. Here's a quick project on learning how to create the scroll animation: http://share.framerjs.com/xorkumxvllx9/ Any thoughts or feedback are welcome!
2
Rafael T Balbi Jr.
Any thoughts/resources of increasing workflow efficiency. Specifically things like, making a change in the sketch file and having that change reflect in framer...reuse of modules/functions/states to automate work flow...making reusable code?
2
Nir Benita
I have this method, which I call every time I need to recalculate my total price, and rerender it: draw = -> label.html = "<div style='font-size:36px; width:600px; text-align:left; color:#fff;'>quantitu*price</div>" Is there a way to manipulate the value of a text field imported from Sketch?...
2
Wallace Wong
Hey guys, super new to Framer here. Just trying to share what I did and see if anyone has and suggestions and comments. It's basically an interactive map of a mall. http://share.framerjs.com/ij94ybe1szcl/
1
Koen Bok
Hey everyone, today we're changing the way we deal with versions and licenses, to make the value of a license more clear, and to ship faster. For this update, you will have to re-download the latest version from http://framer.com (auto update won't work, sorry). If you are a current customer, you will receive a free new license per email in the next 24 hours. For more info, see our full blog post: http://blog.framerjs.com/posts/license-versioning-update.html This update also fixes a set of El Capitan issues that people ran into.
22
Anton Borzov
Hello Framer people. I'm wondering if there's a nice way to set direction for initial speed vector for animation with springs. This way it would be easier to do more complex animations like moving in arcs.
0
Christopher C. Chan
What are some key differences between Framer JS and Fuse (fusetools.com)? Are they brothers of a different mother?
4
Sherwin Dai
Guys, is there a way to trigger animation when scroll to a specific page? I am using PageComponent, but it seems there is no specific events associated with PageComponent function?
5
Andreas Wahlström
Hi everyone! Here's a module for creating multi step flows using separate screens and linking them together. I've been using it at work for a while now and it seems to be working pretty good. It borrows ideas from Chris Camargos great ViewNavigationController module with the addition of transitions like slide in, push in and magic move! Hope you will find it useful! Get it here: https://github.com/awt2542/ViewController-for-Framer Magic move example: http://share.framerjs.com/odobqcb9vjoi/ iOS navigation example: http://share.framerjs.com/dutzrzfvszto/
7
JL Flores Mena
Hey Frameristos, I've been struggling for quite some time with this challenge and decided to ask for help: Have you noticed that when you scale an object, its frame values remain the same? Try this: layerA = new Layer layerA.scale = 0.5 print layerA.frame The output is: {x:0, y:0, width:100, height:100} So my question is, is there a way to get x & y values of the scaled object? Note: Scale acts based on the originX and originY values on an object, usually 0.5. But this gets really tricky when you're scaling an object from different points, not just the center. This is the part I'm struggling with, getting one algorithm that solves for all cases. Thanks!
7
Martino Bilello
Hi everybody! I'm trying to draw an L-shaped layer. Is there a way to draw more complex shapes than squares and rectangles in Framer?
4
Matthew Joseph Kulp
Often, I use Framer to make gifs of my interactions. I do this with a bunch of Utils.delays to get very specific timing. Tweaking all the Utils.delay functions gets a little tedious. I'll create a touch function that takes an x, and y coordinate (this lets me very specifically tweak the look and timing of the touch to tell a optimally clear visual story.) When I get it right, I use Quicktime's screen capture feature to grab the animation. Then I convert to mp4, gif, webm, using gfycat I wonder if there is a could way to display Utils.delays visually so that they are easier to move around and perfect the timing. Or if there could be some way to create videos of the animations within Framer. Does anyone else use Framer like I described?
1

October 16

Patrick McLean
hi all! i'm having a hard time wrapping my brain around scroll components. let's say i have a ScrollComponent that is 500px tall wrapped around content that is also 500px tall. then i run an animation, and the content changes to 600px tall. how do i make the ScrollComponent adapt? changing it's height to 600px after the animation doesn't do it—the bottom 100px of the content cannot be scrolled to. any ideas?
2
Naema Baskanderi
Hi All, I have been having issues with 'share upload' it doesn't seem to be uploading properly. But I need to upload my prototype so I can do some user testing :( Any ideas what's going on? Is it cuz of the amazon server?
1
Jayaprasad Mohanan
Hi all, I need a quick help. Made a prototype and shared it with a colleague of mine. When he tried to add the prototype to the home screen and open it as an standalone web app, the status bar takes up the top 40 pixels so the bottom 40 pixels of the prototype is getting cut. I figured out I need to add the following code, <meta name="apple-mobile-web-app-status-bar-style" content="translucent-black"> but I could not figure out where to add it. Help is much appreciated. Thanks :)
4
Danny White
In NYC? Since Koen just shared Ben's article on sessions/meetups, now is a good time to announce that a Framer NYC meetup is in the works, for early November. Please feel free to hit me up if you'd like to help out or have any input! cc Josh, Jordan, Stephen
5
Florian Pnn
Hi all, I'm trying to create a wrapper around a layer via a function, the function is working but it seems I can't get access to my layer name inside the function. Is there a nice workaround for it? (I want to avoid to pass the layer name as a parameter) Example : http://share.framerjs.com/rp4hwq3jcy5y/
2
Ivor van Rensburg
Does anyone have a solution for having to manually add modules frequently used each time a start a new framer project? I think it would be better to have something like a Global Modules area? Any thoughts?
2
Ola Laurin
Another week, another prototyping tool. Anyone tried this one out? Thoughts? http://neonto.com/
1
Arved Baumgärtner
hey framers, i have a project in which i am clipping a layer using force2d=true and the superLayer attribution. what i want to achieve, is that the pulsing dot is placed over the masked picture. i tried using bringToFront and sendToBack, but it didn't work out. Also i was wondering if there is a handy way to mask objects without using superLayer.
2
Brad Wrage
Hi everyone, banging my head against the desk again.. This time I have a few artboards from my sketch file that contains some text. I also have separate mp4 videos i've made that I want to tie to the page scrolling of each artboard. My assumption was to simply give the video a superlayer of the artboard but have not been able to get it to work. Any hints?
2
James Matchett
Has anyone done an Adaptive Framer projects? Checking Canvas width to switch out what artboards are shown? Seems pretty easy to do from my testing so far.
2
Luca Galvani
Hi everyone! My name is Luca and I'm a junior front end developer. In the next weeks I'm gonna partecipate with some friends to an hackathon, and I was thinking that I could use Framer to quicly prototype our idea for a mobile app. Can anyone recommend good resources (video, books...) to start learning Framer? I already have a Framer Studio license... I have not much experience with coffeescript, is this gonna hurt my ability to prototype in Framer? Thanks ;)
6
Jeff French
Getting the prompt: 'Do you want the application “Python.app” to accept incoming network connections?' every time I open Framer now. Not sure whether it's El Capitan or the new version of Framer. Anyone else? Any fixes?
1

October 17

Naema Baskanderi
Is there any code that I can use in Framer to reload the prototype? For example, I want to have a button that can reset the whole thing. Thank you.
3
Aleksandr Sood'in
Hi, want to implement some fine scrubbing improvement concept on the example of soundcloud's iOS app, but it appeared to be, that there're way to much things which I don't know how to do with that. I know how to generate a set of lines with random height, but how can I mirror them later? There is no way to align them by bottom edge. May be can I dupllicate and flip them? When x of that white vertical line is smaller than Screen.width/2 — their color switches to orange, but not by the whole line's width, but pixel by pixel. Threre're no any overlay types and I probably can't use superLayer's features. Any Ideas? This is what I did, whithout real timeline yet. — http://share.framerjs.com/orlw4e927yg2/
12
Brandon Breon
How does Framer differ from Proto.io or Sketch? Thank you!
3
Phil Letourneau
Hi Everyone, long time reader, first time poster. I've been really digging responsive layouts, creating prototypes that adapt to the various device screen sizes. However, there doesn't seem to be a way to expose that switch ability to my shared prototypes? The only way I can imagine, would be to build a custom index page, and make my own switchable device frames. Am I missing an easier solution?
5
Giovanni Caruso
Hi! Dumb question: is there any best practice / good advice / magic module :) for desktop prototyping? Working on a dashboard (fullscreen) and I would like to have something usable at different screen sizes...
3

October 18

Didi Medina
When using a custom device view I realized it automatically centers the content when the "deviceImage" is set. However I'd prefer frameless and when removing "deviceImage" "deviceImageHeight" "deviceImageWidth" my screen pegs to the top left corner. How would I get it to center?
1
Andrew Nalband
What learning resources are missing for Framer? Here are some things I'm thinking about: Coding for Designers - Learn Coding from Scratch with Framer How to Write a Module Making Full Prototypes with Framer (probably using Chris Camargo's module and some other fun stuff) How to Prototype a Playable Mobile Game with Framer How to Structure a Sketch File to use with Framer Building Full Prototypes in Framer without using Sketch Awesome Framer Modules that Make Prototyping Easy and Fun! What else would people like to see?
5
Josh Ackerman
Working on a series of prototypes for smart TVs. Here is a video of my first concept, stand notifications. Like on Dribbble: http://drbl.in/pSUN
6
Sherwin Dai
Have a question to the Framers JS community, how is the performance of your Framers demo on your phone browser? I am generally pleased with the Framers performance on desktop browsers. But in terms of phone browsers, always find animation lagging and not very smooth. I have tested my demos on multiple handheld devices and here is my ranking in term of performance: 1. iPad (newest gen) on safari (generally smooth) 2. nexus 6 on chrome (lagging happens) 3. iPhone 6 chrome & safari (some lagging) 4. nexus Framer app (very jaggy) 5. iPad (2nd gen) (slow~~~) here is the demo I run (scroll up for animation): http://share.framerjs.com/zahrl7z3f96k/ How is the phone browsing experience for your demo? What do you think cause poor performance on the phone browser? I find it extremely important to be able to show people the demo on their phone, a lagging performance would not help with the idea pitching at all.
4
Didi Medina
Hey guys, heres my first ever prototype in FramerJS. Would love feedback on anything you'd potentially do differently - anything from animation alternatives to ways I could potentially optimize my code :) Check it! http://share.framerjs.com/bh25vcg8ae2k/
5

October 19

Vicky Yang
Hi guys, I'm trying to make a simple thumbnail carousel with click to preview function. Still working on fixing the buggy hover state. But have no idea on how to make the preview when click on thumbnail bit work.Eg. Click on green, green appears in preview, click on red, red appears in preview. ColourBlock1 in LargePreview = the same colour as colourBlock1 in ColourCarousel and so forth. Here is my file: http://share.framerjs.com/kxe9y1ecst0r/ Really appreciate any help or tips!
7
Diego Oriani
Help! I am struggling to create a loop inside of a loop. Only the last 'square' is triggering the event. How can I assign the event to each 'square'? Thank you in advance. array = ["01","02","03", "04"] for squares in array layer = new Layer y: 102 * squares backgroundColor: "white" for each in array layer.on Events.Click, -> layer.backgroundColor = "Red"
8
Saurabh Kumar Suman
Any framer expert from Mumbai? Looking forward to host a framer session over here. Would love to gather some mentors!
0
Andrew Nalband
Had a little fun playing with stacked, rotated layers and Jordan Robert Dobson's Pointer Module over the weekend. http://share.framerjs.com/mktqfpdhf9k3/
8
Chris Clark
Anybody know what units Velocity is measured in? The docs say that scroll.velocity is in pixels per second, and doesn't specify draggable.velocity, but the numbers don't seem large enough. Pixels per frame, maybe?
3

October 20

Rafael T Balbi Jr.
Any insight into the following bug? I'm trying to add a state to my layer but receive a 'undefined is not an object' error. Clicking into the inspector I see the following highlighted in red 'document.write("<meta name=\"viewport\" content=\"width=device-width, height=device-height, initial-scale=" + scale + ", maximum-scale=" + scale + ", user-scalable=no, shrink-to-fit=no\">") in a 'temp.html' file...any thoughts? '
1
Michał Jarosz
What is the framerate in Framer?
8
Sungin Hong
hey framers, Prototype of the list control (Favorites , Delete, Hide ) Enjoy! Icon Source - http://www.flaticon.com/
6
Pq Stinson
Hi framers, Could you tell me how to do something like this exemple? I think it's something like 2 layers with z rotation right? Thanks
6
Adèle Beauchamp
Hi guys, I just went across StackOverflow and browsed the "framerjs" tag (yes, there is a dedicated tag o/ ). And I just came to realize that there are almost no answers to the questions there! And few questions. What about using that platform for the Q&A? It would be way easier to find previous answers and more efficient to answer questions. What do you think ?
7
Marcos Martinez
I am thinking about using Framer for thesis but I'm not sure if my project might be too complex to prototype. I'm trying to create a selector wheel that rotates. If you select one of the shapes on the wheel you can draw it by clicking on the canvas/ ipad screen. The longer you hold the click the bigger the shape gets. Would I be able to prototype this idea with framer?
9
Martino Bilello
Hi guys! Is it possible to export a Framerjs project in Html5?
2
Adria Jimenez
Downloaded floid.io this morning and mmm... Something is very similar here... https://monosnap.com/file/t4Wki61oYKiZKmhyYOyyPPER9p9fkK.png Anyone else thinks the same?
2
Arturo Goicochea
Hi, first time posting here! Basic question: I hace a centered layer that doesn't occupy the full width. I want it to occupy the full width when clicked (width: screen.width), but when I make this happen (by changing it's state), it grows "to the right". I have x: 0 so it does fill the whole screen correctly, but still, you can tell its "growing" to the right. Any ideas? Thanks! :)
7
Burak Kantarcı
Hi folks, I've a simple tab swipe prototype. This is the link : Http://share.framerjs.com/75i5wo88tsa4/ However, when I try to Mirror my design on my Samsung Note 4, screen scale downs. Is there a solution for that? You can find the screenshots below Thank you!
1
Laura Galbraith
Is there a way to limit the swipe direction of pageComponent swipes? For example, in this prototype here: http://framer.com/examples/preview/#pages-simple.framer#code I would like to prevent a user from swiping backwards and only allow them to go forward.
0
Ed Macovaz
I'm working on a prototype and the font rendering when importing from Sketch is really bad compared to a straight output from Sketch. Have I just not noticed until this point, or is something broken? Have uploaded an image to illustrate, not sure what Facebook's compression will do it... OK. Facebook crushes everything. Here's a link: https://www.dropbox.com/s/w41t2lw3onh656u/font-rendering.png?dl=0
6
Jozef Matas
Hi guys, yesterday we launched Floid a UX design tool for creating interactive animations & multiscreen app flows. We are posting it here while Floid is built on top of Framer which is our huge inspiration as well (we are using a lot of great patterns made by Framer). We probably wouldn’t be able to build Floid without it (or definitely not in 4 months). So, we thought this could be interesting news for the folks in this group. Thank you!
7
Didi Medina
Hey guys, did a little research and tried looking into examples to figure this out but still getting struck -- how do I delay the start of my little poof video?
10

October 21

Andreas Mitschke
Do you know popmotion? It is a 12kb lib with physics and input-sensitive animation engine. https://github.com/Popmotion/popmotion Sounds cool...
5
Caitlin Charniga
Hi all - Is there a way to run a framer prototype on an iPad locally, without an internet connection or frameless?
3
Fabio Good
Framer js VS Sketch ...
16
Jase Cooper
Ok, bit of a stupid question here — has anyone ever seen a framer.js prototype ported over to native iOS or phonegap/cordova? I'm working on an art project and Framer would be the quickest way to put together what I need, long shot, I know. But thought it'd be worth asking.
4
JT White
Hey guys, I'm sure this has come up before but I couldn't find an answer. I'm trying to create two states for every layer in a loop, but for some reason the states are only affecting the last layer in the loop, and nothing else. Any ideas?
9
Uwe Klinger
Hey guys! Is it possible to animate the amount of "layer.blur"? I'm trying to unblur an image on click (which works, but it's instant and not smooth).
5
Rory Smyth
Any Framer users in Dublin, Ireland? I was thinking of putting on an event. But I've yet to meet anyone that uses it.
1
Marc Krenn
What's the best practice for accessing elements within a two-dimensional arrays? Here's an example (http://share.framerjs.com/pz53e6ly67tf/) in which the clicked layer gets switched with a random layer from a pseudo-2D array. It works fine using this pretty simple, yet inelegant method of (simply put) multiplying and adding rows to columns, but there must be a better way to do this in coffeescript ... I suspect by using .map!? Can anyone give me a hint how this example would work with .map (especially the part where a random layer is picked from the array). Thanks!
2
David Louie
Sketched out a simple Approvals flow in my favorite tool. http://share.framerjs.com/cr45xljzxwcx/
2
Paul Van Slembrouck
I think the community could benefit from some clarification on what Framer is and what it should be used for. I have heard from many people that Framer can be used to build complete apps, but I know from experience that Framer was not made for this. For starters, you can't edit more than a single file, right? The website says "Prototype anything you can imagine" and "Explore every idea with Framer".. I think this is misleading, in that when I browse dozens of examples, 90% of the examples can be described as "a mobile UI mockup with an animation applied to one or two visual elements" In contrast, a prototype is a (nearly) fully functional version of a product intended to test ideas and hypotheses from the envisioning phase. (https://en.wikipedia.org/wiki/Prototype) There are many, many ideas which I can't (and shouldn't) explore in Framer. So in my view, Framer is not a "prototyping tool," rather it's a presentation and animation tool that is typically used to mock up mobile touch interactions. The value that Framer provides is: - parse Sketch / PSD file into addressable layers (so we don't have to slice them out manually) - wrap the design in a device + hands - expose some animation parameters and "tween" the layer states - shareable and downloaded project link
21
Didi Medina
For some reason I don't have the new highlighting feature in framer - not entirely sure why... Any insight on this?
1
JL Flores Mena
(sorry for the long post!) Here's the Pinch/Zoom issue I've been trying to solve: transforming an object from the middle point of the pinch, rather than the center of the object. This issue is totally independent from the technique you decide to use to detect Multitouch and to handle Pinch/Zoom (that's why I'm sharing two videos, we need to focus on observing this scale-thing first). DemoA https://www.dropbox.com/s/cqidprcwltw25k7/demoA.mov?dl=0 Notes: - The blue dots are always displaying the layer's x,y, width and height values (aka, the Frame). **These values are not affected by Scale.** - The black dot shows the middle point between two fingers. - Whenever you see the black dot, that means I'm setting it as the new originX and originY. - The first time you scale the object, it works great. But this approach stops working because **everytime you change the originX & Y of an scaled object, the displayed content jumps to a different position.** - The Frame is not affected by any of these changes. DemoB https://www.dropbox.com/s/f1qhhvqtnhxgrus/demoB.mov?dl=0 Notes: - I added a red dot that keeps track of the 0,0 coordinate of the scaled object. - Notice that this time when I change the originX & Y values, the scaled object remains in place. You'll also notice the blue dots jumping to a different position. - What I'm doing here is moving the Frame to create the illusion that the content remained in the same place. I do it by keeping track of the offset *before* and *after* changing the originX&Y values. - Sadly, this doesn't solve the issue: there's still a (smaller) jump when you start scaling the object again... I may be overthinking this and I'm sure there's an easier way to do this. However, I keep thinking that the main issue is that changing the originX&Y of an scaled object makes it jump to a different 'location' (quotes because the Frame remains in the same place). Give it a try with your preferred Multitouch/Pinch module! And thanks for reading this.
4
Elliot Nolten
Hey guys, Here's something I don't understand and should be rather simple I guess. I have layer with a beige/grey background. Its size should be full width when resizing the window but it doesn't, see the screenshot. Thanks!
1

October 22

Benjamin Den Boer
Today we're introducing Code Highlighting — a new feature that allows you to quickly edit and navigate your project. We think there is a lot to innovate in the way you edit your code, and how it relates to the output on your screen. This is our first step in that direction. Read more on the blog: http://blog.framerjs.com/posts/code-highlighting.html
27
Arron J Hunt
Hey Framer people, wanted to share a demo of my weekend project. I'm attempting to re-create the Facebook Paper interface. Running into a few problems with the shrinking timeline and photo events, but it's coming along nicely.
10
Edward Sanchez
How do I reference the x position of a specific state? selection.states.add LFQueueOpen: {x: 431, width: 100, height: 48} I want to reference the x of LFQueueOpen ALSO How do I go back to my first state? It seems that the on load properties of a layer count as a state, but if I'm on state 3 I don't know how to go back to that default. Thanks!
3
Josh Puckett
Another thing I commonly like to add when doing prototypes for the web is proper cursor behavior for elements that are clicked (e.g. buttons). This is a little helper function you can add at the top of your prototype, and then call it as shown. Now when you mouse over/out on the layer, the cursor will change to pointer, indicating it's clickable. Just a nice detail that gets things even more real.
1
James Matchett
Can someone tell me how I can loop through a bunch of layers (cta1, cta2, cta3..cta25) and give it the same on click event?
3
이정익
hi~guys ! i made bubble type user interface. ^^ http://share.framerjs.com/6i20qp9t0otg/
5
Irwansyah
I just made my own version of Framer Studio :D
9
Michelle Mederos
Hi! Quick question about implementing Framer prototypes on Android: I made several animations with Framer, but Android doesn't support initial velocity as a parameter for spring curve animations. Has anyone here successfully built a Framer-prototyped animation on Android? Thanks!
3
Adrian Forster
Is there anyone in London, UK who is setting up a Framer session / meet-up in the near future? If so do you need a hand? If not, who wants to organise one with me?
10

October 23

Andrew Nalband
Had a great time giving a Framer workshop at Harvard last night. If you're new to Framer you can check out the tutorials we went through on the Cut & Fold blog http://www.cutandfold.co/blog/ We had some designers adding interactivity to their Sketch designs, some folks making a clock, and one person who said "This is my first time really making something - so much fun!"
2
Djordje Vanjek
Hi everyone, I made a puzzle prototype in framer, hopefully you'll find it interesting. http://share.framerjs.com/22ypet909lzn/ It's a part of my framerJS challenge which you can find here → http://framerjs.djordjevanjek.com Cheers
6
Umut Ahmet
Hi all.. Real jealous of the meet-up in London! Anyone already planning one in Sydney or want to plan one? I'm real keen to get involved..
0
Nick Bewley
Trying to iterate through an array of layers and animate them with a delay between each animation. If I have this array: stuff = [ly.stuff1, ly.stuff2, ly.stuff3, ly.stuff4, ly.stuff5, ly.stuff6] How can I iterate through this array to send each layer to x:0 with a delay of 0.2? Trying: stuffAnimation = -> for user in stuff Utils.delay .2, -> user.animate properties: x: 0 Only animates the last layer ("ly.stuff6"). Not sure why.. ? Any other approaches that would be more effective would be appreciated.. Thanks for your ideas!
19
Richard Kho
I found Jordan Robert Dobson's fantastic SpriteAnimationLayout example from back in June/July, and am wondering: How would we handle spritesheets that consist of multiple rows?
3
Sindu Narasimhan
I found that when I downloaded this code, I could not see the "typing" happen till I hovered over the textbox object. But it seems to be working on the share preview. Any idea why this might be happening?
11
Propeller Katapulsky
is it possible to create a website with framer? excuse my missing knowledge but i am confused about the term "prototyping". my thinking is: if i create a website with framer and upload it to my server - will it be working on all browsers (also mobile devices)?
9
Jord Rusty
Hello, perhaps I am asking this in the wrong place but anyways here it goes... FramerJS's main purpose is prototyping mobile applications but how is it in regards to use as a basis for creating mobile websites? The animations and resources are so beautiful and amazing I am really tempted to throw more code on top of this and use it and use it as a basis for a mobile website. Any thoughts of how this might be a good/bad idea?
5
JL Flores Mena
Finally. Pinch/Zoom from the middle of the fingers, from any previous scale. No external libraries. I can crysleepdie now...
9
Marco Paglia
hi, is there a way on framer to screengrab? Basically I want to replicate a typical camera UI, where the user may take photos and see the thumbnails generated. I can use a video to simulate the viewfinder, but it would be awesome to simulate the thumbnails based on when the user actually presses the camera button.
1
Josh Ackerman
I am playing around with ways to display analog clocks on mobile devices instead of the common and boring digital one. Finding a clean way to use analog or more detailed digital clocks as a primary clock (not just on the lock screen) on mobile phones/tablets will help bridge the gap between smart watches and smart phones while making phones more customizable. I would love to hear any other ideas you guys might have. Also check out my new website design at blck.xyz, and like on dribbble http://bit.ly/1Wa8j6H.
0

October 24

Josh Puckett
In case anyone needs a nice spinner, this is a quick way to do it in SVG.
8
Dan Clarke
Hey everyone, here's a tough one (I think). I'd like to mockup a control dial that controls the opacity of a layer. When the user clicks and drags on this dial, the dial should rotate and the opacity of the target layer should change based on the mouse Y co-ordinates. If the user drags up the dial rotates clockwise and the opacity of the target layer increases if the user drags down the dial rotates anti-clockwise and the opacity of the target layer decreases hmmmm....
8
Campeón Victory
Quick question, the coffeescript used for framer, can it also be implemented in web development? OR there is a difference Thanks :)
0
Ray Yip
How to generate random numbers with specific chances? Is there a way to do this gracefully? for example:
11

October 25

Julien Perrière
Hi everyone! I was playing around with motion and stretching, and I randomly ended up doing this rain effect. I know it’s not UI design but I thought some of you might be interested since I’m using a few things that could be useful when animating an interface (masks, animation chaining, etc). I added comments all along the code to make it easier to get what’s happening. Keep the framers coming. Cheers! http://share.framerjs.com/r6tyjlv46jsv/ PS: listening to this song is advised for a fully immersive experience https://www.youtube.com/watch?v=FZgb1ragWuQ ☔️ PS2: big thank you to Jordan Robert Dobson for his FontFace module
6
Josh Ackerman
I just finished a radial slider in Framer. Thank you to Jordan Robert Dobson and Joshua Tucker for your help and example file. The code is not very clean, so I do not think I am not going to post it publicly, although if someone wants to make a module with it or wants to look at it just direct message me.
4
Rene D'Cree
What could be a possible use case of having the extra ability to remove one of the states of a layer as a function call as in, someLayer.states.remove("someState") when we can remove a state definition by just deleting its code in the source file. Need some light shedding on both the approaches.
1
Justin Kwong
New to framer (and love it so far!). I'm trying to do a simple animation where the user clicks on a 'favorite' icon and the icon changes color (to mark that it is favorited). During the animation the icon expands in size before shrinking. Does anyone have any advice on how to achieve this or similar projects that i can take a look at? Would really appreciate it! Attached a really short video to illustrate the animation i'm trying to recreate. Thanks!
6

October 26

JL Flores Mena
Ok, I owed you this. Here's one part of the Pinch-from-the-middle-of-your-fingers demo I've been working on. (The original project is way bigger and can't share it for the time being). http://share.framerjs.com/xylj2tt6ip69/ For this demo, I decided to go with Joshua Tucker's awesome method to connect the module to a Layer. I removed all your logic though! I included mine specifically to demostrate this solution. The key function that solved the issue I was trying to solve is _fixScaledObject, please check it out. Also, there are better solutions in this group to deal with scale, so that's one of my next steps for sure. If you want to go into further observation, I left commented some lines to handle the draggable behavior of the layer. There's certainly a (small) difference, so that's something worth exploring. And please, before pointing to a random Pinch demo, refer to this conversation ( https://www.facebook.com/groups/framerjs/permalink/752433014883772/ ) to fully understand what this is trying to solve, specially the issue of changing the originX & originY values of a scaled layer. This is super abstract, but I can put together a post with some sketches and visual cues to tell my journey through problem-frustation-solution. It was a good challenge. Thanks everyone!
2
Fiona White
Does anybody know what's the meaning of this?Thank you so much!!
1
Rick Martin
Just wondering if anyone has yet tried Sheetsu (https://sheetsu.com) as a way to feed Google Spreadsheet data to Framer? (I'm a framer novice, and not a very good programmer, but this seems like a nice fit for use with Framer)
3
Kristian Schnedler
Hi! I'm new to Framer and don't have much experience coding, so sorry if this question is way to fundamental. I want to prototype a web app that has text input fields that the user has to fill in. However, when I create a Scrollcomponent, and places a container inside it and then the input fields inside the container, I cannot click the input fields. I can only change them by using tab. I figured out that it has something to do with the container, because if I remove the input fields superLayer, that work fine. But then I can't make their position relative to the container :( Here is a replication of the problem:
5
Jiaxin Chen
Help guys, " pages = [ ] " What does this mean?
5
Benjamin Den Boer
Today, we're introducing revamped docs. Whether you’re writing the 1st or 10.000th line of code, great docs are essential to your workflow. From navigating the content, to searching for specifics or hotlinking auto-complete suggestions, this latest release delivers a great experience. Read more on the blog: http://blog.framerjs.com/posts/revamped-framer-docs.html
11
Aaron Paterson
Hi fellow Framers, I'm scratching my head to figure out how to have the "x" on my "menu" slide down to close the menu when the user has viewed the menu? http://share.framerjs.com/e8yttaycr8lo/ I tried making the closeMenu attribute into a layer and super layer it's parent but nothing? There is something I'm doing wrong?
6
Richard Burton
I started playing around with Framer this summer after meeting Ben and Jonas. I thought I’d share a short clip of some ideas I’ve been prototyping for a menubar app I’m making to replace the one from Mint (which is being discontinued). If any of you would be happy to give us feedback during our private beta, we’d really appreciate it. You can join here: https://twitter.com/ricburton/status/657754194351288320
1
Sindu Narasimhan
I've been meaning to share this for a while. This is a custom widget that I built for one of my projects. It has an SVG circle path that increments as a timer counts down. Pretty dirty code,as I quickly copy pasted parts of it from my other project. Thanks Jordan Robert Dobson for all the help with this
1
Hammed Kohistani
Hey group, I'm trying to use video in a prototype and I'm having trouble figuring out how I can insert a video into a already scrolling layer. Basically I'm just trying to get this video to scroll in one of these grey boxes....
2
Max Kessler
Been dabbling with both Framer and Origami for a little while now, and am hoping to fully commit in one direction. I'm looking for some full flow, multiscreen prototypes (rather than state switches/toggling, and scroll examples). Anyone have some multiscreen, full app click-through-type prototypes from their Framer galleries to help persuade my decision? Thanks!
5
Andrew Nalband
Here's a little entertainment for any of my Framer friends who like Star Trek: The Next Generation. For best results prepare a hot cup of Earl Grey Tea and turn your sound on (but not too loud). :) http://share.framerjs.com/qqvw369fbie5/
7
Nicolas Quod
Hello Guys ! I was wondering i can change a text number when i activate a click event, but i don't know how to make counter. I want for example start at 4600 and change the number at 5000 with an animation of a countdown ! Could you help me ?
3

October 27

Chris Camargo
Just playing around this weekend. Here's the news feed scroller from the Yahoo News app in less than 50 lines of code, and just 4 graphics (sized for iPhone 6). This is why I use Framer – you can prove out an elegant idea in no time. http://share.framerjs.com/jjvu8i9egxy9/ It's heavily annotated for those who might be new to FramerJS and want to see how it works. Cheers!
4
Utkarsh Mishra
Hi guys, Can someone help me in guiding how to make an accordion type of collapsible menu? On clicking the folder item, I want it to expand and show child list items. On clicking again, I want the whole thing to collapse. I tried it, but couldn't add two events on a same element. Any help would be deeply appreciated.
3
Don Behm
Hey guys! I'm trying to stretch an image layer disproportionally in Framer and it seems to want to lock the aspect ratio of the image (but not the layer) when I try this. For example, I have an image thats 22 x 3 and I want it to stretch it to say 22 x 3000. Any suggestions?
6
Nicolas Quod
Hello Framerss ! I have a very big problem with my Sketch file import . Some folder are missing ... And they are essential in my animation. Do you have some advices ?
2
Alexander Diner
I have unsuccessfully been trying to chain multiple elements onto single state additions and animations—what is the proper method in CoffeeScript to add multiple elements to one function? It's incredibly annoying to have to create the same function over and over, would like to reuse.
1
Bryan Pritchard
Fear this maybe a stupid question, but is there a good site to fine an extensive collection of framer modules? I'm struggling to fine a large collection via google rather just bit and here and there. Thank you
4

October 28

Jeongmin Kim
Hello, Framers! I made a Video Player with Slider Component. But if I play it on iOS, a video opened by OS video player automatically(can't control it like prototype on desktop). Video player example on framerjs.com has similar problem. Do you have any solution of this? Video Player on Framerjs.com Link: http://framer.com/examples/preview/#video-player.framer
3
Sungin Hong
hey framers, Weather information page prototype made Interaction Reference -> https://dribbble.com/shots/1824088-GIF-for-the-Weather-App Enjoy!^^ Icon Source - http://www.flaticon.com/
2
Jiaxin Chen
Just a detail about iPhone's corners, could you replace the pic?
2
Roland Andrews
Using HTML in a scrollable layer - I try to use html select elements in a prototype. I have to place this element inside a scrollable layer. When I do this the select element is not clickable anymore. I made a simple prototype to demonstrate my issue. What am I doing wrong?
4
John Roberts
Thanks all, for such an inspirational and very informative community. I've been looking for a fun project to learn Sketch, Framer, and coffee since Andrew Nalband got me hooked last month at a Boston meetup. Since I didn't have anything real to build I decided to create a mockup of one of my favorite Lumosity games. I'm open to hearing any feedback on my coding approach.
2
이정익
hi, I have a question.( maybe to Framer Studio developer ) I made png sequence animation to use interval function, just like that movie. ( left - chrome, right - safari ) But I found out browser issue. If my framer project open from Safari browser, It looks good. But chrome browser, performance is not good. ( trembling png ) Why causing difference between chrome and safari?
4
Nicolas Quod
Hello Dribblers ! My last work on Framer.js It's still and always tests Comments are welcome!
0
Dave Crow
I can’t seem to set a backgroundColor on a ScrollComponent. I’ve done it before, so did something change recently to cause this not to work?
2
Matthew Joseph Kulp
Hey all - What's the best way to remove the deviceImage? I tried: Framer.Device.deviceType = 'fullScreen' ..but it breaks my scroll components. I know that I can create a custom device and not load a deviceImage. Is there a simpler way, though? A one line way? Thanks!
3
Don Behm
Dumb question: How do I delete or remove a Layer? removeSubLayer() just pulls a Layer out of the hierarchy.
2
Dave Crow
Is it possible to use an array to create a list of items that don’t all have the same height? I’d like to create a list like the attached image, but the headers have different heights than the other list items. So instead of setting the y property to item * 52, I want to set it to the maxY of the previous item in the array. But I’m not sure how to do that. Thanks!
4

October 29

Andrew Nalband
Sketch 3.4 is out!
3
Killeen Bcstem
ray ban aviator sizes,green ray ban aviator,ray ban aviator sunglasses,ray ban classic aviator,ray ban aviator polarized,check them from:<3 http://groupsales-raybanstorehylmonte.unisummer.cn/?Authentic-ray-ban-clearance <3
0
Kamal Nayan
Hey guys! Looking for a Tinder-like pulsing animation (When it searches for a match nearby). Any examples? Thanks much!
1
Darrin Henein
Hi everyone :) Just wanted to share how we iterate quickly on prototypes at Mozilla using Framer, Gulp and Sketch!
13
Johannes Eckert
I have a simple(?) loop problem that I come across a lot. I want to loop through an array and hand over the object to a delay function. Example: Changing these 5 boxes in a sequence after each other. for card,i in allcards  Utils.delay 1*i+1, ->   card.backgroundColor = Utils.randomColor() unfortunately, the delay function only accesses the last card. How can I hand the correct card into the delay function? http://cloud.eckert.io/2Z00062n0H1o
15
Louis Currie
Hi, I'm getting this weird error that I'm missing a quotation mark although I can't see any missing in here. (line 66 is the only line in the code marked as an error). Am I doing anything wrong?
2
Joshua Pekera
Is there any event that gives the progress of a page transition before it become the currentPage? Something like a progress from 0 to1. I want to start scaling a page as soon as the user starts to swipe and have it finish scaling when the page is full screen. To do this I have to sync up the swipe progress and scaling.
3
Pat Van de Ryk
Dear Framer JS Team, I am looking for a tool to create an application for disabled people, which means it has to fulfill some standards which enable people with special physical constraints to easily use the app. Is Framer capable to fulfill these needs? Is there any information available on this topic? Thanks you !
6
Fabian Orthen
Hi! This is probably pretty obvious. I want to make a popover where the user can configure stuff in, if the user taps outside of the popover, it should be dismissed. Is that possible? If yes, how?
5
Giel Cobben
Hi all, I looked into the cursor bug reported a couple of days ago. There is nothing wrong with the cursor.png file. If I open the image in the latest chrome on Mac it looks fine but when I put the image on the cursor tag in css it renders wrong. It turns out the latest Chrome on Mac has this bug. Google is working on a fix and there seems to be no work around at this moment. For more information:
2
Dave Crow
I’m having trouble setting up some hover behavior. (Thanks to everyone for all the help so far as I wade into more advanced techniques!) I’m trying to put a white layer behind each cell that appears on hover to cover the vertical line behind it. But I can’t figure out how to get at the mask layers from within the cells event handler (see attached project). Or maybe there’s a cleaner way to do this. I don’t love having 15 extra layers for an event that just happens on hover. Thanks!
2
Joshua Pekera
I updated Sketch to 3.4 and now I am getting this error in Framer. Cannot read property 'toString' of undefined. Any ideas?
8
Mark Horgan
I'm using Framer Generator 3.0.36 (40) but I'm finding it's exporting empty images for child layer groups if the parent layer group is hidden (Framer Studio is doing the same). I looked at the code of the Sketch plugin - sketch-framer-3, but I don't think Framer Generator is using it even though when you run rake, it copies it into Sketch and Framer Generator. How does Framer Generator generate layers.json and images? Is it done natively in Objective-C?
1
Eli Beitzuri
The release notes from the latest beta say the cursor has a down state. I'm not seeing that when I open a prototype in the beta. Is there something that needs to be done to enable it?
4

October 30

Dave Crow
Hope I'm not over-posting 😁- but... Another riddle for this prototype: http://share.framerjs.com/a9buxit2fadz/ 1. Click the Auto Insurance cell and it expands. 2. Click off the cell and it collapses. 3. Click to expand the cell again. But now "pastDuePeek.visible = true" does not work. I can see the layers move in the layers panel, so I know the click event is happening. I’ve been fighting with it for over an hour - so another set of eyes would be much appreciated. Thanks!
6
Stephen Crowley
A little object "3D" rotation magic with touch and device orientation in Framer. Special thanks to Callil Capuozzo, Jordan Robert Dobson and Joshua Tucker.
6
Don Behm
Hello! I'm trying to create a menu of six items with a for loop and I'm having problems calling a specific Layer (sideBarMenuItem) in the loop. I gave each Layer a name when it was created but I can't seem to figure out how to reference it correctly. So in this example how would I call to say sideBarMenuItem[4] outside the loop? Thanks!
5
Pasquale D'Silva
Dang, I haven't used framer in a while. Been spending more time with it on some new prototypes. Sorely missing the ability to animate backgroundColor. Right now, I'm fading proxy layers... Please papa santa claus, I hope you make this possible.
5
Arron J Hunt
Would anyone be interested in Framer Challenges? Where you're presented with an idea or interaction and a group builds it with Framer? Just a little practice/challenge every so often.
16
Christie Day
Im relatively new to this. Wondering if anyone can help. Here is my prototype. There is a gray X cancel button on the prototype that is supposed to be invisible on the first load. You are supposed to be able to tap on the purple button that is behind it to activate the "reactions" Then the cancel button should appear and the purple button disappear. Tapping on the X cancel button should return everything to its initial state. Im having trouble wrapping my head around how this would work. Any advice is greatly appreciated. Cheers :)
3
Nick Kutateli
Studio features request: - Windows (much better for dual-screens and landscape device / web prototyping) - Ability to browse and edit multiple files. Having to edit module files in a different editor is beyond annoying.
7

October 31

Chris Camargo
Regarding Framer + Git: Is it safe to ignore framer.generated.js and framer.modules.js files when committing? I notice they seem to change every time I open Framer Studio, which means that just by opening the prototype to inspect it, I get uncommitted changes. Thoughts?
1
Koen Bok
Over time I'd love to integrate Framer with a more full blown physics engine. I have my eye set on these two to begin with: http://wellcaffeinated.net/PhysicsJS/examples/ http://soulwire.github.io/Coffee-Physics/ What are good real world examples of ui based on more advanced physics? Or are you walking around with specific ui around real world physics that you can share? An example would be how the chat bubbles behave on scroll in iOS7 messages. The main reason for me to study more of these is so I can adapt/design the physics ways of defining behavior into something that makes sense for ui design.
30
Jiaxin Chen
Hey framers, in this case how can I call the third string? c[2] doesn't work.
4
Денис Дрожжов
Hey everyone. I've encountered a strange bug while playing with circular progress bar i'm trying to make: http://share.framerjs.com/bpdjh3k0kq33/ Progress bar fails to render inside Framer Studio or when i connect to Framer Studio with Frameless. But when I resize window, all starts working. And it also works if i just load project from browser. Any ideas why this is happening?
0
Thijs De Mooij
SVG TouchID animation. Inspired by Ezzat Chamudi's Path animation example: http://codepen.io/ezh/pen/dogPLa On Dribbble: https://dribbble.com/shots/2325898-TouchID Source: http://share.framerjs.com/nxjfvv7d3ni8/
0
Koen Bok
Hey everyone, we doing bug fix week. What are your most annoying issues? We might just fix them this week :-)
25

Monthly archives

2017

2016

2015

2014

2013