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

What is Framer? Join the Community
Return to index

March 2017

March 01

Lukas Guschlbauer
Hey Guys! Here's a "rebound" on Kevin Maos Calculator Prototype! Works kind-of... After calculation when you type again it resets. But I'm saving the values with their equation in a "history"-array, so I can put them all in the "drawer", Kevin had in his prototype! But maybe I'll do that tomorrow! ;)
2
Kevin Mao
TL;DR: Framer noob here. Kind of blindly played with prototype until things worked. Would love any feedback and advice for improving the code or design. Thanks! I've finally gotten around to learning Framer, and it's been awesome. Made part of a calculator with entry history. First I used layer.draggable to build the dropdown and it turned out pretty hacky. Then I realized I could do this with a PageComponent, but that was even trickier for my slow brain. I'm not even sure what I did in there anymore... I left both methods in code folds so you can try both. I'm really new to coding, so I would love some critique on my code. Happy to be sharing here after learning by osmosis from everyone in this group for so long! https://framer.cloud/nxARh/ https://dribbble.com/shots/3313390-Calculator-with-Entry-History-Framer
8
Kristian Hjelle
Is there a good practice for getting the height of HTML content in Framer? Example: I'm making a prototype that pulls in data (articles) from an API. I list these results in a scroll view where I display the headline and image from the article. Clicking the articles opens up a detail view, where I display the body text of the article. The length of the body text varies from article to article. I want to calculate the height of this content—then use that value to set the height of the detail view.
5
Claudio Henriquez
Hellos guys, I'm working with some boxes that has a shadow in Sketch but when I import the file to framer, the shadows are not visible, any ideas on how to solve this ? Thanks
2
Lachezar Petkov Petkov
Hi, I'm trying to disproportionately scale a rectangular layer with rounded edges (borderRadius: 6). Is it possible to exclude scaling the edges, because they also get disproportionately scaled and look really weird? : ) Thanks!
2
Patrick Rushton
I'm using Framer Preview on iOS and want to download a prototype for offline viewing. But the download icon (in the swipe up toolbar) is permanently disabled. I've tried this with a few different examples, but it's always greyed out. Any ideas what I can do to enable the download button??
2
Leon Kosters
Hey everyone, I have some animation/time problem when uploaded to Framer Cloud. For some reason the animations are going really slow. Anyone know why? https://framer.cloud/aqeUI/ You can click on the second row in the table and on the second 'Opdrachten' badge in the incoming sidebar. Thanks in advance :)
2
Julia Carlson
Hello, I'm trying to create a SliderComponent that is disabled (doesn't respond to click, can't be dragged, etc). I tried using ignoreEvents and I can still interact with it. Is there another way to achieve this? Here's my code: sliderComponent = new SliderComponent sliderComponent.center() sliderComponent.ignoreEvents
3
Christie Gettler Tarazon
Hi all, maybe a pretty basic question here, I'm not sure, but I need some help with arrays. I have a list of numbers (let's call it the "readout") that are related to another list of numbers (let's call it the "value"). For instance, if the readout is equal to 5, the value is 23. I need to set a variable equal to the changing value as the readout changes. So, if readout==5, myVar=23. In an effort to not write a huge if/else if statement, I feel like arrays could help me but I'm not sure how to write it...
4
Dominik Sebian
Hey Guys, a bit Off-topic, but is anybody of you or have been attending to the Dibi Conference in Edinburgh :)? Would love to hear you opinions from a UX/UI Designer perspective !
0
Jacek Stryk
Is there a way of temporarily disabling the "change:XYZ" event listener? i.e. disable layerA.on "change:x", -> so it does not fire until re-enabled? layerA.ignoreEvents does not work.
3
Boris Kaiser
Hey everyone, when I create a module in Framer, Framer freezes for about half a minute, see video: https://youtu.be/DC2IDPDYAc8 Do you have the problem, too? PS I use the current version 85.
3

March 02

Claudio Henriquez
So guys I'm creating this prototype with framer and everything is working fine, however I've noticed that some sections present a white space in the left border, like a padding/margin there, however I already checked in my sketch file and the section is wider than the artboard. Any ideas on why this is happening ? Here is a link to the prototype:
2
Lachezar Petkov Petkov
Android designers, how do you get a nice ripple effect for your cards/buttons? I found three modules so far: framer-material, android-material-kit (through m.utils.inky), materialInteractions - and can't quite get them to work (either don't work at all, or the ripple is getting beyond the boundaries of the layer, so I get just a funky circle thing going on).
3
Mushon Zer-Aviv
Newbie question: What do you respond to a #web developer question: "How do I integrate this Framer prototype into the product?" I know Handoff starts addressing some copy/pasting of spring values but I need to send web developers a guide along the lines of "so the designer just sent me a link to this Framer prototyping thing… now what?"
4
Eyal Zaidman
Feature request: hide the navigationBar. I really like the coding part of Framer, and I'd prefer to give the editor itself more space, on account of the navigation bar (which I rarely use)
1
Geunbae Lee
Made a very simple Gradient Generator + Applying it to the background of the website... Even a little bit of an improvement in my knowledge act as a motivation to learning more..! :) https://framer.cloud/iAYJp/
1
Salim Abousallam
Hey Frameristas, just a quick recap of our recent trip to South Africa to attend the region’s first ever Framer meetups! Koen Bok and I attended events in both Cape Town and Johannesburg, where we gave talks, met the local designers and hosted training sessions. A huge thanks goes out to Barclays Africa and their Creative Executive Director, Dean Broadley, for inviting us out and arranging the meetups. We were blown away by the South African design scene (many amazing self-taught designers) and thoroughly enjoyed meeting all of you. Suffice to say, we’ll be back again real soon!
2
Sean Nelson
Hi all! I'm trying to set the option to set the scroll to a FlowComponent's first layer to false, but I can't seem to get it to work. For example: flow = new FlowComponent flow.showNext(sketch.screen1, scroll: false) sketch.button.onTap -> flow.showNext(sketch.screen2, scroll: false) The second showNext item correctly doesn't allow it to scroll after you click to it, but the first showNext item scrolls no matter what. Thanks for the help!
0
Jacek Stryk
Is there a way to find out what is the current layer shown by the Flow Component? Something akin to layer.states.current.name?
1
Andrew Cunliffe
Hey Frameristas, is there a way to make subsequent pages in Framer Flows work with mouse-wheel scroll? Here is a simple prototype where the first page works with a mouse-wheel but the second page doesn't. I know that I could wrap the whole thing and not use Flows, but I would rather use Flows if possible.
1
Jonas Treub
If your prototype stutters when it animates, chances are you are animating a property that isn't hardware accelerated. These properties are well performing animatable properties: • scale (scaleX, scaleY) • x and y positions • opacity A lot of the other properties cause repaints, which takes more time to render. For example: • size (width, height) • shadow • background and border colors Sometimes it is possible to translate a bad performing property to a hardware accelerated one. If you like to know the trick for animating shadows. This following example is for you.
5
Joshua Asokanthan
Is it possible to use ES6 in Framer Studio rather than Coffeescript?
5
Ban Nguyen
Hi everyone, Does anyone know an example how to do multi/single selection on mouse drag/click, like this example: http://jsfiddle.net/Brv6J/3/. Thank you!
5
Calob Mejias
Is there a way to show your framer prototype on an Apple Watch?
3

March 03

John Lee
How to do trigger the same set of states but with two different buttons? I don't want to copy and paste the same thing, but need something like an OR statement or function... but ain't figured it out yet buttonA.onClick -> __x.switchStates('out') __y.switchStates('out') (about another ten different states) buttonB.onClick -> __x.switchStates('out') __y.switchStates('out') (about another ten different states)
2
Geunbae Lee
Is there a way to change the Canvas.width and Canvas.height? I've read the documentation which says that they are (read-only) but it would be great if I could customize the canvas size so that I can import any Artboard size from Sketch without so that it looks exactly the same. Please let me know!
1
Mushon Zer-Aviv
I got #Mapbox to wonderfully work in Framer and am now trying to add the Mapbox-GL-RTL-text #plugin for Mapbox. It works well when I use: mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js'); But then when I keep working I get this error: Error: setRTLTextPlugin cannot be called multiple times Any ideas how to make sure it runs only once or include it in some more elegant way?
1
Johan Strömgren
Hey, what's the best hardware platform to look at if you'd like to use Framer to prototype connected objects? Particle? Arduino?
6
Utsav Saini
Hi there, When using FlowComponent, the showOverlayBottom method replaces everything on the screen. I want to keep the 'heart' logo so that it can take place in the header of (ii) screen i.e. Long notification. Is it not possible while using FlowComponent? I am NOT using WatchKit-Framer module so that I can learn how all this works. If this can be achieved using flow.transition() then please direct me to an example. The example given below flow.transition(layer, transition, options) in Framer docs is NOT quite clear enough for me. Also, where can I go to have a good understanding of 'show' and 'hide' functions?
1
Jochen Leinberger
Hi, how would I hide an overlay which is part of a flow componet? there is nothing like overlay.hide right?
4
Orfeo Chen
Possible bug: PageComponent clips the shadow of its children even if its 'clip' property is set to false. Workaround: pageComponent.content.clip = false.
1
Karl Goldstraw
Hello, I'm brand new to Framer. How do I add a percentage count-up to a horizontal progress bar that I'm animating on page load? I've been reading about event listeners but I'm unsure how to implement it. Here's my first prototype! https://framer.cloud/ihRXG/ Thanks.
2
Ryan Morrison
Hey everyone, do you know if there is a way to display your web prototypes with browser chrome? It seems to be missing from the device list.
9
Jason Wang
How can I use a svg shape as musk ? Like the black shape in this picture... "clip" dosn't work.
0
Orfeo Chen
Hi people, I just encountered a weird problem. I use for loop to add child elements to pageComponent.content, but the content always leaves the last child outside of the view. I have to call pageComponent.updateContent(), which according to the docs, forces the content to recalculate its dimensions. I'm a bit confused as most of the times, updateContent() is not necessary. So when to use it? And what's happening under the hood?
1
Aalok Trivedi
Anyone know of a picker module I can use for something like this?
3
Stewart Murrie
Hello Frameristas! I ran into an unexpected situation tonight with version control and Framer Cloud. I had a prototype, call it PrototypeA, which I uploaded to Framer Cloud when I was done, and then checked into source control (Perforce in this case). Then I branched my code in Perforce to create PrototypeB—this effectively created a duplicate copy of the code but in a new directory with a new name. Then I opened PrototypeB in Framer, made some changes, and uploaded that to Framer Cloud, expecting it to create a new prototype, but instead it updated PrototypeA in the cloud (adding a new version to the existing one). So, two questions: 1. can I undo this, so PrototypeA in the cloud is as it was previously (effectively, can I delete a single version)? 2. how can I prevent this happening again? (I assume there is some metadata stashed in a file that controls where it uploads to). And bonus question 2a: is branching a prototype not a good idea? Are there other metadata settings that get copied that really should be uniquely created for each project? Thanks!
2
Sindu Narasimhan
Hello ! I am looking to replicate this type of animation in framer but unsure where to start - To make this a little more tricky im doing this on a gradient layer. Any leads? Thanks !
4
Sindu Narasimhan
Hi! Does strokeWidth not work on gradient SVGs? SS of how I'm attempting to animate it. What am I missing? FWIW - able to animate dashoffset.
1
Dallas Elliott
One more question! I'm attempting to use the ios-kit framer modules to create an iOS banner notification and I'm struggling. I think it's a basic understanding of states that is causing the issue. Basically what I'm attempting to do is make the banner notification show up when I click the "homeScreen" layer. I've got the hang of basics and flows, but still working to understand states and events.
1
Jonathan Harvell
I have a array of tappable layers in a vertical scrollComponent that is nested inside a horizontal pageComponent. I'm using... layerA.onTap -> unless scroll.isDragging is true ...to disable events while scrolling, but the events are only disabled when scrolling vertically, not horizontally. Any help here would be greatly appreciated.
2

