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

What is Framer? Join the Community
Return to index

January 2016

January 01

EZ Obtera
OK, thanks for adding me. I'm new to FramerJS, so far I am liking it. Not very good at writing codes, though. So this may not be as trivial as I think it is. What I want to do is target all child elements (in this example, called "sidebaritem-menu") of each object (viewitem1, viewitem2, etc.) I imagined it would be an array, but I've been searching online for hours and cant find an example how I can solve this. Please check out the screenshot to get a better idea. Help? Thank you and happy new year.
7
周扬帆
Hi guys, I'm a new framer .I create multiple layers and I'm failed to center one of them. How can I do this?or use loop function to center all layers ?Thx
7
Aaron Paterson
Happy New years folks. I'm having trouble understanding how to configure the structure for a basic hover on/ off function for a layer. see here:
3

January 02

Joseph Hall
Hey Guys, does anyone know if there is a Sketch facebook group?
1
Joshua Dickens
How do folks develop components? It seems like I have to save in both my texteditor (textmate) as well as in Framer Studio to make any changes in my component propagate/ go live. Is there a better workflow?
7
Aaron Paterson
Hey folks. have a look any advice/ room for improvement is cool too…
4
David Lee
Updated prototype: http://share.framerjs.com/xu12ebbzrz52/ And video: https://www.youtube.com/watch?v=1t9FZkNM-qk I'm making some example prototypes for my next article about how to use array (with If and For statements) in Framer. I'm sharing one of the prototypes (Clear app) which is sort of an afterschool excercise for those who push themselves further. Any thoughts on improvements are welcome :) Btw, I'm thinking of the title as 'Lightsaber for Jedi, Array for Framer: Make Better Prototypes with Array'. What do you think? Music ⓒ - Kevin MacLeod
5
Helen Yee Fung
Hi everyone, I am new to framer. Is there way to make an endless loop out of pageComponent? I am trying to experiment on the following example so it won't bounce back on the first or last layer.
2

January 03

Josh Ackerman
Hello, What is the best way to achieve the following scroll effect (see attached image)? I tried a few different ways, the closest being using Utils.modulate to map scroll.scrollY to a number in [1,0] whenever the user scrolls. The issue with this method was that every layer in the grid would change position, and I only need to top row to do so. Adding a conditional statement to solve this broke the effect altogether. Any suggestions?
6
Daniel Kamphorst
Hey guys, I was wondering: is it possible to change the content inset of a scroll component without 'resetting' the whole thing? It looks like the messages are going down (snap to a lower point), before they go up. [When fully scrolled down (begin state of the prototype), click the text field to see what I mean] Also, is it possible to only set the bottom content inset? scroll.contentInset.bottom doesn't seem to work. Thank you!
2
Daniel Caine
Hey guys, What's the proper way to check if an element has a particular state? buttonConfirm.on Events.Click, -> if @.states == 'active' print "clicked" Doesn't seem to work
1
Ning Chen
Hey there! May I ask, is that the hsb in Sketch is not the same as the hsb in framerjs? I type the hsb color code I get from Sketch to framerjs, but the result is different.
2

January 04

Alvaro Lourenço
Hey y'all. I got really puzzled today trying to realize why this piece of code can't work inside Framer Studio. Look: Object::test = (props...) -> v.constructor for p, v of @ print { a: 1, b: 2, c: [1,2], d:{pt:true, pf:false}, e:'test', f:false }.test() This trows the following "TypeError: undefined is not a object (evaluating 'v.constructor')" In any other coffeescript environment it should work perfectly - swapping 'print' for the 'alert' method. - Is this really an issue with the 'print' method or something other I missed?
0
Ee Venn Soh
I try to animate my SVG (injected through Framer layers) with GSAP but in vain. If I paste my SVG in HTML directly, it works, If I inject my SVG with jQuery it works. But not Framer + GSAP. Any idea? Here is a codepen for it.
2
Ee Venn Soh
What is the best way to add SVG code into a framer prototype so I can animate it?
1
Oskar Sundberg
This used to work in the previous version: resultsText = new Layer backgroundColor: "none" Previously it removed the background and now gives me a solid black background instead of the default transparent blue. The alternative version: resultsText = new Layer style: "background": "none" Works fine, however.
5
Danny White
Hey friends, the next Framer NYC meetup is a go. Would be sweet to see a bunch of you there https://www.facebook.com/events/1534723643505347/ cc Hoyd, Andrew, Mindy
1
JL Flores Mena
Happy new year everybody! If, like me, you're trying to level up your coding/logic skills and enjoy using Framer, here's a site with 25 riddles that are language agnostic. It's about analyzing a problem, planning a solution, and then you use whatever language you prefer. I've got 10 gold stars so far and I might be the only one solving these riddles using Framer/Coffeescript haha. Enjoy: http://adventofcode.com/
3
Marc Krenn
Would love to get some help from the pros :) I've come up with this recursive function that prints the hierarchy of a layer. To my surprise this terrible hackjob ended up working but there must be a better way to do this. Would you please point me in the right direction? Thanks! http://share.framerjs.com/evj3h58040c9/
6
Josh Ackerman
Hello, I just finished another widget which focuses on easy color selection. Big thanks to all the people in this Facebook group who helped me with the scroll effect! Like on Dribbble: https://goo.gl/e4lLhl Source: http://share.framerjs.com/rylicngkgj27/
6
Elliot Nolten
Hi! Does anyone have an example with a JSONP request? I'd like to use this endpoint which returns a list of products from the bol.com webshop: http://nolten.co/bolcomapi.php/lists/ids=8299&limit=20
1
Daniel Caine
Hi guys, I've written a blog post about my redesign for Mixcloud's login form done as part of a job interview. It's built in Framer, and you can read about it here: https:[email protected][email protected]d3o2huuv Is also my debut shot on dribbble so if you like it feel free to give it a like. Thanks again to the guys behind Framer and the fantastic docs and community, have been really approachable and helpful! :D
1
Blaine Billingsley
I am spring cleaning my design resources and want to beef up my Snippets in Framer. What are some people's favorite custom snippets?
0

January 05

Scott Savarie
Is there any equivalent to something like Swift / ObjC's userInteractionEnabled = false in Framer? I've tried ignoreEvents however this doesn't seem to stop invisible layers from blocking interaction with my scroll view. Also tried setting the visible state, which works, but then blocks any animation on the layer. Alternatively I could move layers off the screen while they're invisible but that seems super tedious. Thanks for any help!
6
이정익
Hi all ! I made to turn the dial concept prototype. But it was not smooth and good. I think difference between my touch start point( e.clientX, e.clientY) and touch move point can change circles rotation, but it was not move my intention. Is it better way ??
3
Kyle Hinze
I'm new to Framer so this is probably a pretty simple problem but I can't seem to figure it out. I'm intending for everything to scroll except the start button and the navigation button. It's all contained in the ScrollComponent but when I change the z index to 0 the scrolling section becomes inactive. Any ideas? Prototype: http://share.framerjs.com/vngwz3txdm18/ Thanks!
10
Richard Whitner
Hi guys. Using the page component, I've got two pages side by side, reached by swiping left and right. I put a smaller, secondary left/right page component within one of those pages. How can I limit swiping on the secondary component just to that component, so that trying to swipe through its pages doesn't also activate switching between primary pages?
2
Joe Howard
Hopefully an easy question here. How would I determine the native size of the image object so that I can resize the layer to fit the image? layerA = new Layer image: "http://cl.ly/arBO/bg.jpg"
2

January 06

