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

What is Framer? Join the Community
Return to index

September 2017

September 01

Nate Galloway
Could be a premature question as I am only 2 days into the trial and running through tutorials. But.... Does Framer export individual (image) assets? Or have the ability?
6
Denis Lesak
I have a pretty simple loading animation that I would like to run for x seconds and then have some other stuff happen like have the loading animation and overlay fade out, etc. I can't seem to figure out how to do that with Utils. Can anyone help?
1
Diego Oriani
Hi all, I am trying to create a map prototype where a control layer passes its position and scale properties to a SVG layer. There are two behaviours to it, you can drag and pinch the control layer. The issue I am having is that the `point` value from the control layer is affecting the SVG layer position in a odd way. Can anyone think on a better solution to the problem or how can I repress the pinch `point` value from affecting the SVG layer?
0
Davis Yeung
Hi Framer Professional ! I'm having an issue about to add Inset to 2nd screen with scrollComponent under flowComponent. This is my file: https://framer.cloud/euJEV P.S. it works on the first screen but not second... any ideas? Thanks a lots :D
3
Eelco Lempsink
We need your help testing! The latest Framer beta contains many performance improvements and a bunch of cool new features like effects and multiple shadows. We made many changes under the hood, so if you run into something that’s broken, please let us know! You can download the beta at https://framer.com/beta Please note that projects saved with the beta can’t be opened with the normal version of Framer, so make sure you have backups.
8
Nazar Moravskyi
Hey, guys. I got 3 layers and I would like to stack them one by one. Are there any options to do that or the only way is to set Y position for each?
3
Diego Oriani
I am trying to create a prototype where a control layer passes its position and scale properties to a SVG layer. There are two behaviours to it, you can drag and pinch the control layer and that should be replicated equally in the SVG layer. Unfortunately I am getting a glitch in the SVG layer after pinching and dragging the control layer. Has anyone experienced similar issue?
0
Jeff Young
Changing fontWeight using state isn't working for me. Works fine when I change it directly using layer.fontWeight. Bug or silly mistake? https://framer.cloud/AkoIR
2
Ankit Joshi
off topic (kinda) It seems you guys manage to keep your updates below 75mb, 73.3mb most of the time. Is it intentional, and if so why? (Can't be coincidence or) is there a reasoning?
0
Adam Mazurick
I've been trying to prototype AR Apps for ARKit stuff we're doing. I used George Kedenburg III project but found a way to access the rear camera in iOS for iOS11.
4

September 02

Blaine Billingsley
Before Framer had a TextLayer, the 3rd-party module had a cool "convert sketch layer to TextLayer" function. Is there a way to do this with the built-in TextLayer?
1
John Sherwin
Hi everyone, is it still possible to add Framer prototypes as web apps on your iPhone home screen? When I add to the home screen and open it back up I still have the safari UI. I haven't touched anything in index.html and it is set to allow as a web app so not sure what happening here?
2
Raje Punsalan
So I just switched to Beta and man so good. My question is, is there a road map on when we'll expect features? 😁
3
Pavel Laptev
Photoset from the second Framer meetup in Kiev. Thanks to everyone who came. Thanks to Tes Mat for the workshop and Marat Tyncherov for the organisation. Cheers!
2
Sergio Lizárraga Castro
Hey guys I'm new to framer and I'm trying to use perspective-view module on my prototype without luck: https://framer.cloud/RScWU After clicking the button it should show the perspective but I get "Uncaught TypeError: Framer.CurrentContext.getLayers is not a function" Does anyone knows how to deal with this? Thanks in advance!!
1
Damian Chmiel
Hey everyone, Introduction: Maybe some of you fixed problem with zoom in/out action in Mapbox Map on Mobile Devices (I'm using Mapbox API). For Mapbox Map I've used: https://www.mapbox.com/help/mobile-framer/ About problem: When I'm trying to zoom in or out from middle of the screen (my fingers are there), it is zooming out from bottom right corner (only on mobile device/s — on desktop it is working fine where I'm currently have the code or even at the example from above link)
0
Arturo Goicochea
Hey guys, help me out :) I'm working on a 4 week Framer course (using the library, since the audience uses Windows). For the intro class, I want to start with: Why use Framer? What is Framer great at? I know a few reasons myself, but curious what you guys would say :)
8

September 03

Radek Kyselý
🎉 Introducing Framer Modules — community-driven modules registry and manager for Framer. Hey everyone, I'm super excited to announce you can now search for, install and save your favorite modules from one place. No more wandering around the internet looking for a module. Yes, it's true! See for yourself! https://www.framermodules.com PS: Did I mention it's open source?
29
Luis Escobar
Maybe a stupid question, but... how do you specify html/text that's already in quotes? Double quotes obviously don't work. 🤔
4
Emmanuel Henri
Sneak peek into Sketch and Framer courses we're shooting next week at Lynda/Linkedin where we build a fictive mobile store for a supplement/apparel sport company.
6
Sergi Bosch
struggling with a concept regarding textLayer, wondering if someone can help. "tabBD" is a text layer. the following does not work (font does not change): tabBD.states = none: fontWeight: 800 yes: fontWeight: 100 mcList.onTap -> tabBD.stateCycle() the following does work (font layer hides and shows: tabBD.states = none: opacity: 1 yes: opacity: 0 mcList.onTap -> tabBD.stateCycle() Why does the show/hide work, but not the font/bold? thanks
1
Yu Lu
Hello everyone.
0
Daniel Remes
hi, anyone that knows how to prevent ovardrag when using PageComponent?
2
Jason Sparks
This is probably asking way beyond what Framer was designed to do but… has anyone tried to use Facebook auth in a Framer prototype/ CoffeeScript?
5
Robin Fox
Hey all. So I'm trying to use this list sorter prototype that someone made a while back for a prototype that I'm making. http://share.framerjs.com/pt8x1bj42s6k/ While the prototype above works, when I copy it, and paste it into a new framer file, I start getting JS errors that I'm not sure how to fix. https://framer.cloud/ietcQ Anyone know how to go about fixing this to work in the latest framer? Thanks!
0
Jason Sparks
What’s the best way to limit how far down a scrollComponent can be dragged down? Ideally, I don’t want a sudden stop but a gradual halt, as if the scrollComponent starts to get more resistant/slower/heavier the further down it is dragged. Some kind of modulation on scrollComponent.speedY?
0
JiHoon Lee
http://www.framermodulearc.xyz/ I've made Framer module archive site. This site is linked to Github page. I selected some modules that I used, and I'd like to update it weekly Special thanks to all developers who made a module and who are making module now. if there were anyone who'd like to add a module. feel free to contact me. I left the link to GitHub page below. https://github.com/JiHoon0422/FramerModuleArchieve
0
Simon Tsang
Hi Guys, New to framer for a week now. Just bump into this Upload Failed error for the first time. It says "your project failed to upload due to a network error". Does anyone know what does it mean? Cheers!
3

September 04

John Lee
the new version of Framer seems very buggy - lots of errors for indentation, unexpected end of inputs etc.. anyone else getting this?
8
Robin Fox
Hey all! I'm having a bit of trouble trying to figure out how I can change the image of a layer when I click on a button. Essentially what I'm trying to do in my prototype is when I click the little edit button, the images within the loop change to a different image, an edit state if you will, and when I click the edit button again, the first images reappear, and the edit images disappear. Does anyone know how I go about doing that? Any help would be greatly appreciated.
2
Lewis Ainslie
How would I go about making a Horizontal PageComponent with cards but some of the cards are full width and some of them are variable widths? But always aligned to the Left. Like this:
2
Gary Keeler
Has any one used phonegap to wrap a framer prototype before? End goal is an APK for android that can be installed. I've tried but it seems phonegap doesn't respect the viewport that framer sets. My attempts result in an APK but the prototype is scaled way up. The odd part is when I use the phonegap dev app to preview it, it looks fine. Just when it get's built.
5
Arvi Raquel-Santos
Is there a way to change the background color of the canvas (outside the phone) from white to black?
5
Floris Verloop
Hey everyone we just launched a brand new framer.com with a singular mission in mind — education. Our redesigned homepage gives you a glimpse of what you can design, while our new dropdown navigation helps you access the learning material faster. 31 video tutorials, 8 iOS/Android patterns, 6 example projects and a UI Kit full of 36 ready-made interactions. All the resources you need to go forth and design. https://framer.com/?utm_source=facebookgroup&utm_campaign=framer_webredesign_aug2017
17
Daniel Alvarez
I have a random question. Has anyone tried the following workflow?: React-sketchapp > Framer Sketch Import > Framer Prototype
2

September 05

Scott Herrington
Help setting event on layers within a class prototype: https://framer.cloud/FfvwB/ Hi guys, need some help with adding interactivity to a checkbox component I made by expanding the native Layer class. I want to be able to: Tap any of the checkListOption layers inside the loop - and that means the whole layer, so anywhere between the divider lines. On tap the checkMark should be revealed within the checkBox AND the checkListOption backgroundcolor should change to smoke (a shade of grey I saved as. a variable). Right now I've got a click event working only on the checkBox to reveal the checkMark inside... and I can't work out how in the same event to change the background of the parent class. But that's not what I want anyway. I'd like the tap event on the parent checkListOption, and for the checkMark to then appear in the checkBox and the entire background colour of the checkListOption to change. Any help greatley appreciated! Hopefully the code is easy enough to follow :)
1
Alvaro Lourenço
TextLayers used to have an "convertToTextLayer()" utility method that enabled us to edit text layers coming from sketch import. - Was this dropped/substituted?
6
Mariusz Dziechciaronek
Hello guys ;) I’m trying to add some real inputs to my design I use modules e.g.: https://github.com/ajimix/Input-Framer but module adds inputs not to a particular artboard but to a entire screen (whole design is affected by inputs) So, if my first artboard is e.g. list of elements and second one is a form, I would like to add inputs only to my second artboard - form. Maybe I shouldn’t use any modules but try to add inputs as HTML elements? Any ideas?
2
Alexander Fischer
Hi Guys. One question. What is the best way to export a GIF file from a Framer project? Any recommendations? Thx
3
Daniel Remes
Hi, Anyone that knows how to start at a certain slide when using pageComponent? :)
2
Maximilian Bredow
I want to combine gestures on the same object: 1.) user drags to decide on a card, like so https://framer.cloud/aegkK/ 2.) user taps on a card to show more details (and deactivates drag), like so https://framer.cloud/lAVcV/ My problem: The tap event within the card class overrides the drag event at the end of my code. How can I solve this? I guess the solution has to do with Conditionals and Event Listening. I came along .ignoreEvents, .isMoving and .isDragging - but I did not yet manage to get it to work Thanks!
2
Tess Gadd
Hi guys - it's been a while, my apologies. To make up for it, I have made two cheat sheets: The versatility of Utils https://medium.com/the-school-of-do/framer-cheatsheet-the-versatility-of-utils-bed26e1614e2 and, Utils.modulate https://medium.com/the-school-of-do/framer-cheat-sheets-utils-modulate-b88e359fdcc6 As always, let me know what you think :)
7