March 04

Nate Davis
Hello community. I am trying to hide some dot indicators for an on boarding experience I am creating. I downloaded and modified an on boarding template, it uses the Page component to wrap all of the pages together and below that in the code are the the dot indicators (see attached screenshots). There are 5 screens in the Page component and the 5th is a login screen so I want the dots to fade away as you swipe to the last page and the login screenshot appears. Right now I am using “page.on "change:currentPage", ->” simply because that is how I am triggering the animations on the other screens as they appear. Thought I could apply the same method to the dots, however I am having a problems. I can get the active dot to hide, however I cannot get all of the others dots to go away. I believe it’s doing something with an array but I am a super noob with framer at the moment. What am I doing wrong here? Any help would be appreciated, thanks!
2
Chris Wang
Can I access the individual properties of layer.screenFrame? like the x, y, width?
1
Sean Nelson
Hi Framers! I'm trying to replicate the photo resizing and panning you'd experience in iOS but can't wrap my head around how draggable.constraints is supposed to work. In the beginning of this video I have it turned off and then switch it on to show what's happening. I'd like the edges of the image to be constrained to the width and height of the screen (like in iOS). Thanks for any insights you all might have!
1
Ian McClure
I see "backgroundColor: null" quite a bit in projects. I keep wanting to change that to "backgroundColor: 'transparent.'" Coming from swift, nil—their version of null—is used to say that this object doesn't exist. Transparent in this case is a specific value and not no value. Is this just me being used to a different convention? I realize this is kind of nitpicky but I see it happen a fair amount.
3

March 05

Koen Bok
This is a fantastic beginner article by Tess Gadd.
3
Kasper Dolk
Last week I visited the Framer office in Amsterdam. I decided to turn my artboards from Sketch into a cool prototype using Framer. I would love to get some feedback on the project, so feel free to comment.
2
Aalok Trivedi
I have a page component but I only want to be able to go forward and prevent swiping backwards. What's the best way of going about this?
0
Rich Price
Any Framer peeps in Denver? I'm thinking about starting a Framer Denver group. Care to join me?! :)
9
Richard D Lang
Does Framer let me use HTML form fields? I'm really interested in using Framer, but my prototypes need real form fields that participants can type into during user testing.
5
Dwayne A Neckles
first time getting into framer it looks great seems intuitive... but if the code is written in javascript anyway remind me why cant it be used for production level code... just had to ask
3
Jacek Stryk
What happened to the one-time Framer Pro license? Can't find it on the
4
Gautier Favier
Hi, I'm a newbie at Framer and I'm having trouble to import my sketch file. When I group some of my sketch elements Framer adds a wired margin on the left. Do you know how can I fix it and where the problem comes from? https://framer.cloud/rkvZE Cheers
4
March Rogers
I'm trying to turn on an event listener for a layer created in a for loop. In the loop I assigned unique names for each layer and those names appear correctly in the layer tree view panel. However Framer Studio doesn't appear to be aware of the unique names (it only shows the original new layer name in the auto-complete drop down) and so I can only add an event listener to the last of the created layers. Any help? Thanks!
6

March 06

Rich Zarick
Hey all - I've been taking a different approach to using framer.js - integrating it into html code as opposed to importing visuals from Sketch. I'm trying to target and manipulate elements ala jQuery. Where I've been failing is this: layer = new Layer() layer.html = document.querySelectorAll("#element").innerHTML I haven't been able to target pre-existing html elements with the layer.html property; it seems reserved for elements created via coffeescript in app.coffee. Anyone have any suggestions?
5
Dallas Elliott
Potentially a simple question, but I haven't found any good answers online. Is there a way to change the default scroll position of a scrollComponent? I'm attempting to create a hidden search bar that is revealed when you scroll down. Example is in iMessage messages list on iOS. Scroll down from top and it reveals a hidden search bar.
1
Calob Mejias
I'm looking to create a static data viz similar to this. Anyone know of any examples for manipulating triangles?
1
Jacek Stryk
Is there a way to suppress the red bottom error messaging bar when Framer is run in web browser?
1
Joel Califa
Hey, I'm trying to animate the height on something and it's not only killing the framework, but seriously lengthening the animation time from 0.3 to over a second. Any idea what's up? While that's happening, I'm also scaling up a clipped layer inside it. I don't think that's the issue though.
4
Joel Califa
Hey, is there any way to avoid an Oval becoming raster? Trying to import it really small and scale up, but I'm getting a lot of blur and that sucks :/
2
John Lee
Could anyone point me towards justifying layers (in the center) of parent container with the same margin on both sides? For example - I have a box = 200, then I have a loop which with 6 layers. How do I evenly distribute the layers inside the box so their centers are evenly spaced? In my example, all the dots are left aligned... this is not what i want. thanks!!
6
Karl Goldstraw
Hi folks, how do I get an invite to the Slack channel?
1
Wouter Van de Kamp
Hi all. I need a little help on some prototype that I'm working on. I have two page components that interact with each other. Borrowed a sample of Jonas Treub for that and modified it a bit. The problem I'm having right now is that the bottomPageComponent is not center aligned on the x-axis... Which I would love to have, because right now if I use the bottom page component I can't reach the last page of the top page component. Basically I would like to manipulate the top page component with the bottom one and vice-versa. This might sound a bit weird. So I've attached my project so far over here:
1
Ben Callis
I'm looking for an example of a scroll effect where the scroll items stack as they reach the top. Something like this would be awesome https://dribbble.com/shots/3300045-Building-Codes-App-Concept-Interactions I was able to get pretty close using Utils.modulate(). Any help with this would be greatly appreciated
2
Drew Stock
Wanted to give a shoutout and big thank you to Sergey Voronov for his Messenger bot module, which we mod'd to complete this project: https://medium.com/bigtomorrow/imagining-an-ai-first-student-experience-dbab2d4f084d#.buwbx0xu5 Can post mod to his mod, but it's big time spaghetti code so don't know how useful it'll be. Thanks again, Sergey. https://github.com/mamezito/FramerMessengerChatBot
2
Gabriel Lovato
Repeating animation & AnimationEnd On animations with a repeat option, it looks like AnimationEnd fires after the first execution of the anim, and not at the end of all repeats. This means there is no way to start a new animation after all repeats have ended. So far I can mitigate this by setting a delay on the 2nd anim, but it seems dirty. Is there another, more final event I should be listening to? Can't find in the docs... Example:
3

March 07

Knis Steizinger
How can I trigger events with values typed in an input field? E.g. starting an animation when entering the word "animation" (I am using the Input module by ajimix)
3
Matthew Joseph Kulp
I love building animations in Framer. I hate implementing them in jQuery and CSS transforms... Does anyone know of a good library, framework, etc? ...something to make animating on the web a little less painful and more like Framer?
21
Jon Arnold
How does the PageComponent.wrap() work? Can I import multiple layers and they are added automatically as pages? Or do I need to add them manually one by one? A screenshot how the sketch file should be organized would be very helpful :-)
2
Loucas Papantoniou
Hi there! I want to organize the first Framer meetup in Brussels. Let me know if you'd be interested attending and your level of expertise in Framer. Thanks ;)
1
Bhaskar Ravi
Hey all quick question. How do you open up an external URL on a click, in a new window / tab? This doesn't seem to be doing the trick: layerA.onClick (event, layer) -> window.open("http://framer.com/","_blank") Thanks in advance.
2
Jon Arnold
What is the best way to replace a page of page component on runtime?
1
Joel Califa
Hey, I'm having trouble viewing my prototype on a non-retina Macbook Air. It looks perfectly crisp on a retina Macbook Pro. I exported Sketch at 4x to fit the device (no other options here really atm other than overhauling the entire design). Chrome renders it blurry. Safari doesn't seem to anti-alias it. Any possible fixes? Thanks!
0
Celeste DeMartis
I feel like I'm missing something pretty basic about running a prototype on a mobile device... unless I'm using mirror, the browser chrome covers the top and bottom part of my prototype rendering it unusable. Any way to get around this??
4
David Plakon
Framer team: I got a new computer and want to activate framer but am out of activations How do I deactivate my old computer so I can enable the account on the new one?
1
Sergey Ivanov
Hi everyone! What is the best way to make blue menu start scrolling back to its top immediately as soon as i start scrolling the whole page up from any scrollY point?
2
Lukas Guschlbauer
Quick noob-question: How can I persist a state-change? Scenario: Button Hover-Effect with MouseOver, MouseOut and on Click it gets an Active-State. Right now (which makes sense) the active state gets removed on MouseOut.
3
Dani Feles
Hi amazing people! I was working on some app concept design + prototype and I used Framer for a high-fidelity prototype (of course) Curious to get your feedback: https://dribbble.com/shots/3314570--Assistant-with-double-personality dfeles.github.io/arnold
3
Jon Madison
i'm just full of questions! How do i get the delta in size on a "change:size" event? is there an inherent way to do this? tried this.delta to no avail...
2
Kushagra Gour
Hi FramerJS people! I am excited to present to you the new release of "Prototyp" http://prototyp.in/ - a free web app based on the amazing Framer.js to let you prototype on any platform. The new app comes with new sleek interface, user profiles, mobile previews and more! Go ahead and create awesome interactions :)
5
Jon Madison
Howdy--any good examples of custom animation option implementations? i'd like to, say, add an animation option on a custom layer called circleRadius: 50 and have the circle radius on my custom layer to animate to a particular size. i get that i can add a function on my customer Layer to achieve this, but i wanted to lean into the API for this functionality. that make sense? thanks! jon
3
Chris Camargo
In thinking about animation and complex masks, I came back to the Twitter intro animation. How would you go about recreating this transition in Framer?
10
Daniel Alvarez
This is my first time working with Framer in a real project. I have no real experience. Is is possible to set the overdrag attribute to just one side? I got a slider which is Screen.width, it starts at the bottom-right corner and it can be slid to the left. I want to apply the overdrag to block it from dragging it to the right when it is in its initial state.
1
Wonjun Song
Here's a prototype for LongPress interaction on first card. The platform is currently on alpha mode. For access email [email protected]
1
Sean Nelson
Are there plans to support Framer Mirror over USB? I can't get the sync to work over my university's WiFi.
2

