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

What is Framer? Join the Community
Return to index

March 2016

March 01

Chris Clark
Weird/fun Framer Studio suggestion: slo-mo mode. i.e. a global animation speed multiplier. So many times I've been demoing a complex animation to engineering and they just can't see what's really happening, because the whole thing is over in 0.3 seconds. So I create my own speedMultiplier variable and multiply all my animation times by it, so I can slow it down 10x on demand. If it was just a slider in Framer Studio that applied to truly *all* animations (including scroll bounce, scroll inertia page snap, etc) it'd save me a lot of manual hackery during demos. No idea if that's broadly appealing or if I'm an edge case. But thought I'd put it out there :)
2
Dmitry Sholkov
Importing layers from Sketch as JPG doesn't work anymore. :/ It actually adds .jpg to layer name. Also maybe someone has any tips for doing long-scroll content for retina web? Performance of scroll component is a bit laggy in both Safari and Chrome.
1

March 02

Alexander Bennett
Framer Wizards! I'm working on a prototype where a layer appears under your finger and follows you as you drag it around. I've been using the new gesture events like event.point to accomplish this, but am running into something strange. It works perfectly on my phone using frameless, but on the desktop in the Framer App, its not aligning correctly under my finger. Any way to write once that deals with both mouse and touch discrepancies?
6
Evan Knight
My html emoji isn't reading "60pt" when viewing in Frameless, it's showing at a small default size. However in Framer the emoji shows at the correct size. When I try html "hello" at 60pt it shows correctly in both Frameless and Framer, any idea on how to get the html emoji to show at the correct size in Frameless? http://share.framerjs.com/hv1mealj7aqh/
1
Rolf Anders Storset
Hi, Framer noobie here :) Is it possible to load external web pages into a framer prototype layer – to simulate opening urls in a native app?
4
Vince Li
Hey Guys, PageComponent doesn't automatically snap layers anymore. Did anything change in the latest Framer update?
2
Adam Noffsinger
I noticed there's no event to detect animationEnd when animating between pages in a page component. Has anyone found a solution to detect when a page has finished animating into the viewport based on a page.snapToNextPage() function? Page.horizontalPageIndex() seems to update before the animation completes.
3
Mark Mattione
Hey all, I'm hitting an issue with the event.point and event.touchPoint I get from the Gesture Events when previewing a device prototype in a browser window. Looks like the coordinates returned are relative to the entire browser window instead of the screen: http://share.framerjs.com/dj6l3wk1r7t7/ Is there a way to convert the event data to screen coordinates? Thanks, - Mark
5
Dave Crow
I've run into a wall with this prototype. Click the hamburger in the upper right and it behaves correctly. But when you click the dashboard cards to go back, they don't return their default state. I've tried animating the properties instead of doing a state change, as well as applying states to the sketch layers instead of the scroll component object and vice versa. I'd greatly appreciate some fresh eyes on this...thanks!
3

March 03

Asher Isaac Simonds
Hey Framer folks, I'm working on a simple slide-up animation. I've imported my layers from Sketch and have a bottom sheet that extends past the bottom of the screen. Framer only seems to honor the part of the sheet that's present in the artboard at load, however, so when the sheet animates up it only partially covers the content behind it. I supplemented it with a simple generated layer to fill the space but I was wondering if there was a way to remove this clipping. Thanks!
4
Chris Camargo
I'm not terribly familiar with SVG in Framer yet. Does anyone know if it's possible to place an SVG path on a layer, and scale the layer without increasing the stroke width of the path?
8
Ban Nguyen
After updating to the latest version, there are so many weird things happening. Using the "no device" looks ok Using the ipad or iphone devices are not ok Something is off????????? Please help
6
Ban Nguyen
is there away to disable the swipe feature in the PageComponent? http://framerjs.com/examples/preview/#medium-app.framer
1
Alexander Bennett
I'm trying to create a prototype where you can zoom into a photo with the new pinch gesture, but then when you drag past the edge of the photo it animates that edge to the edge of the screen. Similar to how iOS photos does it when you are looking at the last image in a set which I documented in the video attached.
5

March 04

Hugo des Gayets
😎😎😎
3
Jérémy Jones
Hey guys, I would like to know how can I apply a parent to a layer from a For? I got an error, can't find variable:bgbloc2 Sorry for the screenshot ;(
4
Benjamin Den Boer
Heya Framerers! Here's a new example. It's a little grid of photos, which you can scroll, click and pinch to zoom. Made to highlight some of our latest features: scroll and click separation, pinching, event shortcuts and more. Hope it helps a bit. Let me know what you think — or if there's other recent features you'd like to see some more examples of. :-) On Dribbble — https://dribbble.com/shots/2565416-Photo-View See Prototype — http://share.framerjs.com/yknqeeqtd3we/
1
Jérémy Jones
I just bought a new license, 15min-ago and I'm still waiting the email-confirmation with the license number, is that normal? Jonas Treub
1
Elan J Levy
hey all! does anyone possible have code that can generate an address from longitude/latitude coordinates?
1

March 05

Koen Bok
IDEO is using Framer to prototype VR.
3
Stephen Crowley
Frameristos of the Pacific Northwest. Please join us March 15th for our 10th and very special meetup with Koen and Jorn. https://www.facebook.com/events/939701562792807/
2
Kars Alfrink
Hi guys, first post here. I have been playing around with Framer for a couple of days and am really enjoying it so far. Have hit a small snag though and am hoping you guys can help me out. I'm adapting the 'swipe and scroll' example for my own purposes. Somehow the DirectionLockDidStart event on my scroll component's content.draggable is not firing. Any ideas why this is the case? Here's the project:
7
Andy Jakubowski
UPDATE: We fixed this, check out the solutions in the comments! :) I want to achieve a Cover Flow effect with PageComponent. PageComponent should be the size of the screen, but each page should be smaller and centered. Everything works out of the box, but not for the first and last pages. The Paging Basics example from the Framer website illustrates this problem: http://framerjs.com/examples/preview/#paging-basics.framer Any idea on how this can be done?
11
Johan Strömgren
Don't know if this is useful, but I wrote a quick tutorial on how to use an Xbox 360 controller to interact with a Framer prototype.
6
Keith Lang
I've searched through documentation, and the web, but not finding an answer yet... Is there a way to set a pixel-mask, or similar, for the hit-target of an image? The problem:I have multiple layers with complex shapes that have an opaque area and the rest is transparent. I want perform an action on MouseOver of the opaque pixels. It seems that's not possible? Or at least, without rendering out to Canvas and building some complex hit-testing?
4

March 07

Indrajit Maiti
Hello, We have experienced resources who can execute any kind of task for you. Please find our portfolios through this below mentioned link. URL: http://indrajit.in/bullfishlabs-edm/index2.html We are easily accessible and responsive. We are cost effective. Let's connect. Best! - indrajit
0
Jiwoong Lee
Hey, Framers. Lesson learned.. I wanted to use an external JS library and tried to use DOM element (Layer._element) to initiate the module, but it wasn't working. After many hours of trial and error, decided to just create dummy DOM elements outside of Framer layers and let them handles JS events. Here is the demo. http://share.framerjs.com/a0z8vf9czte7/ BUT! at last, I realized that I can just add a dummy event handler, which do nothing, on Layer like "test.on Events.Click, ->", then the event handler added by external JS library just started to work.. (Try rotate the square) http://share.framerjs.com/50ul7gu22ahe/ I just lost my half day. Sharing a tip for you.
0
JinJu Jang
Hi everyone, I've been studying Trigonometry and made a quick prototyping like this. The code involves aligning buttons on arc, randomising, and creating and destroying objects. The lines of code are surprisingly short. This can be helpful if you wonder how we can use Framer for prototyping a game UI. =) Enjoy! http://share.framerjs.com/1xgzisjq11vb/ (For desktop) http://share.framerjs.com/5cj8jpg3x3on/ (For mobile)
4
Adanma Ekeledo
Are there any tutorials/resources anyone recommends that describe how to get started creating fully functional prototypes with framer? I've been hitting my head against the wall and am wondering why I should use framer at all at this point. The docs are not really proving helpful. Any suggestions would be lovely!
7
Javier Díaz
Hi, I'm working with some external files in the "Modules" folder of a project (JSON objects) and I noticed that when I create a new copy by "Save as..." and create a new copy of the project, Framer Studio copies the whole project structure, but the modules import still points to the old location of the modules (the previous version of the project), so I have to update my files there for them to be updated in my project. Am I doing something wrong here or is it a known issue?
2
Maciej Pankiewicz
It's been a while since I worked on this, but now wanted to share with Framer community. The camera app is part of phone called Robin by Nextbit. Thanks Framer I was able to turn design ideas into fully interactive prototype, that would communicate the in and outs of designed behaviour to developers and let us test it with users.
4
Rory Smyth
If i'm working on a sketch file at 1x (360x640) and import to Framer at 3x. Is there no way to work with 1x dimensions? I want to create layers based off 1x dimensions, not 3x. Is there something obvious i'm missing?
2
Kostas Boul
Hello, I am working on a prototype using HERE Maps JS API. If you won't use Framer you get the map objet instantiated in the DOM where you can call several methods like setZoom() etc. In Framer, after the load of the map, this object is not displayed in the DOM behaving like not having been instantiated. Can someone provide a tip? https://github.com/kboul/SimpleHereMap
4
Shane Brown
Has anyone been using framer to design for the iPad Pro? I have a project I need to work on, but its not displaying to the iPad natively and instead showing the device image. I've attached some screenshots below from Frameless running on an iPad Pro. The same thing happens in Safari. How can I get this to work? Koen Bok, Jay Stakelon
1

