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

What is Framer? Join the Community
Return to index

November 2014

November 01

Arlo Jamrog
Another quick study, this time an expanding/contracting fullscreen menu.
1
Joel Leví Hernández
Not working on Yosemite 10.10, asked for support on twitter, no solution till now, does someone has a solution over here?
6
Eric Sargent
Has support for the Framer Generator .jsx file been fixed for Windows?
3
Philipp Wambach
Hey guys, i just finished my first Framer prototype and wanted to share it here. It’s kind of a checklist for an app i’m planing. Obviously influenced by material design :) Have to say Framer is really awesome! Had some trouble first but the docs and the fb group (if you find the old posts :) ) really helped out. Would love to hear some suggestions/improvements. PS: I think a once/one listener for the layer would be a nice addition
12
Joel Leví Hernández
Is there any way to concatenate entire framerjs projects? Or any way to separate components of the prototype? I'm currently prototyping a full application, which involves several views and specialized animations per each, it can become quite hard to do book keeping.
2

November 02

Min-Sang Choi
Have been playing with Google Maps API these days. This is little interactive google map prototype. hope you enjoy :-) Check interactive version on : https://dribbble.com/shots/1698039-Material-Maps
6
Chad Lonberger
Maybe I'm mistaken, but I thought there was a way to push commonly used classes into separate coffescript file(s)? Utils.domLoadScriptSync seems to be for compiled js?
8
Jordi Martinez Ortega
does somebody have an example of Layer.computedStyle()? It doesn't seem to work. I am trying to get the real height() of a layer with HTML content that I don't know how big will be.
0
Kyle Sollenberger
Here's a little chart visualization i've been playing around with. Allows for sets of 3 values that you can switch between and then calculates the average.
13

November 03

Ed Wellbrook
Seems like the Framer website is down? Getting connection timed out errors.
1
Francisco Inchauste
Looking for some reference code that shows how you detect the scroll direction and trigger an animation based on that? Thanks.
3
Shane Brown
Is it possible to get the Framer prototype to adjust its width and height to better match the device it is being viewed on? For instance, the prototype I have is designed for the iPhone 5, which means viewing it on my HTC One allows it to see the entire surface (including layers normally hidden to the side) which looks bad, and the same for my iPad. So either, am I able to have it match the width / height (to some degree) while maintaining the same ratio OR can I have it center and hide the outside layers (as it does on the desktop and in framer with the iPhone container)?
12
Juan Sanchez
Is there a repo floating around somewhere that people can contribute snippets to?
5
Min-Sang Choi
Hi guys, Just made an ios-like tableview with sticky header. It's dynamically working with dataset, so I think you can customise this to your project pretty easily. download the source : https://www.dropbox.com/s/twb309czmhx2qhi/stickyhead-table.framer.zip?dl=0 interactive version : http://qcnoodling.com/section.framer ( It's best viewed with iPhone 6 ;-) )
6

November 04

Daniel Lin
A fun and quick exploratory concept for Uber on apple watch!
1
Ben Weiss
Does anyone have a good/simple example and materials of importing and animating elements from Sketch that they can post? I am struggling to get it up and running.
5
Måns Peterson
I cannot manage to reference my different artboards from Sketch in Framer. Can someone please tell me if it's the artboard's name of the underlying group that I shall reference? Would love to see an example.
1

November 05

