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

What is Framer? Join the Community
Return to index

February 2016

February 01

Mark Johnston
When I go to position something based on another layer, it always seems to pick the coordinates that the layer was imported in from sketch at even if I have moved that layer to another set of coordinates. Can I not just do the following. layerToMove.x = layerThatHas moved.x
3
Jianqi Chen
Hi it is a very simple buy, but I tried for hours cannot see anything wrong I tried to invisible one layer, and make the second layer visible, however, the first layer is invisible, and the second one does not show up. any ideas?
1
Nikolay Berezovskiy
Is it possible to share Framer prototypes on my own hosting?
3
Ee Venn Soh
https://github.com/koenbok/Framer I am trying to grab hold of the latest Framer Generator to date but the link on Github hasn't yet been updated. Will the link be fixed?
1
Michael Middleditch
Quick question - how do I make a text layer have a non-blue no-colour transparent background? I want it to sit over an image? So just the text not the box layer is visible - thnx
2
Elias Suske
Hi everbody, i have two questions, where I didn't found any solution yet: 1) I want to rotate an object via rotationZ, but i want that the sublayers to stay in its original Z-rotation (imagin a circular menu und the text lables should always face the user). Is there an function for that (something like worldRotation …)? 2) I set up an Arduino with an encoder, and i want to stir my FramerStudio-prototype with it. How is this communication possible? Any library? Did anybody make something similar? Thanks in advance! Cheers
6

February 02

Rhys Merritt
I wrote a quick article which touches on the difference between FramerJS and Principle for Mac. Would love to know if anyone has anything to add, or disagrees :)
7
Peter Ng
anyone have an idea of how to do 3dshadows or dropshadows with a global lighting source? it seems like a lot of math =(
4
Luca Galvani
Hi guys! Any idea on how to detect a click outside of an element? Basically I have to fade out a login form when clicking outside of it... Thanks!
1
Chandan Manohar Raikar
How to get a full screen video in framer with video controls?
1
Daan van Klinken
Struggling with draggable constraints, would like to be able to drag this rectangle between y: -666 and y: 1200. But I'm doing something wrong here, when I enable the constraints, it keeps jumping back. Need a hand plz.
2

February 03

Sungin Hong
Hi everbody, As a prototype for the page I tried two kinds of tests with different ways to enter . 01 http://share.framerjs.com/avew1qhcj4w8/ 02 http://share.framerjs.com/cav9ywif2u1h/ Thank you!^^
0
Chandan Manohar Raikar
How can i embed YouTube videos into framer video layer?
0
Arron J Hunt
Framer Studio for iPad anyone? Add a bluetooth keyboard for full screen real-estate, instantly touch and interact with the preview natively, sync projects with Framer Studio for mac over iCloud.
27
Ben Rodenhäuser
Instead of using Utils.randomColor, is there a way of randomly selecting colors from a pre-defined array of options?
2
Alex Gough
Hello! Very new to framer.js here but eager to learn. :) When using a custom device in Framer Studio (from Snippets), how can I change the y value of the device frame? Is it possible to move the screen down instead? It is currently 20px or so off (see attachment for reference). Thanks in advance!
3
Chandan Manohar Raikar
I couldn't play the YouTube embedded videos. i am able to see the video panel displayed there with controls, but i am not able play the video. v1layer = new Layer({width: Screen.width, height: 380, backgroundColor: '#fff'}) v1layer.html = '<iframe width="640" height="385" src="https://www.youtube.com/embed/-79uIRQiAFM" frameborder="0" allowfullscreen></iframe>'
1
Chandan Manohar Raikar
How can i perform animation at the end of YouTube video? here i have a layer which has youtube video. when the youtube video ends playing i want to perform some actions. how can i do that? insetvideo = new Layer({y:0,width: v1layer.width - 30, height:v1layer.height-30, backgroundColor: "",superLayer:v1layer}) insetvideo.html = "<iframe width='560' height='400' src='https://www.youtube.com/embed/-79uIRQiAFM' frameborder='0' allowfullscreen></iframe>" insetvideo.ignoreEvents = false insetvideo.on("ended", function() { location.href = "http://www.google.com" });
1
Jorn van Dijk
A warm welcome to our newest team member Floris Verloop!
6
Henry Freel
just a quick question. is it possible to have a layer be an external link to a url, or possibly another framer project?
10
Vishal Iyer
potential noob question, but this has me a little stumped. I'm trying to understand the implications of passing the (event, layer) parameters to an event. In the linked example. you see the following bit of code- for image in images -- image.borderRadius = 6 -- image.on Events.Click, (event, layer) -> ---- currentImage = layer.copy() In my mind, I should be able to achieve the layer copy like this for image in images -- image.borderRadius = 6 -- image.on Events.Click, -> ---- currentImage = image.copy() This however doesn't work, it just copies the last image in the array. Why does that happen? And how does passing the (event, layer) parameters solve for it?
3
Daan van Klinken
I've made a scrollComponent and behind that a layer you can interact with (zoomLayer), by using contentInset it is possible to interact with that underlying layer. On top of that I used utils to create an effect when scrolling. Problem: when I put "scroll.on Events.Move..." in my code, the bottom layer is no longer intractable. Is there a quick fix for this problem? edit: with "bottom layer" I mean the blue zoomLayer.
1
Elias Suske
Hi! Is it possible to read either: 1) Midi CC Messages 2) Console Logs (os X) 3) TUIO Messages within Framer? Maybe via importing any Module or something? And, second question: how to create a variable and update it constantly in Framer? I thought about a workaround: Make a Layer and put the Variable on Layer.X, and then listen to "on Change: X" …? Do you have better suggestions? Thanks!
3
Aaron Benjamin
Is there anything similar to a "dragenter" event in framer? Examples?
4

February 04

Lyzin Kao
Crocodile vs Buffalo.
0
Michael Middleditch
Hey - I'm making a desktop prototype from imported graphics, it's set to full screen - How do I set browser default scroll behaviour? All the scroll component info I've read suggests setting a device height width etc but obviously a browser window is moveable - can someone point me in the right direction - I just want vertical scrolling. The page is one big screen grab of a webpage and a small working prototype component in the middle. Or would I be better embedding it in html or something?
4
Michael Middleditch
apologies if this is simple but.. how do I put my imported psd or sketch layers into a scroll component without targeting each layer individually as I am here on the bottom line with 'BG' & styleSports as I have about 50 layers - thanks! psd4 = Framer.Importer.load("imported/[email protected]") designs = psd4 scroll = new ScrollComponent width: 1200 height: 500 designs.BG.superLayer = scroll.content designs.styleSports.superLayer = scroll.content
2
Elias Suske
Hi. 1) There is this example about Pages in the FramerJS Docs (see Image). I ask myself about this line: "pageContent.html = pageContent.html = number + 1" Why double the ".html"? 2) And pleeease: Is there nobody who knows a possibility to get a variable/Value from outside into Framer except from KeyEvents? This would help so much! Thank you!
4
Nelson Vasconcelos
Hey guys, I'm working on a scrollable tabs prototype for Android: http://share.framerjs.com/t7u7x4t9gv31/ I'm trying to figure out how to scroll of the toolbar and keep the tab bar anchored on top, just like on this example: https://www.google.com/design/spec/patterns/scrolling-techniques.html#scrolling-techniques-scrolling Each of the pages linked to the tabs are scrollable and that's the tricky thing. I think I should link the overdrag of these scroll components to the y position of the page component and the toolbar, but I wasn't successful :( Anyone has any tips? Thank you!
1
Marc Krenn
In the next couple of days I'm going to post three examples covering different aspects of the HTML5 'canvas'-element, which enables us to read, create and modify image data on a per-pixel basis :) To kick things off, I'd like to show you how 'canvas' can be used to add procedural noise to any layer: https://tr.im/canvasNoise #canvas #procedural #noise #almostcarmack
2
Haig Armen
Has anyone prototyped audio playback as a feedback mechanism?
1
Mina Aboud
Hello, so far i'm amazed by Framer.js , but the golden question many may asked before, but i couldn't find a direct answer for . can i export code from framer to mobile iOS/Android as native code to give to devs ?
4
Naema Baskanderi
Anyone know the best tutorials out there? I have checked the framerjs resources section. Wondering if there is anything else out there
8
Marta Simeonova
I wrote an article on the need for prototyping and my experience with FramerJS in making a full blown prototype. Will be very glad to hear your thoughts
4
Naema Baskanderi
I have another question for the group. What are you using your prototypes for? Besides creating realistic prototypes which have animations that I can show developers and stakeholders, I have been using these prototypes to do user testing. Would love to hear how everyone else is using it :)
3
Sigurd Tapio Mannsåker
I'm fairly new to Framer – what's the simplest way to target nested layers? The only way I've found so far is sketch.motherLayer.getSubLayersByName('childLayer')[0].getSubLayersByName('grandChildLayer')[0] if I don't want my code to break if their index changes (otherwise subLayers[0].subLayers[3].etc works fine). Gets a bit tedious :) Any built in helper functions, or ways to filter all layers in all groups by name so all I have to do is ensure my Sketch groups have unique names?
3
Vanessa Mateus
Hi. New to Framer and CoffeeScript. Very keen to learn, Are there any certified experts based in London for 1:1coaching?
8
Marc Krenn
Part II of my mini series on HTML5's 'canvas'-element is about grabbing and processing pixels of an image to calculate its average color: https://tr.im/canvasAvg (btw that's pretty much how the famous 'Color Thief' script operates on a basic level: http://lokeshdhakar.com/projects/color-thief/) #canvas #average #color #pixelThief
5
Aalok Trivedi
I know this is a very basic question, but how do i set a scrollComponent to start at a specific scrollPoint? i.e. I want to start at alexandra on load http://share.framerjs.com/zk8bmqh9ztzk/
4