March 08

Ricardo Pedroso
Hi guys. Is it possible to share my prototype without being possible to download the project through the link? Because when I share the link people can open the prototype and see all the code...
4
Adrián Mato Gondelle
Hey guys, quick question… is there any way to prevent horizontal scrolling when scroll.mouseWheelEnabled is enabled? I've setup 'scroll.scrollHorizontal = false' but it doesn't prevent me from scrolling horizontally with the trackpad. Any ideas? Thanks!
1
André Bose Do Amaral
Is there a Facebook Canvas Ad prototype out there somewhere?
0
Shane Brown
I'm encountering an issue where ScrollComponents aren't behaving properly in a prototype. I have an image layer from sketch that I want to be able to scroll up and down (it is longer than the screen height), but on the DragEnd it keeps snapping back to its default position, rather than continuing to scroll with momentum. In a brand new file it works as expected with no need to change settings, but copy-pasting the code across into the existing one it doesn't 😩 Any thoughts on what might be causing this?
2
Krijn Rijshouwer
Hey everyone, As of last week I joined Framer's design team! I was looking into the http://framerjs.com/resources/ page and decided to put some new resources on there. I would love to hear which resources that are not on the page yet were most valuable for you, and why?
7
Thomas Rekers
I am using the addPage() function to add multiple elements to a carousal of news items for an iPad prototype I am practising with. Q: How can I add space between pages in a PageComponent? Most of the projects that have achieved my desired effect use a for loop to create the pages, and/or scale down the pages. Can I mimic this result any other way? Or should I try using a scrollComponent instead? I appreciate any help. Big fan of this tool, community and all the amazing, somewhat intimidating work that gets shown here.
3
David Lee
I wrote an article about how to be more efficient in Framer using arrays. Hope this helps you some :) If you have any feedbacks, please leave a note there.
3
Keith Lang
I'm no dev…so I'm probably missing something. It seems to me like there's basically three sections of a Framer main code file: 1) the 'setup' part which holds creation of new objects 2) 'set default position' part and 3) 'runloop' part (i.e., the set of 'on Events ->). Is this normal/best practice , or just my limited perspective as a n00b?
0
Danny White
Heads up: next week ustwo New York is hosting another Framer Sessions. Hope to see some of you guys & girls there
0
George Kedenburg III
This is how I usually animate non-framer properties (in this example I'm animating a dashoffset for an SVG path). Is there a better way to do this? I have a feeling this is the cleanest it gets, but just curious if someone had a better method.
4
Lauren Bedal
Hello all, I'm prototyping in Framer.js. I have a scroll component and scroll content, I'm trying to print the current x or scrollX position of the content. So if I scroll 500px to the right the code will print 500 Bg = new BackgroundLayer backgroundColor: 'FFF' scroll = new ScrollComponent width: 750 height: 1334 scrollVertical: false layerA = new Layer width: 750 * 5 height: 1334 superLayer: scroll.content layerA.style.background = "-webkit-linear-gradient(45deg, #2AF 0%, #F00 100%)" # get current x value of scroll content print layerA.scrollX Framer Demo: http://share.framerjs.com/70pi1l6is76t/ Codepen Demo: http://codepen.io/matter/pen/78fc798001529418123b84470ea8c625?editors=0010 Thank you in advance,
2
Shane Brown
I'm working on a prototype for the iPad Pro and am having an issue where a large ScrollComponent (wrapped from a Sketch file) is causing Framer to lag / stop responding. Scrolling stutters, doesn't animate and then jumps to the final position. It can be pretty inconsistent, causes other elements to lag and is more pronounced on the iPad Pro (running in Frameless). For reference the ScrollComponent layer is 2732*8700! Any tips to fix or optimise this? I assume its the size of the image that is causing this?
1
Silvia Bormüller
Hi Guys, I have two questions: 1. how can I achieve something like this? I used blending (lighten) in Sketch but when I import the file the blending disappears. 2. I want to animate layers in a circular way (not rotation) But I don`t understand how this example works. http://framerjs.com/examples/preview/#layered-animations.framer Can someone share another example maybe? Thanks :)
1
Eyal Shahar
How do I animate two attributes of the same object with different animation properties?
2
Alexander Bennett
Is there a quick way to turn on and off the console debugger without having to go through and comment out every single print statement when I don't want to see them?
2

March 09

Jorn van Dijk
Dear San Francisco Framer folk! Koen and me are in your city this week. We're doing an event this Thursday at Designer Fund (164 Townsend) at 6:30 (short talk + workshop). The space is small but there are 10 spots available, so please email [email protected] to claim yours (first come, first serve). See you there.
9
Patrick McLean
Hi, I’m duplicating 2 different layers X number of times with X different states for each layer using a for loop. I’d like to switch states for two layers at the same time on an event like this: product.on Events.MouseOver, (event, product, productName) -> product.states.switch("hover") productName.states.switch("hover") But I get “undefined is not an object” in reference to productName on the event. I think there’s some core concept I’m missing. Any ideas?
4
George Otsubo
Hi, beginner question: how do you apply an animation to all items in a for-loop? It only seems to animate on the last item...any help will be greatly appreciated!
2
Ethan Miller
Hey all, I'm trying to extend the Layer class in a way that I can create sub-layers on the fly and animate them. I'm having trouble with closure and scope. I've tried to read up on the subject and follow examples, but nothing's worked for me yet. I want to: - Generate layers based on an array of images - Generate animations for those layers - Generate event-triggers for the anims I might be going about this the wrong way. Any advice appreciated! I pared down this example to the basic parts:
7
Stefan Enache
Hello everyone, I'm trying to create a prototype and when I use draggable.angle it gives me very limited values like 0, 90, -90, 180, -45, etc. I need the angle to be precise. I tried changing the draggable.pixelAlign to false but I still get the same angles. How can I get a very accurate drag angle? Also, the drag angle is behaving very weird. No matter the direction in which I drag, angle is 0 if I drag very slowly :(
1
Meray Uyanik
Hi everyone, it's the my first Framerjs project. I hope like it. Any comments in touch me.
2
Daniel Caine
http://framerjs.tumblr.com/post/94443808522/creating-gifs Hey guys, what's the best alternative for generating gifs from videos? My subscription expired a few days ago and not really wanting to get another one just for this task.
10
Márcio Ribeiro
Can someone give us tips on how to get better performance with our prototypes in Framer? I'm getting a lot of lagging when working with projects with big images, videos and their interactions
2
Joon Won Lee
Hi guys Ive made a basic tinder like interaction. This sort of interaction could be good for showing content on the card and getting feedback of content from user. Because swipe is quite easy interaction for user. http://share.framerjs.com/s05ppswh035w/
0
Celeste DeMartis
I'm having a hard time reordering layers using z-index or z. I have multiple sketch layers and a framer layer. Framer layer wants to stay on top. Anyone else having this issue?
7
Arjun Ajith
Hey guys,I decided to make my own Solar System to get started with Framer. It's experienced best through a phone, but there are a few PC friendly controls too. Unfortunately, I had to reduce a lot of image quality to make it smooth enough on mobile devices as it was already lagging on high-end phones.The controls are pretty straight-forward: > Pinch and drag on touch devices. > Zoom in/ zoom out on the bottom left. > Pause button stops the revolution of all planets. > The Info button shows the names for all the planets and makes them easier to spot. >Alternately, you can do ALT + mouse drag on a PC to simulate pinching. Go ahead and have a look at the mountains of Africa! Or the Red spot on Jupiter. Or the heart symbol on Pluto! :D (You'll have to use the pinch controls for zooming that far though) Known issues: 1) Much lesser fps on ARM based processors. 2) Enabling the Info button decreases fps considerably. 3) After using the Pinch controls, the origin for zooming through button controls change 4) Moon is still lit when its behind the Earth http://share.framerjs.com/eav3wo5nbl79/ FULLSCREEN VERSION: http://share.framerjs.com/kdrz2q5poj1t/
5
David Louie
Android prototypes are really choppy in the Framer app after one of the latest builds. Anyone else noticing this? I'm on a 2 year old Moto X. Time to upgrade?
5

March 10

Pierre de Milly
Hey everyone, is anyone here working in Paris, France? We're launching a series of digital prototyping project with a major French bank using FramerJS as our main prototyping tool and we're gonna need to hire a lot of people with good UI skills and knowledge of framer. Thanks!
2
Bud Sigur
Hello everybody! I stumbled across FramerJS some time ago and was wondering if the content created with FramerJS is usable for the actual app? Can CoffeScript from Framer be somehow translated into Java for example? If no, why not? If yes, how hard is it? Thanks guys. :)
4
German Bauer
Has anybody done any experiments with external input devices for controlling UIs? Context: I am thinking things like remote controls etc can act as local servers via Arduino/Raspberry, then I could read their stream of inputs and have the UI react accordingly.
3
Michael DeFazio
Hi everyone. This is more of a coffeescript question than a framer question. I am learning more and more coffeescript as I continue to use framer. But one hurdle are classes in coffeescript, which I would assume is also maybe one of the most useful parts of coffeescript. I'm struggling to understand them and how to implement them to make my code more efficient Is there a resource for how classes are used specific to framer prototypes? Or a framer example? Thanks!
7
Harshad Kulkarni
Need help... How do I access layer group in a group? I have imported file from sketch. Below is a quick example. I want to access ContentA and ContentB. Can some one please help. Thanks in advance. main Group1 ContentA Group 2 ContentB
3
Andrey Zhukov
Help needed: Framer v54 opens older file, proposes to update and make a copy — all fine. Then select Import Again or Import and everything breaks.. Sketch file has been unchanged.
1
Lauren Bedal
Hello all, another question for the group. :) I am trying to sync an x scroll to time modulation. Think every 200px of a horizontal scrolling component, time must increase to the next hour. Are there any resources that go over this type of interaction? Thank you in advance!
1
Harshad Kulkarni
URGENT!!!! Guys... What do I do? Can not view my prototype. I did check images folder...
4
Ivor van Rensburg
Hi All, Wondering if someone has created a module for a table, or even better If someone could point me in the direction of how I generate a table in Framer? The reason being is I have a complex desktop project I'm working on that that progressively displays "things' based on what row or column you've selected.
0
Jon Arnold
Is there a way to find out how fast/hard a user scrolls (momentum of the scrollview after the release of the finger)? I want to make the scrollview scroll to a certain position when the scrolling wasn't that fast/hard. Thanks for your help!
3
Bud Sigur
Hello everybody! I've got a quick noob question: What is the easiest way to import layers from Photoshop into Atom? Thanks. :)
0
Kasper Germann Kramme
Is there a way to create a dynamic piechart? Where you can change values and the shape changes with it?
1
Daniel Louwe Kooijmans
Yo! I want to prototype a feature where the user deletes the current page in a pageComponent, then snaps to the next page. So the flow is: - Click event - Get current page - Remove or hide that page, must include an animation - Snap to next page Any ideas? Thanks!
6
Ryan Gonzalez
Got inspired by Ryhan's post from yesterday about using the Web Audio API, and started thinking about how you could possibly use that, Framer, and getUserMedia (for microphone access) to prototype for voice interfaces. Unfortunately, Webkit doesn't support getUserMedia so no Framer Studio compatibility, but I was able to build something that works for Blink (Chrome) on Codepen. It's just a little recreation of the Google Now microphone feedback, but it's exciting to think what kind of prototyping this can lead to (especially with the Web Speech API for transcription). http://codepen.io/ryngonzalez/pen/yyVMYb?editors=001
3
Dave Crow
I'm trying to do a flip animation with the card flip module. It looks really glitchy right now. Is there a better way to go about this?
0
Ivor van Rensburg
Could someone explain why off() isn't working below please? I'm trying to understand how it works from the documentation and when I copy the below code nothing happens layerA = new Layer layerA.name = "layerA" clickHandler = (event, layer) -> print "This layer was clicked", layer.name layerA.on(Events.Click, clickHandler) layerA.off(Events.Click, clickHandler)
1
Tung Pham
Hi there, I have a question about FramerJS auto-cropping. I have circles that are placed half-outside of an artboard. While they are animated, I realized that they are cropped into half-circles. How do I retain the full circle shapes? Thanks!
5
Carlos David
Hi guys, I'm looking for a tool that allow me to make UX test using a Framer prototype. Something like https://lookback.io would be super cool. Can someone help me with some suggestions, Thanks?
2
Jorn van Dijk
Hey everyone, our latest release is here with stunning new devices for previewing and presenting your prototypes. We teamed up with the Facebook Design Team to bring you a beautiful new set of mobile phones, tablets and watches. We've also revamped and simplified our previewing features. Thanks to Julius, Jeff and George for all of their great work. http://blog.framerjs.com/posts/pixel-perfect-preview-devices.html
20

March 11

Aaron Paterson
http://share.framerjs.com/lfk8sgb0nnsz/ hey Guys and Gals trying to get an array of 1 to 45 items to toggle between to events in a 'mouseOver' 'mouseOut' procedure? See link.
0
Jack Barnes
I am trying to learn how to extend the Layer class , I feel it has a lot of potential for more complex prototypes once you master it , what's wrong in my example? it's throwing an error: "TypeError: undefined is not an object (evaluating 'name')"
8
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?
4
Neil Batchelor
I know I'm stupid here but I'd love a gui that effectively writes the code for me - old designer
4
Alex Gilev
Hey everyone, I'm trying to build a set of web app overlays in framer but got stuck on 1 issue, when I click on the 2nd overlay it doesn't work properly, can you help? http://share.framerjs.com/mx9xavchxyht/ The issue happens when you click on "John Cook" and click on dark overlay again to dismiss and it messes things up. Thanks!
1
Jon Arnold
I am trying to nest a page component with a scroll component. Is there a way to only allow one action at a time? I don't want scrolling and changing the page at the same time.
2
Stefan Enache
I can't use Modules and I don't know why. I'm trying to use TextLayer (https://github.com/awt2542/textLayer-for-Framer) but I can't. I think it's because of the include line. When I remove it, the red square appears. I've tried to include the module without the curly brackets and/or with quotation marks instead of apostrophes. I also tried to rename the file and to import other modules but the same thing happens. When I delete the include line the square appears: with include: http://i.imgur.com/drBbP7T.png without include: http://i.imgur.com/Up18rNq.png As you can see, I'm using framerjs on windows. What ca I do to make modules work and is there a way see the code erros for framerjs in atom?
1
Jon Arnold
Is there a way to get the Tap/Click event to work while the end of scrolling is still happening (momentum still running)?
3
Olly Reeve
Hi, I'm trying to create an array and add a hover state. My code at the moment is adding the hover state but applies it to the last item in the array. I'm guessing that it's something to do with the layers having the same name..? If anyone has the answer it'd be much appreciated!
4
Keith Lang
When importing from Sketch, assets seem to be trimmed no matter what I do (I've tried an invisible shape and a grouped slice). I'm wanting to keep the object on a nice predictable rect for rotation purposes. Any tips? For now, I’m just setting a bounding shape to have 1% opacity so it registers.
6
Jonas Treub
Recently I threw a party where a friend of mine prepared a VJ show consisting of 200 GIFs. Unfortunately his computer could not be connected to our beamer. What a bummer! Then suddenly (ten minutes before the party would kick off) I thought of the possibility to create his show using Framer. Here is the result. I added comments to the code.
1

March 12

Aalok Trivedi
hey guys! question 1: Is there an easy way to create a native app tap event where you tap on the target layer BUT when you slide your finger off the target layer, the event doesn't fire? question 2: Is there an easy way to create the same tap feedback interaction for each layer in an array? For example: whenever I tap on the icons in the settings menu, I want them to scale up to 1.2 and scale back. http://share.framerjs.com/4lvtfi2bu7cl/ (you can tap on settings and preferences)
2
Øyvind Nordbø
Hello everyone! I'm working on a shake animation for an interface I'm building, and I'm trying to chain together a few animations to trigger after one another, and then stop after (n) amount of iterations, but I can't seem to figure out how to pull this off. Maybe there is a way how I can count the amount of animation iterations and then stop after a certain amount? Here's a sample project I tried to get to work, and it eventually just ended up as an infinite loop.. 😅 http://share.framerjs.com/2mbws6ppmx11/
3
Ray Yip
Just playing around with Safari's new feature: Backdrop Blur > http://share.framerjs.com/qg7r7iom5zc1/
7

March 13

Tebza Ngwana
Hi guys, im having trouble with building an on/off switch component. when i click on the knob which is the second layer the whole component moves instead of the knob only. what am i doing wrong???? please guys your help would really be appreciated.
1
Agisilaos Tsaraboulidis
I just saw the Q/A sort of thing with Koen Bok and Jorn van Dijk. You guys nailed it. You inspired a lot of us. Keep up the good work and make Framer even better! :D
1
Nicolas Tilly
Hi, is there a way to show Framer projects offline on iPhone for exemple?
2
Kasper Germann Kramme
hello. I'm trying to get a scrollComponent within another scrollComponent but I can't get the "child" one to work. It's like I can't interact with it.
1

March 14

George Kedenburg III
Hey everyone! Later today, Koen and Jorn will be doing a live-streamed Q&A from Facebook HQ. Be sure to like the Framer page to get notified, but we'll also share the stream here in the group so you can tune in. Start thinking of your questions! We'll go live around 5/5:15PM PST (I know, it's late for the rest of the world... sorry 😢)
9
JinJu Jang
Hi, everyone. [1] I assign a sketch art board(i.e: sketch.homescreen) to a scrollComponent. (i.e: parent: scroll.content) [2] To make it below nav bar, I change y position of the content layer by (sketch.homescreen.y = 128) [3] Scrolling is working, but I can't reach the end of the page. Even I tweak scroll.content.height or scroll.height. I have a gut feeling that I misunderstood the concept those things. I think one of those 3 steps must be wrong. If you have any ideas, could you please tell me how to fix this? :/ Thanks!
3
George Kedenburg III
We were live!
4
Floris Verloop
I’ve been playing around with the new force touch events and thought it would be fun to do something with audio. In this prototype the harder you press the louder the music gets. When the force-touch event triggers, the album cover pops into view along with a little progress bar. Make sure to turn on your audio, when you play around with the prototype → http://share.framerjs.com/du73zvo7oa5g/
6
Shane Brown
I've been playing with the list example that was floating around earlier, trying to put it into a reusable list module (to learn / practice classes and modules). I'm having an issue where the allItems[] in the object doesn't seem to be refreshing when the prototype auto-refreshes. eg. The proto creates 10 items in the array and everything works great. Array length reports 10. Then framer auto-refreshes from text input in the coding window and the array reports another 10 for each time it refreshed, and the text-input dependent on the array index disappears.
0
John Grendon Enderby
**Feature request** Just an idea to make desktop prototypes easier to manage. If the preview pane could be undocked (in a separate window, a bit like the expanded photoshop tools view) it would allow for easier viewing of desktop prototypes. Wouldn't be so great if designing on a laptop, but it would be handy for those of us that work with a multi-screen setup. Could be a good option :)
9
Dave Crow
I posted about this a while back, but all my prototypes are still fuzzy in Chrome since the latest Framer update. Anyone know a fix for this?
2
Struan Fraser
Hello lovely Framer people! I'm having some slight trouble with input spam breaking my animations. Is there a clean, succinct way to limit input to only trigger an event when no animations are taking place?
8

March 15

Nick Kutateli
What's the best way to get a child within child layer? Is there something clean like view.header.button vs view.childrenWithName("button")[0]?
6
Matteo Papadopoulos
Hi everyone! please forgive the silly question but I couldn't find a way to delete a shared project from Framer Studio. I've just realized that there are mistakes on my published work and I'd like to remove it. Could you please drive me on how to do it? thx!
2
Vicky Yang
Hi guys, I'm having trouble randomising the colour of the letters on a click event. So far the background colour can be randomised. I'm also hoping to center the letters, but again, couldn't get it to work. Here is the file http://share.framerjs.com/wrytide3kp4x/ Would love some help! Thanks in advance!
6
Ben Rodenhäuser
Hi everyone. I have a page component containing various layers (i.e. pages), some of them wrapped in scroll components. What I want to achieve is that clicking on the right half of the prototype snaps to the next page (to the right), while clicking on the left half snaps to the previous page (to the left). What I do to achieve this is add two transparent "dummy layers" on top of my page component (one in the left half, the other in the right half), and on these layers, I register the clicks and let the page component snap further. Now all of this works fine. But the fact that I now have transparent layers on top of my scroll components makes it so that these won't scroll anymore. Clearly, the dummy layers block my scrolling attempts from registering with the scroll component. How could I fix this? Is my approach with the dummy layers the wrong one?
5
Brad Ellis
I would love a way to be able to easily make radio buttons. Maybe by creating a new radio button set, then filling it with buttons? I'm not sure how it should work, but I find myself often wanting to half a cool segmented control, or something, and I have to hook each button up to turn off each other button, and it seems like theres a better way.
4
Sergey Voronov
Hi framers, have a problem with multiple events, that i can't fix) any idea why if i tap on draggable layer, i get dragend event? i need to treat touch/click and drag ends events differently.
1
Joshua Tucker
Anyone else noticing issues with scrollToPoint? Doesn't seem to be working for me.
4
Vaibhav Kanwal
How do you import an external CSS file in Framer Studio?
12
Peter Ng
hrrmmm am i doing something wrong when trying to @font-face woff or woff2 in framer? I can't get it to show up in framer, osx chrome, or osx safari? .ttf only works in framer and safari (as expected) and .otf works in both browsers.
4
YoungIm Jo
Hey guys - Have a question about ScrollComponent's scrollToLayer. Let's just say I currently have four layers(layer1 at the very top, layer2, layer3, and layer4 at the very bottom) on scroll.content, and current scroll position is layer4. When I try to append new child(layer5) to scroll.content(by addChild(layer5) and scroll.scrollToLayer(layer5), the scroll goes down from layer1 to layer5. What I'd like to make is just append layer5 and scroll from layer4 to layer5. Anybody has any idea how can I tackle down this problem?
1
Chris Wunder
Is there a Way to export a project as a video? Or do i have to record the Framer share manually?
2
Agisilaos Tsaraboulidis
Hey Framers, i would like to ask about how i can make an animation with time. Let me explain i want to go from my intro screen to another screen but i don't want to make an animation with taps etc. I thought it would be great, if let's say after 5 sec the 1 screen animates or something and the 2nd screen appears :D
2
Chen-Je Huang
Hi everyone, I set up a custom device and when I reload the program, the bottom of the screen gets blocked out. But if I press enter or type something in Framer Studio, the full screen will show up. Can anyone help?
3

March 16

Andreas Wahlström
Wrote a tiny module for stacking layers: https://github.com/awt2542/stackLayers-for-Framer Examples: http://share.framerjs.com/2ips3o4k8egq/ http://share.framerjs.com/0hq3xj2oexqd/
4
Benjamin Den Boer
Hey all! We're super excited to host our first Framer Meetup in Berlin next week. Join me and Floris Verloop at Wunderlist on Friday, March 18th for a presentation plus a series of workshops. Be sure to bring your laptop to follow along. Having a copy of Framer Studio & Sketch installed is a plus. Also feel free to bring any cool projects you are working on to share. :-) RSVP here — https://nvite.com/FramerBerlin/ffcf
5
Jordan Robert Dobson
This tool looks like it could be great for usability testing on your devices: https://lookback.io/usb I just wish it had something that could show where taps happened in the video. :)
5
Javier Eduardo Treviño
when is Framer swtiching to ES6? I'm excited about that
5
André Bose Do Amaral
Hey folks, have a job opening on UpWork for freelance prototyping using Framer JS. Check it out if you're interested.
4
William Song
This is my first project using Framer. I decided to prototype some features that I wish Facebook Paper had. Would love to hear any feedback!
14
이정익
I made simple gallery. Fighting~ Lee se dol !!! :) http://share.framerjs.com/6iw6tw5og7nf/
2
Shane Brown
Is there a way to get text input on device working properly? All examples I've seen so far cause the screen to shoot away when switching input fields.
2
Feles Daniel
Some new stuff for Skyscanner. I'm working on the page, where you can see the flight details of your selected trip. Proto here:
1
Lynn Liangying
Having trouble with pageComponent. I imported three dartboards in framer, and want to wrap them into page component. When click on one specific group, I want to make artboardB appears from button. My problem is how can I position the artboardB at the button but not the right button corner? Then when the artboardB is animating, I want to make the artboardA stays at the background but not moves with artboardA. How can I do that? Or is pageComponet is not the right way to do it? Really need your help, thanks a lot~~~
2
JinJu Jang
Hi Framers, After writing 400 lines of codes, I just wonder is it possible to link multiple Framer files together in one project (Kinda like using Class). Has anyone done this before? Would be really appreciated if I can get some pro tips. :)
9
Adhithya R Kumar
Since the recent update to framer, I have not been able to import anything from Sketch. All I see is a blank canvas on importing anything, and it always defaults to "No device". Is there a fix to this? This has been quite a frustrating experience as files that used to work, do not work anymore.
5

March 17

Sander Värv
Is it possible to animate webkitClipPath? What I'm trying to achieve, is grow the mask size without moving the masked image. Should this be done with SVG instead? Any examples? Here's what I have so far (doesn't work): http://share.framerjs.com/mlm78d3b0irl/
2
Michael Lee
Just wrote a new Framer tutorial, geared towards beginners, feedback welcome and appreciated
8
Ben Rodenhäuser
I am doing a little slideshow using PageComponent for a client presentation. I want to be able to use the arrow keys on the keyboard to move through the slideshow (left/right), so I am listening for keydown events. This works fine, except that in Framer Studio, I get feedback sounds whenever I press the arrow key. Not so if I mirror the prototype in Safari, so that works "out of the box". Is there any way to avoid these sounds? Here is a stripped down version of my prototype (the keydown listener is towards the end):
3
Dan Warchez
Hey Framers, it was awesome seeing the Framer team at the meetup in Seattle last night. Here is a link to the movie app I demoed. Cheers!
3
Jon Arnold
I trying to modify this example but some stuff isn't working as expected: http://framerjs.com/examples/preview/#swipe-n-scroll.framer#code Benjamin Den Boer could you please share the underlying sketch file? Thank you
5
Varun Yellina
I'm doing a prototype for interactions on a webpage. Now my question is, How can I include comments/directions next to the prototype for viewers to interact with the parts that have been prototyped? I tried editing the index.html but no luck.
3
Eli Beitzuri
I was hoping to find a particle effects module for Framer, but no such luck. There were a couple of Framer projects that had code I could leverage. Is there something I missed? I found is this excellent coffee script project on codepen. But my coffee script is weak and this example has no comments to help interpret it. How hard would it be to convert this to Framer?
10
Ben Rodenhäuser
Is there a way to get an array containing all layers in a framer project that come from a Sketch artboard (as opposed to ordinary Sketch layer)?
4
Vladimir Shlygin
First of all, thanks to Danny and Noah from Ustwo for organising Framer Sessions in NYC this night. It was pretty cool to go through all the new features and hear some interesting insights. I have a question. Recently, I've come up with an idea that implies the usage of lines and curves with animated points. Did anyone try something likes this? I've managed to attach animated layer x and y positions to html canvas. I wonder is there some other ways to do that?
8

March 18

Alex Gilev
Hey guys, need your help! I'm tinkering uber watch prototype and stuck on the following: When you hit request button you then able to cancel the trip. After canceling the trip everything starts all over again. How can I reset the entire scene, so when I'm back to the starting screen I can start with the same animations. Got to Request -> Hit 'X' button, and try to hit Request again. On 2nd time everything got screwed ;( Please help http://share.framerjs.com/w2nzl2uwy182/ Thank you!!
1
Aaron Benjamin
Can Framer consume JSON or XML? I'm working on a project that will produce feeds of "placeholder content" - I'm wondering how this will play with tools like Framer. Shot: https://dribbble.com/shots/2598107-Feed-Me-UI-Update
5
Alex Gilev
Hey guys, need your help! I'm tinkering uber watch prototype and stuck on the following: When you hit request button you then able to cancel the trip. After canceling the trip everything starts all over again. How can I reset the entire scene, so when I'm back to the starting screen I can start with the same animations. Got to Request -> Hit 'X' button, and try to hit Request again. On 2nd time everything got screwed ;( Please help http://share.framerjs.com/w2nzl2uwy182/ Thank you!!
0
Justin Mariano
Hey everyone, I'm new to framer.js and framer studio, so far absolutely loving it for high fidelity prototyping! I had a quick question regarding producing a deliverable: 1. Is there any way to push out a framer project to function natively on an iOS device (has anyone done this)? I've previously used Adobe Edge with Phone Gap to push to iOS, but Edge gives you optimized HTML, CSS, JS, etc output whereas framer just kind of gives me a share link and files that can't be messed around with. 2. If not natively, can you store a framer project somehow on an iOS device so an internet connection is not needed to view it? I'm working on a project where we need to deliver a prototype on the client's iPad. Must be accessible offline. We were originally going to use inVision, but the framer proto is way cooler. Thanks!
9
Anton Kartashov
Attention to Russian colleagues! I started a blog about Framer in Russian http://learnframer.ru The first three articles: 1. How to use Framer on Windows and OS X for free http://learnframer.ru/articles/on-windows-and-mac-for-free/ 2. Sketch tips’n’tricks for Framer http://learnframer.ru/articles/sketch-tips/ 3. CoffeeScript and programming basics for newbies http://learnframer.ru/articles/basics/
3
Fredrik Ampler
Feature request: A visual (spring) animation tool would be enormously helpful when defining springs. Seeing both the curve and an example animation, while fidgeting the parameters. Like this: http://dynamicsjs.com/ or http://cubic-bezier.com/. Any thoughts on this?
4
Denis Matveev
Hey guys! So, I’m done. I give up. I spent almost all my trial hours and searched through docs, examples and this group. I need your help! Attached video is what I want to achieve (made in another tool): 20 dots, each one has 2 animations being played one by one. Should have been simple. I created an array of dots, added 2 states to each dot and switched the states with delays. It worked for one dot, but when I process the array only 1 state is being switched. Probably, that’s because delay timings get overcomplicated.I tried another approach — listening to OnStateDidSwitch event — with no luck. How can this be achieved? What am I doing wrong? I really like the Framer’s approach, it could complete Principle that I use for simple animations, but I need to know that such cases can be solved there. Thanks a lot mates! My framer’s prototype: http://share.framerjs.com/oyego0xy7mji/ What I want to achieve: https://www.dropbox.com/s/w2hbg4gas7x8m6a/What%20I%20want%20to%20achieve.mp4?dl=0
2
Aaron Benjamin
Update! The (non functioning) FeedMe UI is up and going at http://atlantadesign.ninja/feedme/ I'm still working on the page functions, but the feed generator is working like magic with Framer. I'll have that plugged in soon with limited functionality while the other features are built out.
0
Chris Wunder
Can someone tell me, why Framer does not import all layers of my sketch file? Framer only imports the group folders but not the layers.
1
Nick Kutateli
Need a little help: having trouble adding events on a view controller where the event is on the active view. I'm not doing something right with how I'm updating the activeView var, but not sure how to fix it. In the example linked the event fires for the first view, but not for the rest. How do I make sure the event fires off of the updated activeView?
1
Joan Leon
Framer & Sketch: An Intentional Workflow https://medium.com/facebook-design/framer-sketch-an-intentional-workflow-f91ee2ee1cc1 #FramerJS #Sketch
1

March 19

Ross Popoff-Walker
Hey all, I'm trying to recreate a simple interaction we're there's a fixed main-header and sub-header. When you scroll down, the sub header hides under the main-header, and then slides back into view when you scroll in reverse. Basically trying to recreate this: https://jsfiddle.net/s6mLJ/4511/ But, I'm completely stuck now trying to do it in framer. Could you take a look and let me know how to solve this? http://share.framerjs.com/dwtonx467tz6/ Thanks!
3
Ben Rodenhäuser
In a presentation yesterday, I noticed that my Framer prototype became unresponsive when "left alone" for a while (i.e., like 3 minutes of no activity or so). I wonder what's the reason for this? My guess is that it's simply due to the fact that I was presenting from an old/weak laptop (macbook Air 2011) ... But I wonder if others have experiences like this.
0
Presten Wang
I love framer so much to want to have an ipad app to work on framer projects when my laptop isn't with me.
2
Shawn Hickman
Is there a way to export a framer file as a PDF? I'm exploring using Framer to create data viz and then bring it into Illustrator or Sketch.
1
Jordan Robert Dobson
Here's some great photos by Chris Camargo from our 10th Framer meetup in Seattle with Koen and Jorn. I counted roughly 55 people. It was awesome and we got a demo of the future of Framer.
6

March 20

Benjamin Den Boer
New example! A simple video player. You can scrub the progress of the video, as well as pause and play it. Learn how to combine Dragging events, the SliderComponent and the “timeupdate” Video method. http://share.framerjs.com/ls45f54htojk/
11
Eva Bubu
Thanks for adding me to the group Koen Bok.
0

March 21

George Otsubo
Hi, how do you get the < > button that let other's see your code when sharing?
7
Jivan Shrestha
Can framer js access mobile hardware like camera, accelerometer?
1
Chris Wunder
I am currently playing around with Framer and try to animate a few things for my website prototype. Is this the right way to create a new layer from an existing layer? Or shouldn't` i do it like so, is there a way to make something like "sketch.Text...."
1
Siavash Shabanipour
Has anyone noticed that desktop Safari doesn't perform as well as Chrome? Which is a shame because Framer Studio uses Safari.
2
Agisilaos Tsaraboulidis
A really quick question. For example I want to animate a button. I import the sketch file etc. If I want to animate the button I have to create a layer on top of it or I just have to reference the button and animate it?
2
이정익
Koen Bok Jorn van Dijk I have a question. I confuse, scroll isdragging feature. I don't write isdragging. But when I do scrolling, block click event. But I feel the click reaction speed slow than before. I make scroll dragging click event to use old and new framer verstion. compare the two link. * new version framer http://share.framerjs.com/fu60tlpsorw1/ * previous version framer http://share.framerjs.com/kifepeq0z5ls/
1
Chris Chen
Here is my first experiment on map application with Framer. The idea of using page scroll to switch map locations was inspired by Sviatoslav Didukh's "Quick Yummy Food Search" sample on dribble. Framer Project: http://share.framerjs.com/w7d6ae5eelrn/
1
Carl Cooper
Having issues with PageComponent after updating tto the latest Framer. The Artboards template example here doesn't seem to "page" anymore - just a continuous scroll: http://framerjs.com/learn/import/templates/ Any ideas why?
5
Sergio Majluf
what are some up to date resources for teaching with FramerJS? I want to organize a local meetup/workshop to get some people into coding and prototyping interactions and would love to use Framer Studio for that!
3
Elliott Gibb
Hey all, Framer n00b here. I'm trying to make a hidden modal slide down only when the user has dragged down (therefore moving up a feed towards more recent items). I can only see Events.ScrollEnd, Start, AnimationDidEnd & DidStart - not any sort of directional parameter. Any ideas? Any examples would be greatly appreciated - thank you!
1
Kirill Pochivalov
Hello, everyone! I create not standard, but really simple welcome cards animation. It may be useful for beginners. Download & enjoy! http://share.framerjs.com/k9tfhc9fi1ux/
7
Ruben van Gaalen
I'm trying to display the value of a (changing) slider component into an html layer element (which is also styled with help of the span element). What's the best way to do this? Help is much appreciated!
2
Sergio Majluf
Is this a glitch/bug with rotationY, or something else? I'm following a simple example on animations which use rotationY. Whenever there's another layer besides the rotated object, there's a glitch, that happens on FramerStudio and replicates on my iPhone with Frames/Frameless. Video is self explanatory. What am I missing?
7
Marc Krenn
'codePanel' module ... adds a code panel - similar to the one known from the framerjs.com examples - to any project. All you have to do is to drag'n'drop the module onto your FramerStudio window. Example (contains module): https://tr.im/codePanel
3

March 22

Rich Zarick
After a quick search I haven't been able to track down an answer, but is anyone aware of a solution for targeting multi-touch events not on a touch screen, but on the trackpad of a Macbook?
1
Koen Bok
Fantastic article by Charlie Deets about Framer and Sketch. Thanks Charlie!
2
Meray Uyanik
Hi everyone, We creating a iPhone App zoom animation template. I hope like it <3
4

March 23

Justin Young
This might be a simple question a but I haven't been able to google my way to a solution. Layer A is directly above Layer B. I set Layer A to `visible: false` and Layer A doesn't appear anymore, which is expected. I'll tap on Layer B, wanting to trigger an onTap event on Layer B. But instead it triggers an onTap event on Layer A, even though it's not visible, which is not what I want. I think I'm expecting `visible: false` to behave like the CSS `display: none` property. Is there a way to achieve the effect I want without positioning Layer A completely off the screen?
0
Sure Lee
I restart sketch and Framer several times but no use. Then I tried with several sketches and it did not work. Who knows how to fix it?
2
Fan Chueng
Hi,everyone.Does anyone know how to make this animation by Framer?
1
Koen Bok
If you recently ran into import issues with Sketch, help us test our beta with rewritten importer. Apart from fixing some longstanding issues like being able to use _ in layers again, we now also default to jpg with (non transparent) bitmaps for size and speed.
2
Meray Uyanik
Hi everyone, again me :) I and my design partner Uğur Erbaş we can so much try new components and usability's. It's the new component :) We were thrilled when designing. I hope like it <3 https://dribbble.com/shots/2606985-Shopping-Interaction-Framerjs
3
Ricardo Pedroso
Hi guys. I have one question for you: I have an artboard that I imported from Sketch. It has 3 different images that will work as a background. I switch the background with swipe events. When I swipe to left, I push the image that is visible to x = -screen.width and the new one (that has x=screen.width) to x=0. However, on the transition animation there is a "void space" between the images. How can I solve this?
1
Jiaxin Chen
hey guys, I use Josh Puckett's wonderful module created a #LoveTwitter animation, hope you like it 🤗 https://dribbble.com/shots/2605003--LoveTwitter-Animation
4
Simon Griffeth
Hello. I'm trying to have a button switch from one state, back to the default state with only 1 click. Using "layer.states.next()" allows me to do this, but i have to click to go back to default state. Any thoughts? Thanks!
6
Ricardo Pedroso
Hi guys. Today I activated my Framer account on my own Mac. However, on the next days I'll be working on my company Mac. Can I disable the account from my personal computer and activate it on another one? thank you!
4
Jayaprasad Mohanan
Weekend project #1 - Menu
0
Patrick Keenan
It seems the nexus 4 device is broken, the device width is 8 pixels. Is there a simple way to work at 1x rather than 2x? or 3x?
6
Isaac Art Grant
Can I do responsive web design with it? If so, where can I find help doing it?
1