September 06

Alex Safchuk
Using Framer flow component on a project and loving it. Anyone know how to create a control to close an overlay? See the example...How could you make the close button in the menu specifically trigger for the overlay to close? Thanks for your help.
0
Brad Ellis
I'm having trouble saving a framer generated link to my iPhone home screen and then viewing it without the Safari chrome. Is this broken, or is it just me?
1
Caleb Kramer
Hi- quick question for y'all. Have any of you applied the coding skills you've learned using Framer elsewhere? Design tools or otherwise?
3
Kostas Boul
Hi guys. I would like to share a video of the prototype I built last year (May 2016) as part of a student job. It is a prototype of HERE Auto SDK an embedded navigation solution for cars. It contains partial functionalities of the real app and its goal was to be used to serve as a tool to create new ux / ui features. It uses several HERE APIs like geolocation, Places API etc and in the current video it was tested using a location in an outskirt of Athens, Greece. Link:
3
Emily Rautenberg
Hi all! I'm still pretty new to Framer, so I'm not sure if this is a bug or is intentional. A few times now, I have been working on a prototype in Framer, tested it in Preview, and it works fine, then when I pushed it to a cloud foundry instance, found random bugs that did not exist in preview. I figured out that the bugs were specifically related to when I was animating a layer, then animating back to it's default state. For simplicity's sake, I was basically doing this: layerA = new Layer y: 0 layerA.animate y: layerA.states.default.y + 10 then later on... layerA.animate y: layerA.states.default.y When I debugged layerA's default state in the Framer Preview, the default y coordinate was 0, as expected. In the browser, however, I was getting different values that I assumed were residual from other animations, or possibly due to my window size. As soon as I added this after declaring the layer, however, that default value was correctly populated as 0: layerA.stateSwitch("default") Has anyone else run into something similar before, or is this just not how default states are designed to be used?
2
Sean Thompson
Hey all, I am trying to learn more about Utils.modulate with the following exercise: I am trying to make a layer called “replies” fully opaque when it’s on-screen at a certain y-position, and less opaque when it’s off-screen at another y-position. To do so, I have “replies” inside a FlowComponent called “flow” I then wrote the following: flow.onScroll -> replies.opacity = Utils.modulate(replies.y, [531, 162], [.6, 1.0]) Second, less elegant implementation question: When I could not get Utils.modulate to work I set up the following two states: replies.states = dim: opacity: .6 options: time: .3 brighten: opacity: 1 options: time: .3 This worked until I tried to tie “brighten” to scrolling up and “dim” to scrolling down. Any idea why this would not work? flow.onScrollStart -> if scroll.direction is "up" replies.animate "brighten" if scroll.direction is "down" replies.animate "dim" Thank you!
3
Erika Bauer
Does anyone have workarounds for making protoypes work inside Chrome on PCs running Windows 10? We are having some problems running the audio player that we found here https://github.com/benjamindenboer/Framer-AudioPlayer inside a prototype on PC with Chrome.
3

September 07

Mariusz Dziechciaronek
Hello guys, how to get access to the input value, I'm trying this code, similar to the JS but it doesn't work: layerA = new Layer layerA.html = "<input type='text' value='Hello'>" x = layerA.querySelectorAll("#input").value print x
3
Leonard Burton
I'm getting errors on the iOS Framer Preview app but not on the desktop. On iOS I'm getting the red error box at the bottom but how do I open an inspector so I can actually debug it? I've tried uploading to the Framer Cloud and debugging in Safari but most of the time the buttons I need to access are hidden under the browser controls!
0
Erik Lundgren
I’m trying to understand the ScrollComponents behavior where it always places itself in front of all other layers. Could someone point me to the place in the framer coffescript source code where this behavior is defined?
2
Richard England-Lee
Hey! Any tips on optimising framer files? Is there a way to minimise the code or anything? I've optimised all images etc but its still taking a while to load. Do the backups effect load time? Because that file is quite weighty... Thanks!
4
Kshitij Choudhary
For all the framer people by https://twitter.com/andreaswah This plugin is now included in Framer.
2
Alexander Traykov
Hey everyone 👋 I bought the Framer tutorials on Udemy but I'm having a serious issue with the preview screen. Any idea how can I fix this? (All the tutorials are unusable with this issue)
2
Daniel Remes
Hi :) Anyone that can show me how to use te modal component and give it a padding brom bottom when I open the modal? :) Thansk from a newbie!
0

September 08

Greg Jang
Framer Preview v2, all tabs are empty. Doesn't connect to Framer Studio at all. Is there something I have to do for macOS Sierra? I'm on the new touchbar mac book pro as well. I also uploaded my framer project to the cloud but I don't know how I can access that project file from framer preview. Since the beta Framer Preview never connected properly over wifi. It worked once then never again. Why not just have a login feature that guarantees connection? Thank you Edit: The app doesn't ask for any access code either.
9
Philip Madeley
[SOLVED! - updated Chrome and it works now] Getting an error when adding global states to an object. TypeError: Object.assign is not a function. Any ideas? (only shows on mobile) myScreens = [myLayer1, myLayer2] states = {} states.active = __active: ____properties: ______opacity: 1 addStates = -> __myScreens.forEach (layer) -> ____Object.assign(layer.states, states.active) addStates() Thanks!
0
Kelly Keenan
Is there a way to easily apply the same animation options to multiple layer states at once? I want all these states to have the same time property without writing out a bunch of AnimationOptions for each. Thanks!
3
Matthew Mang
Weird issue with webkit backdrop filter blur in the latest version of Framer. Any idea what's going on? Lots of weird visual glitching happening. https://framer.cloud/wuYpY
4
Patrik Makrai
If you want to display custom fonts, here is a little how-to: # The font file is at 'fonts/customFont.otf' style = document.createElement('style'); style.type = 'text/css'; style.appendChild(document.createTextNode("@font-face {\n" + "\tfont-family: \"myFont\";\n" + "\tsrc: local('☺'), url('fonts/customFont.otf') format('opentype');\n" + "}\n" + "\tfont-family: myFont !important;\n" + "}\n")); document.getElementsByTagName('head')[0].appendChild(style); layerName.style = { "font-family": "myFont" }
4
Johnny Garces
Hi Framer fam- I'm new to the tool and learning the scroll and flow components. I got the flow component to work so that it would show the next page, but I can't seem to implement the scroll component on this new page. I see that a new scrollable layer appears, but it's not taking the height/width of the existing layer. Here's what I have so far- what am I missing? thanks all!
0

September 09