February 05

Scott Criswell
Is it possible to round 2 corners of a rectangle or should I round all corners and apply a mask to hide the corners I don't want rounded? What's the best practice here? I'm guessing I could just do this in CoffeeScript but was curious to see if anyone else has addressed this.
3
Jordan Robert Dobson
Hey All. I've been Beta testing the new Framer features and wanted to show you a quick demo I've put together. http://jrdn.io/0u3g0R3e1I0q This demo uses the following new features: • Pinch Gesture • Pan Gesture • layer.originZ • layer.size • layer.parent • New 3D perspective I also used the webkit-backdrop-filter: blur() to create a nice translucent cube. The effect is pretty nice in Safari. #framercode
2
Mike Johnson
Using phonegap for android I am trying to package a framer proto into an APK. Copying the files over to the www folder in phonegap works, but the scale of the prototype is way off. I recently figured it has to do with the viewport scale and enabling viewportScalable for iOS. For Android though, I cannot figure out how to adjust the content scale. Here's some screenshots. The screenshot from on devise is scaled up far too large, can only see the header bar. I've tried variations of this to no avail: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
10
Kishore Doddi
Have you tried an alternative to Parse that you recommend? I'd like an comparable alternative for loading real data into a framer project and for saving states from a framer project. Thx.
3
Zafar Shah
For more than half a century Kashmir, or Paradise on Earth as it is called, has suffered due to the extremely brutal Indian occupation. Over 80 000 civilians including women and children have died at the hands of the Indian army and paramilitary forces just beacuse they want India to end the brutal occupation of Kashmir, their homeland.#KashmirSolidarityDayhttps://www.facebook.com/Alphabrains1/photos/a.1604890089789502.1073741828.1604091509869360/1705573679721142/?type=3&theater
0
Junhyuk Jang
I made material design like touch feedback, but it seems something unnatural. is there any modules like this? please check my prototype, http://share.framerjs.com/epando31hs1t/
1
Benjamin Den Boer
Hey all! Check out this simple pinching and panning prototype, built using the new multi-touch gestures. It also highlights how you can position a layer within the absolute center of your two fingers, and visualizes the current scale in percentages. :-) See Prototype — http://share.framerjs.com/p1ce6f4712d4/ On Dribbble — https://dribbble.com/shots/2506333-Pinch-and-Pan
2
Jeremy Swinnen
Is there an easy way to centerX a PageComponent in Framer? I'm still learning but I can't seem to center my pager. Thanks!
1
Luca Galvani
Anyone has a suggestion on how to correctly setup a card grid, where the cards layout themselves as the css "float" property? I tried using the float css property declared in the layer "style" property with no luck...
1
Saurabh Kumar Suman
I want to convert my Framer Studio project into a Cordova/Phonegap app? Can anyone help?
9
Naema Baskanderi
Nested Layers Question Hi All, This may be a silly question. (I did look through the group to find info on how to access nested layers) I was curious about accessing nested layers from an imported sketch file where there are duplicate names It seems as though I have to name each layer. Here is an example of what I mean: pwdInputField = Navigation.subLayers[0].subLayers[1].subLayers[0] emailInputField = Navigation.subLayers[0].subLayers[2].subLayers[0] I was just wondering if there is a *smarter* way of doing this :)
2
Jordan Robert Dobson
Drake's Framer Bling http://jrdn.io/2y1O0w001W3E Nicolas Elizaga egged me on, and that could only mean one thing... a new take on my other demo found here on the new Framer updates released today: https://www.facebook.com/groups/framerjs/permalink/799852770141796/
12
Scott Criswell
Anyone else having issues with the new doubleClick function not working in Frameless? The double-tap gesture isn't responding for me. Works as expected within Framer Studio.
5
Jianqi Chen
hey guys, I have some question about animation start time, it seems framer is read animation code one line after one line, is there a way to animate several animation effect at the same time.
1

February 06

Richard Whitner
I’m having an issue with the the ScrollComponent, where when I scroll up, and let it slow to a stop on its own, the scroll.direction property triggers a couple scroll.direction == “down” after coming to a stop. So scrolling up with this: scroller.on Events.Move, -> print scroller.direction outputs this when the upward scrolling comes to a stop: » "up" » "up" » "up" » "down" » "down" The opposite doesn't happen when scrolling down. Is it supposed to do this? Is there a way to stop this from happening?
1
Callil Capuozzo
If you are prototyping on a desktop, it can be frustrating to always have the browser chrome in view. With the fullscreen API you can get the prototype to go fullscreen with a simple function. edit: oops I screwed it up, updated the link below Here is the demo prototype (wont work on mobile browsers): http://share.framerjs.com/44y52aq581ev/
5
Junhyuk Jang
I made elastic floating menu. contrast and blur made this effect, it's a magic!!! http://share.framerjs.com/kaho6ykens9v/
2
Didi Medina
Hey guys, is it possible to animate one svg shape to another in framer?
5
Jeongmin Kim
My team designed a interface pattern callded 'Quick menu' for Naver app. This is a pattern to move to few menus rapidly from homescreen. I made this by Framer.js with 이정익 http://share.framerjs.com/py0ujuypzf4x/
0
Ben Rodenhäuser
This is really more of a Sketch question, but I figured it might be relevant for other Framerists, too. I have a Sketch document with 500 layers. I would like to put each layer in a group bearing the name of the layer. I found a Sketch plugin for batch renaming, but I really need the groups (you know why). It would also be ok actually, if all the groups were just named "Group", or something like that. Any ideas how I could go about this, short of hitting Command-G 500 times? (which, on reflection, perhaps wouldn't be so bad, but still...)
8
Danny White
First time I've seen `Utils.convertPointFromContext`. Doesn't seem to exist in the docs or online anywhere. Anyone know what it does, and what parameters it takes? And the difference between it and what I wrote below it? Thanks
3
Chase Curry
Dumb question- there's no way to tap into a phone's accelerometer with framer right? I'm assuming no, since it's not native.
3
Michael Lee
hi everyone, I am currently writing a few Framer tutorial articles and was wondering what type of tutorials and interactions/animations you would all be interested in learning about?
3

February 07

Kasper Germann Kramme
How can I make the content of a ScrollComponent snap to certain positions on release depending on the direction of your scroll?
1
Jeppe Reinhold
Feature requests for Framer Studio: - Coming from IntelliJ which has awesome auto-complete, Framer Studio's seems a little barebone sometimes. Just having the option to press Ctrl+Space in IntelliJ to show the suggestion is great! It also feels like Studio is sometimes suggesting things that doesn't make sense, like writing "midY" it suggest "midY.midY", which doesn't make sense. tl;dr, just copy all the auto-complete features form IntelliJ. - I would love to have multi-tab, multi-file support in Framer Studio. Sometimes when a project get's too big, it can be hard to scroll through all the code. Then it would be nice to split it up into multiple files, and have them editable in multiple tabbed code views in Studio. I know this is already possible using modules and multiple windows/IDEs, but it would be nice to have native support. and THANKS for an awesome product, I really love using Framer, it's incredibly powerful. :) I'll probably be spitting out more feature requests when I can think of them. :)
0
Andreas Wahlström
New module: Target layers using selectors! If you're used to jQuery or CSS selectors then this should feel familiar. For example: Find all layers with names ending with 'button', find all layers that are descendants of 'item3' or find all layers with names containing the word 'page'. Try the example project here: http://share.framerjs.com/azkstl349mi5/ Download the module: https://github.com/awt2542/Find-for-Framer
2
Ohn Ho
With the latest update to Framer, looks like parent/superLayers don't crop the child layers anymore? Is this expected? Here's two samples with an older Framer version vs new using the same code. Old: http://share.framerjs.com/yllhl1j6pgtr/ New (child layer isn't cropped): http://share.framerjs.com/xoqjf8k9r0ao/
1
Naema Baskanderi
I have been doing research on all the layer based prototyping tools and it does seem that Framer is coming out on top. Admittedly I sometimes get frustrated and try to find another tool with no programming but always end up back with Framer. A friend of mine said it seems like it's becoming the standard. I know we're all Framers users, but would you all agree with that? I wonder if people won't mind the steep learning curve. I'm the only one on my team who is willing to learn Framer since I do have some programming experience. Do you think that will be a big stumbling block for non-coders?
5

February 08