Emanuele Salamone
Hello everyone, i'm having a little problem in recognizing the source of a click. Basically i have some rows, which also contains an action button on the right side. Clicking on the row should open the detail view, clicking on the action button should open a balloon. I'm looking for something like this (underscores means indentation): row.on Events.Click, (evt) -> __if evt.sourceLayer is this ____doSomething
1
Giovanni Caruso
Just a quick question: is it possible to assign a gradient color to a layer and then modifying it at a given event?
5
Kevin Cannon
Hey all - I'm noticing that contentScale seems to have a strange affect on draggable objects. They don't stick to teh mouse like they should. It only wokrs right if contentScale is set to 1. That kinda makes the feature not usable. Any suggestions or workarounds?
5
Luke Warda
Hey guys, I'm trying to prototype a mobile site with fixed element (similar to what apple does - see clip). I want to see the UI in safari get minimal as I scroll down. However I don't want to scroll a plain inside a box container (if I do that the UI in safari stays visible all the time). Is this possible in Framer?
4
Chris Conover
Heads up: it seems like having old versions of Sketch installed (2) will cause Sketch imports to fail. Removing Sketch 2 fixed the problem for me.
0
Juan Sanchez
We're exploring different workflows for using Sketch and Framer. Mainly, working with whole views versus individual elements in those views, defining States and reusing animations. Here's an example of using multiple artboards and navigating between them. View: http://layervau.lt/tack-mobile/artboards-framer/ Source: https://layervault.com/tack-mobile/artboards-framer
2
Chris Camargo
*SOLVED* Hi folks! Total Framer JS newbie here. First question: I've setup a layer with a series of states. I have a button that triggers the first state change, and I'd like each state change after that to be triggered automatically, until all states have been exhausted. The problem I have is that using something like: layerA.on Events.AnimationEnd, -> layerA.states.next() will produce a never-ending loop. Any suggestions on how I can run through the states, then stop once it's reached the final state?
6
Harold Kim
Hi there, really loving Framer Studio! Thanks for bringing it into the world. Two feature requests, if that's okay. (or let me know if these features already exist! That would be fantastic) 1. One of the following: collapsible code blocks, highlight current line, or easy in-app way to split app.coffee into multiple files. I often sequence multiple animations one after another (using a series of nested Utils.delay's), and it gets a little difficult to visually follow the tab stops and indent levels. I also define objects with methods that I'd like to live in a separate file. 2. Relative values. For example, being able to set y: '+=40' , which would put it 40 pixels down from its existing location. I have a few animations where images gently slide into position after "loading" (eg. from 25 pixels down at 0 opacity), and it would be nice not having to define that position explicitly. I'm a huge GreenSock JS fan, and it still has a number of features I find essential (like timelines, sequencing animations, tweening colours), but I'm increasingly finding that Framer is good enough (GREAT) for most prototypes. Thanks again!
0

November 06

Rahul Dhyawala
I have 7 sections which are draggable to switch b/w each other (here shown 3). Each section is scrollable vertically and draggable horizontally. On Desktop it works fine but on touch devices : a)Let's take the active section 2, it can't distinguish b/w drag and scroll event b) when i drag left/right to switch sections it thinks it to be scrollX=0 How to make it work?
3
Jonathon Toon
I wish to use Screen.width to dynamically set the width of an element based on my choice of device however I've noticed that the values returned are infact incorrect and scale based on the width of code and device panels within Framer Studio, ie: When the device panel is wider than the code panel the width will increase but when the code panel is wider the width is less. So if I have set an iPhone5S I'd expect Screen.width to return 640 however it does not. Is there something I'm not doing right here?
10
Matthew McGriskin
Hi all, I am trying to import a file from Sketch (i am running the latest version of both sketch and framer). It says it imports it, but nothing is shown in the preview window, and i keep getting script error. Anyone have any ideas of what could be happening? Any help would be much appreciated! Thanks.
4
Jakob Stecher
Quick question regarding importing from Sketch: what layer hierarchy is needed to make a layer scrollable in Framer? The subgroup "content_long" exceeds "content_short" in height, of course.
1
Kristof Goossens
Hi all :) I'm pretty new to coding. However Framer worked well for me to do some basic interaction prototypes. However now I want to trigger a certain animation once a draggable layer is in a certain 'area', if not it should snap back to it's original position. I tried making something only using x values & if else. But it's not really working & I don't think it's the right angle to tackle this situation. Do you guys have any clue or tips on how to make this work?
6
Ed Chao
Koen, was looking at your event position correction framer. Working? Check it out. EDIT: Use event.offsetX not clientX
8

November 07

Junki Nakayama
has anyone been able to create a working iOS date-picker for a framer prototype?
0
Andy Cetnarskyj
Any plans to do an in depth set of framer tutorials? Something similar to chapters 2, 3 and 4 like this:
0
Marcos Navarro
Hullo Framers! I'm having issues doing one of the simplest prototypes. I'm trying to make the cards swipe if the reach a certain threshold. I'm failing to see the error on my code :( >> TypeError: 320 is not a function (evaluating 'screenMidX({ curve: "spring(200,10,10)" })') # Pato Landing prototype BGLayer = new Layer width:640, height:1136, image:"images/BG.png" # General Variables scaleVal = 1 screenWidth = 640 screenHeight = 1136 screenMidX = screenWidth / 2 # 1st Card cardOne = new Layer y:540 width:606 height:426 x: 16 image:"images/1.png" card = cardOne # Make the layer draggable card.draggable.enabled = true card.on Events.DragEnd, -> if card.x > (screenWidth * 0.70) card.animate properties: x: screenMidX * 2.2 curve: "spring(200,10,10)" else card.animate properties: midX: screenMidX << ERROR SHOWS HERE curve: "spring(200,10,10)"
6
Koen Bok
If you are near Stockholm or Shanghai you might want to check out these upcoming Framer events: Stockholm: https://twitter.com/javve/status/530732434347020289 Shanghai: https://twitter.com/gabyu/status/530697492082339840
0
José Allona
Hey everyone.I'm new to framer. I have one question (I don't have a programming background): Why is there a need to set the layer when I define an animation? Why can't I reuse the same animation with a different layer?
5
Juan Sanchez
Can't wait to see something like this for Framer —
2