March 24

JL Flores Mena
Hey! I'm giving away the code of this game I built a few months ago. I learned a ton about loops and arrays by building this. I hope that by sharing it it also helps others. : ) GitHub: https://github.com/72/Sequence-Game-for-Framer
8
Didi Medina
any way to capture the scroll position for the content of a scroll component while it's scrolling? I want to do a "thing" where, if position = x do this etc. #magic #boom What I've tried so far: scroll = new ScrollComponent ... scroll.onScroll -> print scroll.y For some reason the returned value doesn't change as I scroll. Anyone capable of shedding some light on this? Cheers!
2
Marty Laurita
Does anyone have ANY clue how to even begin to recreate something like this in Framer? @Marcus Eckert is a genius...
4
Siavash Shabanipour
Does anyone have a solution for accessing https endpoints?
5
Jayaprasad Mohanan
Weekend Project #2 - Search
1
George Otsubo
Hello, I'm trying to fade everything out except for the current page in a page component when you swipe after a few seconds and have them fade back in when you swipe again if that makes sense? Any help will be greatly appreciated!
1
Jacob Berlow
I seem to have an enlarged cursor. Does anyone know how to fix this? I am on the latest version.
13
Dave Crow
Anyone here in the Salt Lake City area? I'll be presenting at a Meetup in July and trying to convince other designers in the area that coding isn't so scary. :) I'd love to meet some other Frameristas there!
4
Sergey Prostov
Hello everyone! Sorry for nooby question, but how to hear the Canvas resize event? For an adaptive behavior...
1
Amine Zafri
Hey everyone! In case it might help anyone, here is a Google Inbox prototype I made. https://dribbble.com/shots/2608591-Framer-Google-Inbox The prototype includes : - Opening Emails - Over-drag closes email - Header moves with scroll - Mark Email as Done - Snooze an Email - Undo Done/Snooze an email - Mark a bunch of emails as Done (Today/Yesterday's emails) Here is the link to the Framer file (Sketch file included) : http://share.framerjs.com/bzpo9tjihd8l/
6
Krijn Rijshouwer
Hey guys, I just added a couple of new things to our docs: - layer.color - layer.backfaceVisible - Utils.insertCSS Read more about it here →
5
Thomas Offinga
Hi all! I'm trying to figure out why ignoreEvents isn't working for me. Any pointers? Even this doesn't appear to work as expected: layer.ignoreEvents = true layer.onClick -> print "sup"
9
Didi Medina
According to the docs this should work. for some reason still getting an error. Any input?
5
Doron Etzioni
I am new to Framer.JS and CoffeeScript, the last time I programmed was a while ago. Can anyone refer me to a good example how to connect and query My SQL to load data into Framer.JS?
0
Ricardo Pedroso
Is it possible to cancel a shared proto?
1
Krijn Rijshouwer
We just released an update that improves Sketch import in Framer. It fixes some long standing bugs like using _ in layer names, the huge cursor and some other issues. Find out more about it on our blog. http://bit.ly/1WLXQQr
15
Adam Trabold
Is there a way to have Framer import PS layers in relation to the width of the layer group instead of canvas size? For example, I have a horizontally-scrolling section on a page that I can't seem to get to import at full width (it gets cut off at the canvas edge). I've seen examples that have used Sketch where this works, but I'm not sure about PS.
8
Jesse Brack
Question about scrolling and click/tap events on layers within the scrollComponent. I've been testing my prototype on my phone (Galaxy S5), and more often then not when I try to tap a layer with an event listener right after scrolling nothing happens even though the scrolling appears to have stopped, I usually have to tap a second time before the event registers. Any advice as to what I should do or where to look for more info? Thanks! #framerjs
6
Édouard Urcades
Hi everyone! I'm currently attempting to re-create the same effect that iOS utilizes on their parallax wallpapers utilizing this module — https://github.com/joshmtucker/OrientationEvents I'm running into some issues where it appears as though I can only cause motion to happen along one axis at a time, similar to the example given in the github repo. — This is the script I have atm: sketch = Framer.Importer.load("[email protected]") module = require "OrientationEvents" module.OrientationEvents() screenHeight = Framer.Device.screen.height screenWidth = Framer.Device.screen.width sketch.bg.center() sketch.copy.center() sketch.diamonds.center() module.smoothOrientation = .35 if Utils.isMobile() Utils.interval .1, -> gamma = module.orientation.gamma beta = module.orientation.beta sketch.diamonds.animate properties: midX: Utils.modulate(gamma, [-8, 8], [50, 575], true) midy: Utils.modulate(beta, [-8, 8], [175, 575], true) curve: "spring(450, 110, 0)" — Anyone have any idea what I might be missing? Thanks! I'm getting the feeling I'm messing up the utils.modulate stuff, which I'm still trying to understand completely.
0
Ahmet Bekteş
Hello, I can't make Framer Studio work after updating to El Capitan. I have spinning wheel on the right... Do you have an idea???
2

