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

What is Framer? Join the Community
Return to index

December 2014

December 01

Alex Miles
Is there a way to programmatically create laters? I'm a coffeescript noob :/
6
Cemre Güngör
Do we have an example of manual rubber-band scrolling (simulated with animations)? I got the inertia scrolling from an example, but it doesn't have have friction at edges. Wanted to see if anyone has done it already before diving in :)
2
Mike Brand
Is there a way to print which events are on a layer? I want to check if an event has properly be turned off / removed.
3
Fran Pérez
Hi guys, Is there a non hacky way to include a ".coffee" file in Framer? If not, why? :) Thanks
11

December 02

Cemre Güngör
Couple updates to Shortcuts for Framer! New way to include it works in Yosemite. I also deprecated the Device patch (since there's a native version now) and made the slide shortcut functions (slideFromRight ...) work with the new device patch.
1
Blaine Billingsley
Was working in a file, hit refresh and now just getting a white screen. No errors are thrown. Is this a bug with the new version?
0
Diogenes Brito
Anyone know how to fix the issue where viewing a framer prototype on a real device shows images larger than they are supposed to be? If I take a screenshot of an iPhone 6, then add that as a layer at 100% size (didn't set height or width, just imported it) to my framer prototype, viewing it in a full-screen ios webview shows it larger than the screen. For the record, I'm using the latest framer studio on Yosemite.
8
Koen Bok
Install the latest Framer and click this link: http://framer.link/projects.framerjs.com/static/examples/delayed-animations.framer.zip Or this gist link: http://framer.link/gist.github.com/koenbok/f06da8254ccb4dd6a197
4
Andreas Wahlström
There's a pretty neat effect in Facebook Paper that allows you to toss images around and have them react to the speed of your movement. Here's a way to implement that in Framer: http://codepen.io/aw2/pen/dPYYrO?editors=001
6
Hari Jagadeesh
Highly recommended...!
0
Jay Stakelon
Hello Frameristos! I'm getting ready to submit an update to Framless (chromeless iOS browser for previewing prototypes, https://github.com/stakes/Frameless) chock full of bug fixes to the App Store. I was curious if anyone who's found this project useful would be down to help test updates in the future - I can add you through Testflight if you shoot me a message. Thanks!
15

December 04

Cemre Güngör
Bug report: whenever I have two sketch files open and I try to use the import shortcut key, I get a generic "script error" (Instead of the "Hey, you have two documents open" error message).
1
Koen Bok
Framer update and new examples site: http://framerjs.tumblr.com/post/104075376927/framer-examples Check out our awesome new example page (try the open button if you have the latest update): http://framer.com/examples/ You can now share any Framer project directly online by uploading a zip and creating a link at http://framer.link
9
Brandon Souba
How do you restore browser hover behavior? I know Framer disables this by default.
14
Rafael Puyana
Quick help here guys. I am creating an interval in one function and want to clear it from another one. What I am doing is not working. Can anyone give me a clue.
3
Jackson Chu
I am trying to prototype a marking menu type interaction where I can press and hold an element to reveal more options and then with the cursor/finger still down hover over an option to select it on release. I experimented with the MouseOver event after a TouchStart event which works on a desktop browser but not mobile. Is there way to invoke a hover-type behavior for touch?
7
Guus Baggermans
Hi guys, kind of a n00b question. Currently I'm using the Utils.domLoadJSONSync function, and I would like to convert to async. How exactly do I construct that just prints the output when it's done loading?
7
Juan Sanchez
https://news.layervault.com/stories/39675-ask-dn-complete-app-experience-with-framerjs
0

December 05

Jaesun Yun
Is only for MacOS? If then, is any plan develope framerjs for Windows user?
1
Charlie Deets
Anyone know how to trigger an event as you drag something into an area? Hover seems to work fine when I'm not dragging an object, but I don't know how to trigger the event while I'm mid-drag.
5
Pietro Schirano
My very first Framer prototype! http://drbl.in/ncJM Thank you so much guys for creating such of amazing tool!
0
Aneesh Karve
I have a list that I want to scroll vertically. Each list item has a horizontally draggable layer inside of it. Bug on mobile: If the list is scrollable (scroll_panel.scrollVertical = true), the draggables can't be dragged. If I turn list scrolling off (scroll_panel.scrollVertical = false) the draggables work but I've lost scrolling. On desktop: Works fine. Scrolling and draggables work simultaneously. Any ideas how to fix this? Thanks in advance. Here's the code:
7
Fran Pérez
Is there a away to specify animation properties of a layer, like time or curve, per state?
2
Koen Bok
Is there anyone in San Francisco and/or New York that wants to give a Framer workshop at companies/schools? We often get requests for these and it's a great way to meet fellow designers, sometimes get paid, but it's mostly just fun to teach. We can help you with course materials and leads. If you are interested, send me an email at [email protected]
5
Juan Sanchez
We're working on building up some snippets for our design team that we can use to bring real data into our prototypes. Here's an example that uses user data from randomuser.me — http://layervau.lt/tack-mobile/randomuser-framer/ Here's the source — http://share.tackmobile.com/demos/random-user-framer/RandomUser.zip
5
Ed Chao
Been working on a chat-like thing at work, figured it might be helpful for folks looking to do something similar. Here's a stripped down version for you, just you.
5
Moses Tg
Is there a way to combine Utils.throttle with Events.TouchMove so TouchMove only triggers on the interval defined by the throttle?
2
John Anthony Evans
I'm looking to use the animator to animate an arbitrary property that framer doesn't understand. E.g. myLayer.animate properties: {angle:200} How can I go about doing that?
6

December 06

Patrick Hansen
Does anyone know if there is a way to detect scroll direction (up or down)? Like calculate velocity, but with a scroll event instead of drag?
2
Ben Weiss
I am looking for a Framer JS tutor . . . someone willing to answer all of my very very dumb questions. Willing to pay $. Let me know if interested in doing a few tutorial sessions.
1
Gareth Price
Hi, Slightly offtopic, but is there a sublimetext syntax theme that is like the one found in Framer?
6
Seoh Char
Studio has interesting update. Will be supported Web? :)
0
Mike Feldstein
Hey Guys, I made a small tool you guys may be interested in. The mirror tool of Framer Studio is amazing, but having to deal with ip addresses and browser chrome is not as sick. Framer Link is a tiny desktop app that runs in your status bar, and lets the Framer Link ios app connect automatically to your computer to run all your favorite Framer Studio prototypes. Get the Mac App at http://extrastrength.co/link and until the app is approved by apple you'll have to build it yourself (or i might be able to beta test you...) Github to build yourself: https://github.com/msfeldstein/Framer-Connect-iOS PS Koen Bok if Framer Studio just published a Bonjour Service we wouldn't need the desktop app at all. Here's all you need: https://github.com/msfeldstein/Framer-Connect/blob/master/Framer%20Connect/AppDelegate.m#L28-L29
12
Cemre Güngör
Is there an easy way to see whether something is animating or not? Or should I bind stuff to animation.on 'start' and 'end'?
6
Jon Arnold
Hi Framer Team, you do an incredible job with Framer.js! I wonder if you could include a paginated scrollview to your example page. I only found a slightly buggy version here in the Facebook group. That would be super helpful
1
Seoh Char
I have no idea why it was. Yosemite(w/Webkit) maybe have a bug about awaken?
3
Ravit Sages
hi, i'm working with codepen, and i want to make a landscape view for iphone with a video layer. why the content stays like in a portrait view if i change the device orientation to landscape? (http://codepen.io/sRavit/pen/XJmmjO)
3
Jon Arnold
Everytime I import a Sketch file with a hidden layergroup, I can't make it visible in Framer using: layer.visible = true layer.opacity = 1 Any ideas? I checked print layer.properties but the values looked good…
3

December 07

Andreas Wahlström
Here's a concept for a mobile navigation pattern I put together in framer.js. Full prototype: https://dl.dropboxusercontent.com/u/119393/caterpillar%20menu.framer/index.html Function to determine closest object: http://codepen.io/aw2/pen/zxrzje?editors=101 Read more here: https://medium.com/@andreaswah/an-alternative-menu-a6a7802fe013 cheers!
0

December 08

Fran Pérez
Request: I think it would be useful something like: layer.states.state("default").on "End", -> do something
3
Sean Keating
Is there a way to set a linear velocity, regardless of animation distance? I have layerA that repeatedly animates to randomly generated coordinates (thanks Ryhan Hassan), but rather than floating about in a constant speed, it moves very quickly when the distance is short, and slowly when the distance is great. I haven't been able to find documentation or examples of setting a speed/velocity for an object or animation. Is there a way to do it other than crafting a crazy equation for time based on each random coordinate set every time? Thanks!
0

December 09

Stu Greenham
Hi Guys, Just wondering if it is possible to change the colour behind the devices - I've had a search through the docs and not found anything yet. Cheers, Stu
5
Sean Keating
I have LayerA that I want to animate to a randomly generated set of coordinates, then immediately and automatically animate it to another, unique, randomly generated set of coordinates, ad infinitum. Simply using repeat: -1 on an animation that uses Math.random for coordinates creates the first random coordinate set, but never regenerates new random coordinates; similar problems with state switching. Recalling a function after AnimationEnd winds up stacking the draw until it crashes. Hopefully that makes sense…any suggestions on how to force the regeneration of random coordinates for an animation repeatedly without crashing? Thanks!!!
10
Sheta Diya Chatterjee
Super beginner question but I'm trying to make something scrollable. All I have written is : desktop_article = Framer.Importer.load "imported/Desktop_article__5rk" I've imported the desktop design psd and I want it to scroll. I tried doing a sublayer etc but no luck. Any tips on this?
4
Tin Kadoić
In NYC? There's a great prototype-focused Meetup on Monday 15th @WeWork. We have amazing speakers from betaworks, Huge, ZURB and Parsons The New School for Design.
0
John Anthony Evans
Is there any chance of getting some way to support something like import/require so we can keep repetitive code in separate files? I'd like to have a library of things like colors, curves, and common functions, and right now my files are becoming hundreds of lines long.
10
Jérémy Jones
Hey, I would like to animate two animations simultaneously, is it possible? Thanks
1

December 10

Metin Saray
Hi guys, I'm working on a pull to refresh action, and i have a solid in the top bar that has 0 opacity. On DragMove, i want this opacity to go from 0....1 but with the numbers in between. As i drag it down, it should be more visible. Should i do it by mapping the 0 and 1 to get more values? I know how, but i just cant implement it. Can you help? Thx in advance.
6
Praveen Kumar
I created a prototype using frameStudio and now it has expired. Is it possible to work on it without using the Studio app? Would just compiling the coffee file work?
2
Alejandro Cámara López
Hi, Is it possible to add various framer projects to a single website? I'm designing my portfolio and I would like to show a couple of my framer projects with the interaction/animation included.
2
Samuel Pushpak
Is there a way to showcase the prototype on iPhone 6 Plus ? As far as I know framer studio doesn't include 6+ in the devices list.
0
Cemre Güngör
I added drag resistance at top/bottom bounds to Koen's "ScrollViewBest" project. Would appreciate any other improvements / refactors. It would be awesome if we could get this to a place where it's good enough to be in native framer? Live demo: https://dl.dropboxusercontent.com/u/811105/ScrollView2.framer/index.html Code: https://www.dropbox.com/s/nf9spke4blqtzl7/ScrollView2.framer.zip?dl=0
6
Jérémy Jones
Hi guys, I would like to know if it's possible to retrieve the position of a click? X and Y? Thanks :)
4
Todd Hamilton
I wrote a tutorial on how to prototype a basic video player in Framer Studio: http://toddham.com/blog/prototype-a-video-player-in-framer/ You can download the sample project here: https://www.dropbox.com/s/5gya68irjhfj2hc/video_player.zip Enjoy!
4
Koen Bok
Our Stripe talk is online. Enjoy.
0

December 11

Jay Lee
Hi all, I would like to explore using frmaer.js for usability testing. Anyone can explain the best ways to write events (click/drag,..) to somewhere for analytics use? I am a novice of programming, so don't have much knowledge how to create/open/save data to a file. Zipped example would be perfect if you have attempted similar thing, say capture one simple click event with timestamp and layer name.
5
Callil Capuozzo
I took a stab at writing a very simple drag-based scrolling for all your on device prototypes. I know a bunch of questions have been posted here recently asking for a simple solution to scrolling on mobile and I think I've got a pretty good one. Obviously works best to view it on a mobile device because that's where the layer.scroll breaks EDIT: added a slight decay when dragging pas the edge to better emulate the over-scroll behavior! Preview it here: https://dl.dropboxusercontent.com/u/62995/betterScroll.framer/index.html Grab the code: http://framer.link/dl.dropboxusercontent.com/u/62995/betterScroll.framer.zip
6
Joe Lifrieri
Framer Studio's error checking has gotten really aggressive. I'm having the error message/carat flash back and forth between lines multiple times a second, even when there's no error on that line. It just got so bad that it crashed a project entirely. Is there any way to disable the automatic error checking?
6
Arthur Dagard
requested feature - Switch a bunch of code lines to comment lines -> select lines of code then cmd + #
3
Hugo des Gayets
Do you plan on creating a shortcut to select elements with the same syntax , just as 'cmd + D' on Sublime. Very useful !
1

December 12

Petr Ondrusz
Trying to import data from Sketch 3.2 into Framer Studio 1.9.42. I always receive the same error, no matter which sketch file I try to open: "The import failed. Sorry. Please check Console.app for errors." Console says "Could not find application Sketch". Can't resolve this issue. Any idea or is this a regular bug? Thanx.
2
Junhyuk Jang
Hi, I'm trying to use array, and there's some question. I wrote this ------------------------------- item = [a, b, c, d, e, f] for i in [0..5] item[i].on Events.Click, (item, i)-> print i --------------------------------- When I click layer 'a', then print a's properties. But I wanna print "b's properties" instead of a's How can I change syntex 'print i' ??
1
Arthur Dagard
Hi Guys,I'm stock since 2days with this :/ I've created a list of tracks. I want to roll over the track (SelectTracks) and hightlight the background (Tracks). It works with one track but if I have many (like 7 in this case) everytime it highlights the last one (even if I'm mouseover the others) Any idea ? document.body.style.cursor = "auto" # This imports all the layers for "playlist-player" into playlistPlayerLayers playlistPlayerLayers = Framer.Importer.load "imported/playlist-player" #This define the screenzone ScreenAll = new Layer({ x:49, y:98, width:966, height:539, backgroundColor:"rgba(0, 234, 0, 0)", }) #this define the Entire PlaylistBar NavigationPlaylistBarre = new Layer({ x:0 y:0, width:325, height:543, backgroundColor:"rgba(0, 0, 0, 0.6)", superLayer:ScreenAll, }) #this define the zone in which the playlist can scroll ConteneurTracks = new Layer({ width:325, height:380, y:72, superLayer:NavigationPlaylistBarre backgroundColor: "rgba(0, 0, 0, 0)", }) ConteneurTracks.scroll = true #this create the list for i in [0..6] Tracks = new Layer({ x:0, width:323, height:45, y:i*46, backgroundColor: "rgba(37, 205, 152, 1)", opacity:0, superLayer:ConteneurTracks, }) # Show which track you're mouseover SelectTracks = new Layer({ x:0, width:323, height:45, y:i*46, backgroundColor: "rgba(37, 0, 0, 0)", superLayer:ConteneurTracks, }) Tracks.states.add stateA: {opacity:1}, stateB: {opacity:0}, Tracks.states.animationOptions = curve: "spring(400,40,0)" SelectTracks.on Events.MouseOver, -> Tracks.states.next("stateA") SelectTracks.on Events.MouseOut, -> Tracks.states.next("stateB")
8
Robin Andersen
Hi, I'm trying to display the second artboard in Framer after I imported a sketch file (including two artboards). I have already tried this (which is not working very well) -> sketchLayers.endScreen.visible = true sketchLayers.endScreen.opacity = 1 sketchLayers.endScreen.x = 0 sketchLayers.endScreen.y = 0 (Image: setup in Sketch)
3
Chad Amon
Hey All, I'm new to Framer, just learning...trying to create a rollover "button" grabbing image from sketch. Anyone have some code I could start with?? Much appreciated
1
Benny Chew
Scrolling problem I'm trying to create a typical website effect where the content overlaps the header cover image, but I can't get the scrolling to work. Scroll property of the container is set to true. Can anyone give me some tips to go in the right direction? http://benzai.nl/prototypes/header-scroll-v1.framer/ (Code: http://benzai.nl/prototypes/header-scroll-v1.framer.zip)
4

December 13

Stanislav Grinapol
Hi Everyone I am new to Framer JS and I am having trouble with something that should be fairly basic, any Idea what I am doing wrong? I am trying to understand How I can import and access psd images within framer, I can access the image in the line that I bolded if I export as png or jpg, But for some reason trying to access the psd image gives me no control their placement in the prototype and they get buried under the layers I created bellow. Basically how do I access signal icon that is inside of icons.psd rather than importing the signal png directly. Really confusing. Thank you in advance Just in case, Here is my code # This imports all the layers for "icons" into iconsLayers4 iconsLayers = Framer.Importer.load "imported/icons" # Made with Framer # by Koen Bok # framer.com bg = new BackgroundLayer backgroundColor: "#ffffff" # Create Layers TaskBar = new Layer({x:0, y:0, width:1080, height:50, backgroundColor: "red", z:20}) ActionBar = new Layer({x:0, y:50, width:1080, height:112, backgroundColor: "#212121", z:19}) Divider = new Layer({x:0, y:382, width:1080, height:2, backgroundColor: "#333333", opacity:0.12, z:18}) Container = new Layer({x:16, y:192, width:160, height:160, backgroundColor: "#d6dbdd", z:17}) bug = new Layer({x:972, y:236, width:92, height:72, backgroundColor: "#d6dbdd", borderRadius:80, z:16}) signal = new Layer({image:"images/framer-icon.png"}) # Touch Events Divider.on Events.TouchStart, -> Divider.animate properties: scale: 10 curve: "ease" time: 0.5 Divider.on Events.TouchEnd, -> Divider.animate properties: scale: 1 curve: "ease" time: 0.5
2
John Anthony Evans
Is there a programatic way to extend the autocompleter? It be great to have the ability to load in external js files and have their functionality added to the completer.
4
John Anthony Evans
Koen when hosting Framers on a https domain framer still requests http assets. Is it possible to check for the host type and adjust accordingly? What would be amazing is to have the option to use https in Framer Studio. This would make conversations with corporate IT much easier :)
5

December 14

James Caruso
Just updated to the new version and noticing a lot more lag between refreshes and generating new protos. Anyone else getting this?
1
Stu Greenham
I'm trying to prototype something that requires a pinch gesture which will then set a chain of animations off. Is this possible or am I best just simulating the pinch with two animated circles?
2

December 15

Ed Chao
first #weekendframer in a long while :)
1
Brandon Burlington
What's the best way to interact with the prototype on your phone? When I mirror my project on my Nexus 5 it displays it twice the size?!
4
Sean Keating
Hey all, thanks to much valuable assistance and patience, my first significant prototype is coming along nicely. Unfortunately, I have hit another wall that I can't overcome. Mirroring to an Android (Chrome 39, specifically an HTC ONe M7) borks a number of behaviors that work fine in Studio environment, specifically regarding state changes after a certain deltaY, and dynamic effects of main image depending on drag distance. Any suggestions or advice would be most welcome and appreciated. Apologies for the hideous code… http://framer.link/www.dropbox.com/s/t3svp52mwopy2iv/LPandroidMob.framer.zip
0

December 16

Jordan Robert Dobson
Has anyone created a horizontal swipe pivot view like this screen? I'm working on putting one together now and wondering if there are any examples / pieces out there to help me think of ways to optimize or reuse some existing examples. The main challenge is keeping the two items in sync. What approaches or methods might you use / look into?
2
Jacek Stryk
How would you approach prototyping a scrollable grid with varied cell width, fix height and keyboard movable focus? I tried creating the grid in Sketch, importing it with Framer Generator and then create a focus ring on the fly around each cell as I move through the grid with the keypad arrows left/right/up/down. Is there a better way of doing it? Couple of problems with the current approach I need to figure out: 1 how I find out which cells are adjacent the cell currently in focus so I can figure out which cell to move the focus to next when the user presses the keyboard left/right/up/down? 2 what's the best way to draw the focus ring around the cell? Currently the Sketch grid has separate a grid comprised of separate cells. Each time I get the cell width/height and dynamically resize the focus to match the cell size. cell.style["border"] = "2px solid red" is nice but can't be animated as I need two states: show the focus ring ("border") on cell focus and remove it as the user moves to the next cell.
2
Stu Greenham
Hi Guys, I've started compiling some simple animations for simulating touch screen gestures - so far I have pinch and touch but I am going to be adding swipe, double tap and any others I need. I thought they might come in handy for showcasing on sites like Dribbble. I'm still pretty new to Framer - but I hope this might be of some use to somebody - https://github.com/stugreenham/framer-gestures Any feedback, suggestions or improvements would be great! Cheers
0
Rafael Puyana
Can I open a HTML URL from a button in framer?
3

December 17

Nina Wei
Hey, I need help... I imported sketch file to Framer Studio... but some text missing, and there is an oval, its position is changed... I checked sketch file, no problem... so weird, anyone has any idea for solving this problem? thanks!!!
5
Stu Greenham
Hi guys, I created my first concept in Framer tonight and would love some feedback - the code is probably very bloated but not a bad first attempt considering I bought the app a week ago ;) – https://dribbble.com/shots/1849752-Quick-Note-Composer-iOS-Concept
2
Juan Sanchez
Exploring other ways of bringing data into our prototypes. Tried using a public Google Sheet as JSON and it worked great! Prototype: https://dl.dropboxusercontent.com/u/51027/SheetData.framer/index.html Source: https://dl.dropboxusercontent.com/u/51027/SheetData.framer/SheetData.framer.zip Here's a helpful article I referenced if you want to try and use the same approach: https://coderwall.com/p/duapqq/use-a-google-spreadsheet-as-your-json-backend I'm thinking of making a folder of these different sheets for different types of data that others can use.
10
Matt Wujek
Hi everyone, I have a really quick question. How do you restrict scrolling past a certain point? I'm sort of confused as to how "maxDragFrame" works. Thanks!
5