November 08

Chris Lee
I open-sourced some snippets I've been using for material design components in Framer: https://github.com/cleercode/material-framer
1
Mike Kotsch
Is there a nice way to do those circular progress bars in Framer? I'm currently using a mask, but I'm looking for some kind of expanding stroke that I can control more precisely.
6

November 09

Joel Leví Hernández
Hi guys, how can I get the coordinates of the TouchMove event?
5
Phil Salesses
In the latest update, does anybody know why the mirroring on an iPhone 6 behaves differently than the Viewer in Framer Studio? Moving layers.y position up a negative margin is ignored on the phone but works on the desktop. In addition, having a button clickable in a layer with a super layer scrollable works on the desktop but not on the viewer. Very frustrating.
0
Stephen Crowley
Expanding Card-Flip Modal inspired by Adam Debreczeni's Form Photo Collage Concept. Still working on the animation and adding the content in the squares.
3

November 10

Benjamin Den Boer
Quick tip: here's a way you can add a set of states to multiple layers. (I've had a few people ask me if this was possible, so figured I'd make a quick example.) Download: http://cl.ly/YQWb
5
Joel Leví Hernández
Just a quick question, to listen for DragStart event on a layer which has a taller layer in it, and it was made draggable, should I listen for it on the inner or the outer layer?
5
Ofer Halevi
Hey, any example anywhere on how to use the DeviceView's keyboard layer?
0

November 11

Christy Yang
Hi all, I apologize if this question has been asked before...but I scrolled through and can't seem to find a solution. I am building a prototype where if someone taps at a map, it opens or closes...but if they drag the map it will allow them to pan and move it around. Is there a way where I can make the prototype differentiate between TouchStart, TouchEnd, Draggable in a foolproof way? As of now, when I let go of the draggable it closes on me. Thanks in advance!
6
Sidwyn Koh
Hi I was playing with Framer and was trying to move between screens. Currently I have two PSDs imported (S1 & S2). What is the best way moving from S1 to S2? I'm doing a transition that slides S1 out, but was wondering if there was a more efficient way especially with more screens.
1
Junki Nakayama
what is the best way to mirror a prototype on an iPhone fullscreen without having to do it in a browser?
10
Miki Setlur
Is it possible to animate from one scroll position to another in a ScrollView? Couldn't seem to get that to work...
7

November 12

Ola Laurin
Hello everyone! I've been trying to get a way to retrieve the x and y values of a click event (something like getCursorPosition). I thought I was on the right track for a while but as this video shows it's clearly not. Does anyone know: 1) A way to retrieve those values? 2) What's going on with the values in the attached video?
6
Matt Bogado
Hi everyone, I'm a FramerJS rookie and I'm trying to build a simple animation and I can't get past the first event. What I am looking for is upon click, launch and overlay with an X button to close. I'd like the overlay to morph from one of the rows. I will appreciate any help with this. Thanks! Here's the example: http://10.45.16.236:8000/product-interaction.framer/
1
Giovanni Caruso
Is there any example on how to discriminate between single and double tap on the same button/layer? Tried with a counter but the logic doesn't flow as expected (i.e. counter += 1 on click event. if counter == 1 > something happens and counter goes to 0; if counter == 2 > ... but this second event never happens). Thanks for your help!
13
Alexis Morin
Hi guys, I've been trying to assign events to several layers, which are stored in an array (here: panels). For some reason, this loop only partially works. Only the last of the panels is affected by the correct event listeners. Any tips?
4
Brett Holcomb
Framer (Sketch) importer used to ignore groups with a "-" appended to the name, but this isn't working for me now using the current importer. I suppose I could work around this in code, but was wondering if the syntax has changed or if this still works for others. Thanks! Trying out a new workflow. :-)
4
Chris Lee
Example of animating colors using the sweep.js library: https://github.com/cleercode/framer-examples/tree/master/animatingColor.framer
0

November 13