Pheetype Heyground
Hi guys, I've just started prototyping with Framer for a while. Just wondering, Is there a way to restart prototype by Events handling?? Thanks.
1
Kasper Germann Kramme
Hello Framers. Can anyone lead me in the right direction when it comes to prototyping the animation from the horizontal feed scroll in the Facebook Paper app, where you drag the post up and it scales and snap to the screen size?
1
Josef Richter
Just wondering: anyone been using Framer to build Prezi-like animated presentations? Or is there any tool built on top of Framer for this? Thanks.
0
Ee Venn Soh
I am using Framer Generator to export my icons from Photoshop. However, generator seems to ignore the bounding area that I have defined within a smart object and output the icon by trimming to the very edges of a visible image. How do I retain the transparent area so my icons have a consistent width and height?
2
Laürici Dumitru
Hi everyone! I was wondering if anyone knows if there is a way to apply an effect to a layer in Framer similar to the "Multiply" or "Color" layer style effect in Adobe Photoshop/Illustrator? I have a greyscale illustration on top of which I want to put a solid color layer with dynamic backgroundColor. Thanks!
1
Daniel Kamphorst
I want a line of code to run in Framer, but not in the browser (when shared). Is this possible?
2
Ban Nguyen
anyone know how to change this to vertical slider (top red to yellow bottom? I am using the sample from @benjaminnathan http://share.framerjs.com/cu88bfkn0avj/. @arronhunt suggested hue.rotation = 90, anyone knows how to change the knob to vertical direction? http://share.framerjs.com/epwwhjcjnrej/
4
Jason Nelson
Does anyone have good examples of building a timer?
0
Blaine Billingsley
Going through some old prototypes and thought I'd share this early "speed dial" prototype from Inbox. http://share.framerjs.com/pxedrh7sysao/
0
Ian Silber
Event.Click is fired when you on mouseup inside of the layer, regardless of whether or not the click began on that element. This causes a lot of misfires, particularly when working with scroll views, etc. I find myself having to do a lot of checks inside the click event like checking if isMoving is false. Does anybody have any better way to do this? Would love a "Tap" gesture that is more strict about how it's triggered.
6

January 07

Aaron Paterson
Greetings, From conception to Sketch then FramerJS. Fuckin love this application. Yes! Here is a shopping card I created this morning. I'm still not too pleased with the bezier - curve timing and slide in though - but I'll chisel it down… to my liking later. I' would like to create a 'click event' that adds a 'quantity' to the cart [top right of the screen] that in the 'black dot' feeds { i.e. 1, 2, 3, ,4 etc? Any idea how to start this? http://share.framerjs.com/udmswi28b9e8/ p.s touch the shoe :0
5
Andrew Nalband
Happy New Year everybody! Happy prototyping in 2016! Here's a little firework launcher to get the year started off on a good foot. http://share.framerjs.com/69f68i5d3u9p/ Open up the prototype with the link above to enjoy the sound effects.
2
Jiaxin Chen
Hey framers, assume we have four states: 0, 1, 2, 3. Now I want these four states form a loop like "0->1->2->3->0->1..." and never end, how can I do this? Thanks 🙏
2
Casey Callow
Hello! New to Framer and trying to create a web carousel that automatically rotates through a few images and then flips back to the beginning. I tried aligning the secondary images off to the right in my Sketch file but they are not appearing in Framer Studio. What is the best way to do this?
8
Oskar Sundberg
Hey guys, love the new version - but it doesn't work the way I expected it to. Shouldn't the 2x import from Sketch import everything so it automatically is scaled to 50%? I get a 2880 artboard from my 1440 Sketch file - I assumed I would get a 1440 artboard with double the resolution for sharper text and images? Bonus: All "_" characters in sketch layers also disappear during import.
3
Blaine Billingsley
Another minor question to everyone - what are some people's favorite springs? I want to create a little micro-site/framer example with a bunch of different spring examples and am trying to crowd-source some of the dopest ones. I am always tweaking the springs endlessly because I only have a child's understanding of the parameters. It would be nice to see a bunch in action all next to each other.
6
Dave Crow
I'm really digging the updated import functionality! I would also find it really useful to be able to exclude a layer from import. When I have a file with multiple artboards, they often have elements repeated and it would be nice to be able to exclude all but one instance of them with a "-" or something in the layer name.
2
Daniel Whyte
Quick question, I can only install framer on 2 of my computers, any reason for this? i'd like to be able to use it on all of them without having to unregister on one.
4
이정익
Hi, member of Framer Studio. Thank you for update framer so nicely every time. really appreciate for your efforts with many features and changes. But while png import methods has been changed, Frames(app) cannot import png file anymore. Maybe they(Frames app maker) are struggle to follow updates now. But why don't you guys make viewer application? I think framer native application is necessary for all of framer users. Because third party application is so difficult to follow updates. And website link history manage, performance, stability…There are many reasons. I just wondering about any plan to make native Framer viewer application. Thanks.
2
Albert Ramirez Canalias
Hi guys. I'm trying to recreate a shake or bounce effect. Any idea or example how to apply this kind of effect?
8
Dave Tiedemann
G'morning, ladies & gentlemen. Anyone knows if this udemy course is good? Thx in advance for feedback.
7
Ben Rodenhäuser
Newbie question. I have a layerA which I would like to scale to 1.4 its original size in such a way that all the size gain is to the top and to the right. But I am unable to put that into code. I would like to tell framer that the "large" state is such that the left edge of the scaled thing is where the left edge of the unscaled thing used to be. But how would I even express "the left edge of the scaled thing"? I hope I am making sense. Thanks in advance.
2
George Kedenburg III
I'm sure other people may have noticed this but I thought I'd share so it will come up in group search. If you want to use audio in your prototype but you're v lazy and don't feel like adding the audio module, you can just use a 0 by 0px video layer.
2
Carlos David
Hi everybody I’m new on FramerJs, great tool btw. I need to create a recording progress bar, similar to the the one used in Instagram (see image below). Do you know where I can find documentation that can help me with this task, or how approach this. Thanks in advance.
3
Daniel Kamphorst
I'd like to report a bug. Well, I suppose it's a bug. Utils.isSafari() is returning 'true' in Chrome.
3
German Bauer
Quick question on File I/O - not sure if FramerJS supports this: - how would I read/write json, text and binary files? - what if the file is on a server, or I have to ask the user to pick one? Any examples utmost appreciated!
7

January 08

Stan Dézaid
Hey all ! Quick fix needed : I have several draggable cards on my screen (similar to Google Primer, or Tinder). When I drag it up, left or right, it goes off screen. I want to find a way to get the previous card back on the screen when I swipe down (just like Primer does). I tried this : Card.on Events.DragStart, -> if Card.draggable.direction is “up” # nothing else # bring card back but I can’t make it work, as it always returns “up”. Tried the same with Scroll instead, but also failed. Any quick fix for that ? Thanks and lovely day to all !
0
Jordan Robert Dobson
We're having our 8th meetup this coming Tuesday, January 12th @ Substantial on Capitol Hill in Seattle. We'll have mentors there to walk you through the basics or help you with a problem in your prototypes. We'll also introduce you to some new modules, talk about recent updates to Framer, discuss some features on the horizon and take a look at some cool prototypes from our attendees. We'll also have food, beer, drinks and good times... oh and a 50% off code for Framer for those of you that don't have it yet! We'd love to see you there. - Jordan & Stephen
2
Trevor Coleman
I've created an awesome prototype with a little micro-interaction that uses the spring-rk4 animation curve, but I'm worried that it'll be too hard to actually implement when we build the real site. Is there an easy way to achieve a similar result outside of framer? Is there a library that could help?
3
Jordan Robert Dobson
FramerCode.com Updates I've added a few tips, examples and modules recently. Check it out. http://FramerCo.de I'll be updating a few of the older modules and adding a few more over the next few days including work and examples by Isaac, Stephen, Weston, Josh, Jay and a few others. Let me know if there is something missing you'd like to see there or leave a suggestion on the site.
4
Luca Galvani
Hi guys, I'm following this tutorial to learn about material design http://www.prototypingwithframer.com/material-design-with-framer/ However I'm getting slow and laggy animations using the latest release of Framer Studio... no issues if I open the demo in a browser... anyone can confirm this issue?
2
Nadine Han
Anybody done something like this in/with framer ? :)
7
Darvinder Singh Kochhar
Hi guys! I am trying to create a simple drag slider in which the ball will only be limited to be dragged within the constraints of the container it is in. (something like the video). I tried to achieve this by using ball.draggable.maxDragFrame = container.frame with container being the superLayer of the ball but still it just doesn't seem to work. I tried the exact code on Codepen and it works but not in Framer. Can you please help me out? Here's the link to the framer file: http://share.framerjs.com/ymtpgh5v55fm/
1
Dave Tiedemann
Hi gangsters, have a problem with a project I'm working on. Can't get to work the scrollComponent right. I want the content least beneath "Category 1" to be scrollable. But it just scrolls one line und not the whole height of the text frame.Why is that? Anyone some ideas? Project is here: http://share.framerjs.com/s18v1j8gfs7f/ Thanks in advance for helping me out on this one. (Will surely approach more probs on the way to finish this project)
3
Srdjan Markovic
Is Framer.Device Component included with the FramerStudio only?
2
Patrick Lenz
I recently come across this error in my code right after updating Framer Studio to the latest version (v47 [2665]). I started working on my prototyp using an older version and it worked without any problems. Also I'm using states like this many times in my code without getting any errors. Any idea how to fix this?
1
Don Behm
Hello! I presented my prototype to a client today and experienced interactivity issues with it on several pc laptops (works fine on my mac book pro). Anyone else have issues with this? Win 7 and 10 with latest Chrome Browser.
1

January 09

Ehren Miller
Wanted to put something together that implemented some of the 12 Principles of Animation. Here's a thoroughly unnecessary yet completely enjoyable Menu interaction:
3
Marc Krenn
Hey guys, my placeholder module is now ready for consumption! It fetches dynamic placeholder images from ‚placem.at‘ and - if you want to - applies them magically to your most recently created layer. Yes, there I’ve said it: Magically. Git: http://bit.ly/placeholderGit Demo: https://tr.im/placeholder
0
Robert van Klinken
Yesterday we shipped Human for Android. Human lets you compare your daily activity with people around you. We used Framer a lot to explore different directions. Making the transitions look smooth on both hi- and low-end devices was a challenge. Here’s a prototype of the dashboard, it shows how you’re doing compared to the people in your city. If you’re on Android, check it out in the Play Store. https://play.google.com/store/apps/details?id=co.human.android
4
Melvin Abundo
For a non-Studio localhost Frameless setup, inline video playback doesn't work. But it works as expected in Studio. Is this correct?
2
Daniel Kamphorst
I do have the latest version, but I'm not able to specify the scale to import. Does anyone have an explanation for this?
2
Ben Rodenhäuser
Hi there, there is a small typo/mix-up in the docs: In the description for page.originY, it should say that the effect of adjusting originY can only be seen when the *height* of a page is smaller than the PageComponent, and analogously for page.originX (where it should be the *width*). The documentation has it exactly reversed.
0
Darvinder Singh Kochhar
Hi guys, I am working on a desktop prototype which is 1440x1024px. When I click on present or share, the image quality seems to be reduced. The text and other elements are not as crisp as they appear in my sketch file. Is there perhaps a workaround for this so the images Framer pulls from the sketch file are of a much higher quality? Thanks guys! Appreciate your support.
14
Atulesh Bhardwaj
Hi all, I am a total novice to coffee, js or framer, but since i like it a lot, I am trying to learn as much as i can. I am facing 3 issues in prototype i am doing for a project. This is a similar layout to share with you. 1. The feed list when scroll vertically upward, the topbar background needs to appears with a fade. And fades out when list goes down at initial state. Problem is I am not able to execute it correctly. 2. The top image layer, will expand if the feed is dragged below and will behave similar to google+ when scrolled up, i.e parallax. Don't know how to do that. 3. I am trying to make the first feed item, that has a circular blob on top (depicts as 4-5 horizontal cards) a left-right swipe-able cards. Problem is, that the cards are getting cut, whereas in the sketch its alright. Framer file I am working on: http://goo.gl/e3LqQO Sketch file if you need: https://goo.gl/1K0LYW Help highly appreciated. Thanks
4
Casey Callow
Is there an easy way to turn a series of three click states into a looping animation?
1