December 18

Stanislav Grinapol
I am trying to create a function inside of another function on click, and it does not seem to work. Nothing breaks but it does not do anything either. What I would like to do is make a list using an array that is nested inside of a container element, and make the list clickable so that when it extends it reveals a list behind it. Basically this https://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0B2wX4iIvu8L6UjZvd0w1MmdQVWs/patterns_navigational-transitions_parent-to-child_list-01_xhdpi.webm But 4 layers deep. Here is the full code: any suggestions Background = new BackgroundLayer backgroundColor: "#f6f6f6" # Placing all fields within a container Container = new Layer backgroundColor: "transparent", width:1080, height:2000 Container.center() #Container.style.padding = "10px 0 0 0 " # 10 Fields for colNumber in [0...9] Field = new Layer width:1080 height:240 backgroundColor: "#fff" shadowY: 2 shadowBlur: 5 borderRadius: "6px" y: (colNumber) * 242 Field.shadowColor = "rgba(0, 0, 0, 0.25)" Field.superLayer = Container Field.centerX() # Each field gets its own Highlight and Shadow animation Field.on Events.Click, (event, Field) -> Field.bringToFront() Highlight = new Layer width:10, height:10, backgroundColor: "#eeeeee", borderRadius: "50%", opacity:0 Highlight.superLayer = Field Highlight._prefer2d = true # How to create a subset of list items so that when the user clicks on a lsit item it will reveal the child list for newColNumber in [0...9] SecondaryField = new Layer width:1080 height:240 backgroundColor: "#000000" shadowY: 2 shadowBlur: 5 borderRadius:"6px" y: (colNumber) * 242 Field.shadowColor = "rgba(0, 0, 0, 0.25)" SecondaryField.superLayer = Field SecondaryField._prefer2d = true # Matching the Highlight position with the click position Highlight.x = event.clientX - Container.x - Field.x - (Highlight.width / 2) Highlight.y = event.clientY - Container.y - Field.y - (Highlight.height / 2) highlightAnimation = Highlight.animate properties: width: Field.width + 40, height: 1080, opacity: 1, x: -10 , y: Field.height/2 # Half of new height & half of Cursor height curve: "ease", time: 0.25 # Fade & Reset Highlight highlightAnimation.on "end" , -> Highlight.animate properties: opacity: 0 curve: "ease", time: 0.1 utils.delay 0.1, -> # Resetting the Highlight properties Highlight.width = 160 Highlight.height = 160 # Animate Shadow fieldAnimation = Field.animate properties: opacity: 1, shadowY: 10, shadowBlur: 16 curve: "ease", time: .1 # Reset Shadow fieldAnimation.on "end" , -> Field.animate properties: y: 0, height: 2000, curve: "ease", time: 0.4
15
Jason Nelson
Hi All - I have a question around what should a relatively simple thing to do. I am trying to create a scrollable list which is easy right? However, I am trying to create a list where the newest content is at the bottom of the list and you scroll up to get to older content. So, in my prototype I tried to put move the layer so that the bottom of the frame aligned to the bottom of the frame. For some reason this breaks the scrolling behavior. Here are examples: http://share.jason-nelson.com/scroll_working.framer/ This version scrolls but doesn't start the list where I want. http://share.jason-nelson.com/scroll_broken.framer/ In this version I have the list moved to start where I want but it breaks the scroll behavior. Thoughts or other ideas for ways of executing this? Thanks in advance!
3
Matt Montag
Hi, just starting with Framer today. I'm wondering if there is a way for Generator to export layers in Photoshop that extend beyond the canvas (without cropping them). Or is the best practice just to extend the Photoshop canvas (i.e. Image > Reveal All), and clip everything with a parent layer?
1
Matt O'Donnell
Using Parse to power up your Framer prototypes. bit.ly/1z5iUZG
2
George Bucks
Hello everyone, I have encountered such a problem - when I open Miror link on iPhone - scrolling does not work well. Trying to drag the entire Stage instead of the top (scrollable) Layer. Once time of 10 goes to scroll the desired layer...
9
Giovanni Caruso
Guys, having some annoying issue (noob staff) with if statement to enabling / disabling Click events on given layers. Hints? Thanks :) This is an example: # global var enabled = 0 # button layers buttonGreen = new Layer x: 250 y: 100 width: 200 height: 200 backgroundColor: "green" buttonYellow = new Layer x: 100 y: 400 width: 200 height: 200 backgroundColor: "yellow" buttonRed = new Layer x: 400 y: 400 width: 200 height: 200 backgroundColor: "red" # check var on start print "enabled is " + enabled # events buttonGreen.on Events.Click, -> enabled = 1 print "Clicked buttonGreen", "enabled is " + enabled buttonYellow.on Events.Click, -> enabled = 0 print "Clicked buttonYellow", "enabled is " + enabled buttonRed.on Events.Click, -> enabled = 0 print "Clicked buttonRed", "enabled is " + enabled # logic enabled / disabled if enabled == 0 buttonGreen.ignoreEvents = false buttonYellow.ignoreEvents = true buttonRed.ignoreEvents = true else buttonGreen.ignoreEvents = true buttonYellow.ignoreEvents = false buttonRed.ignoreEvents = false
4
Артем Турчик
Hi, guys. Look at my prototype that I made in Framerjs
0
Amy Casillas
I've built a prototype that contains a lot of Sketch layers. It's slow to load, and I think it's because of all the pngs. Does anyone have any suggestions on speeding up load time? Is there any benefit in loading multiple Sketch files vs. one large one? Would flattening the layers that don't need to be directly manipulated help? Thanks for any suggestions!
15