March 08

Jason Wang
My practice sharing -
0
Calob Mejias
Does anyone have example for pulling up a list of suggestions using InputModule?
3
Geunbae Lee
I just came across this neat trick to contain code separately inside the grey box. Could anyone let me know how I can do this inside Framer? Thanks!
4
Philippe Côté
Hello Framer group, I have a non-Framer but design process related question that maybe some of you could answer. Does someone work at Facebook here? We trying to start a web-based app that contains HTML/CSS/JS + WordPress (for now only) + database. How do you iterate on multiple working designs and push newer versions online without screwing up the database? Each time we try something in WP, it modifies the DB... but we eventually want to merge data from the test DB with the current DB. Any ideas or best practice suggestions from Facebook? Feel free to answer me in private message if it's better that way. Thank you very much.
4
Jon Brennan
I think the answer is no, but wanted to put this out there: is there any way to define default modules to include in all new framer projects? I'm almost always using simple modules like FontFace, and copy/pasting those individually into the project folder gets annoying at scale.
5
Jon Madison
how do i/is there a way to auto scale a single dimension of an image set on a layer?
10
Boney Yeldho
What is the difference between screen.width and Framer.Device.screen.width ?
2
Ed Chao
Is there a way to fetch a page within a Page Component by index? I'm trying to fetch a page by index and then change some of its values. Answer: yourPageComponent.content.children[index]
2
Reshad Farid
Hi guys I have a question, can I do a a/b testing for a specific screen with framer?
3
Erol Bozkurt
How about a stupid question: "Anybody raised money by showing a Framer prototype to investors?" ;o)
1
Arved Baumgärtner
👋, looks like 'scroll.mouseWheelEnabled = true' doesn't work for mac trackpad :/
6
O'Ryan McEntire
Since updating to the latest Framer version loading modules takes anywhere from 30-60 seconds EVERY SINGLE TIME A CHANGE IS MADE. It's incredibly frustrating to make a tiny edit on a very small file and then come back to framer studio only to have it hang. Is anyone else having this issue? Everyone on my team is having this issue with different files.
3
Mike Paggi
I'm programmatically creating layers/pages in a Pagecomponent to cycle through in a carousel like way with some onboarding images. When it gets to the end I want it to start to the first page...the thing is I wanted to be smart and use a for-loop for this but the layer name is the same for all. changing the "name" property doesn't help here it still seems them separately. anyway i can tell it to go to the first page when i get to the last? I can get the currentPage.name reference but just can't apply it back to using that to snap to that page.
3
Mike Paggi
how can i tell if my font is using SF UI Display / Text when doing an iPhone prototype? At the moment it doesn't seem to be looking the same. is there anything in particular i need to do or does this go in the line of custom font importing?
2

March 09