Mohammed Morsi
Hi guys, Monument defines and learns about your family and friends so that you can always find them easily based on their faces. Check it out and tell me what you think. The code is in the dribbble shot https://dribbble.com/shots/2510378-Edit-faces-in-Monument-app
6
Elias Suske
"External changes to your app.coffee are also monitored now, so you can quickly jump in your favorite editor and still get live feedback." Is this possible with Sublime? Due to its powerfull editor stuff (multiple Cursors, etc) i would love to code in Sublime but still get the live feedback in the Framer viewer …
2
Ee Venn Soh
What is the best way to include a javascript library to Framer Studio?
3
JL Flores Mena
Hey everyone, I'm having an issue with the latest version, it throws this error on my previously working projects: "Layer.on needs a valid event name". I think this happens on projects where I'm using custom event listeners, like: myLayer.on "change:customAttribute", -> I'll try to replicate in a project that I can share, but just wanted to know if you've encountered this issue. And btw, Framer team: awesome work on the new update, this makes your subscription model so valuable!
23
Daniel Lin
Currently, my modules don't load on "manual refresh" (cmd+R, or loading in browser), but after a single "auto-refresh" (after an arbitrary code edit) it loads and works. Has anyone faced this issue before, or know what's possibly different between a "manual" vs "auto" refresh?
6
Koen Bok
Jérémy Jones made a Framer tutorial en Français!
1
Sergey Li
Hi guys. Started using Framer Studio fairly recently. This morning I kept getting this "unexpected", I guess, syntax error. The code is quite simple and I looked over it for many times. I just couldn't notice what was wrong. I have attached a screenshot. Could anyone perhaps have a look at what I am doing wrong here?
9
Ben Rodenhäuser
Hi folks, I am trying to move around some layers in stages. That is, I want all layers in a certain array to move a bit, and once they have stopped moving move them again. I have created a toy project to try it out, but can't seem to get it to work. Could anyone perhaps have a look what I am doing wrong here?
4
Michał Sambora
Hey guys, I've run into some problem with Ed Chao code for card stack, it doesnt really work on mobile at all and I think it has something to do with Z axis rotation Source: https://dl.dropboxusercontent.com/u/1916165/edchao_cardstack.framer.zip Could someone take a look and fix this bug or know other way to make such stack ? Ps. I'm pretty much new to Framer and never had any experience with code so I'm trying to grasp a little of it from sourcess like this :D
6
Adria Jimenez
After a long weekend, I finally added several new video lessons for all the amazing updates of Framer in my Framer online course. Now makes a total of 72 video lessons and almost 8 hours of Framer lessons. Thank you, Framer team and Koen Bok for this amazing update! Remember that as member of this group you can use coupon FRAMERGROUP to get a discount :)
2
Koen Bok
If you ran into issues after the latest updates, there is a big chance we already fixed them. Just select "File → Update Framer…" and your project will get updated with the latest Framer.
3
Jérémy Jones
Hey guys, I have an import error with Sketch, you can check the screenshot http://cl.ly/2d0i0g1j3G2c Any idea? Thanks :)
1
Scott Criswell
Anyone else noticing doubleClick seems to perform more consistently than doubleTap? I have strange animation bugs with doubleTap that are completely resolved by switching to doubleClick. The only problem with that is that you cannot use doubleClick for a mobile prototype.
8
Márcio Ribeiro
Hello guys. I'm new with Framer Studio and I was wondering if there is a way to work with a @2x file imported from Photoshop without the layout preview gets bigger then the mockup? “Framer.Device.contentScale = 0.5” works fine on Ipad portrait view, but when I’ve tried with landscape didn’t work so well.
0
Casey Callow
How do I get this cursor to begin blinking once the text box has appeared?
2

February 09

Fran Pérez
#lazyframergroup is it possible to modulate the new color object? :)
2
Marc Krenn
'3D Panning' - an adaptation of Fran Pérez's '3D Dragging' (http://bit.ly/3Dragging) using Framer's new pan-event. http://share.framerjs.com/a1jvuzpfuyql/
4
Jianqi Chen
Hey guys, except for sharing framer, is there another way to send the work to others who do not have access to framer?
5
Koen Bok
We just shipped a bugfix release v52. Please note that we changed the default layer.clip to be false. This might affect your updated projects visually. To update existing projects, select "File → Update Framer" from the menu. For a full list of changes see:
19
Fredrik Ampler
HI! I'm experimenting with device sensor feedback and ran into a problem: how do I detect device rotation when the mobile is held up vertically? I'm using https://github.com/joshmtucker/OrientationEvents and can't figure out how to map from horizontal rotation to vertical rotation. I want the same feedback as seen in the video when the mobile is held up. Any ideas?
14
Stan Dézaid
I've tweaked a bit what Marc shared yesterday to fake an infinite scroll and have the card rotateX when the carousel spins. It doesn't come out clean on Chrome, can't figure out why.. http://share.framerjs.com/u1obpo05udca/
5
Luis Ricardo La Torre
Delay of children on a superLayer. I achieved this using Principle, but I want to pull it off on Framer. How would I animate a set of children from a superLayer?
3

February 10

Aalok Trivedi
Hey guys, I submitted a report but I thought I'd post it in here as well. I just updated to the newest version and I'm getting a 'Returned Invalid JSON string' error. The project was working just fine right before I updated. I opened a project with pretty much the exact same code and it worked fine. Any thoughts? http://screencast.com/t/q0MMIMbF8VX project with error: http://share.framerjs.com/q13uwro9k9pm/ similar project without error: http://share.framerjs.com/q2x7yzqi6x64/
4
Mike Johnson
Did the sketch export to PDF ever gain traction? I'm running into some ugly scaling up artifacts on shape layers
5
Joshua Crowley
Just wondering if anyone is using Framer prototypes as actual content in their products? I need to build some very simple games for a mobile website. Really tempted to explore delivering with Framer instead of a Canvas element, given the excellent workflow and community.
1
Victor Mark
What's the best way to include a scrollbar in a ScrollComponent?
3
Benjamin Bilow
Trying to activate an animation when a draggable layer comes into contact with another layer. Any suggestions?
8
Saurabh Kumar Suman
How can change font size of "Utils.labelLayer"?
3
Koen Bok
I'm sure many of you already noticed, but the new shortcuts work very well with autocomplete and inline documentation. Easy to find the event you need and read up on it.
3
Andrew Nalband
I've been experimenting with some of the liquid techniques I've seen from Jun-Hyuk Jang, Marc Krenn and others, and came up with a little liquid button interaction. The bounciness on release is achieved by slightly offsetting a scaleX spring animation from a scaleY spring animation.
16

February 11