December 19

Stanislav Grinapol
I just started an NYC based framer.js group on Meetup if interested here is the link meetup.com/Prototyping-with-Framer-js/
2
Stanislav Grinapol
Greetings everyone, And thank you for the help yesterday. My attempt to create a google style list is progressing. I was able create an onClick function that loops through and creates 10 list items. I am now able to drill down 3 levels, this helped me understand the concept of nesting in coffeescript. Currently I am trying to understand how to add text to each of my buttons. Here is the link to the file on GIST https://gist.github.com/stangrinapol/3fcd2da6e73dc4cb464b and labeled line 43 as I am assuming this is where the text would go. Although I am not sure how to do it. Thank you in advance for all the help.
3
Tarun Chakravorty
is there an animated scrollTo type command in framer studio (similar to the jquery one)? I am able to scroll layers using the layer.scrollY property, but when i do that, it doesn't animated the scroll.
3

December 20

Juan Sanchez
When you launch Framer Studio you are immediately taken into a default project. I've been thinking about whether or not it'd be valuable to have some project templates to select from that might put a number of things in place for you to get started. Maybe even have the examples from the website be right there to play with. Maybe you can save your own project templates, select things you want to have in your project, or list projects you've already worked on. Maybe it's too much, but I like the idea of creating prototypes being as easy to jump into as creating a new file in a design program. Just thinking out loud :-)
1
Tobias Schmidt
Any suggestions for a Android fullscreen browser (no status bars, action bars or navigation bars) to test my framer.js prototypes on the targeted devices? Already started to build one myself but didn't get too far cause I'm lacking Java and Android programming experience. Thank you!
0
Albin Martinsson
I'm guessing this question has been up here a couple of times but I can't seem to find the answer anywhere I look. I'm trying to view one of my prototypes in full-screen but I can't figure out how. In chrome everything looks great except for the adressbar being in the way. I bought the Quest browser but for some reason the prototype scales weirdly. Do you guys have any suggestions?
2

