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

What is Framer? Join the Community
Return to index

July 2014

July 01

Marcus Gellermark
Kinda noob-ish question here: How do I avoid the top layer from clipping behind the layer in the background when playing with rotationX? My guess is that it's something kinda easy :)
6
Francesco Fiore
Hey there, really nice tool i've been prototyping some cool Mobile UI and i've been able to test it on iphone with great result. Is there any plan about implementing support of video files? Should i try to embed video with standard HTML5 player? Thanks
1
Stephen Crowley
Anyone know if there still old Framer2 documentation kicking around somewhere?
2
Gavin McFarland
I'm trying to imitate a slide in transition for iPad but one problem I have is that the scroll position for the next view scrolls also meaning that unless all the views are scrolled to the top to begin with it won't slide in correctly. I believe this is happening because both pages are sub layers of the super layer and when they scroll they scroll together. Please look at the video to see the problem in action. I welcome any issues you might have to get around this problem.
3
Koen Bok
New Beta Feature: Animating Shadows Edit: Added three examples: http://examples.framerjs.com/#shadow-elevate-states.framer http://examples.framerjs.com/#shadow-dragging.framer http://examples.framerjs.com/#shadow-mouse-lightsource.framer Google Material relies a lot on animating shadows to elevate layers after a touch. I added the properties shadowX, shadowY, shadowBlur, shadowSpread and shadowColor to layers. You can animate these properties like you animate anything else. To test it get the latest Framer from the builds page, or if you are in Framer Studio simply open a project and select File > Update Framer.
17
Riccardo Zecchini
Anyone facing this issue? (bug?) I still cannot use it because the autocomplete-boxes stay on top whenever I type anything inside the editor... thanks
3
Gavin McFarland
Can anyone show me how you create an array of layers? I'd like to create 9 layers with the same dimensions but 1) all be unique 2) and are different colours. For example I'd like to do something like... for i in [1..9] layers[i] = new Layer width: 200 height: 200 i + 1
3

July 02

Marcus Gellermark
Yet another noob-ish question: I've noticed that on some of my projects the iphone dosen't scale things down. It's like when you have a 50% phone and 100% content in the Framer Studio Preview. This dosen't happen all the time but I can't figure out what causes it – is there a clever way of telling the phone that we're talking about retina pixels and not old school ones?
0
Tan Sip Khoon
I tried to add an input text field to a layer, but couldn't get the field to take keyboard input. newLayer = new Layer newLayer.html = "<input type=text>" Any idea?
3
Derrick Kamgoko
Hello ! Tell me how can I start with framerjs please.
1
Kostantinos Frantzis
sketch beta (3.0.4) is crashing while running sketch framer generator (3.0.31). Same sketches that I could generate for framer on the previous beta version (of sketch) are not working now with the generator. Any ideas?
6
Luis Ricardo La Torre
After exporting all the layers from a document, what is the easiest way to make a scroll view, because view.scroll = true, it is not working for me.
1
Luis Ricardo La Torre
Anyone having trouble Sketch Beta + Framer Studio combo?
2
Giuseppe Sorrentino
I read Frames Studio does support MIDI, could you please share a code example? Thank you.
1

July 03

Marcelo Eduardo Oliveira
Guys, probably a silly question: in studio.. is there a way to define a css class? Goal: I have a view with divs on it, just want to style the divs inside the view with a particular class. no access needed. Just don't want to create a view for each item... Is it possible?
2
Алексей Кольченко
Features request: 1) as Framerjs is heavily based on images, it's quite convenient to have feature for switching Layer.image properties in states. This allows to emulate states of the controls, etc. I know it's possible via Layer.html, but Layer.image is more intuitive. Or this way breaks Photoshop/Sketch import workflow? 2) Also it's nice to have 'preloader' for the images which are used in a framer prototype, as sometimes user can see empty layer for a moment before the image is loaded. Thanks guys for the great tool!
0
Nadine Han
Hey, there got a little problem. I'm really not that into JavaScript. Wanted to write a if/else conditional. I want to say if layerxy has statexy than make something else do something else. My problem I don't know how to write it exactly. Example what I wrote if sketch["Button"].states == open sketch["Button02"].visible = true
6
Koen Bok
Announcing Framer Studio Today we shipped a really nice Mac desktop application to work with Framer.js. It solves a lot of things for Framer like easy setup, instant visual feedback and inline error reporting. We hope you like it and we can't wait to see what you build with it. http://framerjs.com
43

July 04

Ahmad Shadeed
Hello, There is an issue with the app.js file, once I deleted the default code inside it and add the following: PSD["Content"].visible = false Then, the index.html renders an empty page like the attached. Same result happened when the app.js file is empty, in case I didn't delete the default code, it renders the PSD file correctly. Any help please? Thanks,
8

July 05

Ying Ying Liu
Hey, I'm having some trouble with the Framer examples page. The drop down menu doesn't seem to respond so I can't change from CoffeeScript to JavaScript, nor can I change from 1x to 2x, nor the Download. Using latest version of Chrome, doesn't seem to work in Safari either, and in Firefox the entire examples pages are off. Is this a problem on my end? Thanks in advance.
2

July 06