March 25

Jeongmin Kim
Facebook announced a hidden game + fb messenger — connected with basketball Emoji 🏀(didn’t know? Touch it now!). That inspired me to make fb messenger game <Rock-paper-scissors game> — connected with RSP Emoji👊✋✌️. Its just an idea yet, code is not so clean. welcome to your comments. *Play* and *Enjoy* it —! Prototype http://share.framerjs.com/22tvc2q1g3w6/
17
David Ross
Anyone else getting an error importing Sketch files into Framer using the import icon? Getting an error after the progress bar and some 'column 44' message. Any ideas? A bit new to Framer so maybe it's user error.
2
Doron Etzioni
I am new to Framer.JS and CoffeeScript, the last time I programmed was a while ago. Can anyone refer me to a good example how to connect and query My SQL to load data into Framer.JS?
4
Debashish Paul
Hello Everyone, Over the course of last week, I did a number of experiments to get familiar with CoffeeScript and understand the awesomeness of framer. I am super n00b on this but here is a sweet little thing I pulled out in the last 2 days completely in framer (nothing imported) and wanted to share it here to remind ourselves that - Prototyping is awesome > Framer is awesome > Koen, Jorn and the entire Framer team is awesome!! y'all keep shipping Love <3 Shoutout to George for being super helpful in getting me started on Framer! Happy Weekend!
9
Florian Pnn
Hello everyone! Is there a way to change the background below the device used in the preview? I looked into Defaults but nothing seems to enable that.
2