Andreas Wahlström
Hi! Just wrote a module that makes it easier to work with text inside Framer.js. Let me know what you think! https://github.com/awt2542/textLayer-for-Framer
25
Jason Wang
My framer work
6
Ron Schrama
Hi everyone, Im pretty new to Framer and currently learning it, but got a question. I'm trying to get a card flip at the end of my onboarding flow. Now I found this example: https://dribbble.com/shots/2695720-Card-Flip-Animation-in-Framer-js But I got some problems. When I use that code for only my last 2 screens (so end flow > normal page) it works, but when I try to put it at the end of my flow it uses the first and fourth (instead of fourth and fifth) screen. And the flip won't work correctly but acts like a book page that you flip. I don't understand everything that happens in that code yet, but am I missing something basic? And is it possible to change the onClick to 1 element instead of entire page? If I edit the card[0] to klaar4 it removes the entire card flip animation and fades into the other screen. This is how it reacts now: https://framer.cloud/uSZwi/ Thanks for any help
0
Joe Puddle
hi all, just getting into Framer anyone got any links to some good tutorials? just got through all the ones on the framer youtube page so looking for some more. cheers!
2
Sergey Ivanov
Hi all! Is it possible to get mouseWheelSpeedMultiplier working in shared prototype in a browser? I've defined it and it works in Framer app, but doesn't take effect on prototype shared to the cloud (
0
Dwayne A Neckles
I'm redesigning specific parts of the gmail user interface and web and mobile. What are some ways to show those product ideas. Using FramerJS should I prototype each idea separately or do one prototype of all my ideas combined. I also wanted to show before and after shots of doing the same thing. Currently the designs and my reasoning are in a keynote presentation.
0
Mike Paggi
When doing a Sketch file import to my Framer project and attempting to do 2x importing it looks massive on my iPhone 7 device screen. I tried setting the width and height of the overall layer being imported to what it would be at 1x. that worked when i built a module from scratch without sketch. any guidance there?
1
Mike Paggi
I have a basic Pagecomponent looping around though it runs really slow / doesn't seem to move the same way as it does on my Mac when running from Framer viewer on my iPhone. any thoughts? Is it because I could be loading too much into the prototype? I have a few sketch files i import and manage as part of the flow
1
Christian Poschmann
Does anyone have tips on building a responsive desktop prototype in framer? I've been using the constraints functionality from the MaterialKit module, but I find it gets pretty tricky in larger projects. It doesn't have to be fully responsive, is just like it to scale so it displays nicley on MacBooks and larger displays. I could use the Framer device templates but would love not to.
1
Seb Bailey
Interested to see if anybody has got the Snap.svg Element.click() event working in Framer? I have set up multiple paths on canvas that is it's own layer within ScrollComponent.content, and would like to animate each path upon clicking on them. So far though I haven't managed to get Framer to recognise the Element.click() method that the snap docs provide. http://snapsvg.io/docs/#Element.click Any help would be greatly appreciated!
0
Tien Bach
Hello there, I have a question regarding stacked layers and their event listeners occurring at the same time. Here’s what I’m trying to do: I’m working off a flipcard module in which each card is a parent container layer holding two children layers (one for the front and one for the back) - three layers total. The container has a click event that makes the card flip and the back layer has an event listener that will do something else, in this case, make the second card disappear. Because these layers are stacked on top one another, clicking will enable both events to occur (1. the flip and 2. the disappearance of the second card). How can I get one event to occur at a time, despite being stacked on top each other? Your help is much appreciated 🙏 Also, I haven’t had much luck with the .ignoreEvents method
2
Julia Carlson
Does anyone have an example of a color library in the form of a module?
4

March 10

Mushon Zer-Aviv
Does anybody know a good #tutorial for web #developers looking to implement interaction and animation based on a Framer prototype? To me it really feels like this should be something Framer publishes front and center in the blog if not the docs. It is even more expected now that #Handoff is a thing, but I couldn't find anything like that online. Any pointers?
6
Thomas Law
I'm tired of making pure animation prototypes, because it leaves tediously long codes. So this time I introduce you a bookshelf prototype, let just get back to interactive things. Here's the link: http://share.framerjs.com/t0fcyc592ajj/ Don't delete too much books at a time! Two or three is good. I've kept the codes under 500 lines. I think this will be a helpful reference for beginners. This prototype includes following features: 1. Long press a book to enter editing mode. 2. Switch between normal and editing mode. 3. Book selection and shows the number of selected books. 4. Delete multiple books. 5. Plays an animation when deleting books. 6. Rearrange books automatically after deletion. 7. Recalculate height and position of scroll component after deletion. If you like it, please give me a like on Dribbble, thank you very much! https://dribbble.com/shots/3116835-Bookshelf
6
Mike Paggi
Is there a way on the Pagecomponent to go completely around in a carousel with the pages? I would like snapToNextPage() to just loop everything if I can.
3
Kunal Bodke
Hey framers! I have a question, we are beginning to prototype in FramerJS and I was wondering can we reuse the code for actual production projects in Android, iOS or Web platform?
1
Eugene Dobrovolsky
Guys, anyone knows a way to remove that Made with Framer button? It's overlaying my navigation and I don't know how to target it to layer.destroy() it. I generally think that once clicked the cross on the initial info box it shouldnt minimize into this button, but just disappear altogether.
1
Sauraj Babu
Recently made a Photo album concept code isn't perfect, would love if someone would help to refine it a little more :) framer link: https://framer.cloud/dtbGc/ some dribbble <3 : https://dribbble.com/Sauraj
0
Geunbae Lee
I'm not sure if this is intentional but I found this in the Framer documentation. "pageContent.html = pageContent.html = number + 1" So I guess this is a typo !
4
Tess Gadd
Hey all, here's the next Cheat Sheet in my series, States! Would love to hear what you think.
5
Steve Ruiz
A thousand ways to take your coffee, but how to show them all? I've built this prototype around the question of how to use Framer for choice-based design problems, where any design change would need to be appear in many places and where the design itself would have to adjust to new data. There are some good tricks inside, too.
1

March 11

Riccardo Buzzotta
Hi guys, I was looking into adding simpler functions in my Classes, but the example Framer's website provides has… wrong code? How can I fix this? Error: TypeError: Button.deactivate is not a function. (In 'Button.deactivate()', 'Button.deactivate' is undefined) Link: https://framer.com/getstarted/programming/#classes
4
Sergio Reynoso
Feature request: It would be great if we can toggle ON and OFF the ability to view the index of a layer next to their names in the layer inspector. As I gain more experience designing prototypes with Framer, I find myself referencing the child index to be more flexible than the layer name. For example, when using a “For Loop” to assign actions to groups with children. Take a look at the image for more clarity. Thanks!
2
Samarth Bahuguna
Is there a better way to import SVGs than pasting the code into the html attribute of a layer? I'm working with large SVGs and the code looks ugly + makes Framer slow. I was wondering if there are any modules that make working with SVGs easier.
3
Sean Nelson
Hi all! I wanted to show off a project I've been working on as part of my senior capstone. I'm designing a hardware cloud device and its mobile app and have been using Framer to do all the UI prototyping. My goal is for it to suggest the depth of a full iOS app, and Framer has really impressed me in terms of performance and capability. That, and the really incredible ViewController for Framer module.
6

March 12

Jason Nelson
Has anyone done anything with the Taptic Engine on the iPhone?
3
Steve Ruiz
Check out this quick visual aid I put together for Utils.modulate. I still have a hard time figuring out the right formula to get the result I want, so this might also be a sandbox for testing future designs.
0
Sergey Voronov
how i can make layer draggable on longpress or touchstart? seems was working ages before, but on latest library doesnt work - layer gets draggable enabled=true, but i can't drag untill touchend and touch start again :/
5

March 13

Steve Ruiz
This is a fun one: an ebook reader. Tap or swipe to change pages, tap the title for the menu and options. Since the project actually processes html data into pages, it can handle text reflows like size changes and font changes, recalculating total pages and current position.
1
Sergey Voronov
lodash coffeescript question. I am working on rearranging slides in a grid - kinda like ios home screen moving icons. and need to shift elements in array somehow. for example [0,1,2,3,4,5,6] needs to become [0,6,1,2,3,4,5] so elements from 2nd to 6th are shifting one position forward in array. and so on - func needs to be flexible so i can shift any part of array back and forward. Can't seem to find anything in lodash
2
Bennu Vieira
Sexta-feira, 17 de março, no Museu dos Baleeiros, a estreia pública do documentário Atafonas pelas 21h00 https://www.facebook.com/events/1894957807450041/
0
Kasper Andersen
Is there some fancy way to make an element have an mouseover effect every time it has an onClick event? I'm making a web prototype and would like to cursor style to change on mouseover, but it is a lot of double work when you have to do it on everything that have an onClick event.
2
Juan Burgos
newbie to framer here, but has anyone ever ran into an issue after importing from sketch where you are unable to right click on your layers to add states or animations? even trying the insert button at the top doesnt let me choose layers that exist from the import. running framer v86 & sketch v42.
2
Adam Mazurick
for all intents and purposes is superLayer == parent?
2
Jordan Robert Dobson
Join us this Thursday! https://www.facebook.com/events/1298677196893836??ti=ia
3
Ed Lea
Is it possible to set dynamic widths/heights based on the content (html?) of a layer. e.g. a = new Layer html: "variable string length" or is there a best practice to enable a layer to resize based on its content? Edit: I'd also like to read that width back, but a.computedStyle()["width"] returns nothing, a.size returns the default 100x100 sizes and a.contentFrame() returns all 0's
41
Struan Fraser
Hello all, I've been having trouble with end of animation events for some time now. It seems to create very unpredictable behaviours. I've uploaded an example to demonstrate this - https://framer.cloud/pEaxU/. Despite being controlled by the same behaviour, the outcome is often different. Is there a best practice I can employ to avoid this or is this just a defect?
4

March 14

Kunal Bhatia
Is there anything like Designer Fund's Bridge program for UX/Product Design internships? Or if you have any leads for relevant internship positions, let me know. Sorry for the slightly off-topic post. Asking for a friend at UC Berkeley's School of Information. Thanks in advance!
0
Dave Anderson
Having some issues with a prototype, and was wondering if people had suggestions. I uploaded a test file to illustrate the issue I'm having—any help would be appreciated! - A button causes a flyout to appear. The flyout should remain visible until MouseOut. - The flyout contains several other buttons, which also require event listeners. As soon as my mouse hovers over one of the smaller buttons, it triggers a MouseOut on the flyout, causing them all to disappear. How can I not have the smaller buttons trigger a MouseOut on the larger flyout? Also I'm getting a TypeError:undefined for reasons which are mysterious to me. Again, any ideas would be helpful! Thank you
1
Benjamin Den Boer
Happy Friday Frameristas! We're excited to introduce a nifty new addition to the Framer Library: the RangeSliderComponent. It creates a slider with two knobs, useful for defining and editing numeric ranges. Like price filters! Simple example: https://framer.cloud/duncz/ Price filter example: https://framer.cloud/cIYdr/4 Read Docs: https://framer.com/docs/#rangeslider.rangeslidercomponent
8
Alex Maximets
Hi everyone, I'm building a function that's supposed to let a layer work like an on and off switch, dropping every layer that is higher in the array and then, when clicked again, return all the layers to their original position. I managed to make it target the right layers when turning it on, but I can't get it turn off (close back) What am I doing wrong? Please and Thank you.
7
Jacky Lee
Hey everyone, keen to get some thoughts on how you handle object states in a prototype? To demonstrate, I've picked a really generic scenario that many of you should have seen before: An ecommerce site with a products grid and a cart drawer. Each product card has an 'Add to cart' button, which toggles the the product state between 'notInCart' & 'inCart'. The state of these needs to be captured somehow and displayed when the user opens the cart drawer. What I've done is probably a really tedious approach, can be tested here: https://framer.cloud/JGOGl/ 1. Setting up an array with all the product cards and use that as the source of truth of each product state. 2. When i click 'add to cart' on any card, it will match this card with the corresponding object in the array to change its state 3. If the state is 'inCart', then add that object into *another* array called 'cartArray' 4. Finally, use this 'cartArray' as the source for populating the cart drawer items. It's probably easier to dig through the code, I've tried my best to comment everything in there. Has anyone done a similar logic to this? I'm just curious to see how everyone else solves this. Thanks in advance!
6
Chris Camargo
I'm working on a prototype with shopping cart functionality. To keep track of what's in the cart, I use an array. As the user adds products to the cart, I simply add an object to the array that contains the name and price of the item, which will feed the cart's display and price calculations. When the user adds more than one of the same product type to the cart, I just add another object with name and price. So, in practice, it's possible that multiple objects appear in the cart array that are identical. My question is – how would I go about removing an item from the cart array, without knowing its index, and with the possibility that multiple items in the array may have the same value? And overall – is this how you would go about constructing a simple cart in JavaScript? Anything else I should consider?
7
Martin Halik
why this is not working? :( test = new Layer height: this.parent.height
2
John Lee
How do I target similar layers (bg1, bg2, bg3) from a Sketch file with states? Each layer needs an 'active' state and needs to switch on/off when clicked. Pretty simple, but having some issues... Thank you!
1
Daniel Caine
Hello everyone! Have the way states work changed in recent versions? I had a functioning prototype 2 months ago which no longer seems to work when I update it. Basically, whenever I tap an image within my prototype, it copies the image, adds new states to it, and then activates those state which makes the images animate to the top of the screen. Working version: https://framer.cloud/RCEEL/ When I update it, however, the state gets applied but the layer no longer animates. Broken version: https://framer.cloud/VTwlc Any ideas? :confused: More information: When using: animatedImage.states.switch('on') to: animatedImage.states.switchInstant('on') It works, but obviously no longer animates :S And changing it to animatedImage.animate("on") works the same as animatedImage.states.switch("on")
1
Vinícius Miraglia
Does anyone have a case about framer + firebase?
1
Charlie Sneath
I'm creating a new layer with an image property and a border through the style property. I want the border to overlap the image on all 4 sides, but the default behavior only seems to cover the left and right sides of the image, not the top and bottom. Is there a simple way to change this, or would I have to implement the image background a different way?
1
Philip Madeley
Just came across some super useful one-liners in Coffeescript. Worth checking out.
4

March 15

Aalok Trivedi
I have an array of buttons with a 'selected' and 'deselected' state. How do I go about checking if any button in the array is in the 'selected' state. So essentially I want something like: for button in buttonArray button.onClick -> this.stateCycle("selected", "default") if any button in buttonArray state.current == "selected" activateMainButton() else deactivateMainButton()
2
Marc Krenn
non-linear Utils.modulate() update Dec. 14th '15: * I'm now using 'switch-case' instead of 'if-else' * implemented a proper fallback to "linear" * fixed 'easeOutCubic' and 'easeInSine' * added easeBack, easeElastic (except easeInOutElastic) and easeBounce. There are now 29/30 different curves available. * Example file got a makeover update Dec. 15th '15: * fixed bug reported by Joshua (would love to have a verification!) * example-project got another big makeover - formatting by the great Jordan Robert Dobson (thanks!) - slider now animates onTouch - temporary sliderComponent bugfix new gifv: http://gph.is/1NYwWyw infos & code @ git: https://github.com/marckrenn/framer-nonlinearModulate (new repo!) live demo / example: https://tr.im/nlModulate ### #framercode #modulate #Utilsmodulate #curve #nonlinear #non-linear
10
Henry Lee
hello in below basic scroll protype, 1. top_tabbar 2. scroll content 3. bottom_btn, bottom_nav but placeBehind code doesnt works. how can i fix this..? thx for read contents.placeBehind(top_tabbar) contents.placeBehind(bottom_nav) contents.placeBehind(bottom_btn) http://recordit.co/oAueU574nP https://framer.cloud/hZRBF/
1
John Lee
Hey everyone, This often comes up, but had do I create the following toggle on/off labels? I'm trying to do this with Arrays, but if you have an Object method that works, then please let me know. STATE 1: Nothing is selected STATE 2: Sunday is selected and creates 'Sunday' in the top selected area STATE 3: 'Sunday' is removed, but still stays there as a ghost image (not essential, but nice to have this). Any pointers to other posts etc. would be awesome! Thanks!
2
Aalok Trivedi
please, please, pleaseeeee fix snippet placement. they should be placed wherever your cursor is, not at the very bottom of the code.
1
Vivian Tang
Anyone has issues updating educational license? Just got educational license for Pro License but didn't see any price change when I updated the coupon... contacted support team but haven't heard back from them for a couple days. Thanks!
1
Junu Joseph Yang
[Nostalgia] I wonder what would have happened if John Maeda did some Framer:
0
Markus Manuel Burkardt
Hi all, I am just prototyping a simple image carousel which reacts on hover. It works fine but the moment I switch to the full screen mode or upload it to the cloud it doesn't work anymore. Anyone a quick-fix idea what I might be doing wrong? Thanks in advance, Markus
1
Karol Piwowarczyk
Hi, I have simple question for you. Can I use CSS animation in Framer? I would like use text-focus-in animation in my project. Code: .my-object { -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; -moz-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; } Is it possible in Framer Studio? (look video please)
4
Brad Wrage
Hey all, I've got some horizontal cards i'm scrolling through in a page component that I have snapToPage upon start. I also have some opacity and scaling happening as I scroll with page.on "change:currentPage"—which is only happening after scrolling. I'd like the changes to happen upon the snaptopage upon start as well. I am also looking to trigger an event upon trying to scroll past the final page. Can anyone help me out here?
2
Sam Ayọ Olaogun
Just saw Marc Krenn's non-linear modulation module post and thought there was a better way, so I made my own (Backpack). The module uses a method called linear interpolation, which is a relatively simple and surprisingly stable solution. The easing library is separate from the implementation, so you can add your own easing functions. Here's a quick example: https://framer.cloud/UnFOy
2
Stephanie Kouzeli
Hello guys, I have built a prototype on Framer and I need to export the project so as to make a usability test via Google Hangouts. Is there any way to export the Framer project or how can I send the prototype to the client? Thanks!!!
2
Tyler Smith
Greetings! I've seen posts about Framer meetups in different cities, and was curious if there would be one in the Los Angeles area in the near future. Any info is greatly appreciated!
1
Chris Scicluna
Hi guys is there a limit on the number of users for the Framer Plus subscription?
5

March 16

Jonas Treub
Hi all! I made a submarine. • Built entirely with Framer layers • Parallax for visualising velocity • Particle emitter for visualising propelling force • Fixed light source • Can be controlled with custom inputs • Or by using arrow keys
7
Oleksii Drozdenko
Hey all, need your help, please. How do I animate numbers, let's say from 1105 to 2245, like here https://share.framerjs.com/238ws0qd1b41/ but without parenting to an svg animation. Need a simple solution. P.S. I researched the web and was surprised that there weren't any answers :(
3
Andy Jakubowski
Dear Framer folks, have any of you successfully used CSS classes in your project? The example provided for Utils.insertCSS() in the docs doesn’t seem to work. Any ideas? The docs: https://framer.com/docs/#utils.insertCSS An example: https://framer.cloud/rXMec/
4
Tarun Chakravorty
Framer request: Collapsible layer view like sketch has. Would be very helpful when debugging multiscreen prototypes.😇
3
Dave Anderson
I want to use the mouse wheel to zoom in/out of layer—but I can't seem to get the scroll direction from the MouseWheel event, to tell my layer whether it should be zooming in or out. Any ideas on how I should do this? Thanks for your help!
3
Sergey Voronov
whats the way to calculate distance for on.pan event, event.distance doesnt work anymore
3
Junhyuk Jang
I try to open some URL. (window.location = "http:// ... ") Is there a way to open url in new window? (target_blank)
9
Riccardo Buzzotta
Hi all, I was using this simple but handy Module I found online: https://github.com/rafaelmarin/ListComponent.framer/blob/master/ListComponent.coffee Unfortunately, as soon as I apply any Y value to the list items, the last item of the collection "hangs up". I tried to fiddle with this last item specifically, but I cannot change the Y value (I can for things like changing backgroundColor though). Any idea of why this happens?
4

March 17

Stephen Crowley
And we are live! Join us virtually for Framer Seattle 22
1
Krijn Rijshouwer
Hi Everyone, We just added a new page to the site highlighting Framer Components. It has some cool new prototypes showing off the component interactions and and explains you exactly what Components are. Make sure to go take a look! Or just watch the video! Special thanks to Giedrius Jaloveckas for maintaining an amazing list of modules and components. https://framer.com/features/components/ https://dribbble.com/shots/3367727-Framer-Components https://www.youtube.com/watch?v=BWyNOL89NxU&feature=youtu.be
1
Stan Tan
Hi all is there any framer community in Malaysia? :)
0
Mike Johnson
Hey everyone, it's been a while since the last FramerCasts. I had a new baby boy a few weeks ago and have been a bit distracted :) Yesterday I read Steve Ruiz's article on code quality and really liked the approach. I decided to take a look at how I might solve the problem and see where that takes me, and wanted to explain the thought process through several approaches. I ended up with a declarative state driven class version that is simple to reason about and easy to extend, and realized that my main goal when I am balancing code complexity vs. readability is the ease of understanding what the code is doing when I re-open the file 3 months later. So here is a free Framercast talking about code organization and clarity.
5
Steve Ruiz
I wrote up a guide to writing better code for your Framer projects by separating logic and manipulation. If you've mastered the basics but are struggling to manage your code, then this is the article for you.
7
David Klein
Hey Everyone, is it possible to stop an animation at a certain position?
1
Markus Manuel Burkardt
Hey, Sorry for the spam but I was hoping someone could help me with another question: When I upload my prototype from Framer (where it seems to work perfectly fine) to the cloud to preview my web prototype then it cuts of images in scroll component. It is a simple image carousel but every image is basically cut in half. It seems like a mask over a scroll component. Did anyone here have a similar problem and has by chance a quick fix solution? I imported and animated a sketch file. Thanks in advance, Markus
1
Oleg Frolov
Hi there! This is a stepper touch concept. Swipe to left — you decrease a value. Swipe to right — increase a value.
3
Samarth Bahuguna
Hi all. What's a good way to collect interaction data (like time and coordinates of tap events)? Here are a few possibilities I considered, not sure which of these are feasible: 1. Exporting a CSV, text or image file. I guess this would be hard/impossible in a prototype shared on an iPad or phone. 2. Shoot an email with the collected data (grasping at straws here). 3. Record the screen. This works of course but I would prefer to collect data as text instead of video. 4. Create invisible layers in the background containing touch points, timestamps and other information. Make them visible only after the main interaction is over, and take screenshots. I also want a free solution, so paid software is not an option. Thanks!
1
Joseph Keller
Does anyone have examples of lazy loading an image in Framer?
0
Robert Johansson
Hey there! I'm trying to use framer to prototype a dot that is draggable along a SVG path. For this I have used svgSnap.io and the svg path code is directly from Sketch. Also, I've been trying to find simliar projects like this in this group, e.g. https://www.facebook.com/groups/framerjs/permalink/677551062371968/ And example nr 3. However, most examples are for animating along a path and not dragging. I'm starting to think I'm approaching this the wrong way, so I would be glad to have any kind of feedback on how to tackle this. This is what I have so far: https://framer.cloud/WfJqz First problem seem to be that the coordinates doesn't seem to match exactly. And the second problem is that it only work the first time you drag, after that things get messed up. Also, it would be great if you could start dragging anywhere on the path. Any suggestions would be awesome! Thanks
3
Malcolm Ellis
Hi All, I'm working on a button concept for a mobile app where a user touches the button, it opens a menu of selectable options which the user can drag their finger over to select. (like pinterest's mobile app, when you longpress an image). When the user lifts their finger then the menu goes away. In the rough attached example you'll see the menu open and when you drag around on the menu area you'll see x and y coords are output. This works fine on desktop but not when I test it using the Framer mobile app. In the mobile app the initial TouchStart event seems to be lost and I'm wondering if I need to preserve that somehow or maybe I should approach this differently... your ideas are appreciated. thx!
0

March 18

Charlie Sneath
I'm trying to animate the position of an entire PageComponent, but it won't respect the animation time I'm setting. It seems to be behaving like a draggable that is resetting its position when outside of its bounding area. Is it possible to animate the position of a PageComponent, with control over animation speed?
1
John Lee
Any ideas on how to work with two arrays passing data from one to the other. For example, a passcode lock or calculator. I've made a crappy example, so please feel free to tear it apart and recommend a much simpler version. I know there's a great calc. Framer, but it was way tooo much code and overkill for most Framer peeps. Thanks, again, everyone!
2
Aalok Trivedi
Does anyone have a good example of how to create scrollable radial menus?
3
Jordan Robert Dobson
Here's some photos from our 22nd Framer Seattle meetup yesterday at Deloitte Digital Seattle. Thanks Arturo! Here's the live video as well: https://facebook.com/groups/framerjs.seattle/permalink/668320140041628/
3
Andrew Cunliffe
Hey folks, anybody know of a good example where one slider component is used to move another slider component?
2
Anton Kosarchyn
Dear community, need your help! I’m doing a prototype where I have a couple of text blocks and a slider that changes a text size. While the type size is changing the text block size is growing/shrinking downward (pretty obvious). What I'm trying to achieve is to reposition text block by Y axis on each size change so it’s middle line position remains unchanged and it’ll feel like the block is growing/shrinking both sides not only downward. The algorithm of this is pretty simple: 1. Each time before changing size I want to store text size in a variable as a previousHeight and then recalculate heights and store new value as a currentHeight previousHeight = currentHeight currentHeight = findHeight () 2. Finding delta of currentHeight and previousHeight and storing result as a deltaHeight. deltaHeight = currentHeight - previousHeight 3. Adding a half of the deltaHeight value to the current Y position of the text block. textBlock.y += deltaHeight/2 That’s it! The issue here is when I tried to print deltaHeight it outputted 0 every time I move a slider in both directions. What I’ve found to be a possible issue is that previousHeight storing not the last height value but evaluating a function that calculates values due to the updated text sizes. The question: what is a proper way to store values, outputted from a function when I want to store two instances of those values? Please look at the prototype for a better understanding of what I'm talking about (target piece of code is at the very bottom of the editor). Also, you’re welcome to suggest other ways of doing it ;) Thank you in advance!
9
Jon Sullivan
Hey everyone. I'm currently working on making a model of the solar system on Framer. I'm somewhat new to Framer and have a few questions: 1: Is there anyway I can have scalable SVG (and programatic) layers without loosing resolution? Right now I have the planets SVG code set to 10x their intended size and set the scale to .1, to allow users to pinch and zoom in on them without loosing quality. (Obviously this method isn't good performance wise). Surely there a better way? 2. Is there a Framer method to detect if a string contains a certain portion of text? I tried getting something like this to work but no luck: https://www.w3schools.com/jsref/jsref_IndexOf.asp Thank you!
1

March 19

Ivan Afandi
Free resource for simple toggle switch!
0
Michael Le
Is there a way to close/expand the tree view nodes of the different groups and layers of the Sketch drawing you import?
2

March 20

Samo Drole
Hi all, During my learning process, I've spent a couple of hours this weekend just to figure it out if I can make an animated dashed circle and it quickly escalated into a more robust adjustable prototype. Thanks, to the awesome community! Prototype - https://framer.cloud/UkCiL/
0
Joon Won Lee
I found a bug on framer I thought that content doesn't expended when I attach some layers which is smaller than ScrollComponent into it's content area. And It works very well, except when Im using Align.center on y property for childLayer of content Why does content size getting larger?
2
Celeste DeMartis
Is there any way to get the current layer of a flow component? I'd like to have a conditional to change the flow.header depending on which screen is displayed...open to other ways to do this.
5
Krijn Rijshouwer
Hi Frameristas! Another day another Components example. This one is a little health app that highlights the Scroll Component and shows you just how easy it is to use a component in your design. Take a look at the prototype and scroll away! Look at it on Dribbble — https://dribbble.com/shots/3375444-Health-Dashboard-Scroll-Component-Example Play with the design — https://framer.cloud/HdVLy/
0
Michał Jarosz
Hi, I am not coder, but I believe there's some trick to do number counter in Framer JS with or without this: https://inorganik.github.io/countUp.js/ It's popular, but sometimes I need present it to client.
6
Elena Stoyanova
Hi all — If you're in Amsterdam this Wednesday, join us for the meetup! let us know what you'd like to learn: https://www.facebook.com/groups/frameramsterdam/1940143716205847/?notif_t=like&notif_id=1490021414954051
0
Dominic Reiterer
Hey would need some help, I don't understand why print storyImages is only returning "[]" It is only returning something when I put the print inside the firebase.get function.
10
Matt Safian
Happy Monday! I've noticed that when viewing projects on device, layers that I've sized with Utils.textSize() + custom CSS don't always render correctly. It almost seems like the CSS hasn't fully loaded? Any insights you might have would be greatly appreciated!
2
Davo Galavotti
An .sketch (json) inspector (using Sketch v43+), this is super promising.
0
Jacek Stryk
Trying to build a prototype where a (1) single press on keyboard arrow left/right animates one way and (2) long press (arrow press and hold) animates a different way. So far the idea I tried is to sniff for keyboard events with Events.wrap(window).addEventListener 'keyup', (event) which only fires when the key is up - works great for single key presses and do Events.wrap(window).addEventListener 'keydown', (event) which fires continuously when the arrow is depressed The problem though is when I release the arrow after long press the "keyup" fires which is what I want to avoid. How do I remove the event listener for "keyup" while "keydown" is firing? I tried Events.wrap(window).removeEventListener 'keyup' but is does not work. Layer. off() does not work either cause they keyboard events are attached to "window" not a particular layer. Any ideas how to differentiate between single and long keyboard presses better?
1
Julia Carlson
Hey Framer Community! I'm trying to dynamically reset a property on an instance of a module and it seems to only get set on first run (my text displays "hey" when it should display "yo". Has anyone run into this?
3

March 21

Krijn Rijshouwer
Hi all! I made some fun simple prototypes for the Components page we shipped yesterday. I'll be sharing them here in the upcoming days. First up is this neat News app that highlights the Page Component and shows you how easy it is to customise the interaction with parallax, page indicators and much more. Open the prototype — https://framer.cloud/WjtXZ/ Look at it on Dribbble — https://dribbble.com/shots/3370126-News-App-Page-Component-Example
3
Joshua Kenzie
Hey everyone, Considering organising a Melbourne Framer meetup, I'm curious to know who would be interested in attending? My work is happy to host, they have an office in the CBD next to Flagstaff station.
2
Tess Gadd
Hey all, just posted the next Cheat Sheet in my series - Loops & arrays. Let me know what you think :) #FramerCode https://medium.com/the-school-of-do/framer-cheat-sheet-loops-arrays-f5c3aaa802e9
15
Steve Ruiz
I was playing around with a pegboard / drag-and-drop interface, then built it out into a little checkers game.
3
Ee Venn Soh
https://framer.com/features/flows/ is broken?
2
Jordan Robert Dobson
It looks like Framer prototypes will work on Windows Mobile phones now if you have Edge. I'm still testing this out and will report back more... but this is promising! I did some tests today and only had a failure on -webkit-filter effects (blur, contrast, brightness, hue, etc...) I think you can likely enable it with about:flags however. I need to dig in. The only issue I see now is on the touch screen desktops... the touch events don't seem to work. The mouse apparently works fine though.
9
Aaron James
Performance Question: I've heard using scale instead of resizing layers using x and y will result in more performant prototypes. Does anyone have any tips on how to use scale in a more predictable way? or rather, make scale originate from the top left, or top right, or origin point you choose?
2
Matt Typo
Hi Everybody, I am trying to create a multi screen prototype from a Sketch file simply triggering the visibility of the screens/layers with a button. The final screen has some animation that should only start when the layer is visible, any advice on how to do it?
2
Charlie Sneath
Any chance you guys will be making updates to the Framer iOS app to be able improve wifi connection on big networks? Can't connect when I'm at the office which is a bummer. Through USB would be awesome, too!
2
Blaine Billingsley
Are there any examples of *recording* video and saving it to a server out there to be shared? I'm not sure if Firebase would work well for storing blobs like video. Any examples/advice appreciated!
1
Aaron James
Another performance questions: Why is it that when I refresh my prototype and run through the animations for the first time there is an initial jitter, but when I run through them a second time, the prototype runs flawlessly? Is there anyway around the initial jittering?
3
Hidde van der Ploeg
What would be the easiest way to creating a collection view (e.g. Fill my screen with squared photos but maintaining the ability to select each individual one)
3
Sergey Voronov
is there a way to disable ability to swipe pages back in pagecomponent?
2
Ee Venn Soh
Trying the layer.siblingsWithName() API, however in my console, it spat a bunch of weirdness? It is the same for .childrenWithName(). Is that a bug?
3