Abdou Ghr
Hello guys, any news for Framer 3 - Windows ?? Mac people are doing so much...Im jealous.
0
Min-Sang Choi
Hi All, Attended google I/O last week and totally stoked by "material design". really excited to play with this new design language. so just recreated one of the transitions shown at session. I think framer is perfect tool to play with this language. hope you enjoy. :-)
3
Ahmad Shadeed
In the following code, I'm trying to place a photo above an overlay layer when the user taps it. But there is an issue because the photo is still behind the overlay. The correct result is that the photo should be above the overlay. --------------------------------- myLayers = Framer.Importer.load("imported/product_details") overlay = new Layer({x:0, y:0, width:338, height:600}) overlay.style.backgroundColor = "black" overlay.visible = false myLayers["photo"].bringToFront() myLayers["photo"].on("click",function () { overlay.visible = true overlay.opacity = 0.8 myLayers["photo"].placeBefore(overlay) myLayers["photo"].scale = 1.5 myLayers["photo"].y = 100 }) --------------------------------- Any help please?
7
Thijs De Mooij
Hi guys, When you have a draggable layer which also has a Click event, it fires the click event once the drag has ended. Is it possible to prevent this?
7

July 07

Ross Papa
Hey there, I just downloaded Framer Studio and am excited to get going. I'm running into a weird bug that's preventing me from getting any work done. When I begin typing something, the autocomplete form pops up and doesn't go away. I've tried pressing ESC, clicking to a different part of the code, choosing an option...all with no avail. Does anyone have any insight on what I can do to either fix this or turn off the autocomplete feature? Thanks!
5
Mark Sharkey
Hey, I've just started playing around with Framer Studio and it looks really promising, but i'm having the same issue as a few others on 10.8.5. Here's what shows up in dev tools
3
Tweeney Sodd
Trying to run the Framer 3 generator app, but it won't open. I'm assuming it only runs on OSX 10.9? Any way to get it to run on 10.8.5? Thanks.
2
Nadine Han
Any chance to replicate the "background-blur" filter in Framer Studio from Sketch ?
2

July 08

Sarah Kranz
hey there .. seems you need a dropbox pro account to create a public folder? ... is there any other handy way to share a prototype and preview on device?
13
Luka Marčec
Hi guys, I spent some time working on Pinterest "Pin It" plugin button action. I've redesigned button and created pop-up window that would make pinning easier because it doesn't open any other browser windows. Animation has been done with FramerJS script for Photoshop. Check it out and tell me what you think!
8
Kai Oliver Reuter
Hi guys, i want to at different backgroundColors to a state. This doesn't seem to work? I hope you can help me. Thanks! layerB.states.add({ stateA: { backgroundColor: "#53585f" }, stateB: { backgroundColor: "#00d8cd" } });
5

July 09

Jay Stakelon
Anyone here prototyping for desktop/web apps using Framer? I recently built out some interactions for a full-browser web app, and extended the Layer object to dynamically scale and position layers based on the superLayer or browser window size. Hope this helps anyone who needs this type of fluid behavior!
2
Tyrale Bloomfield
Diving into Sketch and Framer Studio. Can I get a little help using multiple Artboards? I use the import function and seem to only get access to layers from the 1st Artboard generated in that file. How can I get access to or manipulate layers from the other Artboards?
3

July 10

Brett Johnson
Hi everyone. Absolutely loving Framer so far. I got my project from Framer Studio to run on my iPhone 5 using DropBox, but on the device it won't scroll. However, it scrolls perfectly fine in Studio as well as in Chrome on my desktop (using the same DropBox link). Anyone run into this issue?
3
Noah Tsutsui
How exactly does delay() work? Basically, i'm trying to delay the visibility of a layer: splash = new Layer x:0, y:0, width:640, height:1136, image:"images/splash.jpg" bg = new Layer x:0, y:0, width:640, height:1136, image:"images/background_red.jpg" bg.visible = false delay(4) bg.visible = true
3
Nadine Han
Any chance to set the origin of the width ? Don't want to expand the element from it's left corner but from it's right. Trying to make some "swipe to delete" thing, with a transparent layer....
12
Stephen Crowley
I have my iPad prototype launching from homescreen (via "Add to Home") but now am getting the elastic scrolling. Tried different methods with no luck. Anyone running into similar issues?
6
Tim de Groot
First, I love Framer JS and Studio. Second, on Safari mobile, my view is twice as big with both 2x and 1x assets. Am I missing something? Tia.
9
Kostantinos Frantzis
I wanted to prevent my prototype body from scrolling. I did it using: $(document).on("touchmove", function(evt) { evt.preventDefault() }); and it works great. Problem is that all my scrollable framer layers dont scroll any more. Any ideas?
4
Luka Marčec
How can I creat an element like this? (Transparent in the middle.) For the circle element filled with color I used this code: layerA = new Layer width:100, height:100, backgroundColor:"#00adef" , borderRadius: "50px" but I need to make it transparent in the middle.
9
Tyrale Bloomfield
I am trying to delay part of a state animation. When stateA is called animate the rotation, delay the opacity. Thoughts?
2

July 11