January 10

Daniel Kamphorst
I want my layer to be as wide and as tall as the (styled) html content inside of it. Is this possible? Got to mention: the display property of the div class in the html is set to 'inline-block', so the div's wrap around the content (and the content differs all the time). See the picture below for an example. EDIT: Solved the problem myself. Utils.textSize did the job.
0
Davo Galavotti
FYI: The good folks at Facebook Design just released a large amount of devices to prototype.
3
Shaozhe Xue
I do not know why the "unexpected if" always appear when I input the if?? somebody know the reason?
2
Benjamin Den Boer
Hey all! If you have a minute to spare, I'd love to hear how you got started with Framer. Specifically, what made Framer click & stick with you? Or, what made the syntax / code in general click with you? Was it the product, a specific feature, a website or a resource, or even simply out of necessity (work, a client)? If you still vividly remember your early experiences with Framer, please do share. Anything we can pick up here is valuable. :-)
27
Josh Ackerman
Hello, Below is the source for a button with a working radial menu that lets users pick colors (I really love the recent addition to animate colors). Radial menus minimize the required travel time and distance for a finger to perform a menu function. The menu is dynamic so if you would want a radial menu with 12 items just change "number" to 12. Also properties like distance and the function of each item are super easy to customize. Like on Dribbble: https://goo.gl/pQWltO Download: http://share.framerjs.com/u08rq17h8r5r/
7

January 11

Chris Aga
Hey everyone, I'm trying to replicate the iOS Messages App's "select text" feature as seen below: http://i.imgur.com/mTGB1Vh.png Particularly, I want the **zoomed in bubble** to show up on any location when I press and hold. I'm not sure where to begin though.
9
Leeves Chou
when the scroll direction is down(drag up)do one event,if the scroll direction is up(drag down)do another event. How should I do that? e.g Base on the scroll direction to change the states of imageLayer ,or just change "scale".
2
Benjamin Den Boer
Hey all! We're super excited to host our first-ever Framer Meetup in Amsterdam, with a presentation + workshops from the team. Learn more about design tools, prototyping and how you can bring your designs to life with Framer. RSVP here — nvite.co/db01
12
Mohammed Morsi
Statistics concept for biking/fitness app on dribbble Framer link: http://goo.gl/N2iMy7
3
Guy Gunaratne
Hello-hello! So I've been using Framer since last September and have finally managed to integrate Framer into our design processes at our video startup. I've found it immensely helpful. This prototype is for the next iteration of our interactive video player. Our intention is to figure out a standardized approach to interactive video. You pause the video and access the content bar (top left icon) which gives you a list of related content (image galleries, articles etc), essentially making it easier for content creators to monetise and engage viewers. I would love some feedback on the design/random thoughts. Link: http://share.framerjs.com/n1b7mwmyp2t0/ My startup is also part of the 500 Startups family of companies and so I've been evangelizing Framer JS to everyone I meet at the HQ's in the Valley and in London. Thanks particularly to Jay Stakelon and Noah Levin for their courses and all those who've answered random questions on here. I hope to pay it forward! Note: We're also looking for folks who would want to get involved so give me a shout!
1
Peter Gr
Hey everyone. I have multiple screens in the same scroll component. They start offscreen (x: 750) until clicked. My problem is that the longest screen keeps setting the default height for everything else in scroll.content, causing the shorter screens to display a huge empty gap below them. Can anyone help? How should I fix this?
0
Joshua Dickens
Is it possible to cancel an in-flight state transitions? I have a state transition with a 2s delay that can get triggered multiple times before it completes; I only want the stop any previous transitions and only play the *last* one. layer.animateStop() doesn't seem to work they way I'd think it would, for some reason.
1
Kat Reilly
Hello, friends! I'd like to throw my hat into this awesome ring and kickstart my 30-Day Framer Challenge. ----- Prototype #1: AlphaBlocks, a simple JSON powered stream of alphabet blocks. http://share.framerjs.com/ctmvqwvs1ka3/ Backstory: I made this for my 18-month-old goddaughter, Olive. She currently loves two things: reciting the alphabet and swiping things on her mom's iPhone. This is a way for her to do both :) ---- Feedback is always welcome. #framer30daychallenge #prototype1
4

January 12

Aaron Paterson
Hey guys I'm talking some time out to work on modules ripple effect for an fab. it's kinda easy, but only if it works… See the attached what I'm trying to accomplish. Also my module folder has the 'rippleModule.coffee' file http://share.framerjs.com/7va8i9430rpe/ I'm at a lose now. # Import the ripple transition module rippleModule = require "rippleModule" # Define the animationOptions object animOps = { curve:"cubic-bezier(0.75, 0, 1, 1)" time:0.3 } # Create the 2 layers to switch between fab1 = new Layer x:0, y:0, width:100, height:100, borderRadius: "50%", backgroundColor:"black" fab2 = new Layer x:0, y:0, width:100, height:100, borderRadius: "50%", backgroundColor:"blue" # Call module to create the ripple object ripl = rippleModule.ripple fab1, fab2, fab1.midX, fab1.midY, animOps # On button tap, toggle the ripple's states: fill, empty fab1.on Events.TouchEnd, (event, layer) -> ripl.states.next "fill", "empty"
0
Taylor Wright
Is it possible to get the mouse position without using an event?
1
Koen Bok
Fun experiment. I have been thinking on a nice way to handle positioning and positioning updates in Framer. Apple for example has autolayout, but while it's very powerful I find it hard to use for simple things and overkill for Framer. So I came up with layer.anchor. You use it with 6 simple rules: top, left, right, bottom, centerX, centerY. Like this: layer.anchor({top:100, left:100}). It will then stick to this position, also when resizing the window. Here is a module project to play around and see how you like it: http://share.framerjs.com/r9yd2nqg8kpo/ It's just testing so these things are unsolved: - What happens with animations and anchoring? Who wins? - What to do with unsolvable rules (centerX:0 and unequal left and right). - Only works fullscreen for now.
10
Christian Schaf
[SOLVED] Hi guys, I have a Problem. I created a module called Marker. It contains a class and extends from Layer. Now i want handle a click on it self.No clicks on a single Marker will recognized. What can I do? The file is located in ./app/modules Project: https://github.com/cschaf/tourist-app
11
Chris Camargo
Sooo... Open a new Framer file. Set Viewer to iPhone 6. Do "print Screen.width". Result printed in Framer Studio: 750. Result printed on iPhone 6 in Frameless: 980. EDIT: Starting to sound like an iOS 9 Beta bug?
22
Varun Yellina
I'm used to installing apps via Homebrew cask. Framer studio was available via cask, but after the recent change in versions it is no longer the latest. I'm trying to update the formula but need a static download link. the current one from cdn.hockeyapp isn't static. Koen Bok can you help?
1
Koen Bok
Some pretty great new updates to Safari 9.1. I especially like the new inspector look. Another improvement is the removal of the tap delay on mobile. All this will appear in Framer Studio as soon as it is released too.
5
Zafar Shah
Mohafiz acknowledge all the women out there for the wonders they do each day! https://www.facebook.com/meraymohafiz/videos/1680648525544920/
0
Adria Jimenez
Koen Bok Benjamin Den Boer is this a bug? It seems like copy() is not respecting layer names in the layer inspector and then the layer inspector seems to be buggy when mouse over the layer names https://monosnap.com/file/hAx2iy3v7JuAFJLWcCqN7oDxvmW3TA.png Here is a prototype to test http://share.framerjs.com/k5swyk4iz281/
5
Marc Krenn
Hey Frameristos, Chris Aga and I were working on a magnifying effect yesterday and I think it turned out pretty cool :) Grab it here: https://tr.im/magnifyingGlass
16

January 13