March 22

David Louie
Is it possible to download prototypes from the framer mobile app to my laptop? Or is it a one way thing?
0
Ricardo Gallegos
Hello Everyone, Beginner here, I'm having trouble viewing the 2 artboards I imported from Sketch, I've tried using layer.visible = true but I can only view the default layer. Do I need to use a component? screen shots attached.
2
李俊
Hey Everyone, *Sorry for my mistake. Bodymovin.js is not Lottie.* I created a Framer module combining Framer and Lottie of Airbnb, which helps you play animations exported by AE and control its process. You can try it and give me some advices. Thanks. https://github.com/leadream/lottie-framer https://framer.cloud/ytocz/
2
John Lee
Does anyone have a good passcode/locked screen Framer which: 1. shows the pressed number for a split second (MUST HAVE) 2. hides the pressed key transforming into a round dot 3. Validates against an array = [2,5,4,3,6,7], showing 'invalid' or 'correct' and then transitioning to the homescreen Old school, but would be awesome for the community to learn from this type of project!
0
David Louie
Having trouble with input fields pushing the Canvas(right word?) of the prototype up and showing white space. Multiple people have asked about this on this board but no answers Naema Baskanderi. In my exploration - it seems to be a native Safari behavior where it wants to scroll the input field above the keyboard and does it by moving the entire frame up. I included a video. The first run through shows the white space issue. The second run through shows my ghetto hack where initially I have the input sitting at y:0 / opacity: 0. Then on Touch End after the keyboard is up I move the textfield into it's proper place. Has anyone discovered a better solution???? Thanks.
7
Ivo Ruijters
Performance iOS app. My prototype runs smooth on desktop. On my iPad it sometimes runs almost instantly, but most of the time it takes a long time to load. I don't mind waiting, but the problem is: all of my loading animations are already done when the Framer app is done loading (same problem using mirror). How can I improve loading time?
2
Krijn Rijshouwer
Hey y'all! Here is the final prototype I made for the Components page. It’s an OS Lock Screen that highlights the most commonly used Components and shows how easy it is to add some details to your interactions. Look at it on Dribbble — https://dribbble.com/shots/3378438-OS-Lock-Screen-Components-Example Look at the Code — https://framer.cloud/UbDSJ/
4
Jurre Houtkamp
Hey Framerers! Recently Framer Introduced the Range Slider Component which lets you define and edit a numeric range with two knobs. I’ve made a little prototype showing you how you can make your prototype act upon those range values and filter a list of content! Have a look on dribbble — https://dribbble.com/shots/3378432-Range-Slider-Component-Movie-Archive Or check out the full prototype in Framer — https://framer.cloud/DZReW/
6
Ahmet Bekteş
Hello, I can't reach https://framer.com/buy page...
3
Gideon Carstens
Hi all, how do can I make the canvas content update itself when using Flexbox? The code is a copy of Mike Johnson's video -https://www.framercasts.com/videos/13 https://framer.cloud/WrMOH
3
Emin İnanç Ünlü
Hello everyone, I have published a Medium article of my Framer feature wishlish concept design. I would love to hear about your thoughts!
4
Elena Stoyanova
In case you missed it: catch up on the Amsterdam community prototypes and sneak peek of our next feature release from the meetup at Framer HQ — https://www.facebook.com/framerjs/videos/754386268051219/
1
Dave OB
Hopefully this makes sense to somebody but Im using a private/internal API and using Utils.domLoadJSON in Framer to load it up which works but .. the API has a 'request body' that takes something like this : {"details": ["name", "age", "image"]} which then loads up the details. Im doing all this within the browser via a custom interface but how would I go about appending a POST request in Coffeescript?
1
Sergey Voronov
boys and girls:) what is your way to do remote usertesting with framer? want to record userfeedback somehow while they are interacting with framer prototype on the phones. Maybe some luck with lookback.io ?
0