Sukwan Lee
I'm really enjoying Framer :) Might be a dumb question, but I couldn't figure out how to rotate the device from portrait to landscape. Can somebody guide me through this? Thanks!
4
Rafael Puyana
Can anyone point out how do I access a sublayer group that comes from Photoshop? My file has a folder called "TOP_MENU". I can access that without problem, but inside it, there is another folder called "bar" and I cannot find a way to access that one. I Generated the framer files from a Photoshop file. Thanks for any help you can give me.
6
Nicholas Sheriff Jr
Hey guys I'm trying to rotate these 3 images as a carousel like effect seen in facebook paper, taking velocity into account. https://www.dropbox.com/s/4hr0ls2stbuq1lf/moments1.mov https://dl.dropboxusercontent.com/u/45824459/wg/index.html help :p
0
Jorn van Dijk
There's a new prototype, inspired by Google's Material Design Reel, made with Sketch and Framer Studio on Dribbble and the example site. I've recreated the artwork with the latest Sketch Beta, pulled everything in with Framer Studio and added animation. There's a couple of cool things to play with. A delay on the individual albums makes them move up one after the other. The colourful album info is visible in the Sketch file, but hidden and animated with Framer. And there's a clever way to count up and replace numbers in repetitive objects. Sketch source file and full Framer project attached, enjoy! On Dribbble: https://dribbble.com/shots/1638550-Album-Animation-with-Framer-Studio On the Framer example site: http://examples.framerjs.com/#album-animation.framer
5

July 12

Stephen Crowley
A couple of my teammates were curious about my workflow using Sketch and Framer so I thought I'd jot some things down and share with my fellow framers.
2

July 13

Oscar Alonso
Is there any way to use Framer Studio with plain JS instead of CoffeeScript?
8
Francesco Fiore
I've problem in buying Framer JS guys! "Not possible to elaborate your current order"
1

July 14

Nadine Han
Is it not possible to add a drop shadow to generated sketch layers ?
10
Marc Krenn
Hi folks, when toying around with framer 2 back in February, I had no troubles picking it up and coming up with some cool stuff very quickly - even though I just had very limited programming experience (mostly Processing). Going from Processing to framer.js back then was super-easy, however, Framer Studio's mandatory coffeescript is giving me a LOT of headache for the past few days. For example, this basic for-loop is something I just can't figure out how to do in coffeescript: for (i = 0; i < 10; i++) { card[i] = PSD.layer[i]; }; Now, of course I've looked this one up on all the coffeescript-references I could find and I'm pretty sure it's related to a logic called "comprehensions". Thing is, it seems like I'm just too plain stupid to comprehend (ha!) those "comprehensions". Could someone please do me a favor and explain the following to me: 1. What's the best/easiest/most elegant coffeescript solution for my javascript-snippet written above? js2coffee gives me some - seemingly - inelegant, un-coffeescript'ish result. Can/should this js-logic even be applied to coffescript or do I need to learn a completely new concept for what I'm trying to achieve? 2. Could you please explain the "comprehension"-syntax like you were talking to a five year old? eg. x for x in [0..9] or eat food for food in ['toast', 'cheese', 'wine'] symbol | my best guess | js for-loop symbol first x | the loop's "counter" | [i] second x | I have no idea | ??? [0..9] | simplified vers. of | (i = 0; i < 10; i++) Thanks a lot - I really appreciate your help!
6
Ed Chao
Does anyone know if there is a Viewport Object (with properties like width, height.) It would be great if we could use that instead of manually entering new values each time you scale the content.
0
Stephen Crowley
I will file this as a bug report on github but I just want to make sure it's not something I did. I am having issues with the latest Sketch Beta release (Version 3.0.4 (8106))- my masked layers are not exporting as masked layers in Framer. Anyone having the same issue?
6

July 15