Chris Aga
Does anyone know how to use Atom.io with Framer? I tried this tutorial: http://www.prototypingwithframer.com/framer-on-windows-with-atom/ But the thing is, you have to reload the index.html, and then click the "try anyway" button EVERY time, whereas Framer Studio just reloads on key change or save.
5
Jianqi Chen
hi guys if i choose the device as desktop, how to make the height of web browser longer?
5
Aaron Paterson
Help strange error?! I'm trying to use the ripple effect i added to my module folder but getting this: prototype: http://share.framerjs.com/ng3kvdeuozz7/
4
Ehren Miller
I wanted to see if this would work and bingo! Maybe other people have done this before, but here's how to animate layers along curved lines:
0
Ben Rodenhäuser
Hi guys, a suggestion. It would be great if it were possible to selectively import Sketch documents, that is: being able to choose the *page* (in the Sketch document) one would like to import. This would be very helpful, e.g., for preparing variants of a layout (sharing the same layer hierarchy) and being able to quickly switch from one layout to the other in Framer (by just chaning the page one wants to import). Would also be helpful for importing just one Framer-relevant page from a "bigger" Sketch document that might contain all sorts of (Framer-irrelevant) stuff. Has this been considered? Would others find it helpful, too?
2
David H. Shen
Try to figure out how to make a simple tab interaction from a imported sketch file with 2 layers overlay. Please advise how could I do this? This is my code sketch = Framer.Importer.load("[email protected]") btn_A = new Layer(width: 100, height: 50, x: 250, y: 150) btn_A.on Events.Click -> sketch.LayerA.visible = true sketch.LayerB.visible = false
1
Andy Cetnarskyj
Where can I find details on the framer challenges?
0
Kasper Germann Kramme
Is it possible to make a pageComponent that is both horizontal AND vertical?
4
Casey Callow
How do I use a for loop to change the opacity of all the layers named "selected"?
1
Jianqi Chen
hey guys, i have a question about variable, is the framer have a global variable and domestic variable?
2

January 14

Kyle Hinze
Hey does anybody know if there's a better way to mask an image within certain constraints? Right now I'm setting a superLayer for it but when I do a hover animation it shows a blue box where the superLayer is cropping it. Is there a better way to mask or can I turn off that blue overlay?
1
Kamal Nayan
So I've multiple art-boards imported from Sketch, which can be swipped left & right. On every art-board coming in the view port, I waana show some interactions, i.e., add a new element & animate it. How do I know if a particular art-board is in the viewport (& then add interactions)? Best way to go about it? Thanks in advance.
1
Jonathan Tran
Hi everyone. I've created a D3 svg. Does anyone know how to add it to a new layer, so I can apply Framer animations to it? Thanks!
7
Aaron Paterson
Hey guys, Was wondering if there is a module that will on a Click event add/subtract quantities to a cart basket? it's for a shopping card click flow? Thanks
2
Dylan Macalinao
Hey, first time creating for the Apple Watch - is it possible to use the digital crown in your mockup?
1
Duncan Crozier
thanks for the meetup in Amsterdam yesterday guys. Met some awesome people and learned some new tricks :)
2
Black Ray
Image is loaded correctly but the Events.ImageLoaded seems not working for me. Any idea?
2

January 15

Raitis Linde
Hi everybody! I tried to reproduce Clear App and filled the list with a Twitter feed via Parse just for fun and learning – http://share.framerjs.com/q7sasts190um/ Currently supported interactions: – Scroll – Tap and Hold to reorder – Swipe Right to complete – Swipe Left to delete Shared also a few thoughts on this – https:[email protected]/high-fidelity-prototyping-with-framer-51e152af2b51#.dmrpi23ed
1
Jun-Hyuk Jang
https://css-tricks.com/shape-blobbing-css/ This is super easy and awesome !! ( thanks Marc Krenn ) now I can make liquid effect for more elastic interaction :) http://share.framerjs.com/rmiyn6380fz8/
1
Daniel Kamphorst
Does anyone have experience with Cross-Origin Resource Sharing (CORS) (requests) in Framer? I'm trying to load data from a XML file from another domain/origin ('public' API, HTTP basic acces authentication), but without any results. :( I can post the code too if you guys want me to, but I don't think there's anything wrong with the code.
3
Chris Camargo
Is it possible to require modules that are outside of the /modules folder?
1
Darvinder Singh Kochhar
It was a lot of fun learning new techniques from Danny, Jared and the team at the Framer NYC meet-up. I shared my desktop prototype which had 2.5k lines with the group and got awesome feedback and solutions to a few bugs I was facing. Jared also taught me how I can use animations into separate functions so that the code is much cleaner, smarter and less heavier on the system. In my case, I was assigning a superlayer on every button to get the material ripple effect and Jared helped me create a function which I could call instead of manually assigning the superlayer each time (see images). I intend to start using this in my workflow and am pretty sure I will come up with much better and bug free prototype next time. I am so grateful to have learned so much in just a few hours from this meetup. If there was something that I didn't understand (which were most things :P), Jared broke it down into the simple examples so we understood the whole thing. Thanks a lot for hosting this meet-up Danny. Looking forward to the next one. I will share the whole prototype once I am done with my submissions soon :)
2
Ben Rodenhäuser
Yesterday, I tried using variables inside spring curves, writing stuff like "spring(theTension,theFriction,0)", where theTension and theFriction had been set to numerical values before. But that didn't seem to work. Is it correct that I cannot use variables in this way, or am I going about this the wrong way? Thanks in advance.
3
Stan Dézaid
Hi all, I'm new to Framer and I can't get my hands off of it, it's so addictive ! That's my first question, and it's pretty stupid : how do you "reverse indent" in Framer ? i.e. you press Tab to indent text to the right, what's the shortcut to indent back to the left an entire paragraph ? Thanks a lot !
2
Darvinder Singh Kochhar
Hi guys, I am trying to share my prototype but I am getting the error in the attached image. Can you guys please help me figure this out? It is a desktop prototype and I think this error occurred because the prototype is pretty heavy and has a lot of layers.
3
Kat Reilly
Hey folks, Stuck on an issue and am summoning the troops for some help! I'm trying to animate all of the items in a for-loop, but my method is only causing the last item in the loop to animate. I'd appreciate any insights on how to fix. Example here:
4
Casey Callow
How do you remove the prefix to refer to imported sketch layers as simply 'layerA' rather than 'sketch.layerA'? I remember seeing this somewhere but can't remember the snippet.
2

January 16