March 23

Jordan Robert Dobson
Jake, Josh and I studied gravity and orbiting today while working through our HTML5 Animation with Javascript book on Particle Attraction and Gravity. Demo: http://jrdn.io/jfuL I wanted to share the results as this is a pretty fun task!
3
Alexander Olssen
Hello everyone. Can anybody explain me why of I'm creating a layer in Framer and making a flip transition everything works fine, but if I'm importing layer from Sketch this layer cut off on the middle while rotating?
1
Karol Piwowarczyk
Hi, I know that a lot of people interesting chatbots on this facebook channel. I looking for simple, web generator for it like: https://chatfuel.com But whole generators offer this functionality only for messenger and other mobile apps. I would like to add simple chatbot for my website like https://azumbrunnen.me Do you know solution, generator for it? Thanks a lot.
0
Guna Seelan
Having a problem with Preview. Prototype looks blur https://framer.cloud/wmnBF
2
JinJu Jang
When you create a superLayer and add an image to go inside and fit, is there any way to use "aspect fit" or "scale to fill"?
8
Ray Alexander
hey all - quick question about pathing to images. I upload my prototypes to a restricted company server. on that server I have a parent 'html' folder. I have a prototype in 'html/checkout/test.framer/' I had an image in 'html/resource/test/test.gif' in the prototype I made a layer with an image, with a path of 'html/resource/test/test.gif' If I view the prototype on the server, the gif shows up correctly. If I view the prototype in framer, I cannot see the gif. My folder structure is such that the hierarchy is duplicated locally. Any thoughts? Will the framer prototype file not 'look outside' itself to find images and such?
2
Malcolm Ellis
Has anyone successfully integrated Raphael JS?
0
Dave Anderson
Posted something similar to this a few days ago, but didn't see any responses, so I thought I'd try again: Is it possible to have overlapping layers, both with mouse event listeners, not intercept the mouse events of the other? I have a layer called "flyout" in the example below; I want it to disappear on mouseOut. But if I uncomment the line in the below screenshot, the mouseOver events in the subButtons layers trigger a mouseOut event in the parent flyout later. How can I keep this from happening? Thanks for all your help! https://framer.cloud/Plzyj/
1
Johannes Eckert
Has anyone been able to figure out how to move two layers with two fingers individually at the same time? I always get pinch events interfering with the draggable, even after turning pinchable.enabled to off Pinging Jordan, Stephen, Chris from the Seattle Crew!
8

March 24