Michael Dorian Bach
Was hoping someone can give me a little more insight into how the scrollComponent functions. Particularly how the content layer determines it's height. scroller = ScrollComponent Scroller is a fixed height. When you click a button, I add a new layer to scroller.content. Each new layer is placed below each other. I then make scroller.content.height taller by adding the height of the added layer to it. I then call the scroller scrollTo function and pass new the Y which is the height of scroller.content + the added layer height. The problem I'm having is when I added a new layer to scroller.content the content shows up but 1. Both scrolling to the item programmatically or just dragging the scroller doesn't scroll to the newly added layer. You can see the top of the new layer but the component thinks that's the end. The rubber banding effect shows a cut off layer. What is the proper way of scrolling to the end of the scroll component and getting the component know that the content layer is now larger due to a new layer.
1
Ray Yip
Getting Average Color from Image. https://framer.cloud/download/signed/ciiMg/2/?studio=1 (This example only working in Framer Studio because "Utils.randomImage()" are loading images from Unsplash.com which doesn't allow cross-origin access.)
3
Kenneth Spry
Just messing around with sound!
1
Joni El
Using styles & flexbox to position layers is great. But the visual differences on the mirror are annoying. Does anyone here experience the same?
7
Bhaskar Ravi
Having trouble loading the Google Web Font Nunito Sans. It isn't rendering in Framer Preview for me, whether I create the text layer in design mode or code mode. Using Utils.loadWebFont("Nunito Sans") so don't know what I'm doing wrong! Any help appreciated.
0
Jesus David Mendez
Is there anyone from the Framer Team where? I'm trying to get in touch with them for a couple of question about the education discount but so far I haven't got any response :( sorry if this is some sort of spam or something "unusual"
2
Michell Tateoka
Hi guys, I'm trying to make a conditional using dynamic text and am obviously not formatting it correctly. Could someone please help me out? It's a countdown timer and when the number gets to 0 I want something else to happen. I'm using template, so I was thinking it would be something like the below (Which doesnt work at all haha). The template name is 't' and is sitting in a design text layer that is targetable and called 'countDown' if countDown.template.t = 0 # do something here If you could help me understand the correct syntax for the if statement using a template I would be very appreciative!
4
Maximilian Bredow
SOLVED: See Blaine's comment for the solution How do I achieve a more native scrolling experience? My prototype allows to scroll through and multi-select from a random list of movies. My problem: while moving I can't tap to stop the Scroll animation like in a native app - each tap immediately fires a stateCycle. As a result, it feels somewhat quirky to really select the movies I want to select. I've been experimenting with onScroll + ignoreEvents but I did not manage achieve the desired result. Any tips? Thanks! Link to prototype:
2
Mark Johnston
Koen will you be adding "Framer native" backdrop-filter?
3

September 10

Qian Sun
any fellow framers based in Kansas City area?
0
Karol Piwowarczyk
I have a question about copying layer from sketch file to Framer design mode. When I pasted layer to Framer, all dimensions are divided by 2 and editing is not possible. Is it normal action? Thanks for your help!
1
Park Esthet
Hi, I have a question about background blur. I made scroll component and above that, I made a little box. What I want is while scroll component has scrolled a box should blur the scroll component's content. Is there any best way to solve? or hints?
5
Maximilian Bredow
Teaching myself how to add unique values to an array and how to remove specific values from it, I built this little project that I'd like to share. Hope this helps beginners like me when creating interactive prototypes that involve lists (e.g. shopping cart, ToDo lists)
0
Hone Whetstone
Hey guys, My first post in this amazing community of programmers and designers. So I’ve been wanting to get into Framer and harness all the functions and great Prototypes (really envious of all the Framer dribble or Behance posts that I see). This question must be very common, I’m not a programmer, but I really want to excel in Framer and use it to do even unconventional animations that I can’t with other applications. I tried browsing the programming section on the Framer website, bought the book Coffee Script for Framer JS and was looking at buying The Framer book, when I read a post about Framer potentially moving to JS ES6. Personally I’m not sure what I should start learning... Not asking anyone to give details of their future products, but this leaves me uncertain as to what I should do. Should I learn coffeescript now? Or just wait. Absolutely any advise would be greatly appreciated! Thanks for reading!
2
Juheon Lee
Hi, I have a question! I wonder why the reaction area differs from the device and the working environment. :( layerA = new Layer backgroundColor: "28AFFA" size: 250 point: Align.center shadowColor: "rgba(153,153,153,1)" layerA.onTouchMove -> xInLayer = Events.touchEvent(event).clientX - layerA.x yInLayer = Events.touchEvent(event).clientY - layerA.y newHue = Utils.modulate xInLayer, [0,250], [0,360], yes newLightness = Utils.modulate yInLayer, [0,250], [95,0], yes this.backgroundColor = "hsl(#{newHue}, 95, #{newLightness})"
3
Laürici Dumitru
I've noticed that every time I drop a image asset into the design side it gets automatically put in the /images/design folder in multiple forms. The problem is that over time I replace a lot of the assets and this folder gets more and more busy. Is there a way to clean this up from assets that are not used anymore in the prototype?
3
Nitish Hooda
Hi, I am having an issue while launching Framer. It seems to be crashing every time I try to launch it. Initially, it crashed while coding a prototype and is crashing every time I launch it since. Would be great if somebody could help me with this. Thanks in advance!
2

September 11

Nick Inzucchi
Hey all! Does anyone know the correct syntax for attaching animation options to a FlowComponent? Feeling like a total failure. I've tried... --- flow = new FlowComponent ({curve: Bezier(0.25, 0.1, 0.25, 1), time: 5}) --- flow = new FlowComponent (options: {curve: Bezier(0.25, 0.1, 0.25, 1), time: 5}) --- flow = new FlowComponent curve: Bezier(0.25, 0.1, 0.25, 1) time: 5 --- flow = new FlowComponent options: curve: Bezier(0.25, 0.1, 0.25, 1) time: 5 --- Would greatly appreciate an example to copy + paste here. Even better if we could include one in the docs. Thanks! 👋 Trevor George
2
Jen Wibs
is there a way to have a flow component overlay dismiss automatically (versus onClick). Some more details: trying to simulate standard in app feedback confirmation when a user completes an action. I.E. You reported this item. Thanks!
6
Jen Wibs
hi friends, another question! is it possible to override the showOverlayTop/Bottom/etc. x and y positions to create a custom one? thanks :)
1
Antonija Mimi
I have some questions about importing. I have image, text, symbols. When I import to Framer I see only groups, no text, no images no symbols. Is this some bug or I should manage my Sketch layers differently?
1
Lee Martin
A whole lot of Figma, Framer, and Foo Fighters in my life these days. https://framer.cloud/wwmHp
0
Stan Tan
Im not sure if this has been posted before, but a quite comprehensive guide to how to use Lottie on Framer -
1
Henrique Gusso
Came to work at a café this morning and found out the Wi-Fi doesn't allow devices to be seen across the network, so no Framer Preview. ‍ Ad hoc between Mac and iPhone works of course, but then no internet on Mac. ‍ And then magic happened. Turns out if you connect your iOS device by cable to your Mac, enable Personal Hotspot and then make sure "iPhone USB" comes after Wi-Fi on your Mac network interfaces list, you get *the best Framer Preview experience you ever had*. ‍ Both devices connect to the public Wi-Fi internet, but can still see each other through the USB network they have between themselves. Which means seriously stupidly fast refreshes. 📲
8
Christopher Davis
I'm looking for a way to click on an input field to expose they keyboard and enable me to enter text. I'm struggling to figure this one out... How can I enter text into an input field?
3

September 12

Sergi Bosch
I'm looking to achieve the following: start an animation after the flow component has finished it's transition. currently, I have a Back button that onTap -> showPrevious(). When I land on "previous", I want my animation to fire. How can I trigger an event based on the completion of my "previous" screen loading? Currently, I have that animation starting when I tap the Back button...but then I have to account for the delay in the screen transition and add that delay to my animation. Not ideal. Is there an event listener or some such that understands "on screen focus", or "on flow component animation complete"? Or a way to fake such a listener? thanks
3
Leonard Burton
I've got a large prototype with a lot of screens and flows. I'm trying to work out some basic optimisations but struggling to find the right information. I have a lot of layers off canvas... is there a relevant performance boost if I make these invisible when off screen?
4
Nathan Wright
Is there any way to change the hostname the framer prototype runs on? Currently runs on 127.0.0.1:8000 but would like to set custom hostname to communicate with an API (need to allow CORS whitelist)
4
Christian Hagel
What is a framer artboard? Is it just a rectangle? Does it have any special events? Specifically I'd like listen to when an artboard comes into view. I'm navigating with the flow component and I've found a way around the issue so now I'm just curious.
3
Tes Mat
I ran into something odd. When you make a custom transition (FlowComponent) the layer that you show, whatever its size, always resizes to the Screen. Or I’m a missing something? Prototype: https://framer.cloud/TLlPm
2
Antonija Mimi
I have Macbook Pro (the latest version with USB ports) and only 8GB of RAM and today I had to restart my laptop twice because Framer completely froze the whole system. I've imported 3 screens designed for the web and everything stopped working. Is this problem with 8GB of RAM, or Framer, or file might be just too complex?
2
Marc Ruaix
Hi everyone! I'm working on a page that has 3 different tabs. I have every tab's content on the same artboard in Sketch, so I basically change the layer's opacity when you move from one tab to the other. But the layers have different length, so there's a lot of extra scroll for the short content tabs. How can I "crop" the length of the document when moving through tabs? Thanks!
3
Octavio Ortega
Hi everyone, somebody here knows if there is a way to publish a framer prototype in web without the hand? Best regards!
2
Javier Eduardo Treviño
is there a way to make layer sizes respond the same way positioning responds to different sizes with help of the inspector ? in other words to make font sizes and layer sizes responsive , not only relative position of layers as we see in all the examples
3
Robin Fox
Does anyone have a simple password validation prototype made in framer? I'm trying to test something out, but am unsure how to go about making a simple password validation input. Thanks!
4
Varun Yellina
I was working on a file(using v101) and was saving it religiously every 10 mins. I tried to open a shared framer prototype to learn some new interactions. This caused my previous file(created with v101) to lose all the work done in design mode. I'm unable to recover it. On inspecting the .framer folder, I can see that all the images used in design mode are still there. I spent 6hrs replicating an artboard from sketch using Framer's design mode. All effort is a waste now? Can someone help?
1
JiHoon Lee
Playing with an array. let me show my crazy worm.
0
Jason Sparks
I’m using flowComponent and one of my layers is longer than my screen so the flowComponent has automatically created a vertically scrolling scrollComponent as expected. The question is, how do I access this scroll component? I just want to create an animation when users scroll the screen up or down so need to listen for scroll events?
2
Karol Piwowarczyk
Hi, I have problem with animation in Framer Cloud. Imported elements from Sketch (one artboard) are loading very slowly. For this reason my initial animation is not visible. Can I run animation only after loaded all UI elements (DOM?) Thanks for help!
0

September 13

Leonard Burton
Here's a technical one for you: I have a large prototype which crashes on mobile. Memory issue (presumably) caused by too many layers (definitely) in a certain view. But I want to be able to finish this prototype so it works on mobile for user testing. It seems that the best way to get this to work would be to selectively include the relevant user flows in the DOM at the right time. As it's a prototype I was thinking that after runtime I could remove certain groups from the DOM, store them in a variable and then restore them when needed. I know jQuery has a detach function which seems like it would do what I need but I don't want to use jQuery and am finding it hard to find out how exactly that works. Does anyone have any insight on this, or suggestions on execution? I'll keep plugging away but if someone has prior experience they can share that would be amazing.
3
Selim Imoberdorf
Is there a way to get the «Activation Code» of my monthly subscription from the website? I lost my e-mail with the right code. 😅
2
Kwame Porter Robinson
I'm evaluating several prototyping frameworks and Framer is looking very strong, however I have a need to minimize the amount of time converting a fully functional prototype into a mobile app under something like Meteor or Framework 7. Is anyone aware of best practices or tools that easily convert a Framer project to skeleton Meteor/etc. code? Essentially I'm looking to minimize time spent converting prototyping, similar to Supernova.
3
Bhaskar Ravi
Hey all, wondering if someone could give me a quick bit of help. I'm trying to create a custom flow transition, where one view pushes out the other, similar to Snapchat / Insta. Basically I view A to push out to the right, and view B to slide in, then both views to slide back into place once asked to. Perhaps I'm just having trouble understanding custom transitions, but what am I doing wrong here? Any help is appreciated: transition = layerA: show: x: 0 hide: x: 375 layerB: show: x: 0 hide: x: -375
1
Kenneth Spry
It's not on the correct device, but I thought I'd make some iPhone X inspired stuff. Open an "app" and swipe up from the bottom to return home. I recommend trying it out on desktop. I'm not sure what's wrong with my iOS browsers, but nothing's working right on my phone. I feel like the need for Framer is greater than ever with the emphasis on gestures and more exotic features. I'm so glad that I've invested.
0
Houda Mezni
Hello ! when I tried to put a video on the second page of my application but the video appeared in the whole application
1
Jonas Treub
Hello everyone. Here’s a prototype I made of the iPhone X springboard transition. Click on the Framer app icon then swipe up to return to the springboard. https://framer.cloud/VtQzG/
3
Mic Ky
Hey peeps, i need help! So now i have these autocompletion function and it works… But, if the user typed in (e.g. Rotbarschfilet) and tap on weiter (further). Another screen is following. But the text input wrapper is still there…. But after tapping on weiter it shouldn’t be displaying first, only if the user taps on “weitere Zutaten hinzufügen”…
2
Alan Travis
Has anyone tried integrating something like the dragula.js library into a framer project. As a test/POC I was attempting to replicate a fiddle I found that combined dom_autoscroll and dragula ( https://goo.gl/j1K95F ) My basic setup is as follows main container Layer - child Layer (the green) - ScrollComponent - content - for i in [0..15] new TextLayers with text set to " text: i + '. ' + Utils.randomImage().split('/')[3].split('?')[0]" I was hoping I could simply create a new dragula object and give it the scrollComponent.content as the container of elements. That wasn't working out for me so I tried pushing each "listItem._element" into my dragula object. printing the object shows an array of HTMLDivElement objects... but the dragula features do not work... So... Has anyone tried and succeeded with a similar experiment?
0

September 14

Melisa Masso Navarro
Hi guys noobie here, I'm doing a swipe-able prototype and trying to change the state of an indicator depending on what page you are currently on. I have the following: pageComp.on "1", -> indicator.states.switch("a") pageComp.on "2", -> indicator.states.switch("b") Can someone point me in the right direction to make this work?
1
Karol Piwowarczyk
Hi, I have problem with actually position of layer (y) during scrolling. How can I print actually position of layer when I am scrolling? Now, after scrolling I have only start position. Thanks for your help!
2
Lukas Max
Is it possible to implement GIF Animations instead of mp4 or mov?
2
Patrick Sullivan Burtchaell
If you use Dropbox to quickly host Framer prototypes, you won't be able to do so after October 3, 2016. Dropbox is "discontinuing the ability to render HTML content in-browser via shared links or Public Folder." You'll already know this if you are subscribed to account activity alerts from Dropbox, but I figured I'd pass on the word in case anyone is not. :)
5
Wojciech Dobry
It's definitely not the most advanced prototype in the world but I used Framer to write article about Design History – https://www.toptal.com/designers/ui/button-design-dribbble-timeline
2
Javier Eduardo Treviño
what's your favorite tool for converting your Framer projects into GIF's or videos for embedding? I wanna start doing this for my case studies but haven't found a definite option, any tips?
18
Daniel Alvarez
Hi guys, does anyone can share their experience using Git for Framer projects? Is it needed to implement git-lfs
0
Jon Madison
strategies for preventing multiple fast clicks on a layer making animations go sour. Go!
3
Stephen Crowley
Some people have asked about creating image filters in Framer so I put together a little project anyone can use to experiment with CSS Filter and thought I'd share with the larger group.
0

September 15

Leon Kosters
Hello people! Probably a simple question.. How can I destroy the onMouseOver event by an onClick event? So, once the layer is clicked, the onMouseOver doesn't work anymore.
1
Emmanuel Henri
For those interested in a framer course just so you know I'm working on an update to support the latest version of framer! The current course (on lynda/linkedin learning) has 1 video covering the new gui but the rest of the course still has the GUI prior to framer's big update of late. We're working on changing this and enhancing the course accordingly!
1
Leonard Burton
I'm getting a ton of "Tried to load unavailable font" warning messages in the console for my prototype. 398 to be precise and I want to get it fixed. However, after Googling I can't find any information on what might be wrong. The offending layers are all being made in the design tab and seem to display correctly there. Any ideas?
5
Eelco Lempsink
Blink and you’ll miss it. Framer is now faster than ever before: 2x faster loading, 10x faster editor, and 5x faster preview. Get v💯 — https://framer.com/updates?utm_source=facebook&utm_medium=link&utm_campaign=framer_v100_sept2017#v100
6
Sandor Rozsa
Hey Guys, what are the available filter types in framer? ie. image.blur = 50 ...
4
Adam Amran
Hi guys, have you seen any prototypes with the Material design spinning loader? This is what I mean https://codepen.io/anon/pen/YrXxer I'd like to include this in one of my prototypes, but don't really know how to approach it and couldn't find any examples.
0
Ray Yip
Try adding iPhone X as a custom device in Framer https://gist.github.com/RayPS/0a21af6cf3b0578ffab62c604b5ea6e2
5
Jon Madison
Design dream — autolayout.
1
Francesco Bertocci
Hello! I am looking for Framer experts to come speak at the next Meetup in NYC. If you love Framer and you think you could give an overview, share some tips and possibly any prototype you have created, please pm me! Sketch and Framer
1
Matthew Mang
Is there a way to use a flow component’s overlay without the darkened overlay?
2
Jason Sparks
I'm using layers and textLayers drawn in the design tab like templates, then in code I'm creating multiple layers that copy the attributes of those templates in the design tab as follows: slotTitle = new TextLayer parent: slot text: moviesData[i].details.title fontSize: slotMovieTitleTemplate.fontSize fontFamily: slotMovieTitleTemplate.fontFamily fontWeight: slotMovieTitleTemplate.fontWeight fontStyle: slotMovieTitleTemplate.fontStyle textAlign: slotMovieTitleTemplate.textAlign x: slotMovieTitleTemplate.x y: slotMovieTitleTemplate.y color: slotMovieTitleTemplate.color Note: slotMovieTitleTemplate is the name of the layer in the design tab Is there an easier way of duplicating the layer attributes rather than explicitly setting every one like I am doing above. I know there is the layer.style attribute but this just contains lots and lots of css styling.
2
Jon Madison
Howdy. I've a prototype w/ 3 generated pages of scrollComponents. One is behaving badly on the device. The scrolling is sticky. No momentum. On Chrome and Safari i have butter smooth scroll, but soon as we deploy it to our test devices, scrolling on this particular page is sticky. any ideas on what may cause such a thing? I unfortunately can't share the prototype at this juncture.
1
Jen Wibs
hi! another question. trying to create a custom flow component transition. need a layer to animate underneath another layer and tried to do so in flow.transition but layerB keeps displaying on top. tried setting the index values but that has not been working.
1

September 16

Chris Allen
Question for the expert Framers out there - where do you look for jobs? Trying to figure out the best place to post a job for one of the startups I'm advising (atlasapp.io) where we need not just a killer product designer, but one who's adept at Framer specifically.
2
Bhaskar Ravi
Just a friendly heads up. Weird blur glitch in Framer Beta - Object doesn't render properly when it's being blurred and dragged off screen at the same time. The object, which is a simple circle, gets distorted, enlarged, and pixelated. Picture attached. It does work fine in Safari, so I'm guessing this is an issue contained to Framer!
1
Carlo Cremisi
Hello framers, I am having difficulties in previewing my projects on my Android device. First of all, the App on my Android tablet shows the code of each project available on my Mac, not the name. It is very hard to get to the one I want to open. Secondly, every single project I open throws an error. I thought it was for the complexity so I tried a blank artboard with an oval in the middle. Even this way, the App throws an error. In this case it's "Uncaught SyntaxError: Unexpected token }". Do you have a solution?
0
Marie Schweiz
I wrote a new module for Simple Rick sorry Ripple animations (Since 2014 and 2016 a lot of things changed). Ripple animations are used on android to indicate touch interaction. Published via framermodules - sharing is caring :) https://github.com/MarieSchweiz/Simple-Ripple/ https://framer.cloud/GiKhM
0
JiHoon Lee
Hello :) One of my Academy members would like to make a ticket with Framer. It's very simple and easy. please draw what you want to draw in the canvas and capture it. After that, Just leave a comment with a screenshot. Thank you. https://framer.cloud/IkeYd
0