Paul Klinski
I am trying to create animations for switching from screen to screen via click events. I have basically two differents kinds of animation, zoom into the button i pressed and zoom out. Is there an option to make these animation "global" or something like that for using it for more than one click event with just changing the coordinates for zooming in/out? I thought about a function or an array for filling in the variables...
4
Nir Benita
Hey guys, I have this prototype, where I have a list of items. Each item will show additional actions on hover (As seen on the first item in my screenshot), and hovering over these actions should change the opacity. The problem I'm getting, is that whenever the mouse enters the nested “actions” layers, it freaks out because technically, the mouse has fired a MouseOut on it’s parent. Has anyone encountered/solved this issue?
3
Marc Krenn
Be sure to switch on HD! ### Here's an old, yet unreleased prototype showing a reinterpretation of Android's timepicker. It's one of my most complete prototypes I've worked on, spanning topics like ... * ... coming up with a new UI element - I used to call it the 'mercury slider' - that A) fits the use-case (a hybrid radial-menu) on a functional and aesthetic level and B) feels like a natural extension of Material Design's current family of UI elements. * ... improving on while keeping it's current functionality, which results in a flat learning curve, helping to bridge all sorts of skill levels. (Did you notice the current timepicker doesn't *really* work like a radial-menu, even though it's such a natural fit?) * ... trying to increase the joy-of-use / 'itch' while also improving it on a functional level (dat 'infinite' Fitt's score!). ### Anyway, while I unfortunately can't share the prototype, I'll happily try to answer all the question you might have about it! (@ Mohammed) :) btw: I'm curious to hear what our Googlers (Joshua / German / Min-Sang / Fran / etc.) think about this!
15
Evan Knight
Is it possible not to play audio on a video? Something like: videoLayer = new VideoLayer width: 160, height: 210 audio: false video: "images/myvideo.mov"
2
Lindsey Bateman
Dear Framers, First question for me here :) I was wondering if someone has any experience using real data coming from an API call. What i'm trying to do is, reach the wercker API with the "request" npm module, which i installed and imported according to the framer docs. The following error occurs: [framer.modules.js] TypeError: invalid array length argument But the error from the callback function does get print » <Error {line:25726, column:32, sourceURL:"http://127.0.0.1:8000/CQRBA0/realdata.framer/framer/framer.modules.js?nocache=3581b3f9cf9dfd4588a6aca25ac4782b"}> Thanks in advance.
4
Michael DeFazio
Hi everyone, I have a quick question regarding animating between states: Are you able to animate the style properties between states? Here's a setup that I'm trying to get to work and can't get the font color to change. Wondering if it's even possible. Maybe I should set it up differently?
2
Jason Vestri
Hey all. Is it possible to use vanilla JavaScript? Or even load in jQuery to Framer?
9
Chris Aga
I swear, I saw someone post a Framer module/library that lets you select layers with jQuery-like syntax. I tried searching for it, but maybe it got taken down :(
1

January 17

Taylor Wright
In CoffeeScript, how can you swap two spans (slices) in an array. In the following example I'd like to swap the A's with the B's [0, 1, A1, A2, B1, B2, B3, 7, 8] becomes [0, 1, B1, B2, B3, A1, A2, 7, 8]
4
Koen Bok
Reminder: there are three Framer meetups this week: SEA — http://on.fb.me/22Vdfm1 AMS — http://bit.ly/22Vdfm6 NYC — http://on.fb.me/22Vdfm7 People on any skill level are welcome. The point is to build things, learn, and make new friends. If you'd like to bring one of these to your own city, we'd love to help. Ping Sara.
5
Jason Cashdollar
I know the Star Wars hype is over, but wanted to play around with perspective (the perspective stuff isn't working on mobile–kp?). Everything I post online feels like it's launched into the void to either be forgotten forever, or discovered in the future to ruin my presidential campaign. http://share.framerjs.com/6omcfyexu6z2/ Content from twitter.com/kylo43n
18
Casey Callow
Are there any resources for learning how to use 'for' loops to increase productivity when applying states/styles/animations to multiple elements? It seems like looping is the most powerful ways to reduce code size and prototype faster but I can't find a lot of examples or holistic explanations of the syntax. Thanks!
5
Evan Knight
Having trouble getting the positioning right in Frameless iOS. It appears correctly in Framer, but when I open it in Frameless the videos do not show (except for one video thumbnail). Any ideas? I've had this similar problem before, where I'd have to position the video differently to get it to show correctly on Frameless, which would make it out of position in Framer. UPDATED LINK WITH SMALLER VIDEO FILES: http://share.framerjs.com/6f1k713rrqgj/ - not very clean sorry :)
2
Taylor Wright
I have a ScrollComponent that unexpectedly snaps to it's top position after some interactions with it's content. Any ideas of what could be causing this? Notice in the second interaction (highlighting a group of images in brown), once the touch has ended the ScrollComponent snaps to the top. Files: http://share.framerjs.com/gzxd6hjrsa1c/
1
Marc Krenn
Hey Jonas, is it possible to (Object) extend/merge the cssNames object? If so, could you please tell me how? :) In case you're wondering what I'm trying to do: I'd love to add those brand colors from http://brand-colors.com/ to Framer ...
1

January 18

Taylor Wright
How do you clear output from "print" with code? my project generates a lot of debug print and I'd like the option to clear it without refreshing the project.
6
Stan Dézaid
Quick one : When I hide an element in Sketch and import it to Framer, its size is a lot bigger than it should, whereas when I hide it afterwards directly in Framer it keeps its actual size. Is it a small bug or am I missing something ?
0
Ben Rodenhäuser
In the attachment you see an image with a semitransparent white layer with grey type on it (which is rendered using layer.html). What I would like to have, though, is the type being *fully* transparent (with the white layer still being semitransparent). Any ideas how I could go about this? (Context: the semitransparent layer is briefly shown once a new series of images begins, showing the title of the series, and then vanishes, fully revealing the first picture in the series).
4
Sergi Bosch
Hi Framer community - I did some prototyping for my app on Framer, leveraging the ScrollComponent for my long Home view. (shout out to Adria Jimenez for his Udemy course). Well now the app is live in the App Store. Would be psyched if some of you could benefit from it. It's for parents of a newborn and their pediatrician.
1
Marc Krenn
Sometimes all you want is to print some text :) That's why I've hacked Framer's console to be ... * 'fullscreen' * customizable * added a clearConsole() - function * and a GUI button calling the above-mentioned function I might add 'println'/linebreaks at some point, if anyone is interested. grab it @ https://tr.im/console ### Caution: Auto refresh must be deactivated for this hack to work! Koen / Taylor Wright
5
Evan Knight
Is there a simple way to use percentages for x/y position, rather than static pixel position?
8

January 19

Kat Reilly
Hey Folks! Does anyone know how to apply a copied layer to a superLayer? In this example, I have some objects in a nested container. When one is tapped, I'd like to copy the layer, and have it move from its original layer's position to the top of the screen. As you'll see here, the copy currently animates from the top-left of the screen, not the original layer's position. Would appreciate any recommendations :)
2
Cameron Luck
I'm having an issue hosting my prototype on an internal server. I can hit the "Share" button and everything works fine, but I'm trying to host a prototype on an internal server, yet when uploaded to the server, loading the index.html file just results in a blank screen. I've also tried using the "Mirror" app and it will not connect even with both devices on the same network. Any ideas how to fix this? Thanks!
1
Shane Brown
Is there a way to have Framer prototypes saved on to the phone, rather than be downloaded each time you want to show them?
8
Hugo des Gayets
Hi! Could someone explain me how I could apply layer.animate to all layers stored in the array instead of the last one? Thanks!
8
Michael Middleditch
Hi all - any idea what I'm doing wrong here. Need to print the array values into a html layer to sit on some buttons - last line I think is wrong??? I can print the loop number i.e 1,2,3,4,5 but not the value in the array. btnBandSizeTxt = [32, 33, 34, 33, 33, 34] for i in [0...5] btnBandSizeTxt[i] = btnTxt = new Layer superLayer: rowContents[0] width: 50 height: 50 borderColor: "red" borderWidth: 4 backgroundColor: "red" x: (i+0)*120 y: 20 btnTxt.html = [i] in btnBandSizeTxt
2

January 20

Arkadiusz Janeczko
Hi all! I'am very happy to host first-ever Framer Meetup in Poland, Gdańsk. Starting with some basics, we will go throught challenges doing prototypes from a scratch step by step. RSVP here —
1
Ban Nguyen
I updated Framer today and there is something wrong with .on Events.Click and TouchEnd and TouchStart. They used to work fine on the desktop and mobile, now they don/t work on mobile (i am using Framless)
1
Chandan Manohar Raikar
Are there any examples using the page action. like when the page 1 is changed perform actions 1 and when page 2 is scrolled perform action 2.? i am using product_scroller.onchange:page2 but i am getting error Uncaught SyntaxError: Unexpected token : i am using framer.js ,javascript
1
Jaime De Ascanio
Hello, I have a PageComponent inside of a vertical ScrollComponent, is there any way to block the scroll when using the PageComponent? Thanks!
1
John Grendon Enderby
Ok so it's going to be a day of questions for me it looks like. I'm trying to update a value in a callout with the time remaining in a video that is playing in timeLeft if I use return I get a single number like 29364 show, but if I use print the time in the console updates as expected counting down from 44 to 0. Any ideas?
1
John Grendon Enderby
Hey folks! Was just wondering about the videoLayer, if is set .controls = true I can't actually use the controls. Is this normal? Is there something else I need to do to allow interaction with the controls?
6
Николай Березовский
Hi all. How is it possible to detect tap event on a real device? Not click. For example. I have a button with Click event inside of scrollComponent so when I scrolling Click event triggered every time when the scrolling ends. ignoreEvents when scroll isn't works in this case. Any ideas? Here is an example — http://share.framerjs.com/25yp6sedn8nn
5
Daniel Viedma
Hi there! Is there any way to make the PageComponent work with tap instead of swipe? What would be the best approach to accomplish something like that? Thanks!
4
Don Behm
I'm trying to use a variable as a property in an Animation. I set the initial value and the ani object gets the value but when i run the animation again with a new value for my var it doesn't update. Thoughts?
8
Marlon Stevenson
I saw a Dribbble that detected scroll direction to affect other elements. Any idea how I can collapse the header and navigation when scrolling down and bring them back when scrolling up? I think that was made before Framer started using CoffeeScript.
1

January 21

Daniel Caine
Hey guys, any idea how to target a specific layer which has been created in a loop? I have named some layers in a loop through 'name: "page" + (i + 1)' but when I go to use the layer outside the loop, it cannot be found - despite the fact it appears and is named correctly in the layer tree. Any help is much appreciated! Code:
5
Elliot Nolten
Hey guys, I downloaded the "page-simple" example, but when I updated the file in Framer Studio the alignment of pages in the pageComponent is different. Is this a bug? Or should things like contentInset be used differently? Thanks!
6
Stan Dézaid
Framer friends, is it possible to have arrays within pageComponent (instead of layers) ? Here I have 2 arrays (cards and copies) each composed of 6 swipable layers. I'd like each array to be on a different page, so that when all cards from array1 are gone, it goes to the second page showing array2 (whereas both arrays are currently shown on top of each other). Any idea on how to do that ?
1
Michael Middleditch
I have a for loop creating a row of buttons & setting up 2 states. I want to change the state of the clicked button to stateA & the others to stateB - Do I need an 'if' statement or a click handler or is there a simple line i can add to the following? for btn in btnBandSizeTxt btn.on Events.Click, (event,btn) -> btn.states.switch("stateA") bandSize = event.target.innerHTML updateFilters() Thanks all :)
2
Kat Reilly
Hey friends--happy to share another prototype! Prototype #2: Whise, a fake streaming service for white noise (and a help to those in an open office plan ;) ) http://share.framerjs.com/1qpskqju1yyc/ I learned a ton about for-loops and states on this one. Thanks to Marc Krenn for his help on some of my earlier attempts! As always, feedback is helpful and appreciated.
2
Ben Rodenhäuser
Hi guys, is there a way to turn off auto-complete in Framer Studio? My laptop is old and slow, so auto-complete takes too many resources for this particular machine ...
2
Rıza Selçuk Saydam
Facebook Design Resources now have Watches as well :) https://facebook.github.io/design/devices.html (props to Harry Copeman, Riccardo Carlet and Jeff Smith) -- I also wanted make this devices available to Framer immediately, including a simple prototype example and Sketch source file :) Please enjoy. Example Prototype: http://beta.rss-ems.com/Moto360/prototype Boilerplate Prototype with Moto 360: http://beta.rss-ems.com/Moto360/boilerplatePrototype Sketch File: http://beta.rss-ems.com/Moto360/sketch https://dribbble.com/shots/2473702-Android-Wear-Framer-Prototype
1
Johannes Eckert
I had some fun with vector shapes today (Framer & Snap): Inspired by the animations from Thomas Quarre and Ken Yiu, I wanted to do simple SVG stuff, but also create the SVG directly inside Framer. I am using snapsvg.io that lets me draw SVG shapes very easily. All these use a handy workaround of a layer animating and then listening to change:x — that allows to use easings or even spring in the manipulation. 1) Circular Progress like google Fit: http://share.framerjs.com/195308v9yp1w/ This one actually draws an arc and is not using the dashArray workaround. There is no major advantage doing it this way. 2) Path animation: http://share.framerjs.com/i0q68bh9nop0/ This one creates an SVG path with coordinates directly from sketch (export vector as svg, open in text editor and paste coordinates from d attribute on path object). The animation is then done with dashArray 3) Move Framer Layer along Path: http://share.framerjs.com/mpj7ig3y1q19/ This one is a bit tricker, and requires a reference layer above the SVG layer with the same x and y coordinates than the canvas layer. The logo is a childlayer of that reference layer. Snap gives you the coordinates of any point along a path with getPointAtLength(length). These coordinates are then applied to layer.midX and layer.midY I find this a bit cleaner and more versatile, once you know how to use SVG directly in framer/snap. Copy&Pasting complicated shapes from sketch is also super helpful. Some of these things would be easier with Tisho's animation path API. but as far as drawing svgs (arcs, shapes, etc), Snap is super handy.
10