Jon Madison
"swappable layers" example. To use just grab one of the color bars and move them up and down. Intentionally made them various sizes. Maybe i'm doing overkill, and there's a more idiomatic way to implement this? it's currently missing a way to easily snap a row back into place if you overdrag it. are there Framer APIs that give me this behaviour for free? :) hoping i'm having a brainf*rt here :)
2
Jacopo Moretto
Hi all, why my framer prototypes are blurred when shared and viewed on chrome? Thank you :)
8
Sergey Voronov
after short celebration of textlayer shipment, group of protestors blocked Singel 364 with new demands :)
9
Blaine Billingsley
I hope y'all get a kick out this one. I always loved the Google Trending Searches screens, so I tried to recreate it. Missing a few of the finer points, but a fun one!
2
Craig Aucutt
Hey Guys! so been having issues lately at work trying to get both phone and mac using same IP address and as a quick workaround been trying to share to my device the shared prototype link but also noticed there when I click "open" in framer on iOS safari, it brings me to the preview app but not the prototype, is this a known issue or something new? feel it's a result of change in url from share.framerjs.com to framer.cloud but not exactly sure
1
Amy Friedman
I'm creating an mobile prototype utilizing the scrollComponent with a Video player playing in line and the scroll performance is very laggy. Does anyone have any advice about this?
1
Clinton Jordaan
Hi guys I hope someone can help me out with this? I am using FlowComponent to navigate between screens. I am having problems swopping out the header and footer bars between screens.here is a link to my example file: https://framer.cloud/GRpRR/ on flow.showNext the header bar swops out but on flow.showPrevious it does not? I also only want the footer bar to appear on page "a" I have made its visibility false on navigating away from page "a" but this just hides the footer it does not remove it. it still reserves a space for it at the bottom of the screen on all other pages Any recommendations on what is the best way to do multi screen flows? am I better off creating a flow using the methods outlined here? https://medium.com/@akashsoti/how-to-make-a-multi-screen-prototype-in-framer-js-3b769e002019#.ibg00zw2q
1
Sean Dekkers
Hi Frameristas, Would anyone have suggestions on getting a version for Yosemite (10.10.5). Some of my daily tools like Maya, Vray, etc aren't ready to make the leap to Sierra just yet. Thank you in advance!
3
Dominic Reiterer
Hey does someone know why this isn't changing the picture of the Layer? It gets the right URL but isn't showing the picture.
6
Giovanni Caruso
Anyone having trouble with scroll.direction? The usual onScroll -> print [layerName].direction keeps printing null.
2
Nazar Moravskyi
Hey guys I'm trying to figure out how to move a block for a 10px for a certain amount if times. Attached one just move it for 150px
2
Julia Carlson
I'm using framer boilerplate (https://github.com/jchavarri/framer-boilerplate) and it's great for Framer on PC! The only problem is that when I'm viewing prototypes with pinch or drag, the entire browser page pinches or drags with it. Does anyone know how to disable this?
2
John Marstall
New module for handling grid focus behavior when simulating a media device like Apple TV. This stuff is very tedious to do on an ad hoc basis; let the computer do the geometry for you.
0
Bhaskar Ravi
Interesting problem here. Could be a bug. I have a page component, within a scroll component, within another page component. Pretty common these days - think Snapchat / Insta. Now the problem lies within the behavior of the base page component with the highest level page component. Right now if you swipe left / right, both page components will trigger. Obviously that's no good. It seems like it should be an easy solution. I did not want to use propagateEvents, because the lowest level page component is contained within a scroll component, and realistically you want the user to be able to scroll no matter where your finger is on the screen. Instead I do this: listingStoryPicPager.onTouchStart (event, layer) -> listingPager.scrollHorizontal = false listingStoryPicPager.onTouchEnd (event, layer) -> listingPager.scrollHorizontal = true When someone touches down on the base page component, I turn off the scroll on the highest level page component. When they pull their finger off the screen, I immediately turn scrolling back on. Here's the weird part. It works perfectly within the framer studio, but on mobile the Touch End event doesn't even register. So the minute I page the base pager on mobile, the high level pager is completely deactivated. It doesn't even recognize that the touch event has ended. I'm stumped! Any help would be appreciated. I'm just using the Framer app on mobile - nothing special.
1
Johann Kasuch
Hey Frameristas, What's the most efficient way to check if an draggable element is on top of another specific element? Any ideas?
5
John Marstall
Thanks in part to help from this community, we've got a slick new module for you to play with. Instant interactive Apple TV remote! https://github.com/bpxl-labs/RemoteLayer
1

March 25

Junha Kang
i didn't get the chance to use Framer with work for a while, so i did a little practice copying Yahoo NewsDigest app (may not fit ur screen if you r on ur phone but it's not iphone7)
2
Shane Brown
I'm having an issue where designs for an iPhone 5 aren't scaling for a 6 in Framer iOS, does anyone know what might be causing this and what the fix is? It's working in the Framer IDE, but on an iPhone 6 it is scaled down.
2
Marciano Planqué
Hi guys and girls :) I attended the Framer meetup last wednesday and now I thought I'd actually want to go ahead and create stuff. I hope you don't mind my noobness, but could someone tell me how I can make this 'joystick' multi-touch? I can only 'control' one joystick at a time, it seems. While I, naturally, want to acces both at the same time :) (The joystick is supposed to go back to it's original state once you let it go, I'm working on that now!)
1

March 26

Abdulwahab Imogie Mubarak
Hello everybody. I'm pretty new to Framer, and i've been trying to use Utils.modul on a prototype. I want a button to scale up after a scroll component reaches a particular y position but the scaling is not accurate. I've tried to use the example in the Framer Documentation but I think one of my variables may be in the wrong place. Could someone please tell me what I'm doing wrong. Here's a link to the prototype
2
Tarun Chakravorty
Hey Framer friends, I'm running into an issue with sketch import where Framer is importing everything as a jpg instead of a png. Which means I cant see my nice rounded corners and transparent shadows :( This was working fine yesterday night. ¯\_(ツ)_/¯ Has anyone run into this issue?
1
Bhaskar Ravi
Does direction lock cause issues on mobile? I encounter massive lag / unresponsiveness while scrolling (iPhone 7) with any projects using direction lock.
1

March 27

Ding Xu
Hi framers, I was trying to run a websocket client on framer, talking to a ws server written in Qt. It could successfully connect to server if I run framer project in laptop browser; while in Framer studio or mobile devices, both framer iOS app and browsers (chrome, safari), it keeps saying connection failed with a undefined error object. I need to run this project on a mobile device, any advice what is the possible issue and how to solve that? Thanks a million. Websocket client implementation in framer coffeescript: if window.WebSocket websocket = new WebSocket('ws://10.0.0.252:1234') websocket.onopen = (evt) -> print "connect to local websocket server" websocket.onclose = (evt) -> print "websocket connection closed" websocket.onerror = (evt) -> print "connection error: " + evt.data websocket.onmessage = (evt) -> print evt.data Print out from laptop browser: » "connect to local websocket server" » "Server: Connected to server ..." Print out from framer studio and mobile devices: » "connection error: undefined" » "websocket connection closed"
1
Văn Công Bằng
Hey guys, i intend to make a countdown timer, any suggestion ? I'm new to coding, so i need some suggestion. Thanks
5
Tim Kjær Lange
I’m using this Firebase module to simulate the connection between to devices: https://github.com/marckrenn/framer-Firebase I have a spinner that progresses slowly until there’s a connection. I want to complete the animation rapidly when there’s a connection in Firebase. When I use the code from the screenshot the firebase call gets executed *after* the initial animation. How would you listen on the event and complete the animation even if the initial animation is still running?
3
Steve Ruiz
I've been working on making a scroll bar that I can easily add to scroll components. I haven't polished it enough to deploy as a module yet, but you can copy the class into your code and use it very easily. Give it a try and let me know if you have any issues.
0

March 28

Jesper Garde
I've started playing with framer again after a little break and created this search micro-interaction using David Lee's 'New to Framer? Just 3 Things to Get You Started' and Kenny Chen's 'Prototyping the iMessage Chat View' tutorials. I can't figure out how to make the cursor disappear after I open and close the search box ('magnifying glass' followed by 'X'). Can anyone point me in the right direction?
1
Elselyn Tan
Hey Frameristas! We're always inspired by the work you share in this group, and the way you're integrating Framer in your workflow. To better cater to the custom needs of teams at startups, agencies and large companies, we're now offering an Enterprise license. Today we released our Framer Enterprise page and I’m really eager to chat with the community about how your teams are using Framer right now, or how we can support you in getting your whole team on board and integrating it in your design process. Leave a comment if you wanna chat! Check out the page — https://framer.com/enterprise/ On Dribbble — https://dribbble.com/shots/3394554-Framer-Enterprise
0
Clinton Jordaan
Being able to copy a folded segment of code and paste it without it unfolding itself would be great :)
0
Julia Carlson
Howdy! In my project I have a photo that is pinchable and clipped by its parent layer. When I scale the photo up, I want to be able to pan to all edges of it but when I set draggableconstraints, can only drag right and down. Does anyone know how to allow it to be dragged in all directions to the edge of the scaled photo?
7
Marc Krenn
> Article: https://blog.framer.com/queryinterface-a-query-based-api-for-framer-prototypes-cb99f595d984 > Github repo: https://github.com/marckrenn/framer-QueryInterface > Download: https://github.com/marckrenn/framer-QueryInterface/archive/master.zip
5
Andrew Cunliffe
Hey Frameristas, I'm working with multiple sliderComponents, and have only had one problem, getting a bubble to align to the x value of the knob, like in the below gif example. (gif doesn't seem to be working, I am referring to this https://framer.com/assets/static/images/getstarted/[email protected]) I tried: slider.knob.on Events.DragStart, () -> bubble.scale = 1 bubble.x = slider.knob.x Scale works fine, but setting the x value does not. Anybody have a working example?
2
Benjamin Den Boer
Hi Frameristas, We’re super excited to introduce you to Framer Type! From today, you can insert, edit and animate words using the new TextLayer. Style with familiar properties. Work with Google Web Fonts, responsive type and set-up adaptive layouts with ease. Read the blog post: https://medium.com/@framerteam/design-with-type-like-never-before-4215e8858684 See Docs: https://framer.com/docs/#text.text
39

March 29