September 17

Steve Ruiz
It's plenty hacky, but it works: here's my Framer flavored UI Theme, color scheme, and custom CoffeeScript syntax for Sublime Text 3. https://github.com/steveruizok/framer-sublime-text
1
Jason Nelson
Hey all, another scaling issue. I'm running into this weird bug where my objects scaled above 1 get this pixelated/blurry look in Safari. I don't have this issue with Chrome. (See picture). It does this for vector based assets (fonts, SVG files, etc.). Some quick googling leads me to believe this is a Safari-CSS scaling-Webkit bug. Have any of you found a workaround for this or a fix? The attached picture is a screenshots of Safari and Chrome rendering scaled SVGs.
6
Kévin Baës
Hello, With Framer Gradients, is it possible to create a gradient with more than two colors? Like this one: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 6%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 72%,rgba(0,0,0,0) 100%) 🤔
1
Ruben van Gaalen
Hi Framers! I was wondering if I can download the vector files of the icons framer provides in it's design tab? I need it for a static presentation to keep consistent with the icons in my framer design :). Thanks in advance!
2
Jason Sparks
I’m creating a number of layers via a loop. How do I add an onClick event to each layer so clicking on the layer will print the layer name. The following code creates the layers as expected, but when I click on any layer (slot) it outputs the name of the last slot added. Any suggestions? for i in [0..moviesCount] slot = new Layer parent: moviesContent name: moviesData[i].name y: slotYVaule backgroundColor: "transparent" width: movieContent.width height: slotTemplate.height clip: true slot.onClick -> print "slotName is " + slot.name
5
Pavel Laptev
Hello, guys! I wrote a little article how to easily make friends Sketchfab(3D online publisher) and FramerJS. Article — https://medium.com/@PavelLaptev/easy-breezy-interactive-3d-in-framer-with-sketchfab-api-utility-4fe56cd66d90 Prototype — https://framer.cloud/ZoIrj
3
Jon Madison
Quick learning time for me. Why is this fictional prototype crashy on device, and intermittently sticky within Chrome? https://framer.cloud/uhKJc I haven't been able to successfully scroll to the end yet on device. i'll spend some time investigating but wondering who knows offhand what's up. there isn't the same scrolling problem in the Studio.
0

September 18