Kalimah Priforce
Be A Mentor, Trailblazer, or Volunteer: My Brother’s Keeper Hackathon (Feb. 26-28, 2016) at TEQWeek https://medium.com/@Qeyno/welcome-to-teqweek-47503760ec7f…
1
Naema Baskanderi
I just published my first post on medium. It's about Framer and thanks to everyone on this site who has been so helpful! I'm still learning...but want to share with others before I forgot the struggle I went through when learning :)
5
Peter Mack
Hey guys, is there a way to get the scroll direction "up" using the mouse wheel? e.g.: if scroll.scrollY > 100 and scroll.direction is "up" thx for any help :)
2
Randi Dumaguet
Hello everyone! I had a chat with Jordan and Marc last night about preloading images in Framer. This was the product of that discussion: http://share.framerjs.com/jkhk8b4hn09t/ The images are populated randomly and are from an external source. Utils.loadImage is used to preload each image before the thumbnails are shown. The problem that I encountered is that when you invoke the lightbox to view a bigger version of the image, sometimes Framer re-requests the image even though it has already been loaded previously. Am I missing something? Cheers!
2
Tobias Schmücker
Hi everyone, I'm having a problem with the ancestors-property. It seems to only contain the next ancestor (parent), but not the ancestors of the parent. Can somebody confirm that? Koen Bok Jordan Robert Dobson
6
Aleksandr Sood'in
Hi, framers, Did anyone manage to integrate framer's package of html, js... into iOS app via iframe of somehow? I did just animation-prototypes for walkthrough screens, which don't need any interaction. I'd be very glad to hear from you any other practices of code reusing. P.S.: Facebook lay down last time I clicked "Post", so this can be the second instance of the same message.
1
Matt Baxter
Does anyone have trouble with running Framer prototypes in Chrome on Windows 10? I have some coworkers that can open the prototypes and even activate hover interactions, but for some reason nothing happens when clicking on something that should active a click event, not even an error.
6
Marc Krenn
Here's a surprsingly easy way to create faux-3D shadows: https://tr.im/3Dshadow This will be my last file (post?) for a while ... see you guys around! :)
6
Matteo Vacca
Hi folks, I'm new to Framer and I'd like to try this incredible tool to prototype what I need. I've seen that is mostly touch-based. Do you have some examples about web-based prototype? I just want to try it in a web-based project in which I'm working on. Ps. Do you have some example for a modal dialog from a layer (like the on in the video below, after the user interaction on the image). Hope was clear. Thank you so much
1
Michael Lefco
I want to make a pagination tutorial for an app and I want an animation to start when the next page comes into view, any suggestions?
3
Nikolay Berezovskiy
Hi guys. I'm working on a huge project and want to separate different screens between modules. Do you have any suggestions or examples how to do it right? For example: I even can't get or set properties of layer from module.
3
George Otsubo
Hello, newbie question: I'm trying to restrict a layer so you can't drag past a certain position. Every time I drag past y:500 the layer jumps back :( What's the best way to restrict the drag y position of a layer? http://share.framerjs.com/4z43osy75et2/
0

February 12

Richard Kho
Has anyone ever turned an imported Sketch asset into a Class and created instances of it? I'm prototyping a shopping cart and I'd like to repeat the rows and let them be dynamic based on whatever data I pass it.
1
Ban Nguyen
hi everyone, I am trying to create the textfield focus (see video) in FramerJS. What should I do to get the textfield back to default when it is unfocused. http://share.framerjs.com/padcf0h5tvwe/
2
Kasper Andersen
Hey people, I need your help. I have a Layer, lets say it's 700*500, in that Layer i have a Video it is 600*500 Is there a way to make the video fill the full height of the Layer it is in?
1
Er Kennedy
Hi guys, I have some design variants of the same screen separated in different art boards. What is your preferred method of working with variants? It feels a bit redundant to separate each art board in a different sketch/framer file just because a few things a different.
4
George Otsubo
Hello, I have two files that have the exact same code but one behaves differently from the other - hoping someone can take a look and see why that is? It's a snippet from a pull to refresh tutorial online. This works fine where dragging is restricted to a specific number. http://share.framerjs.com/ucns34a98a43/ This file is the same exact code but it behaves all weird when you drag down.. http://share.framerjs.com/ddi988fdw9n9/
4
Benjamin Den Boer
Hey All! Here's a little example of the iOS Notification Panel, highlighting some of our new advanced gestures. Learn how to work with edge swipe gestures, panning gestures, how to detect the current direction, how to use a background blur and more. Hope this helps! :-) See prototype — http://share.framerjs.com/dcuf2z78hydm/ Download sketch file — http://d.pr/f/1gHkd
3
Daniel Cortez
Hi all! I wanted to share something I wrote exploring how a designer might use Framer in the overall design process. I don’t get to use Framer everyday, so it was fun getting in and prototyping with it. Thanks everyone!
1
Chris Camargo
Has anyone had trouble creating custom snippets? For some reason, when selecting a custom snippet from the toolbar, it gets placed into the code view without the *first* set tabs. Every subsequent indentation beyond the first one on each line is still respected. Unfortunately, it's not terribly useful in that state. I've already compared my custom coffee files to the built-in coffee files, and we're both using tab indentation. Any ideas?
2
Amrit Mazumder
Hi! Is there a way to restrict 'layer.onClick' to mouse clicks only? I have a colleague with a tablet computer and using the mouse isn't working for him, but tapping does. Thanks everyone!
4

February 13

Naema Baskanderi
Hi All, To keep myself motivated in learning framer, I was thinking about making tutorials. I know we already have some people making great tutorials. So is there anything you would like to see that hasn't been covered? Also would you prefer a video or written tutorial?
5
Patrick Keenan
Is there a way to use the local node server in framer to act as a proxy for json files? I'm getting cross domain errors, and have a php workaround, but it would be nice to stay in framer and handle data from external source.
1
Adam Deher
So I have masked a video layer with a parent layer. Doing so has caused aut play and looping to be disabled. Is it possible to mask a video layer?
1
Timothy Velberg
Hey guys, Is there a way to only manual refresh a project? Right now when I turn of Auto Refresh Delay I'm unable to refresh a project. Both CMD-R and Reload don't seem to work.
3
Markus Smet
Just wondering, can the 'slider' component be vertically aligned rather than horizontal? I 'rotated' it but the slider was positioned vertically though it didn't work any more...
1

February 14

Alex Bystrov
I'm working on a ux-proof of concept of an interface for splitting a payment into several fractions. I use sliders and input fields to set these fractions, but the sum of them obviously should remain equal to the initial payment. Here is the prototype I started to assemble: http://share.framerjs.com/6knlu8r5d28l/ I ran into several difficulties already though and wonder if someone could help me figure it out. Would really apreciate any help! 1) I found the JS implementation of the exact logic I need for the sliders https://jsfiddle.net/anoor/8fs0Lq4a/1/ but failed to implement it in my prototype 2) I use sliders[i].knob.on Events.DragMove instead of sliders[i].on "change:value" to move all the sliders except current one, but the problem with this is that it stops working when I move the finger too fast and it goes off the knob 3) I'm also wondering if there's a simple way to trigger anything when user edits one of the input fields. I'm using Andreas Wahlström's text module for the inputs. 4) I tried to access tabular figures but can't make it work as well http://help.typekit.com/customer/en/portal/articles/1789736-syntax-for-opentype-features-in-css Here is the css, but it's not working: font-variant-numeric: proportional-nums; -moz-font-feature-settings: "pnum"; -webkit-font-feature-settings: "pnum"; font-feature-settings: "pnum";
0
Koen Bok
Question. I'm working on the importer a bit, and I haven't used Photoshop a lot lately. If you use Photoshop with Framer a lot, and you run into issues often, I'd love to know about them.
5
Marcus Gellermark
I have an issue (I think); I'm trying to make a page component work inside a scroll view. So I just made this to try the basics out. But whenever I start to use the scroll component the page component stops to be "snappy". I guess this has some reasons but how can I fix it? I've been trying different concepts with if's and stuff. But it feels messy and not very efficient. 🤔
2
Victor Nogueira
Hello, started playing with Framer for the first time this week. So far I'm really impressed (and happy with how quickly you can achieve things). I'm trying to add a pageComponent inside of a scrollComponent. Everything seems to be working fine, except I'm getting an error that says: "ReferenceError: Can't find variable: offset" The prototype is working as it's supposed to, but just wanted to get rid of this error. Link:
8

February 15

Harshad Kulkarni
How do I assign a ScrollComponent to a layer imported from Sketch? Can someone please help me.
2
Andy Jakubowski
Has Events.StateWillSwitch been deprecated? It still works, but seems to be gone from the docs. I use it a lot to sync state changes between a layer and its sublayers: when superlayer switches to state B, tell all its sublayers to switch to state B as well. Is there a better way to do this now?
2
Mike Hughes
New to Framer but working on Custom Device frames. Code Snippet is as follows: # deviceType can be either "phone" or "desktop" Framer.DeviceView.Devices["custom"] = "deviceType": "phone" "screenWidth": 720 "screenHeight": 1000 "deviceImage": "http://f.cl.ly/items/001L0v3c1f120t0p2z24/custom.png" "deviceImageWidth": 800 "deviceImageHeight": 1203 # Set custom device Framer.Device.deviceType = "custom" But when playing around with creating Custom Device frames, how do I re-position the Screen, as it may not align to the Device Image, if the Device Image is a few pixels left/right or up/down. Are there other properties I can add to Framer.DeviceView.Devices["custom"] to offset say 10 left and 5 down relative to the Device Image ? Or should I just always ensure the screen part of device images are pixel perfect centred on x and y axis ?
1
Marc Krenn
Let's do a fun thought experiment :) Let's imagine somewhere someone's using Framer Studio to prototype the 'next big thing' ... you know, the next Facebook, Google, you name it. In order to get some feedback from his trustworthy mentor on his awesome prototype, this fellow decides to show it to him a Framer 'Share'-link. That's how his (potential) multitrillion dollar idea ended up on some random AWS server - theoretically being accessible by anyone with an internet connection. So, legal and moral concerns aside, how cool would it be to to guess the resulting share-link (http://share.framerjs.com/XxXxXxXxXxXx/) and rake in those quadrillions in venture capital before he can? Cool enough to think this through, right? Right. ########################################################### #1) Basics: Framer's 'Share'-links consist of a static (http://share.framerjs.com/) and a semi-randomly generated part, which consist of 12 upperLowerAlphanumerical characters (example: sL1i6jl35vya). We're interested in the latter one. ########################################################### #2) How many unique 'Share'-links are there? There are 62 available upperLowerAlphanumerical characters: 'log2(62 characters) = 5.95419631039' bits of entropy/character 5.95419631039 * 12 = 71.4503557246 entropy for the whole 12 character-long string Using this entropy, we can now calculate the total number of all possible, unique 'Share'-links: 2^71.4503557246 = 3.226.266.762.397.899.821.056 In other words, there are ‚3 sextillion something‘ or ‚3 thousand billion billion something something‘ unique links! To put that number in perspective, astronomers and astrophysicists assume there are between 120 to 300 sextillion stars in the observable universe. ########################################################### #3) How long would it take us to guess the one link we're interested in? In order to answer this question, we first need to establish a number of guesses we can make in a given timeframe. While running some tests under real conditions, I was able check about 200 guesses ( = 'XMLHttpRequests') per minute: _ ø 30 _____________________________ ms/request = ø 3,33 ____________________________ reqs/sec = ø 200 _____________________________ reqs/min = ø 12.000 ___________________________ reqs/hour = ø 288.000 __________________________ reqs/day = ø 105.120.000 _______________________ reqs/year So, with all the numbers in place, it would take us approximately 35 trillion - 34.637.471.569.670 to be exact! - years to check every possible 'Share'-link for the wanted prototype. Now, I have some good and bad news for you! * Let's start with the good one: If you're insanely, stupidly, win-two-lotteries-in-a-row-ballpark-times-5.5-lucky, you could eventually guess the correct URL in your lifetime - or even more unlikely - on your first try. * The bad one: If you're not that lucky, or not lucky at all, chances are, the universe will freeze up, evaporate or rip apart before you'll be able to find the one link. ########################################################### #4) Conclusion: As you can see, brute-guessing Framer links is *not really* a viable (business) strategy and I'd suggest coming up with some own, original multibazillion dollar ideas instead ;) But then again, people also still do lottery, so ... ########################################################### #5) Bonus: How long would it take to guess ANY valid Framer link? Let's assume there are currently 250.000 prototypes on the AWS servers: 3.226.266.762.397.899.821.056 possible strings / 250.000 shared prototypes = every 1.290.506.704.959.159th string, out of all possible, is currently in use. That's still an insanely large number by any measure and it would take you about 12,2 milllion years on average to guess a valid link! And even then, you'd probably dig up an useless(?) prototype like this one here: http://share.framerjs.com/78cnvjvgfsx2/ ;) ########################################################### #6) Addendum: A) The real worth of a product/business idea: http://www.artlebedev.com/mandership/161/ B) As far as I can tell, the current bottleneck of verifying brute-guessed 'Share'-link is the connection speed to the AWS servers. As connection speeds and the number of shared Framer files will increase in the foreseeable future, the chance of guessing a random 'Share'-link will increase accordingly (#5). C) Detecting conspicuous 'XMLHttpRequests' and (temp)banning IPs from doing so AND/OR capping the said requests in a given timeframe would make it virtually impossible to bruteforce-guess a link. D) Guys, be sure to ALWAYS check the content of your 'imported'-folder and your backups (/framer/backups/) before sharing a potential sensitive file! Koen, Jorn : Talking about this very topic, maybe it would be helpful if you could a list (or some sort of filebrowser) to the "Are you sure you want to share this project?"-prompt, which should show all the non-framer files (imported assets, etc.), saying: "Hey, do you really want to share all these files?"
8
Amelia Liarakos
Has anyone worked with Material Icons in FramerJS? I'm sourcing the icon font straight from Google and using the i tag to include in my prototype (so I don't have to hunt down the right image size and whatnot) and I cannot for the life of me get them to resize at all. Anyone else run into this problem? Any solutions? Thanks!
2
Marcelo Eduardo Oliveira
hey Koen Bok are there any "quantity" discount for Framer? Just checking before ordering ;)
1