January 22

Christian Dorian
Does anyone have experience converting spring animations into production iOS code? Example — curve: "spring(300,24,0)" Thanks All!
6
Evan Knight
Hi frens, posted about this yesterday but i've made some more progress. Everything works correctly in Framer, just not in Frameless - I can't get the bottom row of videos to play in Frameless (the big videos are playing fine). Any ideas how to get the small videos to play in Frameless? Does it have anything to do with having them in a ScrollComponent? http://share.framerjs.com/1h8ca0m248s8/ (All the videos combined are 11mb, avg 1mb each. )
5
Maximüs Groves
Have you guys had success animating a layer's background color? Alternatively, is there an onUpdate event we can listen for during animations?
8
Dusty Rhodes
Whats the best way to create 2 or more switches to behave like shown in the image? Can someone provide an easy example. Thank you for the support!
6
Thierry Meier
Guys, what is the state value of the default state of a Layer? Example: You switch to a different state via layerA.states.switch("foobar"). Now, you want to switch back to the default state you have declared when you created the layer. layerA.states.switch("default") does not work ;p.
1
Oskar Susłow
Hello Guys! I need to make a circular Slider in Framer. The Problem is I have no idea how to make one. Someone has a tutorial or a small explenation where to start? Would be wunderful :) I've found an Image of what i mean. http://i.stack.imgur.com/qjhAE.png I need the last one or the one in the middle! Thank you :)
4
Daniel Viedma
Hey folks, Is there any way to "stopEventPropagation"? So for example a click on a given layer doesn't propagate to its superLayer. Thanks!
7
Chris Aga
Anyone know if there's a plugin to search the layer viewer for pattern names? http://i.imgur.com/Bq2JDlB.png If not, is there hope in the future that this feature will be implemented?
5
Yohan Baillet
Hey Framer community, this seems pretty simple but I can't figure out how to do it. I saw some similar thing but didn't really found the answer. I need to animate a container height from bottom to top instead of top to bottom. This container contains other layers so I can't move its y position neither its scale value. Here is an example
7
Lauren Nielsen
Has anyone created a dropdown menu before? And a radio button?
4
Kelly Keenan
Any chance AI import is coming to framer? 🙏
3

January 23

Blaine Billingsley
Hey Framesters! I have never made or used a module, and I want to make a module for image content. Basically something I can stick into a project so I can pull 50 or so of the same images from. Do modules support assets in them or are they straight code?
4
Stefano Von Stereö
Hello, I was wondering if it is possible to make use of external APIs within framer. Did anyone try it? I found some shaky examples on the web. Thanks in advance for any tips.
3
Jackie Chui
Accurate playhead control is a pain on mobile, here's a concept for the Youtube mobile app with thumbnail preview and scrub rate control. http://share.framerjs.com/uw5repp7h7aa/
4
Ehren Miller
Prepare for take-off... http://share.framerjs.com/vstqqmrnnps6/
6
Ed Chao
Is there a simple way to destroy all sublayers? Something like foo.subLayers.destroy()? I've also tried storing all my layers in an array and then emptying the array, but the layers are not destroyed :(
6
Patrick Bowen
Hi all. New to framer and have a basic question. I thought framer studio was supposed to recognize all artboards on canvas imported from sketch regardless of position? Working on a simple example where I have to stack all artboards so that they display in preview.
6
Christian Schaf
Hi guys, is there an Event "Events.AnimationAnimating" so that I can to an Operation line decrease an counter while the animation is running? Events.AnimationLoop isnt triggering.
9
Casey Callow
Is there a way to express this all in one loop? Making a series of checkboxes.
5
Mai Chloe Takahashi
Hi Framers! Anyone using framer.js in Vancouver? How do you like it so far? I am learning the steps to recreate the interactions and transitions from Facebook's Groups App for iOS with a scrollable feed and hope I can have framers meetup and meet many Framers in Vancouver this year! :D
11
Ed Chao
Was making a typeahead for work and thought it might be useful to someone. It searches through an array of strings as you type. Here you go :) http://share.framerjs.com/6kh3vay2otvx/
0
Mai Chloe Takahashi
Hi Framers! So after my post this week, I found cool Vancouver-based-Framers and one of them, Shirley Man opened Facebook Group for us. This is amazing. Join us if you want to fire up a Framer session! https://www.facebook.com/groups/FramerJSVancouver/?notif_t=group_r2j_approved
0

January 24

Daniel Caine
When drawing SVGs, is it possible to create a drawing effect for text, using the fill property, as opposed to strokeDashoffset?
2
Josh Ackerman
Hello, As I promised Oskar Susłow, here is the source file to a radial slider I made. The code is not very elegant and there are a few noticeable bugs, which is why I never released it before, but it is a starting point. Hopefully someone will be able to improve it, otherwise it will be a few weeks until I get to fixing any of the bugs. Download: http://share.framerjs.com/1ugac9rb4pvc/
2
Daniel Alvarez
Hi, I'm new using Framer JS. I'm a Graphic Design Student. This semester I'm choose to a Mobile Development Class and we're learning PhoneGap. My question is it possible or viable to integrate Framer JS and Phonegap and release an App? Is just a doubt I have.
4

January 25

Richard Burton
Hello Framer Jedi, I’m working on a prototype of a tableview transition. I want to smoothly remove rows from a tableview when they’re filtered. Right now it works perfectly when I use `switchInstant` but fails when I use `switch`. The state change is only applied to the last row that needs to change. I imagine this has something to do with the animations overlapping. The offending line is number 94. Any help would be much appreciated!
1
Sarah Kranz
hello, I'm trying to build a carousel prototype and would love to get some help <3 The row of coloured cards should be swipeable horizontally. My problem is to get some nice momentum. When I allow overdrag, the animation gets totally weird, probably because the image of the cards is bigger than screen width?. I tried to play around with bounce.Options but .. well, it stayed weird. Any idea? http://share.framerjs.com/ida7neu3p42k/
6
Michael Middleditch
Hi all - I'm creating buttons from an array. It was based on fixed widths as I only had single digit numbers but I now need to size them dynamically based on strings in the button. Do I need to target.innerHTML So something like width = target.innerHTML + padding Note I'm setting a width & then using it again in the loop lower down. The minus numbers position it within it's superlayer. btnStyleTxt = ["ALL", "Balcony", "Non wired", "Plunge", "Push-up", "Sports", "T-Shirt"] for i in [0...7] btnStyleTxt[i] = btn = new Layer superLayer: rowContents[2] html: btnStyleTxt[i] color: "#000" width: 170 height: 100 borderRadius: 16 borderColor: "#bdbdbd" borderWidth: 4 backgroundColor: "F9F9F9" x: (i+0)*170-50 y: -40 if btn.x > 550 btn.y = 80 btn.x = (i-4)*180-50 # CREATE 2 STATES OF THE BUTTONS (ROW 0) btn.states.add stateA: borderColor: "#53A0FD" stateB: borderColor: "#939393" btn.style = fontSize: "40px" btn.style = textAlign: "center" btn.style["padding"] = "30px 0 0 0"
2
Florian Ludwig
Hi there! I just want to share one of my latest student projects with you. The project itself was fully prototyped with framer.js and is controlled by a touch potentiometer and a leap motion. For the communication between arduino and my mac I used breakout.js, which does all the websocket communication for you and has a growing hardware library. After the arduino was connected to the web, I simply used the offered javascript events to trigger my framer.js animations. To setup my LeapMotion I basically used the leapjs library and extended it with some self-written gesture recognition. The visuals itself are half programmed half embed videos. Please let me know if you have any questions! LeapMotion: https://github.com/leapmotion/leapjs BreakoutJS: http://breakoutjs.com/
2
Stan Dézaid
Is there an issue with the “timeupdate” video method ? This might have been answered already, but I played around with Benjamin's video example from June (http://share.framerjs.com/ls45f54htojk/) where he uses this bit of code : vid.player.on "timeupdate", -> However when I hit “File” and “Update Framer” -- or when I use the same code in a new framer -- I get an error saying : “ undefined is not an object (evaluating ‘this.element.addEventListener’) " Any idea on that ?
2
Luca Galvani
Hi guys, I'm trying to style an input... the layer has html: '<input type="text"></input>', but when I set the 'style': ... nothing happens... It happens only to me? :(
3
Ray Luong
Wandering FramerJS for the first time today. I'm trying to animate elements in a chart. At the moment I can animate using scaleY, but this doesn't quite get the effect I'd like. The animation scales from the center out. Animating with height actually draws each bar from the top down. Is there a way to animate this histogram bottom up so that the chart "grows"?
8
Mark Johnston
Trying to show some rich text editor functionality, bold, underline, add a link etc. Is this even possible?
5
Wouter Duijts
Hi, How can I mask an image with a layer and be able to move the layer without the image. If the layer is half underneath the image, the image is only be shown half. See attachment for example. I tried the superlayer function but unfortunately that didn't work out. What I am trying to achieve is a bit the opposite of this example I have found in the community. (http://share.framerjs.com/8xqvscqqg58k/) Thanks!
8