December 21

Ed Chao
Inspired by a nifty doodle by Ryhan Hassan at Dropbox. If you like tinkering too, check out Dropbox, we're hiring! #weekendframer
1
Gabriele Cirulli
Is there any way at all to use Framer Studio with JavaScript instead of CoffeeScript? I found you can use ticks (`) around your JS code to get CoffeeScript to ignore it, but it doesn't look like the best solution since you loose a lot of niceties such as highlighting and suggestions.
8
Robert Malko
Has anybody toyed with the idea of generating objective-c code from the js/coffeescript? I've had success doing this for android with sketch scripting (https://github.com/malkomalko/sketch-android-kit) and if I could figure out how to map the animation/spring values, I think this would definitely be possible. Speaking of which, does anybody have any mappings from framer spring values to objective-c based animations? :)
5

December 22

Ed Chao
has anyone tried out duet? For people who have restricted wifi access at work, I wonder if this could be used instead for mirroring.
6
Joshua Tucker
Hello all! Any great examples available that demonstrate Utils.modulate? I think I have a basic understanding of it, but I am having trouble with precision. I am attempting to change the scale of an object based on how far I drag, however the scale isn't 1-to-1 (My value has been event.x).
8
Shane Brown
I'm a bit of a coffeescript noob (and fairly fresh with JS too). Would someone be able to help me understand an error I've been getting? I've got an array holding Layer objects, and while checking a Touch Event on the bg layer, I want to trigger the shadows based on mouse position (just playing off one of the examples) and to do this I need to get the midX and midY values from the Layer objects. When I do this within a touch event though it gives me an error stating that "undefined is not an object". I've uploaded the .framer here > http://spacebarkid.com/framer/cscript_play.framer/ and the plain code is here with comments http://pastebin.com/g0ZsDYk8
2

December 23

Tyrale Bloomfield
How do you target a layer with a specific "name" for an animation?
1

December 24

Henry Moran
Is there any way to do this animation with Framer?
2
Emanuele Salamone
What's the best way/is there a way to split a big project in multiple Framer files and then switch/import/whatever between them at runtime? Has someone did this before? Also, i would like to request a feature: it would be nice to have the possibility to expand/collapse code blocks.
2
Ryan Gonzalez
Built a little iOS Reminders and Passbook style Framer prototype, figured some of y’all would be interested in taking a look #holidayframer: https://dribbble.com/shots/1858431-Spaces-Cards and code at https://www.dropbox.com/s/zvzjizl152ufl48/Cards.framer.zip?dl=0
1
Mohd Izuddin Helmi Adnan
Hello Framers! How can I change a state of html content? Say that I want to change the color
3
Kai Oliver Reuter
Hello guys, I've tried to us Framer.Device.deviceType = "iphone-6-spacegray" but it lead to an error. I'am using the JS version of farmer. Is it possible to use this feature with framer JS or is it only available with framer studio? Thanks!
0
Matt Wujek
I'm using the scale function in a larger project for zooming in and out of a map. I've isolated the components to illustrate my problem. I need to access the scaled properties such as X-value, Y-value, width, height, etc. Unfortunately, I can't just change the width and height because they don't play well with originX/originY. I want to use scale because I can change the origin point of the map before zooming. Any ideas for capturing newly scaled properties? Pastebin: http://pastebin.com/vEGrsDGf
8

December 25

Joel Leví Hernández
Any way to disable the automatic rendering over every single change on the script on framer studio?
3
Ed Chao
Merry Christmas Framerites!
3

December 26

Peter Ng
Any advice on disambig between a touchstart and dragstart? Essentially canceling the touchStart and touchEnd events when a dragstart begins?
10
Joe Lifrieri
Working on a project that was fine a half hour ago. Now every animation curve throws this error and the prototype won't load. (If I delete this line, the error just appears on every other animation curve in the document)
3
Jorn van Dijk
We’ve updated the Framer example gallery with 4 new prototypes. George Kedenburg III from Parse built an amazing prototype that allows you to read and write to a real database with Parse. He has also written an excellent post on Medium about the process. You should follow George, as he intends to write more Framer/Parse entries. https://medium.com/@gk3/using-parse-to-power-up-your-framer-prototypes-88cb87009d00 http://framer.com/examples/preview/#parse-data.framer Li Jingyuan built an extensive Apple Watch prototype for Weibo with tons of interactions, including incoming notifications. http://framer.com/examples/preview/#weibo-apple-watch.framer Andreas Wahlström recreated the photo behaviour from the Facebook Paper app. http://framer.com/examples/preview/#paper-photozoom.framer Kristoffer Lundberg built a very nice slideshow with writer biographies completely generated and styled in Framer. http://framer.com/examples/preview/#writer-slideshow.framer Make sure to check them all out. If you have a cool prototype you’d like to share, please send us an email ([email protected]).
4

December 27

Benjamin Den Boer
We’ve just updated the Framer example page with 4 brand-new prototypes. Andreas Wahlström built a prototype of a Twitter feed with a semi-transparent, coloured and blurred navigation bar. http://framer.com/examples/preview/#blurred-navbar.framer Ed Chao built a prototype of a simple chat-app that generates comments based on user input. http://framer.com/examples/preview/#chat-bubbles.framer Jayaprasad Mohanan replicated the iOS8 Healthbook experience, including notifications, set-up and several cards ranging from Activity to Nutrition. http://framer.com/examples/preview/#ios-healthbook.framer Francis Cortez made a prototype of a dot moving in a triangular path, with added vertical movement and scaling animations. Read more about this prototype on his blog: http://franciscortez.com/framer-layered-animation/ http://framer.com/examples/preview/#layered-animations.framer Be sure to check them out! If you’d like to share your prototype with us, please send us an email at [email protected] Happy holidays!
2
Didi Medina
Hey guys, I could use some direction on this - all in all I'm one of those designers without any coding background, that being said I made most of my prototypes in AE but the inability to interact with the animation rather it playing as a full clip always came short when communicating ideas to engineers. Framer seems very promising but where should I start? I have no experience with JS/ coffee script or any other scripting language for that matter. Any good resources, books, videos, direction and even order of what and how to go about learning the topic that you would recommend form a noob like myself? Thanks for the help :)
7
Feddi Ghani
Hi, i have been thinking about buying a mac computer. I curently have windows. but i like the way mac works. problem is issues about mac and apple computer. my question is what would be a great mac to buy? for 3D designing + music producing + web developing + application developing. -please let me know if there is an easy way to pick up a mac . i am about to buy -Macbook air 2009 -with 8GB RAM -Mac pro/Powermac G5 xeon 2.66GHz is it worth for web developing+Server+multiple tasks Thanks
12

December 28

Joshua Tucker
It's been a while since I posted anything on my Dribbble, so I decided to put something up with some Framer.js stuff! I'm prototyping a task management app I wanna build so I put this together: https://dribbble.com/shots/1860387-Drag-to-Check-Off (Side question: any thoughts on how to adjust the border pixel size of a layer dynamically – say with a Utils.modulate? Applying the border uses CSS i.e. --> "border": "3px red solid".)
11

December 29

Ryan Gonzalez
Hey all! Worked on a iOS Safari tabs prototype as my #weekendframer, and throughout most of it, was curious about how y'all find the balance between building a set of smaller prototypes vs building one large & complex prototype. Felt like I went a little overboard with this one using iframes and actual dynamic pages, but curious to talk about the value of either approach. Code: http://framer.link/dl.dropboxusercontent.com/s/rzdb3uxcgldwok5/Safari.framer.zip
6
Junu Joseph Yang
Hi everyone, this is probably a super newbie question...When using 'Utils.interval,' is there a way to stop it similar to a 'clearInterval'?
5
Rahul Dhyawala
How do you set an attribute to a Framer Layer so you can reference that layer later on based on attribute Ex- layerA.name = "10" layerB.name = "20" layerC.name = "50" Now i want to reference the layer that has name, let say 20.
4

December 30

Joshua Tucker
I am sure it has been requested before, but breakpoints would be awesome to have in Framer Studio. Versus commenting out what I don't want for the time being. Or is it already built in and I'm not seeing it?
0
Ivan Butyliuk
Hey community wondering is it possible to make rotation interaction in Framer? Something like rotary dial on the old phones.
0
Kevin Cannon
Circular Loading Anim. Hey guys - any ideas how I would approach a circular loading progress indicator?S omething like this: http://tympanus.net/codrops/2014/04/09/how-to-create-a-circular-progress-button/ I guess I could just integrate that directly, but was wondering if there's a more 'framer js' way? Masking a shape or something like that?
9
Metin Saray
Hello, Need a tip on functions, in coffeescript. I have card1, card2, card3, card4 and card5, with icons1-5 as well. They all come the say way, and go the same way. But each time i animate them manually, it makes a very long code. What i want is, create an animation function for them for all. For example card1.go(); card2.come(); I know states.add does this, but for sequential objects, i add their states in a "for" loop, but out of the for loop, i can't call their states anymore. I don't know how you guys are doing these functions, but i'd like to hear. (in coffeescript if possible) (also dynamic functions are appreciated, e.g: function Come(int speedX, int curve) kind of logic) Thanks in advance, M.
5
Rich Cornish
This is going to sound dumb, but how does one target a layer imported from Sketch/PS? You have navLayers = Framer.Importer.load "imported/nav". Now what? Nothing on the website actually walks you through just a basic import process. http://framer.com/learn/import/photoshop-and-sketch/ has a little, then it stops, and you get the reference docs...? Why isn't this basic information on the website?
12
Rich Cornish
Does anyone know how to more effectively manage states and events? I want a basic hamburger menu to animate when mouseover/mouseout occurs (not too bad), and then on click, animate and maintain a state. When I click, I want to be able to move the mouse around the screen. But when I move the mouse, the mouseout event occurs. In vanilla JS/jQuery, this is a simple class toggle. But in Framer, there is only .next(), .prev(), and .switch(), which lack expression to manage state when trying to do anything beyond simplistic hovers. How do you selectively manage states when trying to incorporate mouseover/mouseout with click?
1

December 31

James Turner
Hi guys, I could do with some help. I'm pretty new to the design-in-code thing and I'm prototyping a pop-up menu. You can can see from the video, my problem is with the button. It works 2 out of the 3 times it's clicked. The video does a better job of explaining. Effectively, every 3rd time the button is clicked, it does not activate the menu's pop-up state. Any ideas where I might have gone wrong? Also, sorry about the blur on the video. You're not drunk, it's just under an NDA.
7
Jordan Robert Dobson
Video: http://cl.ly/0r2t0g0f0d0Z Code: http://framer.link/cl.ly/Z8Cr/example.framer.zip PRO QUESTION: Has anyone ran into this issue and know what to attempt to resolve? I'm doing TouchStart detection on a layer that fills the entire device screen. From that, while the finger is still down, I display a group of buttons of which I want to detect a TouchMove and TouchEnd to see if they are hit. This works fine in Framer Studio but once you get it on the device only the initial TouchStart event works and none of the events on the buttons fire. The only thing I could come up with is that I'm rotating a that of buttons and maybe I need to lock it to 2D. Or that my buttons are too far nested as sub layers. I'm just not sure why there would be a difference between Studio browser and Safari chromeless standalone browser. I'll put together a simplified example if needed but it's part of a much larger prototype I can't share. Just wanted to see if there are any tricks for this initially.
11
Juan Sanchez
Playing with Parse to show a list of articles and posting a new article. Also, playing with swipe to delete and shake to undo a deletion. It's hard to tell I'm shaking the device :-) There are still some other things I'm playing with, like auto-refreshing the list, rotating the photos, shake tolerance, etc.
3
Giovanni Caruso
Hi. Having some trouble detecting "event.x" to orient "layer.rotationZ" (the event.x value changes if testing the prototype in the editor preview, presentation mode or iOS device). Any hints? Here a quick example: http://framer.link/dl.dropbox.com/s/rzz7ofbw6zcpyu3/test.framer.zip
3

Monthly archives

2017

2016

2015

2014

2013