February 16

Ploy Chav
Omg!!!!Wonder!!!!Pretty Tattoo!!!!
0
Silvia Bormüller
Hi, I have a simple problem (I guess) I d like to create a chained animation with a Sketch layer. My problem is: the animation works only once but I would need an endless one. Same code works perfectly with "x = new Layer". repeat: x doesn`t work either. :/
1
Chad Lonberger
Quick question about ScrollComponent... am dynamically adding layers to a ScrollComponent (messages to a chat-window) and want to animate to the bottom as new messages are added. Have tried variations of animating scrollY, scrollToPoint(), etc but whenever I animate the scroll position, it always starts the animation from the top instead of from where the scroll position currently is. Changing originY seems to have no effect. http://share.framerjs.com/wrb1qm3ckl1k/
6
Daniel Caine
Hi guys, I'm wondering how you make individual elements imported from Framer which share the same name, become clickable? The example here shows that, when you try element.on Events.Click, -> doSomething that it will only execute on the first element which was imported
0
Jonas Jäger
Chad Lonberger posted something about iOS scrolling performance a few hours ago. Thought I'd chime in with my Android experience. I'm using a LG G3 to preview my mockups and the performance is very poor (see Video). Performance is fine in the FramerJS IDE itself or in presentation mode. First I thought it was because of large images and the high resolution of my device (I'm setting a custom device in framer). The png of the content that gets scrolled is 1506 × 6848 pixels, the png file is 10mb. But even if my scrollable content is only a grey/white pattern with small file size, I get poor performance. Did anybody have similar experiences with his Android (high res) device?
7
Ben Rodenhäuser
Feature suggestion for Framer Studio: "Show Project in Finder". I often find myself in the situation of wanting to work within a project's folder structure (to add an image, say, or find my css file). But where did I put that project again? It would be super-cool to have a "Show in Finder" button, which would do the obvious. Or maybe this is already conveniently possible and I am missing it?
3
Didi Medina
I'm trying to nest a scroll component in a page component and for some reason its acting up :/ Anyone willing to take a look? Cant share publicly unfortunately.
3
Andrew Nalband
After Didi Medina was asking about ideas built from Jordan Robert Dobson's input module, I started playing around with it, and ended up with something kind of ridiculous: The Adele Input.
2
Chad Lonberger
Does ScrollComponent have some on-device performance limitations? Simple demo w/ 36 layers appears to bog hard on an iPhone 6. http://share.framerjs.com/wrb1qm3ckl1k/
6
Dmitry Sholkov
While was trying to find a workaround on MOV issue that I'm experiencing at the moment. Created a quick PNG sequence framer prototype, and though to share here. Might be helpful to someone else. http://share.framerjs.com/9vwihgg6x82p/ If there is any suggestions how to simplify that timer hack, I'd really appreciate it.
2
Rory Smyth
Hey guys. Are there any plans to improve the editor in Framer? Things like line duplication, multi cursors, moving lines up or down, code collapsing, folders etc
8
Márcio Ribeiro
Hey folks, do you guys often use Framer for prototyping websites? I’m working in one right now and would like to know if Framer has a function for enabling scroll from browser, instead of the usually “touch move” native from the Scroll Component.
2
Danny White
Is it possible to have a browser's native back/forward buttons be interactive within a prototype? I'm working on a web project (so no on-screen back/forward buttons), where the chrome (most likely Safari iOS) will be visible when demoed internally
6

February 17

George Otsubo
Hello, just a quick heads up - trying to learn from some of the older examples on the site but when I go to File -> update Framer... some of them do not work as intended :( e.g - twitter feed, pull-to-refresh, album player, list-sorting example etc.
1
Spencer Brooks
Hey folks, N00b question. How do I get the dimensions (x and y pixels) of an image embed in a layer?
2
Stephanie Engle
Hey friends, what's the simplest way to create a shimmer effect a la FB mobile loading skeleton? I figured out a hacky solution earlier, but it was so bloated.
6
Jérémy Jones
Hey, I would like to create an animation to create a smooth "floating" effect on a layer(chaining animation), any idea/example? Thanks!
1
Benjamin Fritz
Hello community, I have a basic beginner's question: I set up an Android app in Sketch where all the different screens are on their own artboards so I got a flow of the entire app. The app's navigation is handled via a standard NavDrawer / "Hamburger" menu which is also on a separate artboard with its semitransparent overlay beneath it. I try to build a basic prototype in Framer and I'm now at the point where I set up the initial screens and the animation for the hamburger menu to slide in and out. How do I ideally change the order of the different screens/artboards when tapping on their respective item in the navigation while keeping the menu the top most layer? As far as I understand it, it's basically a stack of screens overlaying each other and by selecting the item in the menu I would pick the respective screen and move it on top of all others on the index or z-axis. Is this approach the right one and how do I accomplish this basic interaction in my prototype? Thanks so much in advance for your help! I heard only great things about this group so far, hope you can help me.
6
Ehren Miller
Having difficulty figuring out how to reuse animations. For example: let's say I'm trying to make an unlock screen similar to the default iPhone's. I can make the buttons using a loop and give them each a "pressed" state, but I can't figure out how to make each button switch states when you click it without individually writing out 'button1.onClick -> button1.states.switch("pressed")'. Any tips?
2
Keith Lang
You've probably seen this. +1 for a Lego-easy Machine learning module in Framer…
10
Arturo Goicochea
Is there a way to select a full line? In Atom (text editor) CMD + L selects the whole line :) Miss it in Framer Studio.
1
Aalok Trivedi
Hey All, I'm having a little trouble creating a simple animation. I want a wide rectangular bar to morph into a circle and remain in the center. However, if I use the scaleX property, the borderRadius property does not render properly. I made a second animation (below)using the width property, which does what I want, but it doesn't collapse to the center — as is in the first animation. Thoughts?
1
Lauren Nielsen
Hey party people. I thought I would share the demo I presented last night at our Seattle Framer meet up, now that everything is working. I'm super bummed I'll miss the one next month when Koen and Jorn van Dijk are in town! This is a purchase flow prototype, where you can swipe between pages or use the buttons. Plus all of the content on each page is interactive and dynamic. Cheers! http://share.framerjs.com/f70pqj79jn3w/
1
Diego Oriani
I am getting the following error trying to load a JSON file in FramerJS — SyntaxError: Unexpected token ':'. Parse error. http://share.framerjs.com/14fjt5n1hlac/ Have anyone come across this as well?
7
Erik Berndt
Dear Framerians, I try to fire an animation when another animation starts, in order to let them happen simultaneously. layer.onAnimationStart does not work, whereas layer.onAnimationEnd works properly. What am I doing wrong? Here the code:
1
Justin Ma
I figured I'd share my side project here. It's called Project Interaction (http://www.projectinteraction.ca), I create a prototype in FramerJS that are unsolicited solutions to interaction problems I encounter in existing digital products every week. Alongside the prototype are write ups to explain the rationale of why. This week has been entry #17, it's an interaction to speed up access to list management in twitter clients. Hopefully this website is interesting to some of you! http://www.projectinteraction.ca
1
Koen Bok
New huge release. We added gestures like pinch, pan and force touch, including support built right into Framer Studio (hold alt to pinch). We also improved 3D a lot, giving your canvas a perspective by default. For the framework we added shortcuts like layer.onClick and layer.onPan, and we renamed super/subLayer to parent/children for simplicity. Read the full post: http://blog.framerjs.com/posts/new-multi-touch-gestures.html
33

February 18

Andre Cardoso
Hi, How can I add a new browser screen size to the viewer options inside Framer Studio? Cheers!
1
Chris Wang
Hey Framers, is there a way to add timing for each individual properties of a layer? Maybe something like TestBox.animate properties: scaleX: 300 time:0.2 curve:"ease-in" opacity: 1 time:0.3 curve:"ease-out" x:100 delay:0.3 y:300 delay:0.3 time: 0.4 curve:"Spring(100,10,0)" The individually specified timing and curves could just overwrite the overall timing and curve for that layer?
3
Richard Burton
I’m trying to create a pulse effect on an icon. I want the dots’ opacity to increase by 0.3 and then decrease by 0.1 when selected. Right now they just increase when selected. With my current setup things get out of sync when I keep clicking on the tabs. Here’s the document: http://share.framerjs.com/undh7pjeab3s/ The problem is around line 106, which I’ve commented out.
0
Daniel Caine
Are there any plans to include Invision-style commenting in the future?
1
Mike Johnson
Has there been a change with sketch artboard positions that I missed? On a file with only 2 artboards and 1 group for each, importing the file studio shows the second artboard off at x = 1540, the position of the artboard in sketch. Using Sketch 3.5.1 and Studio v51
1
Teodoro Mylonopoulos Labella
Hi guys! perhaps this question is answered already but I didn't find any related to that with good argument. I'm working with Framer for a long time and I used to share the projects internally with the localhost link meanwhile my mac is running. However, I was wondering if there is any possibility to create a Framer Server/Host/Service online and upload the projects over there in order to create a webpage which makes all projects accesible. As a summary, like a apache webserver, upload framer project and then access to it by the URL. Is it possible? (no payments services as ExpanDrive or similar) Thanks
3
Sergey Voronov
hi i am planning Kiev meetup in the end of March, so everyone from Kiev, or who can commute there, feel free to signup at this form
0
AJ Siegel
This seems really simple, but I can't seem to get a layer in my artboard to scroll correctly. When I scroll it looks like a copy of the layer is scrolling.
3
Phil Schrader
Hey guys I installed framer js on two macbooks, just got a new one and want to install framer on this one as well. However, it seems to be limited to two devices. How can I manage my devices in order to install and use my license. Thanks and kindly
1
Aalok Trivedi
I want to add a new layer to the cardContainer group (that's located in scrollFeed.content) when loading ends and have that cardContainer layer scroll up to it's new top y value (revealing the new layer). However, I think the problem is that the cardContainer layer doesn't update its size and I can't scroll up to the new layer. What's the best approach for this? Sorry if this was a confusing explanation and forgive my messy code:
0
Hamed Bahrami
Hey Guys, I am testing out FramerJS for a little while now. But most of the time I encounter a problem when importing a sketch file. When I import my sketch file. I get an error in the web console. Saying 'SyntaxError: Unexpected EOF' in the framer.generated.js. How can I solve this. Feedback is highly appreciated. :)))
1
Markus Smet
Hey All - looking for articles/tutorial on using an API to add data into a Framer project. An example API is https://randomuser.me/ - but how do I access that because the default doesn't work when added to Framer... $.ajax({ url: 'https://randomuser.me/api/', dataType: 'json', success: function(data){ console.log(data); } });
4
Pablo Artee
Hi there, anyone having problems with some layers not showing on the Web Share? I haven´t been able to figure why it´s happening. Link: http://share.framerjs.com/hw8bal8qz207/
4
Naema Baskanderi
Hi All, Was checking out the new Sketch Plugin - Framer Inventory http://timurnurutdinov.github.io/framerinventory/ http://share.framerjs.com/nwl3jqxvswmc/ Remember to order your layers in sketch accordingly. I created a sketch file to recreate the sample 'keynote - magic move' and thought I would share. Note: it would be nice when people create anything for framer if they attach the sketch file. I learn by doing :)
3

February 19

Field Aix
Hi guys, I made a Chinese Hot Pot Menu with framer, which you can play around with it here:https://dribbble.com/shots/2534056-Chinese-Hotpot-Menu . I found it hard to use for..in.. sentence to handle different layers like children of children,so I just write lots of sentences ,did anyone have any ideas about this issue? thanks a lot!
4
Tebza Ngwana
Hey guys. I'm having trouble creating a circular progress bar. Please help
0
Daniel Lin
Hey everyone! Framer Sessions SF04 will be held next Tuesday, October 13th, @ Jawbone HQ! Starting tomorrow (Wednesday 10/7) @ 9am, you can start signing up at this link: http://www.eventbrite.com/e/framer-sessions-04-sf-registration-18947761264 (40 spots available) Let me or Ben Adamson know if you have any questions! We're excited!!
2
Koen Bok
Ben Adamson hosted a few Framer Sessions in SF, and wrote a fantastic article for people looking to do the same. But this is a great guide to organize any tech meetup, really. It's full of great tips. We now have had sessions in SF, Seattle, New York, London, Berlin and some other places. Obviously, we love people setting these up for Framer and can help with materials, sponsoring and marketing. It's a ton of fun to learn together or teach people on how to get started. If you're interested send Sara a message. http://blog.framerjs.com/posts/technical-meet-ups.html
15
John Grendon Enderby
OK, so this might be a basic question for some, but I've been banging my head about this for a while on some of my demos. Let say I have an array of layers, and I want to animate 1 layer one way and all the others another. Is the only way to this by using state switching? Or is it possible to say if this layer isn't the one that is clicked, either reverse the animation or stay the same? Link here if it helps. Not sure if there are other things I can do to tidy stuff up, but any help/advice on that front would be appreciated too!
8
Jamil Lazarev
My first Framer JS prototype. I tried to do more complex work, than just a few animations. http://share.framerjs.com/13assee323kx/ * Images loading may take a time if you're on slow internet connection
1
Nik Udovitskiy
Hey guys, is there a way to make a layer draggable if only it is being "pressed" at a specific location within the layer? Thanks!
2
John Grendon Enderby
Hello folks, another one from me. Lets say I'm creating layers in a for loop and setting the x value so they all start stacked on top of each other. How do I then animate the x value so that these layers spread out? Been trying a little while now and I'm sure there is a way to do this. Setting the spread out version in the for loop is easy, but spreading from flat seems like an oddly weird one! If i were setting it in the for loop it would be x: (j*200)+560, but what I want to do is set the x value to 560 and then animate to the above. Hopefully this makes sense! Thanks in advance!
7
Javier Eduardo Treviño
How do I wrap a sketch layer while retaining its original size?
1
Kishore Doddi
If you have 20+ pages side-by-side or 20+ layers set up in horizontal scrolling, the layers flash and disappear a lot making the prototype look very choppy on iPhone 6s. Is there some way to make it look smoother? Here is the simplest example -- all I did was change '10' to '20' in PageComponent snippet:
4
Nicolas Elizaga
Hi everyone! In the recent Framer.js updates, can you think of anything that might cause the behavior in the attached video when packaging up a Framer project as a Cordova iOS project? It tries to overscroll outside the bounds of the device, which happens anytime I have any off-screen assets (i.e. all the time). I can only recreate this behavior when running as a native app, FYI. If I roll Framer.js back to a version before Feb 16th, the scrolling behavior seems to work correctly – but unfortunately misses out on other iOS scrolling fixes you all deployed. Sample framer project: http://share.framerjs.com/ex3zubrr9tgr/ Thanks :)
3
Naema Baskanderi
Hi All, I am looking around online for 'best practices' when it comes to UI animation. I have found a few things. But thought I would ask here. Trying not to go back to the 90s where EVERYTHING on the screen was blinking and moving :) Framer lets us do so much, don't want to get carried away! P.S I will share whatever I find :)
7
Markus Smet
Hi Everyone, I've been experimenting/hacking with data and swipe interactions http://share.framerjs.com/kieickt32yjs/ - try swiping left or right each card in the scroll window. I would love your thoughts on: What best practices am I missing in working with data, event driven animation and linking interactions across layers?
0

February 20

Javier Eduardo Treviño
how do I make the prototype fill the whole device size when I'm not using Framer Studio but my own editor?
7
Dawid Cedrych
Hi guys, I'm totally new to Framer JS and I can't find the option to create multiscene prototype(e.g button triggered transition to another view). Does framer support such workflow? Thanks in advance :)
2
Spencer Brooks
Hey folks, I've been having a lot of trouble with Scroll Components reseting their scroll position when you move layers in and out. In the example below note the scroll position resets to 0 every time one of the layers gets to another parent. http://share.framerjs.com/rrctculi3apm/ What's the preferred and simple way to lock the Scroll Component in place while layers are move in and out? Do I have to store scroll positions all the time?
3
Vane Jung
Hey there! I was creating a loop animation that rotates constantly in a steady pace with no ease. But it seems that "linear" curve does not work. It seems that ease-in-out still applies and ignores linear... Any idea, guys? :(
8
Vishwas Shetty
Question: Is there a way to scroll from the first page to the last page and vice versa for a page component (create a carousel). I tried using snapToPage, but it behaves quite weirdly.
3

February 21

Adam Noffsinger
Is there a simple way to create a fake click event within framer? Similar to the .click() function in jQuery. I want an element to behave as if a click event just fired on it (namely an input) even though the user hasn't touched it. I've been struggling to find a way to do this for a day now. Thanks!
2
Javier Eduardo Treviño
how far do you go in your process while using Framer? it doesn't make sense to code the entire app right? just the important interactions to be used in the production code
7
Andreas Wahlström
Tutorial: Create user flows based on layer names. https://medium.com/@andreaswah/prototype-user-flows-in-framer-studio-dc87f5211a47#.7lp324doa
1

February 22

Jolie Rozet
OH SHIT! THIS IS THE MOST CONCERNED DISEASE WHICH EVERYONE SHOULD KNOW
0
Márcio Ribeiro
EDIT: I could get the effect changing children layers positions as the mask moves + parent.clip = true, but I wonder if there is an easier way to do this on Framer. I'm using a parent layer as a mask and want to move this layer without move the children layers. So while the mask moves, the only visible parts are changing by the mask movement, but children's position maintain fixed. How do I get this effect?
7
Spencer Brooks
Question for the community. I want to tap and hold on a button in order to bring up a "selection menu" (draggable layer), and without lifting the finger (touch is still occurring), the "selection menu" gets dragged and captures the drag events. Unfortunately I can't seem to make this happen without a lifting the finger doing a starting a separate drag. I did a quick example below (neanderthal code) to show what I mean. How can I get "selection menu" to drag without lifting my finger?
2
Jérémy Jones
Hey guys, noob question, how can I retrieve the position X/Y of a LongPress? I'm asking that because I would like to create a layer right after the LongPress at the same position. Thanks :)
2
Chandan Manohar Raikar
I have a framer UI where user will input item price and i have to capture the price into the excel sheet. Is it possible to write values to excel sheet in framer js.
1
Mochen Liu
Help! sI'm learning FramerJS, and ... superLayer seems not working in my Framer studio... I copied the same code from an example on codepen (http://codepen.io/stakes/pen/LExJJM)... It works perfect in the website (layerB is inside of layerA, aka layerA is the mask layer for layerB) but it doesn't work in my framer studio. Here's the code I copied from CodePen layerA = new Layer width: 150 height: 150 x: 50 y: 50 backgroundColor: "#FFC107" layerB = new Layer width: 720 height: 75 x: 5 y: 75 backgroundColor: "#ff0000" layerB.superLayer = layerA Does anyone know why is this happened? Thanks a lot!!
3
Nikhil Venkatesh
Hey All, I'm fairly new to Framer and I'm trying to create a splash screen. I'm using the SVG module from here: https://medium.com/framer-prototyping/working-with-svg-paths-in-framer-43d3c2d08adc#.26x77vv90 I've got most of the animation sorted out. The only issue I'm facing is with my background layers. When they are visible, my logo's border (animated SVG stroke) isn't showing up. If I hide the BG, it works fine. Any ideas on how I can solve this? Here's the link to my prototype: http://share.framerjs.com/88mpk8g3w4g0/ I'd also love some feedback about my code in general, and if there are easier ways to do what I've written. Thanks!
1

February 23

Chris Lee
I wish Sketch import preserved white space around layers/groups - either in the image itself or in the Framer layer dimensions. This would make it a lot easier to size tap targets around icons, for example.
3
Kyungsik Yoon
Hi, folks. I am trying make a component draggable on "tap and hold" event. Similar behaviour can be found on iOS home screen icons where user tap and holds and start dragging an icon. Any help is appreciated, thanks in advance~
1
Nir Benita
Hey guys, Framer had just started asking me to enter my auth code again.. Problem is I had already purchased the software (and have been using it) since April... Any ideas?
3
Mike Hughes
New to, but loving Framer Studio so far. But I can't seem to find a definitive list of the keyboard shortcuts for Framer Studio. Does not seem to be in the doco within Studio. Can some one point me to such a list eg. in Presentation mode how do I change device orientation with a keyboard shortcut ? Can it be done with keyboard ? I can do with code, but want to change orientation while presenting the prototype.
8
Dawid Cedrych
Hi guys, I wonder how to change text color, backgroundColor parameter changes the actual label's background color instead of text itself. I imported file from sketch, group my label so it's visible in framer and tried as follows: sketch.layerA.onTap -> sketch.myLabel.backgroundColor = "ffffff" Thanks in advance
3
Albert Ramirez Canalias
Hey everyone :) As a design team we're working to give specs to devs to implement what we've prototyped... but as iOS and Android don't use the same way to "code" as Framer. How could I translate the code we've inputed on it to something that could be applied on those OS? Thanks a lot
0
Vishwas Shetty
Hi. If a parent layer has 3 child layers, is there a way I can get the topmost child layer (child layer that is in front of other layers)?
3
Marie Lu Vinh
Hey there! Anyone using FramerJS on its own, using JavaScript and not Coffeescript? I'm finding it a bit hard to get setup on this... Using framer studio is ok and there are good docs about it, but I can't seem to find anything like it for using the plain JavaScript library. Any hints?
2
Aaron Paterson
Hey guy and gals, the latest update created errors on lots of old projects Anyone else having these issues? see attached one of many.
6
Peter Kubin
hmmm, with the 2 recent updates applied in one go (sorry that i skipped the previous one), my current prototype will not run anymore, since some sketch layer names start with a number as it seems. '134Error: (2nd_part) Layer or Artboard names can not start with a number ' this hasn't been a problem before. just asking if i could wait for a fix for this or if i would have to rename the approximately 50 layers starting with a number... ;¬}
1

February 24

Evan Knight
In the newest version (v53), this code no longer seems to be working: video.player.play() Events.wrap(video.player).on "ended", -> video.player.play() Is there something new that is affecting it, or am I doing something wrong? Here is my example: http://share.framerjs.com/7uc3hnjche2h/
2
George Otsubo
Ummm...since v53 page component doesn't seem to work properly :(
1
Randi Dumaguet
Hi all! Updating a project to v53 makes everything scale down to 0.5. Was this intended or a bug?
2
Jacob Carter
How difficult would it be to add external libraries for interaction? Something like Annyang for voice interactions...
1
Arron J Hunt
Is it possible to do a CSS animation in Framer? Specifically animating a gradient.
2
Florian Pnn
Hi guys, I'm trying to recreate a concept where I have a PageComponent inside another PageComponent. It looks like this approach isn't possible, any idea how to create a workaround? Here is a not working example
3
Dave Crow
Anyone have any tricks for doing a radial wipe animation on a pie chart? Something like this: https://dribbble.com/shots/2000368-Radial-Wipes I tried using Josh Puckett’s SVG module, but getting all the pieces lined up is really difficult. Ideally, I’d also be able to reverse it.
4
Nicolas Tilly
Hello, I bought Framer just a few days and I already found this really cool software. I have read the documentation but I come here to ask for advice to start a project. I try to make a prototype with three pages, each with a different height (by clicking on a button you can move from one page to another) but when I scroll on the first page, it also scroll in the other. I think I still have not understood the PageComponent and ScrollComponent ... If you have an example of this kind of project to show me it will help me a lot. Thanks for your help :) http://share.framerjs.com/n5mvgqjlr8f9/
4
Parth Kapadia
Hey guys. I'm new to Framer and wanted to build an interface which takes input from the user to display relevant content. An example is searching within contacts. (User types input string and only those contacts matching it are shown) Is this possible in framer and if so could someone guide me to an existing prototype or a tutorial? Thanks!
1
Silvia Bormüller
Hi, I have an opacity problem with my overlay layer. The preview in Framer doesn't show the same like my sketch file. There are some shapes filled with gradients under my overlay (65% opacity) layer. Is there a workaround?
1
Laura Galbraith
Wanted to just say to everyone, thank you SO MUCH for your help! This forum has been a great resource for me and many others!!! I am learning so much more quickly than just by myself! Question about the Utils.delay and resetDefaults thing... trying to reset a timer I've added to the opacity of a few layers... multiple clicks are causing some unexpected behavior... Anyway, this isn't working... what would be the correct implementation?
3
Evan Knight
Any idea why "if page.currentPage == pageVideo" isn't reading my videoLayer named pageVideo inside a pageComponent? I'm trying make the video play only once the pageVideo is the current page. Thanks!
1
David Dantas
Hi everyone, Brand new to framer. I'm trying to modify an example from the framer website that had balls slightly animating in place. But instead of balls, I want to display images from an image array. I'm having difficulty doing so. I am trying to access the images inside of a for loop, and accessing the index of my imageList array. What am I doing wrong/how do I get my images to display instead of blue boxes? Thanks!
13
Stan Dézaid
Does anyone know how to create a "steam-effect" layer you can swipe progressively to uncover an image ? (similar to the example below)
4

February 25

Adanma Ekeledo
Hey everyone. I'm prototyping an interaction similar to Snapchat's swipe left and right navigation, but I can't seem to set up a Page Component to allow swiping left from the initial screen. Seems I'm only allowed to swipe and add pages in the right direction. Any ideas??
3
夏洛克
Hi all,I meet a new problem in v53/v54 again... I want make a mask layer to cover some content of another layer is fail... In old version is work perfect, but the new version work not properly... I want show the mask layer size, but it will show the child layer fully... Need help.....thanks xx=Screen.width/2 yy=20 ww=470 hh=352 layerMask=new Layer width: ww height: hh midX: xx y:yy layerBig=new Layer width: ww height: hh backgroundColor: "Red" superLayer: layerMask scale: 1.5 My simple project is in here :
1
Ben Ashman
I'm trying to rotate a card along its x axis and I'm running in to some clipping issues when animating. This appears to be a Safari-specific issue. I've tried all the usual solutions including Koen's old trick (https://www.facebook.com/groups/framerjs/permalink/547966685330407/), but I'm still not having much luck. Anybody found a solution to this? http://share.framerjs.com/50r2dbbj4wez/
1
Stan Dézaid
Has anyone done something similar to this in Framer ? It's not so much technical, but I'm looking for inspiration regarding puzzles and I'm sure it could serve other people in the group as well ! (I'll give it a shot a share it here)
1
Robert van Klinken
I’ve always been really impressed by this specific animation on the Apple Watch. Always wondered how this was made so I decided to build it in Framer. http://share.framerjs.com/yn5vvzie72cm/
2
Anton Jarl
Hi! I'm having issues with the preview in Framer Studio. It doesn't register any clicks on any prototype but when I share it, it works as expected on the URL. Any ideas?
0
Kenrick Zhou
onScrollAnimationDidEnd function can not be used
3
夏洛克
Hi everyone,I upgrade to v53 this morning, but I meet the ScrollComponent is not work properly... I clean the other codes and leave the simplest line at new framer project... You can see just add layer to the ScrollComponent...but it will not display properly... How I can rollback to old version? or fix the problem ? thanks @@
4
Ricardo Pedroso
Hey. I'm doing a kind of a form on framer and I'm wondering if I can simulate on framer the "tab" key, like pressing "tab" and move to the next field. Does anyone know if this is possible? Implement keyboard listeners? Thanks!
2
Evan Knight
I'm getting "NaN" when I print videoLayer.player.duration. Any ideas on how to get the length of the video? I've read a couple places about getting "loadedmetadata" first, but not sure how to achieve that in framer land. http://share.framerjs.com/tshwvrv145pw/ My goal is to snap to next page once the video completes, but also to do some things other for the length of the video while it's playing.
1
Jonas Treub
The Game of Life is a simulation invented by mathematician John Conway. It consists of a collection of cells which, based on a few mathematical rules, can live, die or multiply. Depending on the initial conditions, the cells form various patterns throughout the course of the game. Here it is created in Framer. https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life
1
Jon Arnold
How would you build something like this (flexible bar):
5
Jeppe Reinhold
I recently bought a new Mac, and now I can't activate my license for Framer Studio because it has been used on too many computers. what do I do?
2

February 26

Evan Knight
Whats the best way to switch play/pause video states using Events.click? http://share.framerjs.com/rou0w4jfnaoz/ Can you do something like: videoLayer.states.add stateA: videoLayer.player.play() stateB: videoLayer.player.pause()
1
Jon Arnold
With the new version all my prototypes are broken: Cannot read property 'toString' of undefined. Please help…
3
Jiaxin Chen
Hey Framers, How would you build Facebook Reactions w/ Framer JS, especially the animated reactions?
2
Tudor Munteanu
I've been trying to use draggable.directionLock in a prototype recently and it seems to not work so I've compared it to the example on the website — http://framer.com/examples/preview/#swipe-n-scroll.framer#code which works as it's suppose to. But, as soon as I download and update the project to v.54 it stops working — http://share.framerjs.com/a9f08pv9ov1x/ . Any idea why? Thanks in advance!
2
Andy Jakubowski
Having issues with getting my Sketch layers to import as PDF—the extension is not removed and I can’t target the layer in Framer. Does anyone know how this should be done? Thanks!
3
Jon Arnold
I am trying to reimport a sketch file with the new framer beta: _createLayerImporter.coffee:103 TypeError: undefined is not an object (evaluating '_.clone(info.children).reverse') Any ideas?
3
Boris Kehr
I have just installed Framer v54 and trying to import a Sketch file. The import dialogue looks like this. How canI activate the import options? Thanks.
6
Marie Lu Vinh
Is there a standalone Framer importer or do I have to use Framer Studio if I want to import assets/designs from Sketch or Photoshop ?
7
Jack Barnes
The new update from framerjs has put me into trial mode , I tried to enter the activation number but it says wrong number, and it's expired now, I purchased a copy ages ago, and I sent an email to [email protected], can someone post how to fix this? I got work waiting to do, thanks!
0
Koen Bok
Did you know that the new touch emulation not just works on Framer? Here is an example with Mapbox maps. Pinch, pan and rotate all work like you expect, right in Framer Studio.
7
Ryan Ward
Curious, has anyone been able to prototype something with a game pad for input. i.e. something with a Virtual Cursor and/or normal game pad movement and button controls?
4

February 27

Sergey Voronov
I saw facebook reactions first about a year ago on Origami class in FB London. As anyone else was excited to try them live couple of days ago. Of course wanted to recreate them using framer) Tap on like and Pan it to right to trigger icons animations, pan to bottom and release to dissmiss. Huge thanx to Marc Krenn for pointing me to pan functionality http://share.framerjs.com/aa4f6mbk5sba/
2
Wouter Van de Kamp
Hi all, I recently noticed something weird when prototyping. I hope someone can explain to me why this is happening. I'm working on some scroltopointl webpage. To do so I'm using the code below. What I would like to do is change some elements when my scroll is between 300 and 450 and if my animation ends. So my if statement would be better if I could do something like this: if scroll.scrollY > 300 && scroll.scrollY < 450 && Scrollanimationdidend == true Not sure if scrollanimationdidend supports a boolean. Just wondering about this. For now I tried to solve it differently as you can see in the embedded picture. I first check if my scroll is between 300 and 450 and if so, he should execute the function if the scrolltopoint animation ended. This works fine for the first part, but the problem is the following: I got a couple more scrolltopoint objects in my code outside the 300 and 450 range but when my scrolltopoint objects get executed outside these ranges it doesn't print ""scroll between 300 and 450" but it does print "animation_end". Why is animationdidend always being triggered even when it is inside an if statement that's not true?
3
JinJu Jang
Hi there! I made a prototype that shows button, spinners, and a confirmation alert with animation. Simple and useful. Please check it out =) http://share.framerjs.com/82pchxwucjgz/
4

February 28

Nikhil Venkatesh
Hi All, Does anyone know how to scale the prototype when previewing on phones? (i.e depending on the phone screen size) Thanks :)
1
Ben Rodenhäuser
I have a rather vague question. What do you guys use snippets for? I would like to start making more use of them to be able to reuse code (for example, to put some useful stuff there to invoke later with layer.props --- following up on a recent discussion :-) ), but am a little clueless what a "sensible" collection of snippets could involve. So I am looking for inspiration and some insight into other people's practice here to improve my own organization. Thank you!
1
Elan Levy
hello! does anyone know of any Framer modules / examples that use Google or Apple Maps to track the location of the current device?
4
Ricardo Pedroso
Hey Does anyone know how to disable the "enter" key on refreshing the prototype page? Thanks!
2
Elan Levy
hey :) anyone know of a nice module example to toggle between two screens? could be a pop-up menu from the bottom or a card-flip, whatever comes to mind! thanks!
1
Aaron Benjamin
Hello FramerJS crowd! First-off... I LOVE FramerJS - As far as prototyping goes, the sky's the limit. I wanted to pose a few questions to those who work with FramerJS in design teams. - How does FramerJS fit into your workflow? - If you're going to code a solution, why use FramerJS vs. xcode? - How much time do you invest in a FramerJS prototype vs. something like Flinto or Principle? - Do you prototype full apps or just 1 - 2 interactions? - If you're not prototyping full apps, what do you use to do that and what do you supplement with FramerJS? Please answer any questions you can :) I don't expect anyone should answer all of them. Cheers!!!
1

February 29

Cheng LI
Glad to join the community! I just started prototyping with framer. Anyone can help me with this? I want to associate "how much you scroll the body text up" with "how much the bg blurs and scales". I put the text in a scrollComponent, and listen to onScroll event. I plan to use the Utils.modulate to track a y value and get blur and scale values of the bg. Problem is - which y? scroll.y is a constant num 598, fuji.lyrics.y is always 0... Or there's another way to do it? Thanks!
1
Arif Henry Neo 梁東庭
I was using frameless app to load prototype on my iPhone6 from framer studio via wifi.. Question: if I disconnect iPhone from the wifi, is there a way for me to keep using the prototype on frameless app? It kinda works but then hang on me after I tried to refresh the prototype on the iPhone.. Thanks everyone :)
10
이정익
Hey everyone, I made another spritesheet animation module to refer Jordan Robert Dobson's sprite-sheet animation module. First of all, you have to make sprite sheet png. I used a image sequence flash animation. Setup looks like this, {IconAnimation} = require "IconAnimation" icon = new IconAnimation spriteImage:"images/icon_1.png" active:38 inactive:38 width:115 height:80 activeSpeed: 0.008 inactiveSpeed: 0.008 "active" means a open animation step count, and the other way "inactive" is close step count. "activeSpeed" and "inactiveSpeed" mean open, close animation speed. You can control animation speed. link : http://share.framerjs.com/kz3stacph73w/ Thanks. p.s Thank you for making animation Geun Hae Kim !!
1
George Kedenburg III
If you're going to Creative South this year, be sure to sign up for the Framer workshop I'll be teaching. Two whole hours of non-stop, hands-on Framer action! More info here: https://www.creativesouthga.com/workshops/
5
Rosina Pissaco
Hi guys, do you know a tutorial or article to help me integrate Sketch and Framer?
1
Márcio Ribeiro
is there anyone having issues when working with High-DPI displays? I’m using an Apple Retina display and having a lot of half pixels, even when using svgs! Is there a way to change how Framer render pixels, like the pixelDensity() from Processing? Heres an example:
2
Sigurd Tapio Mannsåker
Quick question regarding layer names. How come layer name restrictions seem to apply even for layer names that won't appear anywhere in Framer? Specifically, I have a group with a bunch of layers that begin with a number. Since they will all be flattened on import, it would be nice if I didn't have to worry about cleaning up all their names. I'm sure there's a good reason for it, anyone care to enlighten me? Or even better, offer a workaround? :)
1
Benjamin Den Boer
Today, we're shipping a major importing update. This release is a workflow overhaul to seamlessly work on any scale or artboard. If you're used to designing at @1x — you don't have to scale your designs before importing. Within the import sheet, you can specify at which scale to import. All artboard positions are also respected. Plus, you can now include JPG and scalable PDF images too. Read more on the blog: http://blog.framerjs.com/posts/seamless-scale-sketch-framer.html
25

Monthly archives

2017

2016

2015

2014

2013