January 26

Joe Lifrieri
I'm getting a hard crash every time I try to open a Framer prototype on OS 10.11 with Framer v49. The application opens fine, but opening prototypes causes an immediate crash. After checking Console, it looks like the problem is related to: Framer Studio[23717]: assertion failed: 15B42: libxpc.dylib
3
Joshua Dickens
For some reason I'm unable to get the 'timeupdate' event to fire on my videolayer. http://share.framerjs.com/baetzn9mhkvd/ I can open the video player example from the framer site and it works fine, but for some reason whenever I recreate it from scratch nothing happens.
2
Jordan Robert Dobson
Framer Layer Alignment with minX/Y midX/Y maxX/Y I've seen a few people lately ask about alignment of layers. I highly recommend reviewing these properties and getting to know them better. They greatly reduce the amount of math you have to do in layout and in your states. Start here: http://framer.com/docs/#layer.maxX You can use them when you create your layer too. So, if you wanted to create a layer and place it on the bottom right hand side of the screen you'd do this: myLayer = new Layer  maxX: Screen.width  maxY: Screen.height Hope this helps you in your prototypes!
6
Josh Max Rubinstein
I am having the darnedest time figuring out how to animate my bar chat element heights from the bottom up rather than the top down. I am also trying to use the cycle utility to stagger the animation of each bar in the chart. Anyone have any suggestions for me? http://share.framerjs.com/k5k1s918q7s3/
5
Shirley Man
Is there a way to use JavaScript instead of CoffeeScript with Framer? I find the CoffeeScript syntax awkward to use even though it's shorter.
2
Kevin Devine
Hi, I'm new to framer and struggling to show a circle animate inside of a card (img 1). Instead I can only display it overlaying the card (img 2). Is there a way to clip an animation within a layer? Any help appreciated.
5
Stefan Hvlmnns
maybe a dumb question, but how can i set an image to auto height? Solution: link = "yourimage.jpg" image = new Layer ____superLayer: scroll.content ____width: Framer.Device.screen.width ____height: Framer.Device.screen.height ____html: "<img class='import-image' src='#{link}' style='height:auto;width:100%;'>" image.on "change:size",-> ____image.style.backgroundSize = "auto #{@.height}px"
12
Weston Thayer
A few weeks ago, I linked a solution for password-protecting a prototype on Heroku (or really any LAMP server): https://gist.github.com/josefrichter/561dfd823f829f87ec6e. However for my work, I often have to do this on an Azure (IIS) server. Here's a quick write up for that: http://westonthayer.com/blog/_site/2015/10/23/hosting-framer-on-azure/.
2
Mark Johnston
Is there any documentation around the new gestures added in the beta?
2
Michael Middleditch
Hey people - Is it possible to simulate a click event in a function? At set X/Y location? thanks guys...
2
Ehren Miller
Curious: anyone out there found a way to insert their Framer projects into a page on a Wordpress site? Failing that, what gif-making software anyone found a gif-making program/process they really love?
7
Javier Eduardo Treviño
is there a way to customize the viewer? I'm creating a website prototype at 1400px wide and the preview is 1440px, is there a way to reduce its size without modifying my own design?
2

January 27