March 26

Kasper Germann Kramme
Quick question! Is it possible to place a ScrollComponent that scrolls vertical inside a PageComponent that also scrolls vertical (snaps) without the two interfering with each other when you interact with them?
0
Thomas Offinga
I was wondering if any of you have ever tried 'linking' several Framer prototypes together? I'm considering using hrefs to link various share.framerjs.com links together, but that feels sub-optimal. Any tips here?
3
Greg Jang
Hi guys Another quick question about mirroring...(i'm on a roll) The screen I get when mirroring with Frames or Frameless is different from Framer Studio v56. No matter how many times I reopen, refresh, turn the phone off and on again. Is this a bug or am I doing something wrong? I seem to get this quite a lot. The first image is from Framer Studio where the keyboard is hidden (at the correct location, bottom of the screen). The second image is a screenshot from my phone and the keyboard is at a weird position. thank you edit: link to project http://share.framerjs.com/554chtmue8io/
0
Daniel Specht
Hi Framer.js I made quite some research to find a good prototyping tool for mobile AND web. At the moment i have to use axure (which looks something from the year 200x) because you can add conditions, variables a.s.o. But the software is slow and just not accurate. I'm not happy with this tool. After a long research I found framer.js which is great and I'm testing right now. The only thing I'm confused with so far is, that when I would like to test a website prototype, I'm ending up with something in the appended image. It's a browser window in the actual browser window. This makes not much sense to me. Is it possible to test a web-prototype in "fullscreen" mode?
8
Chris Wunder
I did not found any Event by hovering an Element. Is there any Solution to fire an Event by hovering a layer?
1
Greg Jang
Hi guys, I'm starting to use Framer and really enjoying the potential Framer has and have a question about selecting sublayers. I have my layers in Sketch as in the image below. Is there a way to select "inputEmail" inside "signup1" without using sublayers array? example: app.signup1.inputEmail The above example gives me a TypeError: undefined is not an object (evaluating 'app.signup1.inputEmail.on' however "app.signup1.sublayers[1]" works well. I suppose I could make sure all the layers have independent names but that seems inefficient. any help would be great thank you!
7

March 27

Ronan Rooney
How to get the sum of all the values inside an array? For example, myArray = [1, 2, 3, 4, 5] would produce a sum of 15.
4
Greg Jang
Hi guys Is there a way to import a framer file? Kinda like jquery load() or like ReactJS...so that I can make my prototype more component based?
3
Chris Wunder
Hey Framer Pro`s. Is there any way to automaticly remove numbers within the sketch file? In Framer i get everytime the error "Error: (6) Layer or Artboard names can not start with a number". I have a few numbers in my layer, but not at the beginning. For example: A layer is named "XMLID_467_" or "Rectangle 36".
4
Mike Hughes
Hi Guys, can someone point me to the example snippet file, I accidentally deleted it and emptied my trash. Trying to create my own snippets but need the contents of the file to get the script correct.
1
Yüchi Chang
[Blank Preview Panel] hi guys, I just installed Framer to my mac running on el capitan. But once I launched framer.app, all I can see is "blank" page with the grey spinning wheel. The same happens both when I try to open default tutorial files or the ones downloaded from framer website. Please help :(
2
Ricardo Pedroso
Hey guys! First question: Is it possible to simulate the behaviour of the circular progress bar on Framer like on the image? I want to enter on a screen and do an animation like from 0 steps to 2000 steps... Second question: I have a text layer on my prototype and I want to update its value every 10 seconds for example. Is it possible to do that? Thank you!
12

March 28

Didi Medina
Spending some time today learning more about how to use for loops and arrays in FramerJS. Anyone have any good light weight examples I could reference? My goal is to great a grid of cubes (that part is easy) and have a single function apply to all of them. Example: when any cube in the array gets clicked, that specific cube should scale down by 20%. Cheers :)
2
Mike Hughes
Quick note guys, I think the doco section 'Compatibility', needs a slight update regarding Sketch, MAC OSX version etc. given some of the recent releases and Sketch import re-write.
2
Marian Halliday
This is my very first framer :) A very long assignment for school. This is part 1 of 5. Lots to learn! Definitely need to improve my animation skills. Super fun app although I ran into some issues when importing my PS file.
3
Balraj Chana
Hey guys, I made a new prototype! It's an app that enables the user to capture and purchase items of interest using image recognition. Due to time restrictions the prototype isn't fully functional but it does allow you to complete the checkout process. Prototype: http://share.framerjs.com/abooj6d1f6yt/ Video demonstration: https://d13yacurqjgara.cloudfront.net/users/188162/screenshots/2589872/attachments/515332/prototype_demonstration.mp4
14
Arpy Dragffy
Any framer pros in Colombia?
0

March 29

Jon Wood
Hi friends, looking for a little help in writing the logic for a parallax effect based on the drag distance of a layer. Here's the sample that I've pared down for you guys to help me with: http://share.framerjs.com/77w0vvrniwsc/ My goal is when the property card is dragged and the "Drag to Add" Icon appears, the AddIcon's y position will move the same amount the property card's y position moves, in both directions (up/down). Hope I was clear enough, thanks in advance!!
2
Chong Lee Khoo
Hi good people, During .scrollToPoint or .animate, how can I call one of my functions? You see, I have an update function that I am currently calling during manual .onMove and .onScroll that I'd like to also call during .scrollToPoint or .animate so that stuff gets updated correctly. Thank you in advance.
2
Sergey Prostov
Hi guys, is the way to scaling proportionally the grid of layers?
1
Emin İnanç Ünlü
Hey guys, Is there any way to convert a layer to image dynamically? I need use this image as a mask like that: layer.style["-webkit-mask"] = "url(generatedLayerImage.png)"
5
Denis Matveev
Hey guys! Daring to present my first prototype. This a bokeh–style particles flowing animation. Quite infinite and random. You can play with params to achieve surprising results. It turned out to be CPU consuming though — my macbook heats as hell, so beware ;) Prototype: http://share.framerjs.com/smolmcpeym84/
4
DoYoon Kim
Hi, I've been trying to find a solution for this for hours so I thought I'd try asking others here :) Thanks in advance! I have a layer (lyrX), which is triggered for animation (e.g. opacity = 0, Y = lyrX.y + 300) upon onTap of a button. I also have lyrX.onAnimationEnd so I can trigger a chain animation (e.g. lyrZ opacity=1). Now, here's the issue I'm facing... When I tap on the button again, I want to reverse the previous 2 animations in reverse order. So using the above example, I would fade out lyrZ... and lyrZ.onAnimationEnd I will make Y= lyrX.y-300 & opacity=1. However, since I already have lyrX.onAnimationEnd from earlier, as soon as the reverse animation finishes, it re-triggers lyrX.y+300 & opacity=0. Is there a way to store the first onAnimationEnd as a variable or something, so that i can have a listener for that particular event? something like the following: openingAnimation = lyrZ.onAnimationEnd -> or openingAnimation { lyrZ.onAnimationEnd -> ...} etc. or is it possible to "localize" a group of chained events and listener like the following? groupName { lyrX.animate properties:{ opacity:0, y: lyrX.y+300 } lyrX.onAnimationEnd -> lyrZ.animate properties: { opacity:1} } This way, lyrX.onAnimationEnd won't be triggered each time I set a new animation for lyrX. Or if there's a better way altogether then that would be awesome! Please let me know... and thank you!
2
Yao Jueyi
Hello, everyone. The whole of our class group is studying Framer, however, we can hardly find any good tutorial. The official document is too simple and only including some scattered knowledge, could anyone give me some more specific tutorial?
2
Somnath SN
New to framerjs. Previewing prototype in Samsung S6 edge. Device scale is not rendering in 4x. Please help
2
Henrique Gusso
Yo! I've been prototyping background blurs on Sketch by having 2 copies of the same layer, one is visible with the bg blur and a hidden one without it. Then I invert their visibilities on Framer and apply -webkit-backdrop-filter: blur on the latter. Did anyone come up with a better workflow to make sure both screens look the same? Is it possible for Framer to eventually convert Sketch's background blur to backdrop-filter on import?
2
Nathan Langley
Wow, guys. I've downloaded the trial and had made my first animation using some tuts I've found and I must say: I'm loving FramerJS. I'm a complete n00b at JavaScript let alone FramerJS and CoffeeScript but found the resources to be helpful and Framer itself to be easier to use than I thought. I thought I would post my project here for a little code review as I think I may be able refactor my animations into one function maybe? Heres a link: http://share.framerjs.com/c3tifyaguuv2/ Roll over the ellipse on Mix 3 ;)
1
Ricardo Pedroso
Hey. I'm with problems on scrolling on mobile devices. On the sketch, I created a mask that has a big content inside with info. On the Framer side I used the clip feature to make the scroll work. However, I can't scroll on the mobile device, only on the Mac with "two fingers scroll", not with click and scroll with mouse. Can you help me?
1
Braden Kowitz
I've got this tricky bug I was hoping this community might be able to help me with. I have a scrollComponent with tap targets inside of it. It works reasonably well, but after a scrolling swipe, the scrollComponent takes a while to come to rest, and during that time the taps don't propagate to underlying elements. Is there some way to get these tap events to propagate while scrolling physics are active? Or is there some way to get the scrollComponent to finish scrolling faster? (Speed makes it scroll slower, but doesn't make it finish up faster.) Here's a simple demo of the issue: http://share.framerjs.com/j8xa29o9hgsq/ I'm testing in user studies tomorrow so I hope I can find a good fix. Thanks for the help!
3
Dmitry Sholkov
I have an import bug that is quite annoying. When I have transparent mask behind layer I want to export, it scales up bitmap to fill that space. Before I was able to use Mask to increase paddings around arrow, so it's touch-friendly. http://share.framerjs.com/5vzu8p64rpwl/
4

March 30

Mike Hughes
In the interests of making our protos realistic, is there a way to get the current time from the device/browser ? So I can change for example the iOS status bar with the current time based on the time that the proto is being viewed/run.
5
Ee Venn Soh
On the documentation, Layer.siblings: Do you mean print layerB.siblings instead of layerA?
1
Kasper Germann Kramme
Hello. How can I get this to work as a PageComponent instead of scrolling? The utils.modulate part in the bottom. thanks.
2
Lynn Liangying
Can someone help me with this: After click on the "close friends" the details page will moves up, but after click the "events" button, nothing happens. I put another artboard on the right, and use this code to animate it, but nothing happens: ########Swipe or click to the events page sketch.eventsTabB.on Events.Click, (event,layer) -> sketch.swipeableLayerC.animate properties: x: 0 time: 0.5 Can someone help me? Many thanks~~ http://share.framerjs.com/lseja6nrcv3l/
1
Jack Barnes
Hey there, is there a pattern or formula to center iOS indication dots in the screen regardless of the number? http://share.framerjs.com/obkhqd2jdsrz/ I've seen the example and did my own but still don't get it
2
Eric Eisher
QQ: Why does the Z index seem to displace a Layer's X, Y, and Scale properties? As an example: If LayerA = x:0, y:0, z:0 and LayerB = x:0, y:0, z:100... LayerB will be larger and in a different position than Layer A.
3
Koen Bok
I'm currently trying the pick the physics engine to use in Framer 3 and would like to hear some opinions. We basically have three options: - Use the web version of box2d. This is what Apple uses under the hood of UIDynamics. It's a very decent engine and there is lots of documentation available. But it's from another age, has an extremely confusing api (which I could wrap, like Apple) and was built for C, not for Javascript (it got translated from c to flash to javascript hehe). The code looks very complete but it has not been updated in over a year. https://code.google.com/p/box2dweb - Use Newton. A beautiful and new physics engine written in Javascript with performance in mind. Downsides are that it seems relatively young and has quite a few less features then box2d. Also, main coder just took on a new job although he states that he will continue to update the project. https://github.com/hunterloftis/newton - Use p2.js. Also quite new, but it seems to have almost as much features as box2d. The author also built a 3d physics engine named cannon.js that is quite popular and seems to be a physics wizard in general. http://schteppe.github.io/p2.js/ I'm currently leaning towards going for old-fashioned box2d.
13
Amy Casillas
I updated Framer today, and the new version installed as a trial. When I enter my License #, it says it isn't valid. Any suggestions?
1
Eric Eisher
Is there a function that simply restarts your prototype without having to press the refresh button on framer? It would be super helpful for user testing prototypes on device.
5

March 31

Ee Venn Soh
Is there an Framer example using EdgeSwipe event? I am trying to create a similar navigation drawer interaction where you can swipe from the edge of the screen to reveal more content? And what's the differences between "Swiping from edge" and "Start swiping from edge"?
3
Ni Yan
Hi everyone! I'm new to Framer, but I love it so far! I have a question about the "states.next()" - is there a way to set the time duration for it? I know I can set the time and animation when using "states.switch()", but I don't know if I have any control over the default animation for "states.next()". thanks!
1
Benjamin Fritz
Hello, got a small question: What's the easiest way to animate the bringtoFront() action? Right now it just stacks the layers with a hard cut, how would I add a fade or some other kind of transition? Do I need to replace the bringtoFront() with index and add states to it? Thanks in advance!
4
Stephane Massey
Hi all, looking to learn a new prototyping program, had one question: Can you do keyboard input with Framer.js ?
3
Aalok Trivedi
I know this topic has been discussed many times before, but I can’t seem to figure it out. I’ve created a bunch of repeated elements by using a for loop. I’m stuck on trying to the same event fire for that particular element when clicked When I click on the collapseGroup on any card, I want the collapseIcon to rotate 90 degrees and the recCardContainer to change its height to 100 (i can use states later, but for now I just chose to .animate). It animates the elements in the 1st element in the array but not its corresponding group.
2
John Grendon Enderby
Hi all! Tried posting in the Slack channel to try and get a response reasonably quickly but trying here now. If anyone could help me out that would be awesome. Have asked the devs here but they're all a bit anti-coffeescript. Link is to a github gist as I can't share the entire file :( :
2
Koen Bok
Hey everyone. We have been growing the team over the last few months. You might already have seen them around, but I'd like to officially welcome Brittany, Krijn, Eelco and Niels. Brit will help us write copy across the site, blog and apps, Krijn is a talented junior designer and Eelco and Niels are experienced engineers with a strong computer science background (coming in handy for some future projects ;-)) They will help us build some great things for Framer. Feel free to ping them here or on Twitter whenever you need help.
8
Ash Adamson
Is there a simple way to create a function that keeps track of all changes and returns them to their original frames? Call it reset() for example. It envision it would work like how the reload button hard resets the project. Except, because it's a function, it could be automatically called on AnimationEnd. My limited understanding of how framer works would be to create some kind of for loop to go through every variable that changes and log the original frame, then return all of them to the original frame when called. This seems like too much, there must be a more elegant solution.
10
Ruben van Gaalen
I just downloaded a free stock video with pre configured dimensions. Now I can edit it in after effects to make it the same dimensions as I want it to be in my Framer layer, but I was wondering if there is easier way. For example a function like 'cover' for an image in CSS. Thanks in advance for the help!
8
Evan Yang
Guys, need your help. How to define the font-family in Framer?
4
Sergey Prostov
Hi, framers! Layers list in drawer disappeared after restart studio, someone knows why?
1
Struan Fraser
Hello, I have a minor problem with selecting layers using a variable because the variable is always interpreted as a string when i'm trying to refer to the name of a layer object. http://pastebin.com/khJdtvkT Everytime I use the string to try and select a layer's property it returns undefined. Can anyone help me out with selecting variable layer properties? In this case filterName.x would be undefined.
7
Jordan Robert Dobson
SVG Line Animation Example UPDATED w/ Square & Rectangle: http://share.framerjs.com/udsc7ywtdx9l/ Using the the new slider component... here's how to draw a line on a SVG path in framer. Also, an example in how to proxy animation layer events through to your SVG path to draw the line. SQUARE ONLY: http://share.framerjs.com/izae13wmqd50/
17
TJ Egan
Hey guys, can anyone help me figure out why my assets will not display when I hit share?
0
Manish Joshi
If you want to create dynamic editable rows in a table using html and javascript, below example will helps you. In the below code first I have created a button and then created table in which I have added 2 columns, as the output is shown ate the end of this tutorial. when we need an editable row in my html application we just click on AddRow button.
0
Manish Joshi
If you want to create simple responsive user regestration form using html and css, below example will helps you. In the below code I have create complete responsive form that includes several different elements and attributes. These elements are then styled using CSS.
0
Tebza Ngwana
Greetings framers I was wondering how I can get user input from a keyboard(image) and display keys that have been pressed onto an input textfield. I've added separate layers on each key with event listeners but I'm only able to "print" what's pressed, which only displays on the browser. Any suggestions?
3
Sergey Protopopov
Hi, everyone! I am nub in FramerJS. I am making some test with lists and cycles. And I don't understand how to get access to any layer after I create them during cycle I want to change background color according to color of layer you drag or to change opacity of draggable layer Link:
2

Monthly archives

2017

2016

2015

2014

2013