Jon Madison
More sticky scrolling. https://framer.cloud/GQJHu Why is this sticky and crashy, particularly on-device?
0
Abel Quintero
Apple updated the interface guidelines for iPhone X. Important things to know when prototyping -
4
Stan Tan
Hi guys, I'm facing a small blockage on a page component assignment, where i could not add a padding on the right to my last layer inside the page component. My last layer is sticking to the most right corner of my screen and i wish to add a padding on it, or is there any alternative on making my this.layer focusing on the center of the screen every time? :(
3
Wouter Duijts
Hi guys, We're trying to make our prototype a bit more flexible (and hopefully lightweight to use on a test device) but we encounter some issues/challenges. Attached is a part of the prototype where I am creating a new class called Card which is an extension of Layer. That card will be implemented on various pages in an array within a scroll component and the information on the card will be retrieved from an external file. I have two challenges, one of them is a small one (in terms of importance). The small one is that the last 'selected' card in the array will never get a border when clicked. The rest will. What is the reason of this? The bigger challenge is that I want to change a selected card's size and position to fullscreen. It should overlap all the other cards and ignore the scroll behaviour. Can I, and if yes how, change the position and size of the new class Card without putting/loading it in another screen? If have tried to enlarge the background, image and text layers based upon a click on the 'i' icon and that works. But it does not work properly since the items are still locked in the class container. See attached screenshot of how the card will look like in normal state and in expanded state and the prototype so far. https://framer.cloud/zMVTn
2
Hone Whetstone
Hey guys so I had just posted a few weeks ago about just starting out with Framer, to give you a brief background, I've never coded before and am learning as I go, so got a few newbie questions- 1. I understand that I can import my Sketch dartboards into Framer through the CODE Tab. However, I don't know why a few elements seem to be missing or unaligned when I import them. How do I import them into the Design Tab and treat it natively from there and create targets on layers like I have designed the dartboard in Framer design. Having said that, how may of you just use Framer for design and nothing else? I'm keen to know what you think. 2. I mostly found that Auto-Code is a nifty enough feature to do most of the heavy lifting, apart from a little editing. Do I actually have to write code from scratch? How do most of you handle this? 3. Any way of importing or getting the iOS GUI like the status bar and other symbols in Framer? Looking forward to you responses. Cheers, Hone
0
Joe Puddle
Anyone know if there are plans for Zeplin integration with Framer? When handing off specs to developers I often need to include spacing and hex values? cheers
2
Hone Whetstone
Hey guys so I had just posted a few weeks ago about just starting out with Framer, to give you a brief background, I've never coded before and am learning as I go, so got a few newbie questions- 1. I understand that I can import my Sketch dartboards into Framer through the CODE Tab. However, I don't know why a few elements seem to be missing or unaligned when I import them. How do I import them into the Design Tab and treat it natively from there and create targets on layers like I have designed the dartboard in Framer design. Having said that, how may of you just use Framer for design and nothing else? I'm keen to know what you think. 2. I mostly found that Auto-Code is a nifty enough feature to do most of the heavy lifting, apart from a little editing. Do I actually have to write code from scratch? How do most of you handle this? 3. Any way of importing or getting the iOS GUI like the status bar and other symbols in Framer? Looking forward to you responses. Cheers, Hone
1
Mic Ky
Need Help!!! Dont understand why Button_weiter isn't an object. I've coded a layer with a textlabel as superlayer and need an event (onclick) on these Button. :(
9
Arturo Goicochea
Hey guys, Using the Flow component, run into an issue (not sure if I did something wrong). I've added a Layer1 that triggered a scroll component (all good there). Then, added layers (with Layer1 as parent) to serve as hotspots. A click on any of those hotspots does flow.showNext. That works, but what is happening is that it is counting the touch/click done when scrolling as a click, instead of ignoring the click if it was just to drag (scroll). Thoughts? Code: ``` store = new Layer image: 'images/store.jpg' width: 375 height: 1109 framerNotebookLink = new Layer size: 351 point: 12 parent: store backgroundColor: 'blue' backgroundColor: '' fileNotesLink = new Layer size: 351 x: 12, y: 379 parent: store backgroundColor: 'blue' backgroundColor: '' denikNotebookLink = new Layer size: 351 x: 12, y:746 parent: store backgroundColor: 'blue' backgroundColor: '' framerItemPage = new Layer image: 'images/framer-notebook.jpg' width: 375 height: 667 fieldItemPage = new Layer image: 'images/field-notes.jpg' width: 375 height: 667 denikItemPage = new Layer image: 'images/denik-notebook.jpg' width: 375 height: 667 flow = new FlowComponent flow.showNext(store) framerNotebookLink.onClick -> flow.showNext(framerItemPage) fileNotesLink.onClick -> flow.showNext(fieldItemPage) denikNotebookLink.onClick -> flow.showNext(denikItemPage) ```
1
Sergey Voronov
Anyone done joining paper with material in Framer? or more broad question - anyone seen this thing in real app? wonder how its done technically. The only possible solution is having animated svg mask on object, and having shadow on object itself?
3
Darvinder Singh Kochhar
[Incorporating GIFs / MP4s in the prototype and have them loop/play once/play based on a condition] Hey guys! I've read a few comments in the video layer thread but I am not sure how I can play the video for only one cycle. I was also able to import a GIF on an image layer but it keeps playing on loop by default. Here's what I have at the moment: https://framer.cloud/OYZOn Can you guys please help me learn how I can control these better? Thanks!
1
Emily Rautenberg
Hi all! I know there are a number of different ways to make this work, but I was hoping I could get your advice! I'd love to hear different opinions and the pros/cons to all these solutions. In a module, I have a layer that should contain an image corresponding to what argument is passed into the module. Not all of the images are the same size (the height is always the same, the width is variable), but the image should always be positioned on the same X/Y coordinate. I need all of the images to be displayed at their original size. I'm coming from a Unity background of adding these kinds of images to an Atlas and accessing by the image title anywhere. At this point, let's say there are 100 different images, all already built out in Sketch. Should I: - Import from Sketch into App.coffee and pass the layers all the way down to this Module? (this particular module is actually a little buried...it extends a class which extends a class which is created in another, etc.) - Import from Sketch into App.coffee, parent to the Window, and access the window's children from the module? This feels like cheating to me. - Add all of these images to the Design tab, create targets, and access the targets anywhere? - Create a JSON file with each image URL and dimensions, pass that into the module, and fill in the height and width appropriately, etc.? -Since all the images are the same height, just export them all out at the width of the widest image with some transparent space on the side? - Any other of the many many solutions possible that I didn't take the time to write out. Like I said, I'd love to just hear everyone's opinions and experiences dealing with this kind of thing. Thanks :)
0

September 19

Xin Zhong
A Charts Kit for Framer , now just have Bar Graph
2
Nathan Wright
Hey everyone, I'm using the new .template option for text layers and it's working great - except in this case I'm designing a template and using an array and a for loop to copy that template and put it onto the canvas in a flow component. The issue I'm seeing is when applying text using .template for a copied element the template is losing the text styling that I've put on that element in design mode, seems to just be picking the first one and applying that all of them. Any ideas?
0
Anil Kumar Krishnashetty
Summary of yesterday's Introduction to #Framer #design meetup in #Berlin #prototyping #ux
0
Hone Whetstone
Hey guys, might be a silly question. But was wondering how I can draw vector shapes or edit vector shapes in Framer Design. Let's say I want to make a heart, how do I draw it? Cheers for your comments. Hone
1
Jonathan Zazula
Has anyone seen a prototype with a scratch-off implementation?
2
Karan Murthy
Can I post my design for feedback ?
1
Baz Deas
Hey group! What’s the best way to get fonts from TypeKit in Framer? Here’s what I’ve done, but no luck: - Added the typekit embed code into index.html in the framer folder. - Changed the body's font family in framer/styles.css to my TypeKit custom font (“sofia-pro”) - Changed the font family in framer with layer.fontFamily = “sofia-pro" Any ideas?
0
Muhammad Athar
Hi community. Has someone ever experienced an offset on mapbox drag and pan while using on Framer? If someone has experience with mapbox and framer please help me.
8
Márcio Ribeiro
Hey guys, is there a Framer native solution (like directionLock: true for scroll+page comp) when working with a slider inside a page component? Thanks a lot! Example:
1

September 20

Karan Murthy
Hello guys , I was designing an interface and would like a feedback to improve the interaction design . Although this one is static , the high fidelity with prototype coming soon. Thank you all :)
0
Leslie Sultani
Is there a way to add margins to the layers inside a ScrollComponent.content?
1
Kwame Porter Robinson
I'm probably overlooking something extremely obvious, but when following along with the code tutorial at https://framer.com/getstarted/tutorials/, around 43 seconds a `heart` animate layer is added and a State and Animate properties menu slides in. But under Framer v101/9693 that context menu doesn't appear and I'm unable to modify the curve properties via the GUI. Should I expect the video behavior to match the most recent version of Framer? Additionally, when I create an animate layer the console says "Animation: nothing to animate, no animatable properties"
6
Leonard Burton
I want to remove some of the targets I've created in the design view and store them in their own variable so when I need to clone them I can do it from there. Here's the Javascript (found on StackOverflow) I'd use if I was doing similar in a normal environment but of course it doesn't work here. Any suggestions?
2
Emily Rautenberg
Hey everyone! I'm trying to load a bunch of images in a loop, and create layers using the image's original height and width. I'm encountering an issue where I have a synchronous loop but am calling onload inside, which is asynchronous. So, as the loop continues, the image.onload ends up only using the last element of the loop. Simplified, this is pretty much my code: __arr = ["Image1", "Image2", "Image3"] __for i in [0...arr.length] ______img = new Image() ______img.onload = -> __________tagLayer = new Layer ______________name: arr[i] ______________parent: arrayLayer ______________backgroundColor = null ______________opacity: 1 ______________image: img.src ______________width: img.width ______________height: img.height ______img.src = "images/#{arr[i]}.png" And basically, this is the issue: https://stackoverflow.com/questions/38468210/javascript-image-onload-on-multiple-image-only-working-for-the-last-image I'm having a hard time applying these fixes in CoffeeScript/Framer. Does anyone have any suggestions?
1
Yui Rasananda
More newbie question, please help. I have a pause button, and I'd like to trigger it only when the state is on. Here's my code. What did I do wrong?
2
Antonija Mimi
I am trying to do a toggle menu animation. How do I check if state on a certain element is activated?
1
Manas Vaze
Hi Guys, Is there a way to create a PageComponent that goes along a circular path? something like this -
1
Muhammad Athar
As noob as I am, with a request from a fellow group member I am sharing a quick tutorial to set up real time maps using leaflet on Framer. Special credits go to Jacky Lee for pointing out the zoom pan fix here https://www.facebook.com/groups/framerjs/permalink/1251836218276780/.
2
James Butler
Amsterdam based Designers... On Thursday October 12th, Booking.com and Framer are hosting a meetup where we talk about prototyping. Come join us for a night full of talks, Q&A, and networking possibilities (and free 🍻)! Hurry! Limited capacity! https://www.meetup.com/Booking-com-UX-Meetup/events/243446301/
0
Iván Flores
I've been working on this component inspired on the bottom sheet view pattern of Maps (iOS) by Apple. You can nest components and any kind of content. Feedback, bugs and forks are welcome. Now can be used with Framer Modules. https://github.com/NocheVolta/Framer-VerticalPanel
0
Pavel Laptev
About Framer on the official Sketchfab blog. Thanks to Bart Veldhuizen from Sketchfab for this opportunity :-)
0
Kasper Germann Kramme
Hello Framers. Can anyone tell me if it is possible to make a video.layer slowly "rewind" on click.mouseup? It plays on mouse.down.
0
JinJu Jang
Hi everyone! This was inspired by a Japanese arcade game called 'Sound Voltex 3' which was full of geometrical awesomeness - made me really want to recreate something similar! Hope you enjoy too. =) https://framer.cloud/UgLwE/ FYI - I'm giving a fun talk at Melbourne Framer Meetup (27th Sep - Wednesday next week), talking about generative art with Framer, filled with interesting & practical examples! If you can make, don't miss the chance! *cough cough* https://dribbble.com/arle13 <-- More examples :3
25
Erik Lundgren
Does anyone know if the new effects, blend modes etc, are available from framer.js? Or are they only available via the mac app? It would be awesome if the layers could pick up blend modes etc from imported layers from e.g. Figma.
3
Yui Rasananda
Please help! I'm trying to get the footer showing every pages except for Playpage and Record page. Not sure where things go wrong.
5
Justin Fraga
I've been searching the archives for an example of a basic timer (I'm looking to make a countdown timer), and I've come up empty handed. Is this as simple as a for-loop?
3
Jon Madison
Hi Framer. Can we please have updateContent() for Plain Old Layers please? We ended up patching our Layer class to support updating of parent size based on added children.
2