Remco Bakker
Hey guys, i'm new to Framer (been a member of this group for a while, but never used Framer before) because coding looked a bit scary at first. I decided to give it a go and did some javascript courses. I know some basics, but don't have much experience yet. I need your help! I'm trying to scale a container from 90% to 100% while scrolling. The amount of pixels scrolled determines the amount the container is scaled. It needs to scale to a 100% gradually. Does anyone have an idea on how to do it?
7
Jorn van Dijk
Please welcome Brittany to the Framer team!
9
Marc Krenn
scrollable #tabBar + #pages http://share.framerjs.com/1j74uk2gefm9/ Original file by Diego Oriani
3
Eddie Wieczorek
Hello All, Has anyone else noticed that when you fire a click event on a video layer that brings it to the front then plays it, it is black until you do another click? I haven't been able to get around this. Any help would be appreciated.
1
Blaine Billingsley
I know I have seen this posted before but couldn't find it with a search: Is there a way to specify different curves for different properties as they animate simultaneously? For example, a spring curve on scale and a linear curve on opacity happening at the same time?
2
Jan Rod
Hi everyone, I have a question: I started using Framer recently to prototype some interactivity for tablet apps and I am having a problem with multi-touch when previewing in Frameless on iPad. A simple example: TouchStart on one layer enables dragging on another layer, TouchEnd disables it. The problem is that while the target layer becomes draggable, on TouchStart, the interaction of the other hand is not detected. Example:
0
Elliott Malkin
I have 5 layers: face1, face2, face3, face4, face5. I want to transform each of these layers with a loop rather than writing out the statement 5 times. But I can't quite get the correct syntax. Here's the idea: for x in [1...6] y = "face" + "#{x}" y.scale = .5 print y, y.scale When I print y, I do get face1, face2, face3, face4, face5. But y.scale is "undefined." What am I doing wrong?
3
Rico Liu
Hello guys, does anyone knows the exact difference between layer.states.switch "default",delay = 0.5 & Util.delay 0.5, -> layer.states.switch "default". I tried to replace the latter with former in my project, but the effect seems quite different. Thanks a lot.
0
Evan Knight
Is it possible to play two videos simultaneously in Frameless or Frames for iOS? Framer plays both videos fine, but when I try to view on my phone then only one video plays. Any ideas?
2
Richard Kho
Hi all, I'm building out some really complex/multiple screen prototypes with Framer at work. Has anyone used some sort of architecture (i.e. Redux) with FramerJS before?
1
Jaime De Ascanio
Working on a new design feed for jobs (I'm sorry that the screen are in spanish) Framer Link: http://share.framerjs.com/3hvp29vxhvg9/ Code credits Alejandro Rodriguez
3
Aalok Trivedi
Hey folks, Having a little trouble hashing out the state logic I should be using for a step by step progress bar. What I want to happen every time you hit 'Next': 1. The progress bar goes to the midX of the next icon 2. The 'active' black icon scales up to 1.3x 3. The previous icon goes back to 1x scale here is what I have so far...http://share.framerjs.com/9vjnazdyqzol/ Happy to clear things up if my explanation is a little muddy
4
John Grendon Enderby
Have noticed a few times today that when I try to open .framer files, either by dragging or using the in app recent items menu, the app dies. Thought it might be a good idea to let you all know :)
14
Kelly Keenan
Is there a way to easily apply the same animation options to multiple layer states at once? I want all these states to have the same time property without writing out a bunch of AnimationOptions for each. Thanks!
3
Alex Cifuentes Sz
Hello everybody I am developer of hybrid applications which use Apache Cordova. I wonder if you can integrate the library frame.js and as integral to my aplicaion also that it works without a net, (excuse my English)
2
George Otsubo
Hello, I have a beginner question: Is it possible to set different animations for separate states using next()? Spring curve for StateA but Ease-in for StateB?
1
Caitlin Charniga
How would I go about defining a style and then applying that to layers? As opposed to making layers with repetitive styles.
3
Mark Johnston
I am trying to have a context menu popup where I long press at the location of my cursor, (ideally only if there was text highlighted in a content editable area. I have tried to use the Pointer module and while it works in the X axis it isn’t in the Y axis in my example. I assume if is because I am putting animation states on there to do the animation on visible.
0

January 28

Ban Nguyen
hi everyone, I am creating a date dropdown. It kinda works but I am struggling how to line up month, day and year horizontally when selected. I have tried .scrollToPoint but it doesn't work. Could you help? Thank you! http://share.framerjs.com/3wjx4dz3ilbf/ Sorry my code is not clean! If you have a better way, please help
15
Jianqi Chen
Hi guys, I want to do some animation for my donut chart, and i only find the tutorial here for the path and framerjs for vectors, is there any place i can find some tutorials of how to do chart animation in framer.js?
0
Mark Johnston
After updating to the latest Framer (File > Update Framer) being able to focus on a layer that has content editable enabled is not showing a caret/editing abilitites. Koen if you update the following file http://share.framerjs.com/3z0eqfa40ihn/ you will see that (while new gestures do work) the text area is not working as a content editable area.
1
Stephen Crowley
All the work I've been doing in the last 8 months I haven't been able to show. I do however have a Sunday morning Framer project to share: https://www.dropbox.com/sc/6qpx2xrvuuhv8w1/AAAzIBwNKtaUJTzsnjila7K_a This inspired me to learn XCode/Swift (XCode for Designers course and a lot of Googling), which has become quite challenging and rewarding. I do have a video of the progress and felt I should share this as well, mistakes and all. I call it Peepchat as a working title and had a little fun with some branding. I'm using Parse for the backend and I was able to capture the message and compress the image and send to Parse (hey, gotta start somewhere). Thinking of writing a post with progress if anyone is interested in the details. https://www.dropbox.com/sc/ikzupbfk7ap8euu/AADpfRjcOtKwXNNz81LMWlN7a
12
Andrew Nalband
I just made these resizable panels for a project and I thought they might be useful for others. http://share.framerjs.com/m65u7f4c5o9c/
2
Mark Johnston
Koen, should I expect the following to work in the latest beta? layerName.on Events.LongPress, -> print "This is a builtin longpress"
2
Koen Bok
I just pushed v50 with a bugfix for crashes that occurred after the latest osx update when you had multiple screens connected, and tried to open any document.
0
Andrew Nalband
If you're like me and you've worked on web projects, there are times when Framer's "normal" cursor isn't what you want when hovering over a certain layers. Sometimes you want the pointer or a text cursor to show up. If you want to use any of the cursors in the image below, just add the following line wherever necessary and replace the word "auto" with any of the options in the image: document.body.style.cursor = "auto" Sample project with all the options: http://share.framerjs.com/h3c7ote6hz0e/ Note: these will appear differently depending on your browser.
2
Ben Rodenhäuser
I have gotten javascript errors when using the trackpad on a laptop to scroll through page components (with mouse-wheel enabled in Framer). The very same page component will work just fine when I drag it with the mouse. Is this something others have seen to, or would you rather suspect there is something wrong with my code? The error message says: "[Error] TypeError: undefined is not an object (evaluating 'start.x')" There are also delays in snapping to the next page, when initiating a page change in the page component via scrolling with the trackpad. Doing the same with mouse drag is very smooth, on the other hand.
1
Dmitry Sholkov
Hey guys. I'm trying to do a simple mouse-roll-over state for web element. And something really weird is happening. Seems like .MouseOut event is firing before Mouse is actually out.
2
Ward McDrive
Question: I've got three pages which you can swipe through. I'd like to start Animations on multiple layers that are visible on the page you are viewing currently. How can I achieve this? The examples: multiple pages: http://share.framerjs.com/zgh6j793mghw/ just one page with the animations: http://share.framerjs.com/dy89zdm36dj6/
3
Mark Johnston
Could code folding be implemented in Studio, just to help manage chunks of code. Not sure what it would look like but I kind of feel like it's missing when I use it.
9
Stephen Boak
When I import a Sketch file with dashes or underscores in group names, the groups are imported without the dashes and underscores and so don’t work. Is this a bug? See attached images of Sketch and Framer's interpretation
1
John Grendon Enderby
Feature request: Quite a lot of the time I have multiple Sketch files open on a daily basis. It would be amazing to be able to select the imported document rather than import all of them. Not a massive issue I guess, just means I don't need to close most of my open files before importing.
2
Jianqi Chen
Hi, i find some post in the group use svg code I know sketch have a plug in for you to get svg code, but i just have some difficulties to animate that in framer. Anyone know how the code of svg like square.html = "<svg viewBox='0 0 200 200'><path fill='none' stroke-width='10' stroke='white' stroke-dasharray='#{square.pathLength} #{square.pathLength}' stroke-dashoffset='#{square.pathLength}' d='M200,0H0v200h200V0L200'/></svg>" comes from?
1
JT DiMartile
Has anyone made a prototype where a draggable's movement is varied based on the inputs acceleration/velocity. For instance, the apple track pad works like this... slow movements move the mouse arrow slower, and fast movements move it further. I know there is speed and velocity in the draggable class but when I try to tie the speed to the velocity in various ways I get super weird results.
6

January 29

Amrit Mazumder
I'm trying to simulate a new tab opening to a web page on click, but I'm having a considerable amount of trouble using an anchor tag in my prototype...Any ideas? Hacky workarounds are welcome. This is my latest try
2
Elliott Malkin
I'm stuck. Again. I have imported a few layers from Sketch, an artboard called "artboard" containging a group with an image called "background". The absolute size of this background is 2000x1500. After successfully centering the artboard, I then want to scale it to the screen size of whatever device this is viewed within. But this scaling is not working, even when I use "sketch.background.width = Screen.width" instead.
3
Balraj Chana
Hey guys, Here’s a prototype I made for an IoT app. Inspired by Google Now, the app allows users to install add-on cards to control different aspects of their possessions and wellbeing including fitness, home security and room temperature. Clicking on a card will display real-time information. Also it was a great exercise to gain more experience with prototyping. Direct link: http://share.framerjs.com/u3g0tj8pyyxv/
6
Dmitry Sholkov
Hey all! I’m trying to figure out how to pass an Arrayindex from the layer inside that array? So imagine there is 10 layers in array and I have a for loop for them. for i in [0…10] ArrayA[i].on Events.MouseOver, -> print this.array.index The reason I want this so I could have multiple arrays, and having MouseOver one layer, it triggers a bunch a layers from different arrays with the same array index each.
2
Chad Lonberger
The new update to Framer Studio kicked me back into a trial. It expired and I'm unable to reactivate using my paid license, error "No activations left for this number." I'm crunching trying to get a prototype ready for usability testing tomorrow. Already emailed [email protected], does anyone have a short-term fix to get me back up? Thanks in advance!
2
John Kopanas
Is it possible to do any type of responsive design in Framer JS?
4
Stan Dézaid
Does anyone have an example of an event that's triggered each time an array is increased by a new element ? (e.g. i++ when new element in array)
6
Stephen Crowley
Hey frameristos, please join us for our 9th Framer JS Seattle Meetup! Hope to see you there. https://www.facebook.com/events/1516721411956569/
0

January 30

John Grendon Enderby
Hi Folks! Maybe a bit of a basic question for some of you and my guess is that it has something to do with scoping but why can't I access a layer created in a for loop by name, but pushing them to an array allows me to access the layer with [] notation, and I can pull the name from the array using products[0].name? I have attached an image to illustrate if my explanation is not good enough ;)
5
Breewee Clibri Symphonie
https://www.facebook.com/musiclegendary/ Just Mucis "Nothing else matters."
0
Daniel Caine
Hi guys, Has anyone got any examples of looping through an array and applying animation to them? Wanting to create a loading indicator (similar to the attached screen shot) https://dribbble.com/shots/2055128-Hop-Loading
4

January 31

Ban Nguyen
Will Sketch and FramerJS make app for iPadPro in the future? so I can draw, design and code all-in-one device :), just curious
4
Nischal Shrestha
Is it possible to have a Click and a DragMove listener on a Layer? I tried doing it recently and there seems to be conflict between the two listeners which seems to cancels one or the other from responding. What I need is the ability for distinguishing between a click and a drag. I'll post an example if I need to clarify myself further.
1
Jianqi Chen
hey guys, I find some examples are on https://share.framerjs.com, however, if I use the website share.framerjs.com, it go directly to the framer website, is there anyway I can see all the projects under share.framerjs.com?
0
Benjamin Den Boer
Heya guys! Check out this new example of text fields with floating labels - as seen in the Material Design spec. It contains some nifty tricks too! Here's an overview of what's included within the prototype: - A custom input class. - Input events (onkeyup, onkeydown). - Custom behaviours for Mobile and Desktop. - Animating the font-size with the "change:y" event. http://share.framerjs.com/4rer1y5f8ol8/ Hope this helps! Feel free to message me here if you have any questions. :-)
2
Ádám Ridovics
hi, does anybody have an example of a video player with any kind of subtitles in framer?
0
Mario Badilla
I'm kind of new to Framerjs, but I'm looking for a way to embed a google maps on a prototype. Is it possible?
4
JL Flores Mena
Hey everyone, I've been working on this prototype and though it's still a wip, I think it's ready to be shared: http://share.framerjs.com/k74rpxep6tj4/ It's a cover of my favorite app: Google Photos. (make sure to do a longpress on a photo to activate the select-drag mode!) I learn a lot when I try to recreate interactions, so I decided to give this one a shot. If you're interested, you can follow this project on GitHub, as I plan to continue tweaking it and putting a few hours per week into it. https://github.com/72/GPhotos-Framer-Prototype Thanks for watching!
4
Darin Dimitrov
I'm using embedded Framer prototypes for my latest side project. It focuses on meaningful interaction improvements. Here's the latest post.
0

Monthly archives

2017

2016

2015

2014

2013