Paulina Ramos
I'm trying to use the Load and Display example: http://examples.framerjs.com/#load-and-display.framer when I try to run a slightly modified version of the Load and Display example on my computer, however, there's a jagged black border around the spinning wheel video that appears. how do I get rid of that border? (see attached zip file)
2
Kalle Kormann-Philipson
Hi all, I am having trouble with embedding a video into my prototype. It works fine in the browser but as soon as I run it on an ipad ios 8.01 it wont show up in safari and especially not in a homescreen webapp. Can anyone help? Thanks.
1
Jorn van Dijk
Google Design just released the video from the panel about design tools with Koen Bok at Form 2014.
1
Simon Rood
Interaction idea to explain different parts of a graph on mobile. Nothing fancy, was fiddling around with FramerJS and Sketch.
4
Carlos Santiago
i just found out about this software like 10 min. ago, and about to pull the trigger on it and buy it!
0
Amir Hossein Arabkheradmand
#Scroll_and_Drag Hello framerers! I've a scrollable layer (which scrolls in it's superlayer) but I can't make it draggable on mobile. Think about it in this way: I've 3 screens side by side, that I want to swipe between them. Each of them are scrollable (like your twitter app). they are scrollable and draggable on framer studio (on mac), but I can't drag them on my phone. I assume there's something about the superlayer thing that makes it not reacting to my drag on the iPhone. Any clue?
3

November 14

Lorenzo Fernandez
Hi there! Is there a way to detect if on touch i'm passing over a layer? A little like in DOTS. You tap on a dot, and it detects you, if you keep on dragging to the next one it also detects you. Using touch start it doesnt work, obviously.
0
Feng Te
Hello, guys I've find some thing that may be mistakes in Framer's official Docs. If I'm wrong, could anyone explain to me. The value of layer.brightness is between 0 and 100, as the Docs described 1 is white, what's the meaning of numbers between 2~100? All of them will display white? I can't find the hello.js in the example in the second image.
1
Metin Saray
Hey guys, I just want to know if there's a quick way to trigger the "next" animation, instead of calculation delays and durations. What i want is, to set up my animations, then execute them one-by-one. Any technique appreciated, Thanks, M.
7
Lorenzo Fernandez
I'm trying to assign a trigger event via for to a groupd of layers. But indipendently of which layer I over it only trigger the state to the first layer : # 1. go through the folder and assign to each layer the states # 2. on event go to the state for layerId of lines.Ovals.subLayers level=lines.Ovals.subLayers[layerId] # add the different states level.states.add out: scale:1 over: scale:1.4 # add animation option level.states.animationOptions = curve: "spring" curveOptions: {tension:500, friction:6,velocity:5} # on mouse over do… level.on Events.MouseOver, (event) -> level.states.switch "over" # on mouse out do… level.on Events.MouseOut, (event) -> level.states.switch "out"
11
Koen Bok
Edit: everyone is invited for the Stripe event: https://stripe.com/events/speaker-series-bok-van-dijk Hey everyone. Jorn and I are in and around SF for the next 3 weeks. We will be speaking at Google Form, Designer Fund and Stripe about Framer and prototyping in general. I will post specifics here later. We were also thinking about setting up an office hours so we can meet some of you and spend some 1n1 time to talk about tools, prototyping or just help you out with Framer. If you're interested, please add a comment what day of the week and time would be good for you and we'll set something up.
14
Jordan Robert Dobson
I think I remember a few of you posting a few public pages with collections of demos and concepts of framer projects... can someone share that link please? Also, is there a good place to look up what is suported in events? I'm asking for a co-worker so he can get more familar on his own. Thanks in advance!
2

November 15