Katherine Martinez
My framer studio trial expired. I then purchased a license, but every time I go to open Framer Studio and click register, it automatically quits? Does anyone know what's going on or how I fix this? I am using the Yosemite operating system, but that shouldn't be an issue since the trial was working fine before on it. It's only until the trial expired, and a dialog appeared that anything I clicked after would cause a crash.
2
Keith Lang
Feature request: Would love if this already exists and I'd missed it… I'd love to import Sketch files with each Artboard assigned to a state. This might enable a Keynote 'magic move' like ease of setting up some screens and animating between states. Layer groups that are not common between states would have a copied/empty object that has 0 opacity for that state. Commonly-named layergroups between artboards could be copied into the same object as subgroups with some naming convention, and states set appropriately. For example: With 2 artboards containing phoneApp.states.switch("favoritesTab") phoneApp.states.switch("recentsTab") Thoughts?
7
Marc Krenn
Is it just me or are constrained "draggables" kinda broken in framer3? Back in framer2 you could something like this: ======= PSD.layer.on(Events.DragMove, function() { if (layer.x < 0) { layer.x = 1; }; = User drags the layer to the left until it hits x=1 and then it would sit there, not being able to move any further to the left (User still holds down/drags -> is able to drag it back to the right, if he wants to). ======= It's a fairly simple logic and as I said, it worked perfectly in framer2. Now, the same logic in framer3 seems to be barely-to-none-functional: It appears that whenever the layer hits the if-boundary or its speedX gets changed, the layer snaps back to its origin for either some milliseconds or even permanently. And most of the time the if-boundary doesn't seem to have any effect AT ALL, like it gets overwritten by some other underlying logic. I don't know what exactly causes this problem, but to seems like there's something off. Now, I've looked this problem up and it looks like other people made similar discoveries before. However, the only proposed solution is a non-documented property called "maxDragFrame" that I can't figure out on my own. Would anyone be so kind and point me to a working example or draft-documentation for this property? Also, from what I've read so far about "maxDragFrame", it seems a bit over-engineered for what it does ... what do you guys think? Anyway thanks a lot!
2
蘇伯方
Framer is a great tool with high potential. Recently I've been trying using it to create an interaction a little bit like 'cover flow'. You drag a strip of cards and the cards will have animations corresponding to your drag. Is there a example I can follow? Another part of this question is, instead of create 10 cards 1 by 1, is there a way I could use a loop statement to create 10 different cards? Thanks!
7
Ces Cortez
I tried re-creating the very beginning of Google's Material Design reel. The examples on the Framer site were really helpful. http://cesperson.github.io/framer-reel/ https://github.com/cesperson/framer-reel/blob/master/app.coffee
1
Ivo Vos
Hi. I've been trying to use the layer.states.next() in combination with the 'undocumented' layer.states.previous() in order to create a prev/next slideshow interaction. This works perfectly in FramerStudio and on Safari/Chrome in the browser. With Safari or Chrome on iOS the layer.states.previous() however shows an unexpected animation as you get to the last state and start cycling back. It seems that it cycles through all the states before landing on the previous one. Does states.previous() have known issues in iOS browsers or would it be something in my code? Thanks, great tool!
1
Aurélien Foutoyet
Hi guys, I wanted to share with you a little animation I've made with Framer Studio in order to learn. I wanted to reproduce the Twitter start screen animation (and improving the one we could find on Codepen). Here is the preview http://quick.as/dgxsewl If you're interrested the source code is available here : https://dl.dropboxusercontent.com/u/6143195/Partages/Twitter.zip I've basicaly used the Delay function to animate each elements depending on the time. Don't hesitate to tell me if something could have been optimized in my code. Cheers
1
Comést Savatino
Over the past few months I've learned Javascript and Jquery, and have grown more confident in using them. However, I'm very excited and eager to learn/use FramerJs Studio. Are the basics/language sections on the site *really* sufficient to get started using this application? Or do I need more intermediate/advanced understanding of CoffeeScript to be efficient?
2
Joe Lifrieri
Is there any way to switch Framer Studio to work with regular javascript? The explanation for its inclusion on http://framerjs.com/learn.html#coffeescript is compelling, but I prefer working with native JS.
8
Benedikt Lecheler
Hey, I am currently testing out Framer Studio. Looking great so far, however, I have not found a way to preview on devices in landscape mode. Is this a feature still missing?
2
Tarun Chakravorty
is it possible to use html5 video with framer? Trying to make a simple prototype, where you scroll down to a point and an html5 video starts playing.
1
蘇伯方
I created this carousel interaction prototype to see how it feels on a mobile device. I only have few experiences with JS prototyping. Thanks to all the examples and documents online. I'm happy to share what I learned so far to someone who just need some thing similar. https://www.dropbox.com/s/415yh3fjn2zf5i7/beads.framer.zip
2
Thijs De Mooij
I created a prototype for a card swiping UI. You can swipe the cards from left to right, or tap a card to flip it. When it's not dragged far enough or you reached the last card, it snaps back to its position. A preview and the source is available on Dribbble: http://drbl.in/lJBA I am relatively new to coffeescript/javascript. Any advice on how to enhance the code is appreciated!
3
Ryan Wood
I've been trying to get assets to import from Sketch Beta into Framer Studio, but nothing seems to work. I've created a document that has a single group containing a rectangle, but nothing ever appears on my canvas in Framer. Likewise, no images appear in the 'imported' folder. I've tried using Photoshop, and it imports the assets just fine. Any help would be greatly appreciated
0
Tim de Groot
Created this little animation with little to no javascript knowledge within Framer. Thanks to some great examples I managed to get some work done. It's nothing extreme, but for me it was a great lesson. Framer really makes me want to learn javascript.
10

July 16

唐卓 Nick
Hello there, I get a issue in using bezier curve in animation: What's the correct formate to implement custom bezier curve to object?
1
Stephen Crowley
I'm still having masking issues with Sketch+Framer, anyone else?
0
Antonio Krämer Fernandez
hey folks, i'm struggling a bit with ordering layers. I want that the scrollable content moves beneath the "Header" layer. but this is not working… # This imports all the layers for "Prototyp01" into myLayer myLayer = Framer.Importer.load "imported/Prototyp01" scrollViewer = new Layer ({ x:0, y:0, width:640, height:1163 backgroundColor: "#fff0" }) scrollViewer.addSubLayer(myLayer["Content"]) scrollViewer.scroll = true myLayer["Header"].bringToFront()
4
Rafael Puyana
Any tips for previewing my Framer proto on an Iphone. Right now both Safari and Chrome are cropping it with the nav bar.
8
Luka Marčec
I created a prototype for a Pinterest profile-photo click in Android app. You can clcik on the profile picture and there's a card with bigger image that pops up. You can close that card by clicking X button in ther right corner. I don't like how that gesture is set up now in Android app since it has no interactive animation. Check it out here: http://drbl.in/lKxI
4

July 17

Joe Hsia
For the generator tool, importing PSD, I get an error, Utils.domLoadDataSync: no data was loaded (url not found?). Are there a specific reason why it is causing the error, or it could any number of reasons that my PSD is not setup correctly? Thanks in advance!
1
Mark Johnston
Would be great to see change logs on Framer Studio
3
Stephen Crowley
Any FramerJS people in the Boston area want to do a meet up?
0
Joe Lifrieri
How do you access the document element in Framer? It returns undefined any time I try and access it. Thanks!
9
Richie Bryant Taylor
Is there a way in Framer Studio to work in Landscape? Even a hack is fine.
0
Rafael Puyana
Noob question: I am creating a new Layer through: MAIN_LAYER = new Layer width:640 height:1136 Then, I am nesting some psd folders files inside it. The issue is that MAIN_LAYER comes with a transparent blue box that I want to get rid off. I tried opacity = 0, but as you can guess all the layers nested disappear too. I can group everything from Photoshop but I want to have control of this using code.
1

July 18

Chris Lee
It'd be nice to have an "Export" functionality in Framer Studio that compiles the CS to JS. Client-side CoffeeScript compiler doesn't seem to work well with our file system due to XHR.
0
Pavel Chelyuskin
Hi guys. Is it possible to insert video into prototype (for ex. .avi)?
4

July 19

Alexander King
Hey not sure if you guys were aware of this, but my trial expired for framer studio, and clicking on the "buy" button in the app brought me to a broken link.
2
Marc Krenn
Does anyone know how to access EventData (e.g. angle, velocityX,etc.) from hammer.js (1.1.3)? Thanks.
2

July 20

Noah Tsutsui
Is there a way to detect a swipe without dragging? I check out http://examples.framerjs.com/#draggable-swipe.framer but I don't actually want the layer to move, I just want a different function to run when the swipe event is detected.
8
Dae Hyuk Yoon
Here's something I've made to practice basic animations. http://j.mp/1jNbbci
0
Luis Ricardo La Torre
I am still waiting for the Cactus Group: Anyways does anyone know how concatenate Javascript/Coffee scripts in Cactus?
0
Eugene Reznik
Hello, guys! Have one question about the app: does it support pages in .sketch files? Maybe with future updates?
1
Rafael Puyana
Is there a way to store multiple images as states in a layer? I am looking for a way to store in the same place several image states. I am interested in alternatives before starting to code my own functions for that.
0
Koen Bok
We are happy to announce native Framer integration for Sketch. We shipped Sketch integration with Framer Studio and Generator a few weeks ago, but we soon found out it was buggier than we hoped and we needed a completely other approach. Starting from Sketch 3.0.4 there's a native Framer support in Sketch. It is much faster (5-10x), and has been very stable in our initial tests, solving all of the crashes we had before. You will still need Sketch Beta today, but it should be available in a release version of Sketch soon. You can try it out today by downloading the latest Sketch Beta and Framer (or Check for Update in app): http://bohemiancoding.com/sketch/beta/ http://framerjs.com Other notable changes: - Masked layers in Sketch are no longer exported as scrolling Framer layers. You'll need to add 'scroll' to the layer name. This fixes a bug where masked layers not intended for scrolling would be exported incorrectly. - All Artboards in your document will be exported at (0,0) coordinates, but only the first one will be set to visible. This is intended to help you animate transitions from one screen to another without having to reposition layers. Report issues and bugs here: https://github.com/bomberstudios/sketch-framer-3/issues
29
Stephen Crowley
Hey Josh Puckett, did you post video from the framer meetup by chance?
0
Anfernee G
Hi Koen Bok, I recently purchase a copy of Framer Studio from your website, but for whatever reason I have't gotten a email notification or way to download my copy. Reviewing my credit statement it show up as payed for. Any help on how I can get my hands on my copy of FramerJs would much appreciated. Please and thanks, Anfernee
2

July 21

Ed Chao
put this together this afternoon. Having some trouble figuring out how to actually drag resize a layer inside a superlayer such that the drag originates from that specific layer. Best I can do now is just scale the whole superlayer. Thoughts? https://dribbble.com/shots/1650047-CardStream-Interactions?list=users&offset=0
2
Abdou Ghr
Hey folks! Has anyone seen/downloaded the "draggable-basics" example which was on the website before the new version? It was very clear - need it for a draggable cards example (Tinder) with x/y limit. Thanks.
4
Moaaz Sidat
Is there a neat way to implement a layered navigation so that there isn't a need to use a separate 'back' button to go back each state? However, each separate art board is not a representative of a new state in this case as what I'm trying to design is made up of pretty dynamic components (not trying to achieve a 'flat pages' style of navigation for the iOS folks out there, but rather something like Android's main back button) I had an idea to keep track of the current and previous states each time an action is performed and use that to implement a 'back' functionality, but I've a feeling that might get a bit too messy... Thoughts or ideas? Thanks!
0
Luka Marčec
Hi guys, I created another small app prototype, so check it out and tell me what you think about it! https://dribbble.com/shots/1649296-Order
7

July 22

Rebecca Gold
I'm trying to do something like this http://examples.framerjs.com/#animation-staggered.framer for a mock up for a website, any ideas how i'd put the image layers into this? thank you
2
Jon Gold
Any suggestions for getting keypresses to work in Framer Studio? At the moment they're just playing the OSX bell sound and not hitting the event listener; works fine when I open the file in a browser.
3
Stephen Crowley
Found an old Framer prototype- it's terrible but neat to look at how FramerJS helps with working through ideas and refining rapidly.
0
Andrei Popovici
Hey everyone, Do you know if Framer.js works in any way, shape or form with SVG files? I know one could be imported as an image, but is there an option to export from Sketch as SVG instead of .png? It would make it a lot easier to add hover states, etc. instead of creating each as a separate image... A quick search on the Interwebs turned out nothing related to Framer and SVG...
3
Rebecca Gold
Has anyone used Events.Scroll? I want some images to load as I scroll down the page. If my import is called PSD, would I just use "SD.on Events.Scroll, -> PSD.animate"? I'm not getting anything working so far
9
William Hutter
Hey guys, Quick question : Is there a way to say "if layer is in this state do this else do that" ? Thanks !
9

July 23

Aaron Root
Hi guys! I need to included a short looping animation in my demo, i've had some luck with an animated GIF but I wondered if anyone knew how to include an MP4 file? Thanks!
5
Elliott Kember
Here is a small thing I've been experimenting with recently for managing application state. I had to do a long flow with several sections, and it was useful to be able to have setup and teardown state callbacks as well as document.location.hash support. I would love to hear your thoughts.
0
Koen Bok
Just shipped Framer Studio 1.0.167. - Fix reload in fullscreen - Fix issue where generator imports get added to all open projects - Update to Sketch App Store version (no beta anymore) - Update to newest Framer - Disable cache on update framer from menu - Fix store link in buy sheet Choose "Check for Updates…" from the menu or download from the site.
4
Luke Warda
Has anybody got tips on how to get rid of the weird flicker when you try to animate elements inside scroll view while scrolling? It works fine when u scroll slow but when u scroll fast there is this annoying flick (see the video). Thanks!
3
Juan Sanchez
We've been using Framer.js a lot lately for prototyping ideas. It's great because you can send a link to someone, they can add it to their Home Screen and really get a sense of the full screen experience of a native app. We've used it with clients, ourselves, gathering user feedback and more. We put together a blog post with an introduction to Framer.js, how we use it and included examples. Check it out:
3
Benjamin Den Boer
Hey all! If Framer is new to you, have a look at this short intro video where I go over the very basics and show how to import an image out of Sketch, and give it a simple animation on click.
3
Jon Gold
Structuring quite a complex prototype I came to use CoffeeScript classes (extending Layer) for each of my components. Quite nice because you can set default properties and add methods specific to components to their…prototype. Just wondering if that's legit/will break anything/anyone has opinions about that.
12

July 24

Rafael Puyana
Any ideas for creating image states layers? ( Asking this again, but I really need some clues about it)
0
Jens Nikolaus
I am nitpicking here, but are you planning on supporting a specific file format so I can open framer files via double-click instead of dragging it onto the app icon? Or is there a quick way of opening files with Studio?
1
Andy Cetnarskyj
Are there problems running framerjs on OSX 10.8.5, ran on a few machines and the editor just hangs like this.
4
Elliott Kember
I'm having trouble importing PSDs to the latest version of Framer Studio. I get a "Could not read data file", then the usual progress bar updates / Photoshop madness, and the files are imported into the directory, but no code appears in my editor. Anybody else?
5
Jorn van Dijk
I'm really enjoying Google's material design reel. Here's another piece that I recreated with Framer Studio. The artwork is done in Sketch, the animations are time based and straight forward to set up and there's an if/else statement that defines the order in which things show up. Here it is on the Framer example site for you to download and play around with: http://examples.framerjs.com/#on-time.framer (.framer & .sketch source files included). Don't forget to click!
2
Julius Gehrig
Hey guys I have this weird problem. I just imported a sketch file into framer and wanted to animate the user avatar to scale up on click using a spring curve. But even though i told framer to use a spring curve it just shows a linear transition instead :/ this is my code: designLayers["Avatar"].states.add second: {scale:1.2, opacity:0.5,} designLayers["Avatar"].animationOptions = curve: "spring(400,12,0)" designLayers["Avatar"].on Events.Click, -> designLayers["Avatar"].states.next() What have I done wrong? Thanks in advance! :)
2
Kostantinos Frantzis
When importing from sketch or photoshop I have a ParentGroup which contains five subgroups (SubGroup1 to SubGroup5). Is there a way to set up an event listener for each subgroup by looping through the parent group? Similar to the demo bounce code. This does not work for me: // CODE for (layerName in myLayers.ParentGroup) { var layer = myLayers[layerName]; layer.on(Events.Click, function(event, layer) { // Do something!!! }) } Thanks for any help.
12
Ed Chao
Is there an event for a position change? It would be awesome if you could do something like 'Layer.on Events.positionChange' (Resolved: myLayer.on 'change:x'.)
8

July 25

Adam Laskowitz
In the Facebook NewsFeed example... How does the grid.getChild("Images") part of the code work? I see in "imported" > "feed" > "images" there is another folder called "jpg". This folder is never created when I import from a PSD, it only imports groups, not layers outside of a group.
0
Bäd Rick
Hey framerjs I want to collect a list of useful framerjs sources, any libraries you are using any modifications. If we do so the community will have a source for everyone and probably any problem to solve (Hopefully). Because I found a lot of similar questions asked several times, there must be a list of all that stuff. Also a collection of prototypes and small interactions to reuse For everyone available would be awesome.
2
Gavin McFarland
Has anyone got an example of how I can detect swiping in a certain direction using touchStart and touchEnd?
5
James Caruso
I'm having an issue with Framer Studio + Sketch 3 where it's flattening everything on my art board when I try to generate my prototype. Any assistance on the subject would be super helpful.
4
Matt Bogado
I love these framer examples: http://examples.framerjs.com/#event-checkmark.framer. Where else can I get more java/coffee scrips for animations?
0
Billy Roh
Is it possible to set different curve, time, and repeat values for different states of the same layer? eg. myLayer.states.add state1: {opacity: 0} # I want a curve, time, repeat for this state... state2: {opacity: 1} # ...that is different from those of this state
6

July 26

Koen Bok
If you are running Yosemite and run into bugs please report here. I'll be working on it this week.
0
Adam Laskowitz
Best way to scale PSD to screen size?
1
Julius Gehrig
Played around with Framer for the first Time today and came up with this: Here's a link to the project in case you want to look at the code: https://dl.dropboxusercontent.com/u/103457755/Incoming%20Call.zip I'd love to hear your thoughts / suggestions on how to improve it! :)
9
Jakub Burkot
Has anybody tried recreating iOS7 style background blur? I have not worked on that yet, but the only thing that comes to my mind is by using mask and blur. Thanks in advance!
4

July 27

Riccardo Zecchini
it’s really worth watching this speech by bret victor, lot of things very-very related to The interaction design tool(s) we’re using today. i think it highlights really well what we need in this particular context. sort of what framer could (and is going to) be?
0
JT DiMartile
If you are trying to do Material Design animations the following are the main easing values for your bezier-curves. start with: materialLayer.states.animationOptions = curve: "bezier-curve" When something exists on screen already and moves to another position on screen, 40% out of first frame and 80% into second frame: curveOptions: [0.4, 0, 0.2, 1] When something comes from offscreen it has 0% out of the first frame and 80% in on the second frame: curveOptions: [0, 0, 0.2, 1] When something leaves the screen it has 40% out of the first frame and 0% in on the second frame: curveOptions: [0.4, 0, 1, 1]
2
James Caruso
Hi, I have a question about how the code for only dragging left works. If you were to write it to only slide right, how would you do that?
2
Lorenzo Fernix Ferrante
Hi, I have a layer with text, and I need to scroll it to read all the text. How can I do it? Thanks
0
Todd Hamilton
Having some fun with the hamburger icon in Framer Studio. Try it out here: http://toddham.com/framer/hamburger_icon.framer/ Download the sample project here: https://www.dropbox.com/s/8byyxpaukieh1pd/hamburger_icon.zip
7
Adam Laskowitz
Hey everyone. New to framer. Super excited to make it part of my core toolset. Quick question, is there a way to define width and height of a layer by the "screen" width and height?
7
Lorenzo Fernix Ferrante
Hi, I have a layer and I add text using myLayer.html. But what I have to do if I want to add some more text? Thanks.
4

July 28

Brendan Stromberger
Hi all, just getting started with Framer and trying to integrate an interactive instance of Google Maps. Anyone have any ideas where I might start? I'd like to use the map as a sublayer such that it'd be masked by my browser image as I pan/zoom.
7
唐卓 Nick
Hi Everyone, How could I automatically loop a series of animations? I use .on "end" method to create a long animation with short pieces. How could I loop the long one?
0
William Hutter
Hey guys, do you know if Sketch and Framer Studio work on Yosemite Beta 1 ?
7
Luke Warda
Trying to generate a side menu with links to areas of the app. I have: sidemenuLinks = ["Home", "Link 1", "Link2", "Link3", "Link4", "Link 5"] for colNumber in [0...6] Field = new Layer width:500, height:100, backgroundColor: "#1B1B1B", shadowY: 2, shadowBlur: 0, borderRadius: "0px", y: (colNumber) * 100, superLayer: sidemenuLayer Field.html = sidemenuLinks[0..6] This populates each link with "Home", "Link 1", "Link2", "Link3", "Link4", "Link 5". Can u suggest any solution to this? thnks!
2
Luke Warda
Hiya, is there a way to fake a scrollEnd event? Or better yet, is there a way to fake a scroll slow down / accelerate event?
5
Joshua Tucker
How does one change and animate a subLayer? Seems like a stupid question but maybe I'm not doing this correctly? I import a board from Sketch that and it has a main folder "TopNews" and a subfolder called "TopNewsArrow." I would presume that to access TopNewsArrow, that you would type TopNews.TopNewsArrow.[whatever] but I am getting an undefined error.
2
Niko Knappe
Hi, Is there a way to adjust a custom frame rate for animations?
5

July 29

Min-Sang Choi
Here's another Material Transition Example. Tried to move FAB button along the path. hope you enjoy. https://dribbble.com/shots/1659259-Material-Design-with-Framer-js?list=users&offset=0 interactive version : http://qcnoodling.com/material-transition2.framer/
16
Koen Bok
Just pushed a new build. Sorry for posting this here all the time. We should have a better spot for changelogs soon. ### 1.0.181 - Improve placeholder text in generator (Status Text) - Fix "import again" crash if not available - Better Sketch (Beta) handling, always use Sketch AppStore unless only Sketch Beta is open - Better Photoshop logging message - Stick trial button to right top You can always find this and older versions here: http://studio.update.framerjs.com/archive/
1
Kyle O'Reilly
Hey Guys, new to framer, but love it so far. Had a question below, appreciate any help you can provide:
2
Koen Bok
Just pushed update 1.0.175. Fixed all known Yosemite issues and a nasty bug that would not update your Sketch/PS imports. ### 1.0.175 - Fixed startup crash when in trial (Yosemite) - Fixed other small Yosemite issues - Fixed bug where generator wouldn't properly update your project - Fixed issue where generator wouldn't see open files in Sketch You can always find this and older versions here: http://studio.update.framerjs.com/archive/
2
Noah Tsutsui
Can someone help me out with this?
6
Ed Chao
Sharing my weekend tinkers. Happy monday fellow framerites. https://dribbble.com/shots/1660196-CardFeed-Interactions?list=users&offset=0
15
Koen Bok
If anyone would like to see their own examples featured on http://examples.framerjs.com (with full credits) you can. I just updated the repository with an overview how to add yours. If you have one ready ping Benjamin to help you get them online. https://github.com/koenbok/FramerExamples
3
Albin Martinsson
Is it possible to target numbered PSD-layers? In this example I can't target amount-3, do you guys know how to solve this? shoppingTestLayers.amount-3.states.add second: {y:100, scale:1.3} Cheers!
5
Stephen Crowley
Hmm, so with Framer Studio 1.0.168 my protos that were originally constructed in Sketch Beta, elements do not update. I generate an import and nothing... anyone else having this issue?
16

July 30

Collin
New to Framer. Have done a little research but have yet to find a consistent answer on this. What is the best way to demo your project on mobile? How do I port my Framer project to my phone to demo?
2
Benny Chew
I just started learning framer.js a couple days ago and I like it. Now I'm trying to make a basic iPhone proto list scrolling. Any tips how to implement a scroll of a long list? I've tried layer.scroll = true, but that didn't work. I also tried Events.DragStart / DragMove / DragEnd, this worked but I don't know how to implement 'inertia'. I tried to perform a scroll contraint with an if else check in DragMove but that didn't work... So what is the best way for scrolling things?
11
Gavin McFarland
Is anyone having trouble opening framer files with the latest build (1.0.181)? My framer won't open any framer projects. I'm using Mac OS 10.9.4. If not anyway I can revert to a previous version? Thanks.
2
Todd Hamilton
Made a walk cycle using states. Turned out to be a fun little experiment. You can grab the sample project here: https://www.dropbox.com/s/2k7lgldimyt0d45/walk_cycle.zip Live version: http://toddham.com/framer/walk_cycle.framer/
12
Albin Martinsson
I've been tinkering around with framer studio this morning and I think I'm finally starting to get a grip of it. I used one of the examples from the examples site as starting point and it really helped me understand it better. So if you're new to framer I'd just like to recommend using the examples because it really, really helped me. Cheers! PS. Here's the prototype if you guys are interested
0
Adam Laskowitz
I feel like this should be moved to a google group? It's really difficult to find answers in past posts on Facebook. And Google searches don't search through posts, so you cannot find anything in the same way that people search for questions and solutions on the web.
32
Koen Bok
We're looking for an experienced developer in Cocoa/Javascript to join our team in Amsterdam and work on next generation creative tools. Mail koen at madebysofa dot com if you are interested.
5
Jason Brewer
I'm trying to import a photoshop file but I keep getting the error message: Framer: Not a PSD file Framer needs layers to work on something. But I have the layers set up. I'm using CS6. 13.0 Mac Any links to image handling info would also be welcome. Thanks!
3
Koen Bok
Thomas posted this link in a thread below, and I think it's worth highlighting. If you ever wondered why the browser can render as fast as native (in most cases) and what happens behind the scenes, read this.
1
Ed Chao
Anyone else having trouble keeping the borderRadius when trying to clip sublayers? It looks like you can only clip sublayers within a square corner. (borderRadius only seems to work on the layer its assigned to. I know that I can add the borderRadius to the actual sublayer, but that doesn't work if there are moving sublayers all being masked by the superLayer, like a carousel.)
31

July 31

Albin Ekblom
Framer studio color scheme for sublime text? Anyone?
0
Andy Cetnarskyj
Our iOS dev's asked me to use Quartz/Origami to make animation prototypes as they said it was closer to native animations. Are framer JS just as close, has anyone used both?
9
Stephen Crowley
Ok, so a simple scroll on a masked layer (picture a news feed showing scrolling through cards) is not working for me in Sketch. I could be flaking but can anyone screen cap their Sketch Project layers showing a masked layer that allows scrolling?
16
Benjamin Den Boer
We just launched a brand new Framer Blog! Here, we'll post, share and curate all great Framer-related content. Examples, updates, tips & tricks, articles and more. It'll also be a good place to easily filter through all of the different content. http://framerjs.tumblr.com
10
Marcelo Eduardo Oliveira
I think I've asked this before, but the answer was not what I needed, so here it goes again (with the risk of being dumb but who cares? ;) Has anyone used states to change a couple of properties that would be inside the style object? ex: menuItems[i].states.add docked:{color:"black"} selected:{color:"white"} normal:{color:"gray"} switching to selected state, won't change the text color to white... Am I doing something completely off here? I was just using the same property name as in the constructor... : /
5
Mark Johnston
I can't get the latest version of Framer Studio (1.0.168 (264)) to use generator when the latest version of Sketch Beta is open (3.0.4 (8156)) With the latest Framer Studio (1.0.168 (264)) and the latest not beta of Sketch (3.0.4 (8053)) Sketch files I import only come in as a single image.
3
Kyle Sollenberger
Having a lot of fun playing around with material design patterns on Framer. Here's a card-based UI with multiple view support i'm working on.
12
Ed Chao
Sharing a little interaction prototype. It's an exercise in using layer states together with animation chains. (disclaimer: I would probably never have interactions be this longwinded in a real UI) Hope you enjoy. https://dribbble.com/shots/1665223-Message-Head
3
Chip Dong Lim
Is there any way to rotate the iPad Air Space Grey to landscape mode in framer studio? Thanks!
10
Billy Roh
Is there an elegant way to implement pagination? So far, I've been doing the following: 1/ Create a wrapper view and set it to draggable 2/ Add bunch of views to the wrapper view, with their x values set to the x value + width of the view before it 3/ When I drag past a certain point in the wrapper view, change its state to some pre-determined position
1

Monthly archives

2017

2016

2015

2014

2013