September 21

Adam Mazurick
This is from a previous discussion with Koen Bok and Jonas Treub This is my Wishlist of new features. Please excuse any typos in advance. 1. Export Artboards and Assets like PDF/PNG ect. Yay thank you for putting this on the Roadmap! Seriously actually, that’s pretty epic. I can’t wait for this feature. It will really accelerate our internal work. 2. Expand Visual Design Utilities for 3DUI in Framer GUI for the VR Module. As of today, Framer tries to achieve 3D Interaction Techniques using a 2D Device (My Computer and Phone). Anybody see a disconnect here? Why can’t I put my Phone into a Mobile Head Mounted Display(HMD) and preview my Virtual Environment in the Framer app? I want Framer to handle converting my environment into a StereoScopic preview. Maybe it could help me calibrate parameters that are unique to VR/AR 3DUX and 3DUI design. Is there a way to preview Egocentric vs Exocentric views and toggle between them? Are there opportunities for multi-sensory design to explore here? Hell ya. What about the new Auditory component and using Framer to calibrate and prototype Audio? 3d Interaction takes place in a physical 3D spatial context (i.e. uses 3D spatial input devices), a virtual 3D Spatial context(i.e. a 3D virtual world), or both. Framer can handle the 3D Virtual World context, but there is little else happening with this feature. I basically have to write very complicated modules to support basic things/behaviours. It’s really hard to use framer today to communicate a Virtual environment concept accurately. It’s ridiculously hard to tell a room of stakeholders what your 3D Universe should look like. Get ready to entertain, draw stick figures and use props. For the last two years I’ve been really involved in 3DUI in my HCI Masters and Professional/Company Research. It’ll likely be a huge part of my Doctoral work. I’ve had to leave Framer to prototype interfaces and virtual environments in Unity and C#. Still, Camera set-up and scripting is tricky as heck. Dealing with Vector3s and Quaternions is well…let’s go with ‘time-involved’. It’s cool but sometimes it seems like overkill at times for a prototype that may get tossed. There is a lot more set-up and scripting required to use Unity as a prototyping tool. 3. Handoff Assisted utilities like SuperNova studio to help me communicate/help better with my Agile Dev team. https://supernova.studio http://www.replia.io 4. A code-based Trim Path-type of SVG Feature like in After Effects…but in code. I’d like to be able to set animation parameters for SVGs and define path direction and angle using a visual aid. This can sometimes get tricky using just code and it produces sub-optimal results. I find visual editors help me quickly achieve better results. Go ahead an try to make a wave displacement animation like this one programatically. I double-dare you. It’s challenging. It can be done, however, it’s vastly more efficient to do this in after-effects and use some greensock/lottie…if I could use Framer to achieve certain results that I would ordinarily need AE for…why not? https://www.youtube.com/watch?v=A4tqbUcN_Hs http://www.graymachine.com/after-effects-tutorial-exercise-1-wave-displaced-circle/ 5. Touchbar support. I sufficiently ranted on this.
2
Leonard Burton
With FlowComponent's showPrevious() function is there any way to skip back multiple steps? I have a screen search form screen that I want to show when starting the journey but not when going back through. (It's only needed once then the design accommodates the changing of that information later)
1
Courtney Artuso
Building my first AR prototype in Framer. Any good tips to get started?
7
Kenneth Spry
Why do some of my prototypes work just fine in the simulator and on my desktop's web app but not at all on my phone, neither in the iOS app nor in the web app? Could it have anything to do with using perspective?
4
Olly Watson
I'm trying to make a page index animate as I scroll from page to page... Here's an awesome example from shazam: https://dribbble.com/shots/3523627-New-Shazam-The-Redesign-Navigation Rather than just popping the page index to the next location, it stretches and compresses between them. So cool. I've been trying to make the attributes of the current page index change following the x of the page component using Utils modulate: currentpage = new Layer height: 18 width: 18 borderRadius: 9 x: 295 y: 1200 backgroundColor: "#333" Pages.onScroll -> currentpage.width = Utils.modulate(Pages.x, [0, -187], [18, 42]) No dice. Any idea where I'm going wrong? 🤫🤫🤫🤫🤫
0
Sergey Voronov
I though I have my magic powers back to write new tutorials about design/code components and than I was stuck on the first step:) Any ideas how we can work with dynamic texts and bubbles from design mode? I know how to do it with code, but can't really think about not hacky way of doing it from Design tab?
1
Krijn Rijshouwer
Hey all! It was great to see so much excitement for Framer Effects. Thanks for all the kind words! Here is a simple example we made to highlight the new features. It’s a colourful movie dashboard that gets you your watchlist, recommendations, and more in the blink of an eye. Take a look, and play with the design — https://dribbble.com/shots/3819875-Motion-Dashboard-Framer-Effects
2
Juan J. Ramirez
v71 broke a bunch of prototypes in which I was using Kevyn Arnott iOS Framer Kit. Is there a way to downgrade?
7
Jason Sparks
Is there an easy way to limit how far you can drag a scrollComponent?
1
Houda Mezni
Hi. I would like to pause the audio after user clicks the close button on top right of the screen. Do you have any idea what to put in the part closeA.onClick -> We are using the regular audio plug-in from Benjamin den Boer. Thank you very much for your help!
0
Farrukh Karimov
Hey Guys! I'm trying to create a PageComponent using the following code: page = new PageComponent scrollVertical: false contentInset: right: 20 width: Screen.width height: Screen.height # Add cards to page component cardA.parent = page.content cardA.x = 20 cardB.parent = page.content cardB.x = cardA.maxX + 20 cardC.parent = page.content cardC.x = cardB.maxX + 20 cardD.parent = page.content cardD.x = cardC.maxX + 20 page.updateContent() The problem is that this creates is the whole screen as pagable(is that even a real word?). So I tried set the h: 500px and w: 374px, which is the card of each card. Then I set the x: 20 and y: 124, which is the position of the card. But now the problem is that the cards start of at x: 40 and y: 248 and when I click the card, it jumps up to the correct position it should be in. Any ideas? Thank you in advance!
1
Jeff Janes
Hey all! Any way to "pin" an object/target with an x or y value? I'm trying to find a way to make my menu bar (one image) stay pinned at the bottom of the screen as I scroll, and not sure the best way to go about it. I was thinking something like... Menu_Bar.y.toFixed -> y: *insert value here* ...would make it stay in place, but not the fixed positioning I thought it was. Any help would be greatly appreciated! :)
3
Adam Mazurick
Jordan Robert Dobson it’s really not perfect but we 1. Modified gk3’s base and 2. Inverted his getUserMedia to access the rear camera. 3. We used a combination of a scripted prototype and some early weird python experiments that I studied using the Python Image Library. This is my cat with Biggie.
9
Jon Brennan
Hey all - trying to get started with some Web Audio API stuff, and having issues just getting the initial AudioContext interface setup. Creating a new webkitAudioContext works...but it just returns null. So then I can't create an Analyser (or do anything else with it). Swapping out webkitAudioContext with just "AudioContext" or "webAudioContext" throws a reference error, so I know that webkitAudioContext is the correct syntax...am I missing something else? (I was referencing this blog post from last year: https://blog.framer.com/visualizing-sound-with-framer-b1d834131c22, but even copy-pasting that code doesn't work.)
1

September 22