Nick Bewley
Another click vs drag problem :-( Why does dragEnd not fire? http://codepen.io/nickbewley/pen/MYWVog Thanks a ton!
2
Jeremy Friedland
Is anyone else running into issues with Yosemite and version 1.9.9 of Framer Studio. I am getting a script error (see screenshot below). Any help in getting my prototypes back in working order would be greatly appreciated!
17
Jorn van Dijk
Stripe is opening up our talk this Thursday to the public. We hope to see you there!
2

November 16

Nin Tendo
having a hard time to get a prototype running on a nexus 5. I remember it worked with older framer versions without any problem. you guys have any suggestions ? I already played around with the viewport properties (set to 1.0, etc). didn't work.
8
Anthony Roscoe
Sometimes I need to make it look like I'm typing something into an input. Here's an example of a little script I wrote to do that.
3
Артем Турчик
Hi, guys. Look at my prototype that I made in Framerjs
2
Adria Jimenez
Hello everyone I have a question regarding debugging and the web inspector. Some framerstudio versions before I was able to debug framerjs using the framerstudio just by setting a debugger and opening the web inspector but today I tried and this doesn't work anymore. I don't know if it's a problem of framerstudio or safari or what but web inspector is stopping at an unexisting breakpoint in html code... something weird... Anyone has any idea how to debug now? Thanks
8

November 17

Liu T
When I preview on Nexus5's Chrome, I find layers stretched by the browser. I also tried firefox, the same problem. Anyone knows why and how to fix this? Many Thanks.
5
Alexis Morin
Hey guys, just noticing that the Card Feed example is broken on the Examples page (http://examples.framerjs.com/#card-feed.framer). This is the error: GET http://examples.framerjs.com/framer.js.map 403 (Forbidden)
6
David Wertheimer
Has anyone written a (debugging) function for Framer that outputs the layer stack with all the layers sorted by layer group, visibility and z-index so that we can easily see which layers are where in the hierarchy? I have a layer which is mysteriously not displaying (must be in the wrong place in z-index), despite my trying to bringToFront(). I figure somebody must have created a debugging function like this.
2
Christy Yang
How do I make a circular mask grow out from the center of itself instead of the corner?
24
Christy Yang
Hi guys, I'm trying to prototype an app that has a video which stimulates a portion of the app that is complex to code. The problem is that on chrome (android), the video doesn't load the first image and is just black until tapped. Once tapped, it has a pretty bad lag too. Anybody know what is happening and what I can do? It needs to live on an android device.
8
Koen Bok
Reminder: If you are in the Bay Area, you are invited for our Framer talk at Stripe: https://stripe.com/events/speaker-series-bok-van-dijk
0
Fran Pérez
Hi everyone. Let's say I have a layer, like this: red = new Layer { width: 100, height: 100, background: 'red' } When I scale it up, let's say 10 times it gets pixelated, even though it's not a bitmap. Is there any way to avoid this?
3
BJ Clark
Is it possible to have a call back for Events.AnimationEnd when changing the state of a layer? In other words, call a function when the state switch ends? I tried this and it's not working: image.on(Events.AnimationEnd, details.states.switch("show"))
2

November 18

Luke Warda
Hi guys, is there a way in Framer to specify which keyboard you want to use (in particular interested in the search keyboard). Also is there way to autofocus on the input on page load? Cheers!
3
David Wertheimer
Coffescript question: I can of course view the app.coffee file in my browser debugger, but it shows up as a txt file, and I can't step through the code or set breakpoints, since it is not a .js file. Can one of you Coffeescript gurus tell me how I can set breakpoints in the code so I can step through it? Also, is there some place in the debugger where I can explore the global/local JS variables?
0
Koen Bok
If you are using groups a lot (like me) check out Facebooks new groups app for iOS. It's really well done.
1

November 19

Sean Keating
Hey all, this is probably a simple and silly issue, but I just can't figure it out… print framertutLayers.subLayers returns undefined print framertutLayers.pricebar.subLayers returns <Layer id:32 name:pricebarbg (0,0) 1080x144>,<Layer id:33 name:price (48,26) 339x93>,<Layer id:34 name:btn (720,18) 312x108> print framertutLayers.pricebar.btn.subLayers returns undefined .btn should have subLayers, but I can't figure out how to call them. Can anyone explain the error of my ways? Many Thanks!!!
1
Joel Leví Hernández
Quick question, is there any way to define a border on a given layer in framer? I know I can define it with the "styles" attribute but it is mentioned that it is not recommended as framer keeps cached these values.
5
Paola Palencia
Hello everyone! I'm new to Framer and a beginner in HTML. In your experience, what do you think my learning curve to learn this great product would be?
2
Metin Saray
hey guys, is there a way to include animation under a for loop? such as: for count in [1..5] icons = testLayers3["icon" + count] iconAnimation = icons.animate properties: scale: 1; time: 0.2; curve: "spring(70,10)"; but it does not animate.
3
Noam Elbaz
box_animation = new Animation({ layer: box properties: {y: 400} }) How can I include multiple layers and parts in an animation? Is something like this possible? boxes_animation = new Animation({ layer: box1 properties: {y: 400} layer: box2 properties: {x: 400} layer: box3 properties: {scale: 2} })
6
Fredrik Ampler
After updating to FS1.8.2 my prototype is not scrollable anymore on the mobile (via Mirror), but still works in the preview in FS. Any idea why? Where should I look? I implement scroll by just putting everything into a superlayer with .scrollVertical = true.
4
Taurean Bryant
I'm just getting started, I can't find a way to edit the .style for each state. Is this possible?
10
Farbod Faramarzi
Is there anyway of getting the value from a inputfield (layerA.html = "<input> etc" and comparing it to say a string? Im stuck, anyone have any suggestions?
3
Koen Bok
I was just checking some stats and it seems that about half of you are still on 10.9. That is fine, but keep in mind that the (free) upgrade to Yosemite will really improve Framer Studio. So if you see editor lag on larger projects, or can use a speed bump for rendering prototypes, this is the fix.
5
Juan Sanchez
Curious if anyone has tried this —
1

November 20

Daniel Lin
Is there a hotkey for commenting out blocks of highlighted code in Framer?
2
Patrik Makrai
Hi Everyone! What do you think about setting up an official IRC channel to talk about questions easier and faster? Sometimes I just have a small question and I don't want the 4000 members to have a notification about it. Also, it can be any other platform if you have any suggestions. Cheers
8
Peter Lada
I've been working on some fun prototypes recently for some more experimental features of Guidebook. I threw together a quick framer which includes a lot of the prototypes combined into a single file -- check it out and let me know what you think! https://dribbble.com/shots/1815640-Guide-Discovery-Interaction-Prototype The prototype is a combination of 5 rather common interactions: searching, redeeming a code, scanning a code, pulling to refresh, and scrolling. You can download the framer file at the link also if you want to check out how some of the things were accomplished. (.gif is rather huge, sorry) Also, you can download the framer file to play around with it at my site (and see a better quality version of the gif) http://petelada.com/2014/11/19/framer-example.html
3
Noam Elbaz
Loving Framer! see the last line of the code... it just prints "Default" How do I get it to sense which STATE is currently visible. Maybe I'm not using .current correctly.
7
Metin Saray
Hey guys, Is there a way to listen a specific state to call "on animationEnd"? e.g animationEnd(stateA) or such.. Thanks in advance, M.
8
Kai Oliver Reuter
Hello everyone, is there a way to get the y-pos of each frame while animating the y-pos of an layer (tracing)? I‘am working with the framework paper.js and want to animating a path segment with framer – i love the spring() animation. Thanks!
2

November 21

Andrei Herasimchuk
Hello all. Posting a general question, even though I feel silly thinking I'm making an obvious mistake somewhere... But whatever. Here goes. I'm trying to make a pagination widget in Framer Studio, and I decided to use a simple for loop structure to do so. It looks like this: totalPages = [1..5] # This will be an array of PSD layers later markerGap = 40 for pageNumber in totalPages pageMarker = new Layer superLayer: action name: "marker" + pageNumber x: markerGap y: action.height - 25 width: 11 height: 11 if pageNumber is 1 pageMarker.backgroundColor = "rgb(255 ,255, 255)" else pageMarker.backgroundColor = "rgb(0, 0, 0)" pageMarker.style = "border": "1px solid rgb(255, 255, 255)" pageMarker.borderRadius = pageMarker.width/2 markerGap += 20 This does what I expect, creates five dots with the first one filled to indicate Page 1 is active for the default state. I can change totalPages to get more markers, etc., and it all draws fine. I'll be using some layers in a PSD file in totalPages, but for now, it's just numbers to create objects. So, my question is this: How do I call the different pageMarker objects so I can set different states or properties? I've tried all of the various object name notations in JS that I can remember, but all I keep getting back is undefined. What I was trying to do was something like this: pageMarker["marker3"].backgroundColor = "rgb (124, 124, 124)" Thinking that the "name" property might be used to grab the object, but no dice (because I've not created an array here I assume). And there doesn't appear to be a Framer Utils function that will allow me to grab the object once it's been created. I also tried using something like: paginationWidget = for pageNumber in totalPages But the values returned when I print paginationWidget is a set of numbers: [60,80,100,120,140] in this case. It seems that the only way to get the object is to give it a unique variable name when you make the layer in the first place. And if that's true, how should I go about doing that using a for loop statement like above? (IOW, how would I create a variable in pageMarker that becomes unique each time the loop is iterated. Like I said, I feel like I'm making a rookie mistake somewhere, and it's been a few years since I've touched JS, so I'm blanking here. Help? Thoughts?
5

November 22

Benjamin Lehn
Let's say I have a list and I want to show a highlighted state when I tap a list item, whereby the background color and text color change. What's the best way to go about doing that? the backgroundColor property doesn't seem to work within a state... can I target layer.style inside a state? EDIT: I should clarify that I know it can be done with a separate layer, but that seems a bit messy given that it's ultimately an HTML style property anyway.
1

November 23

Jacob Zeng
Card flipping effect by manipulating rotationY in framer is quite "fake". I really want the card to look like a real 3D object, like in this case: http://codepen.io/akolchenko/pen/vJdtx However after I paste the code into my framer, the flipping effect gets very dull again. Is there any setting I missed? here comes the code: ayer = new Layer ({width: 400, height: 200, backgroundColor: 'blue'}) layer.image = "http://jpinghu.com/content/flipcard/images/stanford_400X200.png" layer.center() layer.states.add({ flip: {rotationY: 180} }) layer.states.animationOptions = { time: 0.5, curve: "bezier-curve", curveOptions: "ease-in" } layer.on Events.Click, -> layer.states.next() layer = new Layer ({width: 400, height: 200, backgroundColor: 'blue'}) layer.image = "http://jpinghu.com/content/flipcard/images/stanford_400X200.png" layer.center() layer.states.add({ flip: {rotationY: 180, opacity: 0.5} }) layer.states.animationOptions = { time: 0.5, curve: "bezier-curve", curveOptions: "ease-in" } layer.on Events.Click, -> layer.states.next()
3
Jonny Strömberg
When importing files from Sketch everything outside the artboard is cut off. This is a bit frustrating when you want to move things partly off the screen, and especially when layers are larger than the artboard. How do you usually solve this issue?
3

November 24

Koen Bok
Framer Studio 1.7: Mirror Today we shipped Framer Studio 1.7 with a Mirror feature that allows you to live preview your prototypes on any device.
41
Koen Bok
If you are in Stockholm, make sure to visit the sthlm.js event where Jonny Strömberg gives a talk on Framer.
1
Koen Bok
For those running into the local loading errors on 10.10: Apple seems to have fixed this a few days ago. Now it's just waiting for an OS update that includes the fix.
0

November 25

Jiangping Hsu
I found this, it's very easy to view my animation on my iPhone. And it free, thanks for Jay! Download:Frameless - a full-screen web browser 作者是 Jay Stakelon https://appsto.re/cn/O3uP3.i
3
Mason Lee
I am trying to prototype the site for mobile and there are going to be about 12 different pages. How would you guys go about making page transitions of 12 pages? Would you guys hide a page and show next page? how about going to the previous page? For example, how can I make a one back button go to the previous page whichever the current page is? Basically, how can I best represent mobile website page transitions? Any recommendations/tips would be helpful.
5

November 26

Tarun Chakravorty
quick question for this group: Is there a way for me to see (print, console log) the hierarchy of all the layers in my framer project? As i add more things into a prototype, it becomes really hard to keep track of what layers are on top.
2
Ed Chao
hey Koen, I was just thinking, it would be awesome to be able to collapse layers, classes or functions into single lines with a trailing ellipsis (similar to how sublimetext lets you collapse divs in html or classes in css). I know most folks create a bunch of layers when setting up their projects, or include a bunch of classes at the top of their file. By collapsing these you could make framer projects feel much more manageable.
5
Noam Elbaz
superLayer (parent) is a draggable layer that is holding 14 video thumbnails (children). I snap it into position with this if/else. BUT : if I click a bunch of times.... it will mess things up. I want to set ignoreEvents to true and then after animation is over set it back to FALSE but it doesnt seem to do the trick Any ideas? Maybe I am injecting the IGNORE EVENTS in the wrong place? #___________ setY = 240 superLayer.on Events.DragStart, -> setY = superLayer.y print "PreDrag setY " + setY print "PreDrag superLayer.y " + superLayer.y superLayer.on Events.DragEnd, -> if superLayer.y > setY superLayer.animate properties: y: setY + 1464 curve: "spring(100,10,0)" print "PostDrag setY " + setY print "PostDrag superLayer.y " + superLayer.y else if superLayer.y < setY superLayer.animate properties: y: setY - 1464 curve: "spring(100,10,0)" print "PostDrag setY " + setY print "PostDrag superLayer.y " + superLayer.y else superLayer.animate properties: y: setY curve: "spring(100,10,0)" print "PostDrag setY " + setY print "PostDrag superLayer.y " + superLayer.y
7
Patrik Makrai
The Slack channel is quite dead now, so I am asking here: - how do you indent left? tab + shift doesnt work for me - any hotkey for duplicate lines? thanks in advance
1
Noam Elbaz
Congratulations to me! Big thanks to the Framer JS team!
0
Feng Te
Hello, Benjamin A new mistake in the official Docs, the section "layer.html", line 7, I think that "</style>"should be"</span>".
1
Patrik Makrai
Is there any reason why "style" changes doesn't work while changing states of a layer? Has any of you encountered this problem?
3

November 27

Mike Brand
Two basic questions. 1. Is there a way to turn off the circle cursor for when you're working on desktop projects? 2. It seems like if you click on a transparent part of a layer the click goes through to the object behind, but a hover does not. Is this correct? (Here's a gif of me hovering, it starts when the cursor changes, and then you can see that it's not until my mouse goes out of the bounds of the hover object that it moves, if that makes sense http://cl.ly/image/0a1h2D1r1R2A)
2
Arthur Dagard
hey guys, simple question : why don't you put a template for chrome or safari ?
5
Cemre Güngör
Any "Shortcuts for Framer" users here? There was a Yosemite bug preventing it from working. I updated the installation instructions and it seems to work now. Could you pull it from https://github.com/cemre/shortcuts-for-framer/tree/remove-device-patch and test whether it works for you, before I merge it to the main project?
2
Jairo Avalos
Trying to get a pulsing ring emanating from a point to loop continuously. It keeps stopping though after a single loop. Any ideas? Code below tapHintAnimator = -> # Original properties tapHint.opacity = 1 tapHint.scale = 0.8 tapHint.animate properties: {scale: 1.8, opacity: 0} curve: 'ease-in' time: 0.9 tapHintAnimator()
8
Fran Pérez
I'm currently using Utils.mapRange, but I can't find it in the documentation. Is it deprecated or something?
14
Boram Kim
Hello framer folks. I've been working on this prototype by using Ed Chao's sample code and videoLayer code which Min-Sang told me yesterday. I started learning Xcode/Swift and working on some actual applications since Apple event. I realized that Framer can do things much faster than Xcode of course, but it does cost time to build a complex prototype as much as Xcode does. Any thoughts?
3
Bäd Rick
Is there a way to add states to all imported layers from sketch? Like this: for layers in imported layers.states.add one: {scale:0.8} two: {scale:1}
1
Christian Selig
Is there a way to customize how content grows? When increasing height it increases downward, but I'd prefer it to increase upward. Similarly if I wanted scale() to operate from a top-left anchor point. Is that possible?
1

November 28

Seoh Char
http://www.youtube.com/watch?v=_8tafxhqQjg Making something useless. I'm not sure why I made this, but just for fun :)
0
Bäd Rick
I am trying to avoid manually adding properties to each layer. So I try doing an array but I can't figure out why its not working …
3
Bäd Rick
How can I create a function like this: AtoB = (ViewA, ViewB) -> imported[View_A].states.switch("hide") imported[View_B].states.switch("slideIn") To be able to use it like this: AtoB(View1, View2)
2
Fredrik Ampler
I can't find any details on the various animation options in the new docs: springs, easings, etc. It makes it difficult to figure out how to work out which to use and which parameters to manipulate.... There used to be some basics covered in the previous documentation, I think?
2
Sure Bak
It seems that animatable properties are all from CSS properties. Then, why it doesn't allow some other properties like border, backgroundColor as animatable properties? Koen Bok, do you have any plan to embrace those properties as animatable factors?
3

November 29

Koen Bok
Made a little example on how to do resistance for Aaron: http://codepen.io/koenbok/pen/AvGqn You'll need the latest Framer for this because I found (and fixed) a little bug.
7
Kevin Ng
I'm building a music app and I'd like to build interactive prototypes I control with MIDI software/hardware. I saw on your site that framerjs prototypes can be controlled via MIDI. Where can I find information on how to do this?
0
Rich Price
Long run mid day. Free. Left over Turkey sandwich. Almost free. Favorite holiday beer, $1 All afternoon to learn Framer. Priceless!
5
Junhyuk Jang
I made paper-like unfolding effect. FramerJS is sooooooo fantastic~!!! :)
10

November 30

Min-Sang Choi
I made simple example for chaining animation with framer. hope you enjoy. demo : http://qcnoodling.com/transitionloop.framer/
4
Noam Elbaz
How do I stop: Utils.interval 1, -> timeStart = timeStart + 1 timer.html = timeStart + "s" I'm trying to animate a timer with record button that should stop after a second CLICK
4
Haziq Mir
I am trying to select an input field using querySelectorAll as well as getElementById. Neither works. :( Here is the code:
1
Angus Zhu
I am using Framer with Hammer, how can I get the touch position on a certain layer? Assuming coordinate (0,0) is the top left corner of the layer.
5

Monthly archives

2017

2016

2015

2014

2013