Lukas Guschlbauer
Hey Frameristas! I'm currently trying to completely recreate Facebook Messenger as a practice. Especially focused on the capture-part where you can draw and write stuff on the photo. Now I've started out and right away ran into problems. The capture thingy is a Page-Component with 3 pages. 1st page: "Camera Roll" 2nd page: "Capture" (initial page) 3rd page: "Effects Page" The "Messenger-Chat" itself lies above and can be moved away by dragging it down, which reveals the capture-part. Now heres the problem: The chat behaves like a Page-Component, since you can move it away by dragging it down and bring it by dragging up. I've tried to add an "empty page" above the chat to make this work, but of course the underlying page-component of the capture-feature doesn't work since the chat lies above it. I've tried disabling the chat after the page-change, but then of course I can't bring it back up... How can I make this work?
2
Emmanuel Henri
What's your experience for those who have used handoff with iOS thus far? The animations translate well to iOS?
0
Joe Day
Question: I'm working on a copy/drag/drop scenario where on MouseDown, I copy a layer, instantiate a new object that is a copy of the original layer with it's own Move and MouseUp events. The new layer is set to draggable.enabled. (basically this is mimicking what happens in a browser once you select some text and drag it around). The issue I'm having is that the new layer is instantiated by the other layer's MouseDown event, and though the mouse is still down and draggable.enabled = true, there isn't yet a drag event on the new layer. This means I have to MouseUp and then DragStart to begin to drag the new layer around. How do I avoid having to do the extra click to drag the new layer around?
3
Clinton Jordaan
Hi guys. Do you have any plans to release a navigation/view controller component? I know a few people have written modules to do this but I think it would be awesome if framer supported it out the box.
2
Jacek Stryk
Do you guys have any advice on what's the best practice to block animations from being interrupted by user actions? I often do prototypes controlled by keyboard. User can press the keyboard keys anytime during an animation playback and if I do not block it animations either stop midway, coordinates are all messed up because the previous animation did play till the end etc. As a stop gap measure I check if a layer.isAnimating before firing another animation on the same layer but if your prototype has dozens of layers checking if all those individual layers are animating or not get unwieldy quickly. Here's s sample code: greyBackground = new BackgroundLayer backgroundColor: "rgba(214,214,214,1)" square = new Layer x: 1140 width: 600 height: 569 y: 616 window.onkeydown = (eventKeydown) -> #WATCH KEYDOWN switch eventKeydown.keyCode when 39 #right arrow print "right arrow" if not square.isAnimating square.animate maxX: greyBackground.maxX when 37 #left arrow print "left arrow" if not square.isAnimating square.animate minX: greyBackground.minX when 38 #up arrow print "up arrow" if not square.isAnimating square.animate minY: greyBackground.minY when 40 #down arrow print "down arrow" if not square.isAnimating square.animate maxY: greyBackground.maxY
2
Henry Lee
Good morning. Ask questions about framer. Over the past few months, I've been exposed to a number of prototyping tools and I have been working on paying for framer. However, when I first came to the code, I realized that the designer's thinking was implemented in code by a lot of running curves; As an alternative, there is a growing demand for using WYSIWYG prototyping tools such as principle, protopie, and kite. I am still studying framer for the following reasons. 1. Desktop apps, homepage and products are quite robust (principle, protopie, much better than kite ..) 2. Expecting that it will be possible to utilize it in the future by studying with the active participation of framer production team & product evolution 3. Smooth collaboration with developers by enabling designers to write their own code to understand development and how it works By the way, there is the following question on the other hand. For users, framer adds various components (flow, page, scroll). The code for these components is in the form of an abbreviation (?) Rather than the actual code to be executed. However, the developer would be hard pressed to find out what the actual code would look like in this short code. (Handoff passes the animation curve value to the developer, but component is not) So in the end, if the designer's framer task is something that the developer needs to re-implement ... Is not the principle, protopie, kite, etc. easier and faster to choose? I think I am. In short, The results of the designer's framer work are not just forms that can be seen in motion, Is it possible for a developer to take it and reuse it easily? If not, why should I use framer?
1
Woo Sanghun
Hello, all. It's my first prototype with framer. I hope it's helpful for you. https://framer.cloud/uRRgz/ Even I can write the code with Javascript, I must practice to use frame and coffeescript. I made the prototype just to study class and scope of coffeescript. Yea, I know. There are some bugs still, lots of hard-coding values and need to refactoring :-( I spent 3hr to make it. Frankly speaking, I don't like Framer before because I'm not sure it's effective tool for everyone especially designer who don't know programming. I, however, change my mind. It's great for me. I really love it!!!!!
0
Giles Perry
Hey Frameristas! How do you export more than one class from a module? # This require statement doesn’t work: {MyClasses} = require "myModule" thingA = new ClassOne thingB = new ClassTwo ___ # myModule code: class exports.ClassOne # class one definition class exports.ClassTwo # class two definition
8
William Jansson
Hi everyone! I noticed that all my prototypes (including shared ones from the community) renders a 1px dark border on top, left and bottom; this is normally not visible since all the mobile devices already has a dark border surrounding the design canvas, though this problem kinda popped out while I was trying to use a custom device with no borders surrounding the canvas. Does anyone know some way to get rid of this border?
1
Sergey Voronov
next London meetup - 27 of april at Farfetch, London
0
David Fumberger
Hey all. Here at Zova we've just released a big new version of our Apple TV app. The last version snagged an Apple design award, so wanted to make sure this one was even better. Framer played a big part in the final design direction, so thought be worthwhile to share a little of how we've used it. Here's a Framer that we used to build our home screen experience , and transitions to the inner categories. https://framer.cloud/tpCbQ/ To navigate use the arrow keys to focus between cells, enter button to go into a section and the escape or del button to go back.
3
Dexter Wang
I'm getting an error "the network connection was lost" when downloading Framer projects. Anyone else?
1
Brad Wrage
Hi everyone, Is it possible to have multiple scroll components? I'd like the first page to scroll. From there you can click to a new layer(page) and be able to scroll content in there as well. Any ideas?
9
Jacek Stryk
Koen Bok is it just me or is Framer Cloud having some problems? Since the weekend I've been getting "Cannot upload to cloud" or "Project not found" when I'm trying to "Open in Framer" on a prototype
3
Aaron James
Crazy talk: Is there a way to have 2 devices in the preview? I want to demo sending a message from one device and receiving the message on the 2nd device in the preview. Anyone seen this done before or can you point me to an example?
5
Jacek Stryk
Calling all folks with experience in video masking. I'm trying to have a transparent banner sliding on top of a video from top and then disappear sliding further down, creating an illusion It's not a big deal with images where I can cut one image into 2 parts and position them so the banner slides over one slice and slides under the second slice. I was trying to accomplish the same with masking one videoLayer and overlaying with a background videoLayer but the playback gets out of sync, positioning if off (see the line 1/3 from the top of the screen etc). Something makes me think there is better ways of doing this. Any suggestions? Thanks! Press keyboard arrow down in the prototype to see the banner sliding down and disappearing below the masked video. https://framer.cloud/HhNYu/
0
Willie Franklin
Hi all. My team is working on designing prototypes to be tested in areas of the world where internet connectivity is low to non-existent. Our assumption is that during our travel we will want to adjust and tweak our designs. From my understanding its only possible to transfer a prototype from our laptops to our phones (android and iOS) with an internet connection. Is there a way to transfer through USB alone? If not, have people found interesting work arounds for getting prototypes from computer to device when networks are unreliable, blocked, or non-existent? Thanks for any tips or advice!
6

March 30

Julius Koroll
Hey guys, I want to implement a MP4-file in the background and I need to mute and auto-repeat it. Sadly I can't find any info about it in the documentation. Maybe someone has help?
3
Hass Murphy
I've used an array with the newTextLayer as toolbar. I would like help with centering the labels. You can't use Align.center because that is aligning the object within its container. The ideal solution would be justification of the text (left, center, right) but that isn't even covered in the W3.css spec. Padding works for one label and then degrades depending on the number of characters in the other labels. Note that the text label is offset in the longest word. Does anyone have a suggestion for this centering problem?
4
Clinton Jordaan
Does anyone have any idea if it is possible to use multiple scroll components in one prototype using: scroll = ScrollComponent.wrap(sketch.content) And if so how do you define multiple scrollComponets? i.e. give them unique names that can be referenced
2
C. Vincent Plummer
Denver, CO. Let's get after it. I want to start a Framer meetup or study group or something. I live in Sketch and work as a UX Designer, but admittedly, I'm a framer n00b. I don't have to be the leader on this but will if no-one else wants to wear the hat. Experts, please step forward.
2
Dmitry Sholkov
Hey guys. Just got my hands on to try flow component. It's working really great, however I wonder if you could add one more transition: 'Fade between screens'? Cheers.
3
Noam Elbaz
Anybody experiment with Framer and Bodymovin? Would love to hear your experience.
1
Raymond Uphoff
I'm prototyping a Webform which need inpage appending of questions. So when user answers question by selecting radioA framer will show question2. While selecting radio-B will show question3. How can I add a layer to a parent so it will position itself underneath last child of the parent programmatically?
2
Min Tran
Hi guys! //edit: I switched to page component and it works perfectly. I've been learning Framer for a few days and working on a prototype https://framer.cloud/PqIIU I have a few questions about draggable layer: 1. In the prototype I have three layers aligned horizontally and I enabled the draggable for their parent layer. How can I make the next/previous layer snap nicely to the screen when I swipe left/right? 2. I can't drag/swipe left to back to the first layer I'm not even sure that draggable is the best solution for this use case. Any insights? Thanks so much!
0
Jakub Jaszkin
I try to make underlined text when hovered. Text is imported from Sketch using convertToTextLayer() from TextLayer module by https://twitter.com/andreaswah. It seems that this module does not support textDecoration and "underline", while new Framer native TextLayer can do this. Is there a possibility to somehow make it happen? :) Thanks!
1
John Marstall
https://medium.com/bpxl-craft/how-to-design-responsive-layouts-in-framer-cd484e0bac9d
1
Raveesh Bhalla
My latest post tackles the value add of design through prototyping and what you should be looking for during usability tests
0
Ryan Stephen
When opening a framer project from the ibook "The Framer Book", it used ask me if I wanted to "open this in Framer" but now it doesn't. The links keep telling me I need Framer (I have it). Is this a setting in ibooks or chrome? Example:
4
Andrew Cunliffe
Hey Frameristas! I'm trying to write a function when an object in an array is clicked that object.visible = false and the next object in the array object.visible = true. So far I am only able to get the last object in the array to be visible. any help would be great. Thanks! (pic of my code attached)
1
Andrew Cunliffe
Frameristas, I'm back! Now I want to hide the object I just showed onClick, and show the object that was hidden on the last click. My code below
0
Jason Nelson
Question. When I edit and compile the app.coffee file it is to app.js, correct? If that's the case, what file(s) result and are referenced from the modules for a project. After some digging I see a file called "framer.modules.js". Are all of the modules for a project compiled into this single JS file? If that's the case, does anyone have an easy way to work with modules on Windows? I do some of my prototyping on Framer Studio, but need to do some on Windows. Do I need to compile to a single JS file and then copy it over to that "framer.modules.js" file? I'm using Atom with coffee-compile. TIA!
2
Jordan Robert Dobson
FontFace Class Module Demo: http://jrdn.io/dRVT Here's a bit of code I've been using myself for a few months now. It allows you to load in custom typefaces into your prototypes with very little effort. There is some basic error checking and testing to validate the typeface was loaded. Here's how simple it is to add to your prototypes: gotham = new FontFace  name: "Gotham"  file: "Gotham.ttf" Check out the demo above or you can grab just the module if you'd like. Module: http://jrdn.io/dRXH Please let me know how it works for you, if you have any suggestions or if you find any errors / issues putting it to use. Enjoy!    :D
9

March 31

Jeongmin Kim
Hi Framers! I’m happy to introduce you a brand new Framer handbook called <Mobile app prototyping : Interactive design with Framer>. I wrote this book with my co-worker Oh Kyungsik, this is a kind of case study about How we applied Framer in our working process, specially for Naver app. Also this is a handbook about code basic for designers. We published the book just in Korea, so It’s really sorry that we can’t share our story with many of you. But you can download some examples in the book from our Github. Thank you for supporting us, Benjamin Den Boer, Krijn Rijshouwer, Sara Surh Book link (Korean) http://www.yes24.com/24/goods/37287466?scode=032&OzSrank=1 Github https://github.com/wikibook/framer
8
Tess Gadd
Hey Framersters! Released my fourth Cheat Sheet this morning on Pages, and would love your thoughts and feedback. Also, let me know if the link breaks again :)
3
Robin Ait El Alim
Hey ! Is it possible to play videos simultaneously on the Framer iOS App ? It's working on my desktop prototype but not when I view it in my app. Thanks
1
Willie Franklin
Looking for a simple way to 'right align' text so that it adjusts anchored from the right side of a device. Specifically, im working with languages that read right to left. I tired some of the basic align commands but it still seems to readjust from the center (i.e., when I put in longer strings). This could be a simple task, and I'm new, so I apologize if this seems trivial. Thanks!
1
Richard Burton
Does anyone else here use Dash? I am thinking about making a Docset for the Framer Docs and wanted to check if anyone else had made one. https://kapeli.com/docsets
1
Sergey Voronov
i am lit bit lost on touch/scroll behaviours, i am using touchpad to test prototypes on mac (not fource touch) and when i try iphone - it behaves differently. same way as on iphone prototype behaves if i will use mouse (scrolling/swiping). any advice?
0

Monthly archives

2017

2016

2015

2014

2013