Mari Ettlinger
I don't know any code. The gap in my work flow right now is when I hand over my Sketch files to my front end developer, all the design looks off when he codes it. Even though he knows Sketch, and works off my working files, its still off. Is there a tool that will convert all my elements/layers perfectly so Roboto Medium doesnt look like Roboto Bold for example? I know in code the numbers are differnt--400, 500. How can I fix this gap with him and all front end developers? I have looked into Framer and it seems its not like Principal where you can make hotspots that turn into prototypes. In Framer, at last in your tutorials, it seems you need to know how to write a line of code. Any suggestions are helpful!
12
David Sinclair
Is anyone using the Framer Joystick? module?
2
Grant Garrett
Anyone know why Chrome leaves me with blurry images/text when viewing the prototype in the browser? Safari leaves things nice and crisp. (macOS Sierra 10.12.6) (Prototype is not mine: https://dribbble.com/shots/3822625-Swipe-to-call-concept)
2
B Boa Min
Hi guys! Is there a meetup in Singapore as well? If so, how do I find the information about it? Thanks in advance :)
1
Tsabita Vera Cyavrilla
Hi guys, anyone knows on how to set the bottom padding for the layer in showOverlayBottom? I'm completely new to Framer here :') Thanks!
0
Nik Udovitskiy
Hey Guys, Can someone please help me with the "List Sorting" example that is made available by Benjamin Den Boar on the Framer website? Found here: http://framer.com/examples/preview/#list-sorting.framer#code I didn't think that copy+paste into a new/empty Framer file would render the code incompatible. I've spent a week trying to get it to work with no avail. Thanks guys, and thank you Benjamin for the example!
5
Maximilian Bredow
Where is the best place for feature requests - here? I have 2 that would mainly help me quickly understanding existing projects: 1. Improved Tabbed Framer Projects: I am frequently switching between several projects and at least on the new MacBook Pro cycling through these with the shortcut (Cmd + `) is super annoying. I found out I can enable "Show Tab Bar" but when I open an existing project, it still opens a new window and I need to manually drag&drop the project into the old window. When I press on the + on the right side of the tabs, it opens a new project and does not offer me to add an existing project to the tab bar --> Solution could look like in Photoshop, Chrome, etc. 2. Expand/Collapse Folders/SuperLayers: Having had a look and trying to understand your latest v102 examples (e.g.Motion Movie Dashboard), I had to scroll quite a bit until I understood which layers are e.g. content1, content2, content3, etc.. Would be great if I could collapse some for a better overview! --> Solution could look like in Photoshop or Sketch
1
Sam Kilbey
Hi, I am new to Framer. I want to do something that is incredibly simple but I cannot work it out. All I need to do is after a click instantly show the next screen. I have tried using a flow component and it does a transition but I simply want no transition just to instantly show the next slide. Can anybody help? Thanks!
2
Ishaan Kolluri
Hey, I'm brand new to Framer! Working in Sketch and have around 13 screens. When I attempt to import my Sketch file into Framer, the progress bar loads and freezes both Framer and Sketch. Does this have something to do with my naming schema, or my versions for both applications? Thanks!
3
Sergey Voronov
I hope information on how to create reusable components from Design mode in Framer will be useful to someone:) https://medium.com/@mamezito/reusable-components-from-design-mode-in-framer-6fce6bf4bcdd
1
Andre Balaz
Is it just me or is the Clip property suddenly gone? Has masking changed?
4
Vic Hsieh
Hi everyone! I got super excited after reading George Kedenburg III's tweet about iOS 11. Decided to make a module and share it for those who might be interested! Please note that I've only tested on iOS 11 Framer Preview (Safari included Media Capture support). The module can capture both photo and video now! Let me know if you need any assistance with setting up. Will also be working on compatibility in coming days! https://framer.cloud/drfQM https://github.com/anubisvic/framer-camera-input
5
Blaine Billingsley
I needed an autogrowing textarea so I took a stab at making my first module. Check it out! Would love to hear if anybody likes it/wants better features. It's pretty stripped down now but I'd be happy to improve if people like it! EDIT: Minor bug already found use this link -> http://share.framerjs.com/fg5l0g9h67i1/
8

September 23

Koen Bok
Hey Framer people, I often get asked if people can post jobs / talent in the community, but I don't want to mix it up. So I started a curated design talent list to help connect designers to the best jobs that I hear about. Feel free to join, or let me know if you're looking for opportunities / talent. No ads. No recruiters. Just some bias towards great interactive design.
10
Marie Schweiz
Wrote a summary for everyone who wants to enjoy framers design tool and build material Interaction for android. Medium level knowledge required but maybe a few tricks are useful to someone. Its a good workflow and how i can keep the ideas of Google Design in the loop while playing with new Elements or patterns.
5
Andrew Liebchen
Hey cool kids, made a repeatable style module. It's dead simple but I hope it helps! Let me know what you think...
2
Alvaro Lourenço
How to capture events for 'animation progress' in Framer?
0
Tommy Sundström
I have a class that extends Layer. But, how do I add a function to onTap, so that instances of the class will have it? A simplified version of my code, below. Apparently, my onTap is in the wrong place/done the wrong way. (Nothing happens if I click on layer_2.) layer_1 = new Layer layer_1.onTap (event, layer) -> print "Tap on layer_1" class Taptest extends Layer constructor: (options) -> super(options) @x = Align.right @onTap = (event, layer) -> print "Tap layer_2 – defined inside class" layer_2 = new Taptest
2

September 24

Jason Sparks
I am creating a scrollComponent using ScrollComponent.wrap(cast), where cast is a layer that I wish to be horizontally scrollable on an already vertically scrollable layer (think of the iMDB phone app and the scrollable cast section in that). castScroll = ScrollComponent.wrap(cast) castScroll.scrollVertical = false castScroll.content.clip = false castScroll.directionLock = true castScroll.contentInset = left: 10 cast.height is 245, but the created scrollComponent (castScroll) is being created with a height of 19 and I have no idea why this is happening. Sure I can change castScroll.height to equal cast.height but curious if there is a known bug with ScrollComponent.wrap(layer)?
1

September 25

Nathan Wright
Hi people!! This is my first daily UX & UI. I'm a UX designer but trying to improve my UI skills as well. Created using Framer, feedback welcome!
2
Jonas Treub
Hi all! I'm super excited to introduce Framer Effects — a bundle of features that allows for hundreds of new styling variations in Design. Some of our favorite new additions include: • Multiple Shadows • Layer Blur • Blending Modes • Photo Filters But it wouldn’t be Framer without an interactive twist, so all of these properties are also animatable in Code. With this release, we’ve added all the functionality we’d want in a day-to-day visual design tool, so check out Framer Design for your project today — https://framer.com/r/facebook/group/framer_effects_sep2017
22
Michał Jarosz
What do you use to record screen instead of QuickTime screen record?
22
Henrique Gusso
I know we've seen this prototyped and discussed extensively here, but I felt there was still room for organising the ideas behind animating a circular path in writing. So there you go, a Medium post about creating a circular progress bar in Framer. Thanks to many of you for all the investigation that led to the techniques we're all using today.
10
Hu Rong
hi there, I am quite fresh to the framer and encountered a problem: two art boards was created and used flowComponent to control the homepage jumping to detail page. I added a scrollComponent on detail page, but the property of contentInset didn't work. The scrollcontent supposed to have some space between header. Here is the link:
2
Sandor Rozsa
Guys, I am searching for a framer.js wizzard who can help us to build some plugins (JSON related stuff). Please PM me if you are interested. Thanks!
0
Mic Ky
Hey framers, even if the position of the fonts is defined and are arranged one below the other, it's completely broken. why 😫??? Thanks for help!!!
0
Sergio Zn
Hi, I am new to framer and I am trying to create an interactive form - prototype similar to " Typeform".I wonder if anyone has created similar thing using framer. Thank you
4
Justin Sias
This may be a coffeescript question but can anyone tell me why this code would give me a warning of "unexpected if" createNewNavItem = (icon, onIcon, activeIcon, isOn) -> icon.onClick -> if isOn #do somethin not getting the right formatting. is this the right place to ask this type of question?
5
Sean Dekkers
Does anyone know how to rename animation layers? I can't seem to find it's name property. Renaming it in __framerInstanceInfo doesn't seem to work with JS when uploaded.
0
Jean-Francois Hector
Hello everyone, has anyone done remove usability testing with Framer, using usertesting.com or equivalent? Re usertesting.com, I'm imagining that the Framer prototype would have to be wrapped into a iOS build using Cordova, because if the prototype is viewed as a website, it'd be seen user testing in-app browser and hence wouldn't display appropriately (search bar, etc.).
5

September 26

John Marstall
New NavbarComponent module allows you to generate an iOS-style navigation bar with title, action buttons, and search bar. Scroll effects mimic those on iOS, and views can be navigated forward and reverse. https://github.com/bpxl-labs/NavbarComponent
2
Will Clark
Two questions for everyone: 1. How do folks share prototypes with others in your company. We were using Invision previous to switching to Framer, but they don't support Framer.js prototypes (if you use Invision and want them to support Framer.js, email them please :). Dropbox doesn't seem to serve up HTML anymore. Other options? 2. Is it possible to reuse the same imported Sketch element over and over? I can't seem to figure out how to "duplicate" it to use multiple instances.
27
Antonija Mimi
I have been experiencing some heavy performance issues with Framer today. For importing 2-3 artboards from Sketch I have to wait 30 secs and then another 10 minutes my MacBook Pro is completely unusable. I have the latest update, it says I have almost 2 gigs of RAM available. I assume this is not normal.
2
Daniel Marqusee
hey everyone, I’m a noob. I am trying to figure out to animate individual elements when the user pages. I have all of my elements in a loop and would like to be able to animate each layer individually. If someone could help i would be ever grateful.
0
Aaron Root
Has anyone had experience using open type features in framer? I would like to change my numbers from proportional to tabular. Thanks!
2
Giles Perry
Having a bit of trouble previewing TextLayers on mobile when I use a custom web font (.woff file). I'm loading a CSS file with the @font-face definition using Utils.insertCSS. The problem seems to be that on the Framer Preview iOS app or when viewed on mobile Safari, the font is loaded in time so Framer appears to calculate the width of the TextLayer based on a default font. Once the font is loaded the text updates but the width isn't recalculated. This causes the text in the layer to wrap onto two lines. According to the release notes for v97 "TextLayers update when a font finishes loading". This doesn't appear to be working as expected. Is there a way to listen for when the fonts are loaded? I've tried this but it doesn't seen to do anything: document.onreadystatechange = (event) -> There's a Utils.isFontFamilyLoaded function but I can't figure out how to use this in an event listener.
5
Mustafa Ali Akbar
Hello guys, I am trying to make vertical scrolling work with horizontal swiping through pages. I initially tried to use the FlowComponent, but figured PageComponent would be easier because it automatically handles the swiping. But I've run into two problems since using ScrollComponent and PageComponent together. 1. If I scroll on one page, the other pages also scroll down for some reason. How do I stop it from doing that, or should I use something other than PageComponent to avoid that? 2. I have 3 screens which I'm working on, imported from sketch. First 2 screens have the same size, the last one is a bit smaller in height. The problem is that if I try to scroll down on the last screen, it just moves back to second screen right after I stop dragging the mouse. I noticed that this doesn't happen anymore if I make the size of last artboard same as others in Sketch. But this means that user has to scroll on blank area until they reach the end. Here is the prototype, it is not the actual project because I can't share it, my absolute apologies for that. https://framer.cloud/gcOkk I'm still new to Framer, it's been only a few days since I've started using it, so any help would be appreciated, thanks.
3
Patryk Adaś
hello, looking for an 'one - armed bandit' effect for text in framer - basically text spinning up and down until it 'locks' to particular value. Any ideas how to tackle that?
2
Sergi Bosch
Using a loop, I've added some layers. However, I can't target those layers. Can anyone explain how I can acces layer1...3? Here's the code: names = ["Mary", "Steve", "Anne"] for i in [0...3] rows = new Layer html: names[i] y: 45 * i height: 44 name: "layer" + (i+1) ####not able to hit layer3, why?#### layer3.style = background: "blue"
4
Joe Martins
Hi everyone! Sorry for the rookie question.. But why this does not work? How is the proper way to get a layer's state? Thanks :)
0
Chris Keith
Hey hey. So I used some for loops to make a bunch of layers and another for an equal amount of navigation items. I'm trying to get the buttons to pull up the corresponding layer and i know i'm doing something wrong with the flow component but i have no idea how to fix it.
0
Mariusz Dziechciaronek
Hello guys, I would like to scroll up my page to chosen layer while native keyboard is open on native device. Unfortunately I can't use scrollComp because I've already used flowComp and they're in conflict (I'm not able to use both Comps at the same design). Any ideas?
0
Denis Lesak
Anyone else experience a strange purplish hue during color transitions?
1

September 27

Jithesh Ramesh
Hi wonderful Framer gurus, hope you are all having a wonderful time. I am struggling to create a prototype for long pressed state to show an in place menu where the user tapped. Any tips,suggestions?
0
Tim Roth
Hi Guys, looking for a way to draw a line in Framer. I found an old module, but that does not work with the current Framer. Any Ideas? For a quick prototype, I would like to use three vertical slider to mimic a kind of equalizer: - Between the slider knobs i would like to draw a line to connect them ( preferably with bezier smoothing) Any help or tips greatly appreciated!
12
Jithesh Ramesh
I am trying to add a layer on the tapped position, works alright on browser on desktop. Puts the layer in the top corner of the screen in Framer Preview and Safari on mobile. Any ideas?
2
Nathan Wright
Are there anyone augmented reality modules for framer? Or even camera modules? Wanting to make a prototype that uses input from the device's camera - I need to capture the image and send it to google cloud's OCR API and return the response into the prototype. The AR comes into it to assist the user in taking the photo in a clear way.
2
Jesse Brack
Hey all, has anyone experienced click/touch event fickleness inside a scroll component when testing on an actual device (in my case a Galaxy S5)? Specifically, when you have a conditional that prevents things from happening when scrolling is active to prevent unwanted actions when someone is scrolling with their finger but unfortunately the scroll event almost always fires whenever you tap the screen which makes click/touch events not reliable in this scenario. Even the demo example http://framer.com/examples/preview/#scroll-n-click.framer has problems registering a click/touch event on a real device.
5
Alexandru Raduca
Hi guys, Does anyone know the syntax of Layer.selectChild and its variations (like selectAll) ? There was an internet article listing all of the methods but I can't find it now. Would be nice to have them included in the Framer Docs Thanks
1
Walter Fantauzzi
Hi Guys, Are there a way to access to camera for make a mock-up prototype?
8

September 28

Amelia Liarakos
So I've been working on a desktop website prototype where I have animations trigger after a certain scroll point on the page. So when scroll.scrollY > 1200, I have animations trigger. I also have when scroll.scrollY > 4000, I have a different set of animations trigger. I'm having 2 problems. 1) The first section animations I'm triggering are over 6 items that have a slight delay based on layer index. So the first one starts at t=0s, the second at t=0.3s, etc. The issue I'm getting is elements 2-6 are stuttering to finish the animation. What I think is happening is the scroll event listener keeps triggering the animation above 1200 but because those elements haven't finished animating, it keeps trying to retrigger the animation creating this stuttering. (If I stop scrolling the animations finish.) I've tried setting it to a value (like scroll.scrollY == 1200) but it sometimes doesn't trigger if you scroll too fast. I've also tried stopping the scroll listener after the animation is triggered. This fixes it but I'm unable to trigger the other scroll event listener after that (see the #2). Is there a better way to handle this? I can't seem to figure it out and it's driving me crazy. 2) The second scroll event listener doesn't trigger at all. Can you listen for multiple scroll points and have them trigger different animations? Thoughts? Has anyone done something similar? Thank you in advance!
4
Caroline Craddock
Hi guys, I would really appreciate some help. I'm struggling to understand why my 2 interactions (tapping on the 1st and 2nd tile) are conflicting. Now I can only tap the 2nd tile and it animates. Here's a link to the Framer files: https://www.dropbox.com/sh/luq5oeuzzxhsdxg/AABNb3aWm0H2aBwf-h46_x5Za?dl=0 Thanks in advance 😊
1
Antonio Krämer Fernandez
Hey guys! I have trouble using mapbox in framer … when I'm pinching the map to rotate / zoom on a mobile device (ipad pro, pixel) it has a weird offset … the map doesn't rotate around the center of the pinch. (Example: https://www.mapbox.com/help/mobile-framer/) https://framer.cloud/RFzRV I found an example of Patryk Adaś where the issue doesn't occur, but i can't find the difference. https://framer.cloud/JqqON/2 Can someone reproduce the issue and knows how to fix it?
1
Leslie Sultani
Is it possible to set up a framer prototype in gh pages?
1
Chris Camargo
Let's say you've got a screen with a bunch of layers you want to transition out. How would you go about creating an iris transition, like you'd see at the end of a classic cartoon?
6
Jaco Otto
Hi, I was wondering if anyone has any example code of how to change the Selected state of an item consisting of multiple layers in an array. I'm working on a TV prototype, and want to use an array. When you change the selected item the image needs to get an outline, the text needs to change colour and the text block changes colour too. I found an example of how to change 1 layer's property in an array, but I'm stuck trying to change multiple layers. This is what I have at the moment, it's very much work in progress. https://framer.cloud/eWFGF (you use keyboard arrows to navigate)
6
Kasper Andersen
Hey 👋 I have these buttons in an array, with a state. When I click a button, I want it to change all the other buttons in the array to their default stay. So only one can be in it's active state at the time. Is there a way to do this?
2
Chris Keith
I've got a question about SVG alignments. I've been copying the svg code and implementing it in the html portion of a layer but it always renders in a weird position relative to the layer it's in. I've tried editing the number for the viewbox and other parts in the html but it just cuts off parts of the asset. Is there a way to get some level of consistency when rendering the position of these? What looks aligned for iphone 5 and 7 views becomes misaligned when i switch to the plus.
1
Lukas Guschlbauer
I found a bug with shadows in v102! It seems like the settings of shadows can't be animated anymore and return wrong values in code. Try opening this prototype first in v101 and then in v102 and you'll see the bug:
6
Chris Bindloss
Does anybody know why the Cells in this snippet would move into place as intended but without the animation? The "CellActive" layer animates fine
0
Sergey Voronov
I know I am spoiling the party, but this is really strange to me. If I create the layer in code, it's not visible in design mode. Also if I import something from sketch for example, I can't just go to design mode and add text layers that I need.
8
Alexander Malakhov
Hi friends, Is it possible to create a layer with sectors that looks like this in framer (It is very necessary for me to use decades separately)? (without importing this shape/layer from sketch etc) Thanks!
2

September 29

Giles Perry
I've noticed that scroll.contentInset does not affect the size of scroll.content. Normally you'd have content that is bigger than the scroll area, but when you don't I'd expect the layers to bounce back to their initial position when you stop scrolling. With no inset that's exactly what happens, but with an inset the content scrolls by the inset amount. I can't use contentInset in this case. Anyone else find this annoying?
1
Rishabh Bhardwaj
Hello Framer Community! I have a question. I have a Sketch file with my designs for mobile screens. All the designs are made as groups. Instead of different artboards as different screens, I have different groups in a single artboard. I want to know how I can take all these screens/groups in Framer and add interactions for buttons, screens flows etc. I found that I can import Sketch files in the 'Code' area in Framer, but how do I manage all the screens if they exists as groups in my Sketch file. It will be great if there is a video/blog tutorial where it has been shown how to take multiple designs/screens from Sketch and build out all interactions in Framer. Thanks a lot. I am new to Framer, and I am pretty excited about learning how I can leverage the most of Sketch + Framer. :)
0
Michael Dorian Bach
Is it possible to override the default animation curve and time options for all layers globally so it doesn't have to be define in states and .animate? I believe the default is 1 second and a linear curve when not defined.
1
David Bjørn Bograd
hi all! 👋 I'm working on a prototype and using print "test" to print. No matter what I do nothing shows in the console. Did anyone try something like this before?
1
Nitish Hooda
Hello Framer Community! I am having an issue with importing sketch artboard with masks. Some of the content I want to target with Framer extends outside the artboard size and is not very easy to crop. I use a mask to hide the overflow content and keep it to the artboard size, but when I import it in Framer, none of the Groups and Layers are visible. Anybody knows a workaround that may help? Thanks!
0
Riley Hollobaugh
Is there a way to turn off the point based text sizing? My fonts are the correct size on my laptop, but when I use my dell monitor the text becomes super small. It's made the tool a bit unreliable.
1
Sam Kilbey
Hi, I am very new to Framer and am having a problem that should be extremely easy to fix. I have 2 layers that I coded instead of using the design view (see picture). All I want to do is have the background layer showing and then for the second one to slide up from the bottom of the screen but I can't get it to work? I have tried using a flow component but that didn't work (I assume that its because the layer isn't in design mode) Preferably I do not want to touch the design tab. Cheers!
0
Greg Soper
Hey you all! Jumping into this community my first project: A completely silly and useless little computer buddy! Just one button! That's it! (Hope you can tell that I had fun with it!)
3
Eric Chao
Hey framer folks. I need to distribute a framer prototype onto a few iOS devices for testing and i'm trying to find the best way to do so. Is there a way for someone who has the Framer iOS app to save and run a prototype link from there so they don't have to test it from Safari with the bottom 10% of pixels pushed out of frame? Worth noting that the recipients are all remote so we can't use the 'download from wifi' feature. Thanks!
2
Chris Keith
Is anyone else experiencing an issue with fonts rendering softly in prototypes? Specifically when the opacity is less than 1? I had done a work around where I scaled the text layer by 50% then just used double values and that helped the sharpness but then the placement of the layer gets all screwey. Is there any other magical way to keep text looking tight?
2
Tiffany Kosa
How do I specify a component from design to scroll horizontally? I get how to make it by scratch.
3

September 30

Rob Nero
Is anyone else having problems connecting the Framer for iOS app, to the Framer for Mac app? I'm on the same wifi network and no projects get listed. Compared to Sketch, the mirroring for Framer is too complicated to be useful.
5
Nils Helmersson
Hi all! I'm looking for some help regarding resting x and y positions. Want I want to do is onTapStart center the item and onTapEnd reset the position. Link:
1
O'Ryan McEntire
Since the update that converts everything from pixels to points we've been having trouble with the scaling in framer. We are prototyping web stuff. Not apps. So points make absolutely no sense. Our stuff needs to scale to fit any device, however. We used to use a simple ratio calculation to scale assets as needed. Now that doesn't work correctly because framer uses Points for somethings and Pixels for others. With the new update all of our pixel dimensions get converted to points and everything blows up 2x, 3x, or 4x. Is there a way to turn this off? Or at least force everything to just take the pixel values that I give it and not do some conversion? Framer is a web based prototyping tool, the use of points on the web makes no sense to me...
9
JinJu Jang
Hi Everyone! This is a short prototype I used for Melbourne framer meet up to explain how Trigonometry works in Framer. Hope you enjoy as well:) If you want to learn more about it — check out the slides as well! https://www.slideshare.net/jinjujang/generative-art-math-geometry-with-framer
5

Monthly archives

2017

2016

2015

2014

2013