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

What is Framer? Join the Community
Return to index

October 2016

October 01

JL Flores Mena
The new update made me lost a few hours this morning, here are my two lessons learned, hope it helps others: - "on" is a reserved word and cannot be used for states. I have a lot of modules where I used "on" as a name. - This is a tricky one: states.current no longer returns a string, but an object of all attributes of the state. That means now you need to use states.current.name Maybe I didn't read the update notes, but the documentation hasn't been updated. The change in states was a big one though.
4
Matt Marriotti
Is there a good way to make a multiple screen prototype in Framer? I tend to see a lot of single screen transitions, but what if i wanted to make a simple multipage flow? Is there a good way to view/build the deeper screens, without having to run the prototype & see a click event play out?
7
Márcio Ribeiro
Is there a property to change the scroll speed when you use mouse wheel enabled = true? I've tried scroll.speed but it seems it only works with the "Framer's default scroll", and this appears to work like a draggable thing, not a browser's scroll. So you have to click & drag to scroll, and this is not the way we scroll on a desktop browser. I can resolve this using a parallax effect on the scroll's content, but I was wondering if there is a better and fast solution. Thanks guys!
4
Wonyong Choi
Hello~ Framers. I would like to share this personal work in progress. This is a contents curation service prototype. It' is a simple page interaction. (and there are some Bugs. ^^;;) If possible, I will develop full scenario and share again. please enjoy it. Thanks. ^____^ *Notice It's only working correctly on the iPhone6 & 6 Plus. (Did not optimization another device.) Framer link http://share.framerjs.com/npkywg6sjvy9/
2
Matthew Blode
Hey guys, I have made an interactive To-do list inspired by Benjamin den Boer & Koen Bok's list sorting. Does anyone know how I could make it scrollable and draggable? Thanks :)
3
Jorn van Dijk
You might have missed it yesterday, but the release also added Apple’s iPhone 7, iPhone 7+, Watch 2 and Watch Nike. Thanks to the Facebook Design Team for putting these together. Jet Black looks so badass.
2
Niels van Hoorn
Hey everyone, We’ve been working on a new API for handling states and animations, and we love for you to try it out! It will be automatically available in new projects created with the latest beta. This is how you define a state animation in the new API: layer = new Layer layer.states.a = x: 200 layer.animate “a” You can find all the changes listed here: https://github.com/koenbok/Framer/pull/420 The old API should keep working, but please try to upgrade some old projects to see if we haven’t missed anything. To do so, choose “Update Framer Library” from the File menu. Beware that there are two breaking changes, so be sure to update that in your code after you upgrade your project.: layer.states.current has been renamed to layer.states.current.name layer.states.previous has been renamed to layer.states.previous.name
8
Koen Bok
This is a fantastic article on art and artificial intelligence. There is some technical stuff in there, but easy to follow. If you were planning to start thinking about AI opportunities in design (like we are), this is a very good place to start. http://medium.com/artists-and-machine-intelligence/a-journey-through-multiple-dimensions-and-transformations-in-space-the-final-frontier-d8435d81ca51#.ic305xmgy
5
Sune Matras
Hi ! I'm trying to fake a dynamic back button that "remembers the browser history", I'm trying to use an if/else statement on the button. There's only 3 screens (home, list, and detail): - When user goes to the detail screen by selecting the shortcut on the home screen, the back button should take user back to home screen. - When user goes to the detail screen by selecting 'View list' on the home screen and then tapping the first item on the list screen, the back button should take user back to the list screen. I'm using a state on the home screen (home_on) to set the if/else condition. My if/else statement looks like this but it's not working :( [BUTTON TAP START] BTN_back.onTapStart -> BTN_back.states.switch("down") [BUTTON TAP END — IF/ELSE] BTN_back.onTapEnd -> if list.states = "home_on" [GO TO HOME] detail.states.switch("detail_off") home.states.switch("home_on") BTN_back.states.switch("default") [GO TO LIST] else detail.states.switch("detail_off") home.states.switch("home_off") list.states.switch("list_on") BTN_back.states.switch("default") The error I'm getting is "Unexpected if". In this example it only goes to home screen —> http://share.framerjs.com/cg3z4npjkpsf/ How is it possible to create this "browser history" on the back button?
2

October 02

Geunbae Lee
Hi everyone, How do you embed a shared Framer product into your html? I'm trying to put it in my website so that people can come and try them out without having to press on the link. Thanks
1
Christina Zou
Hey guys. I built a video player in Framer. If I share the link on FB, the preview thumbnail shows a blank grey screen (attached). If I open the link, the thumbnail for the video is there. I think the clickthrough rate on my FB post would be much higher if the video thumbnail were there instead of the grey screen. Is there anything I can do? (link: http://share.framerjs.com/h7j8wrcx4ro9/)
1
Matthew Blode
Hey Framer friends, I have attempted to recreate the Apple Watch home screen scroll interaction. I used Pythagoras' theorem to calculate the distance from the centre on the drag and then scale each element accordingly. I'd love to know if someone has an improved method that is less intensive for a larger grid. Thanks so much for your feedback :)
2
Igor Shepel
Hey Framers, It can be such an issue to get the slider to rewind the video or control the volume. So I've created a player where you can use the whole screen as a slider: https://dribbble.com/shots/2987640-Video-Player-for-Mobile. What do you think?
3
Victor Arellano
Hey! I'm having issues wrapping my head around a function. I have 3 slides and when I click on them I want to animate 3 different images off screen 1 by 1. I created a loop for the triggers and animated them offscreen on click events. I want these same triggers to animate the images offscreen at the same time. I don't want to have to repeat states(unless this is the only option). Can anyone help me understand how to do this? http://share.framerjs.com/vuqpqedgsieu/
5
Will Anderson
Is there no way to preview your design in a simulated browser? Safari used to be a DeviceComponent option but I'm not longer seeing it
2

October 03

Daniel Caine
Hey guys, I ran into some issues yesterday while assigning click events in a loop. I was referred to https://framer.com/getstarted/programming/#scope by mamezito on Slack, and so I solved my issue using "do". After some tinkering (no idea what I was doing lol), it actually worked. So I've begun reading further and looking into scope and closures. I'm wondering (when you can't use 'this') which is the best approach: using 'do' or how I've done in this framer file (dunno what you'd call it): http://share.framerjs.com/bxmgg3yblzrv/
1
Patryk Adaś
is it possible to perform swipe in framer using trackpad? if so, how to do so?
2
Pim Minderman
Hello framers! I am wondering, I want to have an animated transition in a prototype, like the blocks in Instagram stories (when you are watching other peoples stories). Anyone know this kind of FramerJS code? Or has an example? Thanks! Cheers!
2
Luis Escobar
Hi guys, I'm a total noob in Framer.js and code in general, but I'd like to take my prototypes to the next level so I'm jumping in! I'm having some trouble with SVGs and I would really appreciate some help. In short, I have a heart shape SVG I created in Sketch and I'd like to scale that heart from small to large while adjusting the border weight in both states. I can get everything to work properly, but the SVG looks horrible when it's scaled up. I've seen some posts about D3 and SnapSVG, but with no specific direction Im completely lost. I've tried creating the path with a few methods using HTML but they all look bad when scaled. Can someone please provide some direction? Thanks!
3
Phil Letourneau
Hi Folks, I'm trying to stop a slider from propagating events to its parent layer. This syntax doesn't appear to work: slider.on "change:value", (event) -> event.stopPropagation() Any suggestions?
3
Joe Day
I need a timer onTapStart that I can feed into Utils.modulate for the duration that I am pressing. When I do this: layer.onTapStart -> print event.offsetTime It prints once at the moment the event changes. What I need is the ability for it to print the entire time I'm pressing. I'm guessing the answer is obvious, but I can't seem to track it down. Anybody know?
2
Clayton Farr
Hi. I'm running into some trouble trying to sort how to make layers within a PageComponent scrollable. Currently I have a PageComponent that is setting up content areas for each page and allows switching between them. When the content on those pages is longer than the viewport it cuts off and doesn't allow any scrolling. I've tried adding a ScrollComponent within each 'page', and also wrapping the page component in a ScrollComponent, neither of which seem to be working. What's the best way to handle something like this? Attached project has current Page Component setup without any Scroll Components (click on "Logo" to show nav if on smaller screen). Thanks! http://share.framerjs.com/amo3hffti9mp/
5

October 04

Marcelo Moyano
Hello! Can you control what happens with one object by triggering an action from another object? For ex button A is pressed. Object B starts animating it's own timeline. Or change its state as a text. Thank you.
1
Sergey Voronov
writing a module and stuck on exporting class:( whats the syntax for that?
3
Christina Zou
Hey guys. I'm sharing a Framer prototype to Android users via an ad. It frequently takes 10+ seconds for the framer to load and for the framer logo to disappear on Android chrome. During this time, most of my testers abandon the page. In contrast, on desktop, the prototype loads almost immediately. I assume I'm stuck, but anyone have ideas on what causes this slowness? I don't see anything unusual in the profiler timeline, any special network calls or events firing during the loading time. My prototype isn't especially complicated:
1
Meray Uyanik
Hi guys, I know it's a long time, but i'm back :)�It's new reading concept. I hope like it <3
1
Giles Perry
Hey Framers, I’ve been trying to figure out how to create a custom layer class. I’ve written code to extend the layer class to create an svg ring. The ring has the following properties: outerRadius, innerRadius, color I want to define default values if these are not set. The background color should always be transparent, and the height and width of the layer should always equal twice the outer radius of the ring. It’s more or less working, but there are a lot of things that I don’t really understand. 1. In the constructor, I’m trying to define the default values. @options.color ?= "rgba(123,123,123,0.5)" works fine, but similar code for outerRadius and innerRadius only work when I add @define statements. 2. My code uses @options={} and @options.outerRadius in the constructor. I’ve seen an example that leaves out the @ symbol in both cases. My code does not work without it? Is it needed because of the use of "?=". 3. I don’t really understand when I need to use @options.outerRadius and when I can use @.outerRadius to refer to or change this value. e.g. Line 21 seems to work fine: @.width = @.height = @.outerRadius*2 4. I want the default for innerRadius = outerRadius / 2 so, in the constructor I’ve written @options.innerRadius ?= @options.outerRadius/2 This seems to work in Framer Studio, but the share.framerjs.com version seems to ignore this. Any advice, suggested corrections or pointers to tutorials or documentation on this stuff would be greatly appreciated. http://share.framerjs.com/8a4hibtvagu7/
6
Paul Kooi
Is there a way to set two different animations options when switching states? For example... A user selects a button and gets an animation that's .5 sec long. But on scroll the animation takes only .2 sec long. I do realize there are other ways to get around this problem... just wondering if there's a more direct or different rout that I'm unaware of. Thanks
4
Jonathan Zazula
Anyone know if there is a license manager for framer. Just got a new device and my activation code doesn't work anymore. Anyone have any solutions?
2
Ronald Rez
hi, i'm trying to loop a video.. this used to work in older framer versions but no longer. do you know why? throwing a TypeError: undefined ? http://share.framerjs.com/uwqsffhzadh6/
4
Hoffer Gábor
Did you ever wanted a proto that works portrait and landscape but could not handle the switch on the real device but only in Framer Studio? Just like me. I tried it all. Framer.Device.orientation, Framer.Device.orientationName, Framer.Device.on "change:orientation", Screen.on "change:width", even good ol' javascript like window.addEventListener("orientationchange", function() {...}); Some of it works in Studio, some of it in the device. None of these work on both. So then what? Thought you would find this useful. Beware! Hacky solution, but works flawlessly: # variable to store orientation (system doesn't cut it) screenOrientation = "donnoyet" # listening to screen ratio change Utils.interval 0.2, -> switch when Screen.width / Screen.height > 1 landscapeHandler() when Screen.width / Screen.height < 1 portraitHandler() landscapeHandler = () -> if screenOrientation != "landscape" screenOrientation = "landscape" # actual landscape switching code should be here landscapeSetup() portraitHandler = () -> if screenOrientation != "portrait" screenOrientation = "portrait" # actual portrait switching code should be here portraitSetup() Cheers Flame from Prezi
5
Javier Chávarri
Hi everyone! Yesterday something strange happened, two different people asked about this flexbox addition to Framer I was working on some weeks ago. So I've put the functionality into a module that will allow us to play with the flexbox layout in existing (and hopefully future) prototypes. You can grab the module from Github. Also, to demonstrate its basic features, you can check the accordion menu example attached below, it takes less than 30 lines to code it. Let me know your thoughts and questions, and take into account Flexer is still fragile, so handle with care! 🐣 http://share.framerjs.com/fyfyh73ccfwu/ https://github.com/jchavarri/Flexer
2
Jacek Stryk
Trying to build a prototype where a (1) single press on keyboard arrow left/right animates one way and (2) long press (arrow press and hold) animates a different way. So far the idea I tried is to sniff for keyboard events with Events.wrap(window).addEventListener 'keyup', (event) which only fires when the key is up - works great for single key presses and do Events.wrap(window).addEventListener 'keydown', (event) which fires continuously when the arrow is depressed The problem though is when I release the arrow after long press the "keyup" fires which is what I want to avoid. How do I remove the event listener for "keyup" while "keydown" is firing? I tried Events.wrap(window).removeEventListener 'keyup' but is does not work. Layer. off() does not work either cause they keyboard events are attached to "window" not a particular layer. Any ideas how to differentiate between single and long keyboard presses better?
0
Erin McLean
How do I go back to an older version of Framer? i.e. v70
1
Luke Warda
Howdy, is there an uncomplicated way to set different states.animationOptions for transitions between specific states? I'm particularly interested in different speed of animation for reverse of State1 - State 2
2
John Marstall
Is there a mechanism for panning the canvas in Framer Studio after you've zoomed in? Sometimes I need to see the top of the prototype at 200% too. :)
1
Samarth Bahuguna
If I change the constraints of a draggable layer in code such that the layer now lies outside it's permitted region, is there a function to push it within it's new constraints? After changing constraint values, I'm having to drag it very slightly and let go to make it slide into it's new region. I think this should either happen automatically on changing the draggable region, or there should be a method to reposition the draggable layer if it's outside bounds. Thanks for any help!
2

October 05

Jaeho Lee
Hello, Framer.js lovers. I have been developing a framer.js editor for *Windows* platform over a little more than one and half year. Now it is almost ready to be useful and fun to work with it. If you have interest, please visit the website (http://www.framerflow.com) and drop the email (Or you could leave it at here - https://goo.gl/forms/ihpkYoKaAx7RUAze2 ). I'll send an email including download link as fast as possible. Happy prototyping. #framerjswindows #framerflow
1
Chris Wang
So my license is expiring, how do I renew it?
1
Petter Nilsson
Hey! I'm trying to change the cursor when hovering certain layers. Seems like setting layer.style["cursor"] used to work, but doesn't any more. Setting document.body.style.cursor works, but that affects the whole canvas. Anyone got any idea?
2
Koen Bok
Hey guys, we just shipped an integration with Figma, a web-based interface design tool. We wanted to give you another option to create and import designs into Framer. Figma is doing some interesting things with vector networks and collaborative workspaces, check out the full blogpost for details and a short video. Read the full announcement here — https://blog.framerjs.com/posts/import-with-figma.html
9
Agisilaos Tsaraboulidis
Hey guys, I updated the framer Library in a rush and now I have this error what I need to do to fix it?
5
Marco Aurélio Rodrigues
http://share.framerjs.com/5lt9segm9unk/ Hey guys. I created a tabs switch using click events changing elements visibility. I am sure there is a better way to do that switching states like https://dribbble.com/shots/2407081-Switching-Tabs-with-Framer. I downloaded the file but I couldn't figure it out how to apply it in my project. Could anyone help on this? Appreciate it.
2
Tojo Rakoto Ramanantsoa
Hey guys. I've been wondering if anyone could tell me how to make some of my content appear (with opacity, scale or whatever...) only when I scroll down at them, and get the effect that they're just been loaded, like for example content on Pinterest. Thanks :)
11
Baisampayan Saha
found out something after the new update...if u have spaces and then tabs before the code..it used to work before..but now it gives an error, I had to go to each line to delete all extra spaces...
1
Leon Kosters
Hello people, I have a question about an animation. I've added states and events to open and close search & filter space. The open (search icon) and close buttons are on the same place. When I open the Search & filter space, the search button disappears by changing opacity. But it's still in front of the close button. I've made the close button 'clickable' by adding 'visible: false' to the search button state, what works. You can click on close. But now the animation of the Search button has a big delay, because visible is getting back to true what takes a while. My question: Does someone has a better solution? Maybe placeBehind adding to the state? But how? Framer file:
2
Mindaugas Petrutis
Last night we hosted the first of a series of Framer workshops in Dublin, here's a quick report:
1
Patryk Adaś
Fast way to change default cursor to custom one? Also, make this cursor so it depends on the state: 1) hovers some elements 2) clicks some element and so on.
1
Francois W Brahic
Hey guys, is there a way to detect right mouse down/mouse up events in framer?
3
Ivan Zhao
So for the past few years I have been pouring my heart out crafting this piece of software called Notion. Today we are launching the 1.0 on Product Hunt. If you use Google Docs, iA Writer, Evernote, or even Trello – you'll love it! It's pretty much the first text editor that works fully with drag & drop. P.S. It also comes as a super minimal Mac app. Thanks guys! Check it out, and vote us up. ❤️
12
Brian Bailey
The Web Speech API provides web apps the ability to recognize voices, transform the audio input into strings, and control the synthesis voices available on the device. Its two parts, SpeechRecognition (Asynchronous Speech Recognition) and SpeechSynthesis (Text-to-Speech) allow designers to prototype speech-based conversational UIs like Google Now, Apple's Siri, and Amazon Alexa. Prototype, Chrome >33 only - http://share.framerjs.com/jlralchs6vaz/ Github - https://github.com/baiIey/framer-speech-api
7
Robert Gehring
All, Very interested in using frame, but for my job, we are looking at using multiple displays to interact with. So maybe a horizontal display next to a vertical. Is it possible to design/code with Framer to interact with two separate prototypes? Where if I hit a button on one display, it will effect the other? As a separate topic, I am assuming I could design with a custom display size that would fit all displays? This would just not allow me to run the prototype from the displays and only from a computer? Thanks! Rob.
7

October 06

Catherine Bui
hey all, is it possible to apply a gradient to text in a text area element? trying to achieve something like this
6
Sam Thorne
If you've ever wondered how to use OAuth in Framer, you might find this article I wrote helpful:
5
Cameron Luck
Hey guys, I was wondering if anyone had a simple way to capture a right-click in Framer. I'm trying to simulate some context menus for a desktop applications and want to have one set of actions on left click and another set on right click. Thanks!
1
HanWoong Kim
https://framer.com/getstarted/programming/#scope In this link, "do" method example code has a bug. button should be in for loop. or don't need button layer. Is it right?
1
Nicolò Calegari
Hei Framer Bros, any clue about how to use a custom .cur file as a cursor? document.body.style.cursor = "url('/path/to/my/cursor.cur')" should work, but it doesn't! Hugs from Milano
4
Niels van Hoorn
The latest stable release of Framer contains an updated version of Framer Library with a breaking change: layer.states.current has been renamed to layer.states.current.name layer.states.previous has been renamed to layer.states.previous.name This can cause unexpected behaviour when doing things like if layer.states.current == “stateA” . # do something So be careful when upgrading your projects or starting new ones! This makes it possible to retrieve the current state object (so the properties that are changed) of a layer through layer.states.current These changes are part of a bigger upgrade to the animation API, you can read about them here: https://github.com/koenbok/Framer/wiki/New-Animation-API https://github.com/koenbok/Framer/wiki/New-Animation-API
5
Ee Venn Soh
Just-for-fun car riding app concept. Prototype built with Framer.js. Further visuals and process: http://eevennsoh.com/grab-app-design (:
1
Mohammed Morsi
#Prototyping: The tools designers use #meetup next Monday Onefootball office. Mainly an intro about framerjs & Atomic
1
Dan Bartley
Heya folks. I guess this is half question, half suggestion. How come you can only use this menu to navigate between folds when you're inside a fold? It'd be nice to be able to jump into a fold from the root when things start getting busy.
1
Christian Poschmann
Hi guys, I'm trying to create a transition in which, on switching pages, the image would animate into the button at the bottom. I started and I think I'm almost there, but if you could give me some tips that'd be amazing. Thanks
2
Manaf Alnaqeeb
Hey all, I'm having trouble getting the scroll component to recognize nested layers. I have a nested accordion panel which expands onTap revealing a list of thumbnails. The problem that I'm having is that the scroll component is not recognizing the expansion and so it does not scroll down. Here's the file I've been working on - http://share.framerjs.com/5x8u0r4qrvck/ Thank you in advance.
1
Miguel Olave
Javascript Viña del mar meetup
5
Roxanne van Rijn
Hi Everyone! I'm trying my first prototype for iPad mini with Framer! I hope you guys can help me with this problem: I want to be able to have my prototype know where I am. I tried to figure out two things: - implementing the pedometer of the iPad - inserting some kind of automatic scrolling, and just scroll back if it goes too fast Both with a 'Default' button to reset the pedometer to a specific location of where the user is standing right now. It is for a project with a seat map. It doesn't have to be very specific, but it would be nice to have a general overview of where you're standing. Any ideas or previous expertise on how to do this? Any help is welcome :) .
1
Chris Wang
Framer crew, any update on the video opening in native player(iOS) rather than playing inline issue in Framer Preview?
2
Sergey Voronov
i am not gettng how new code error highlights work, why its opening webinspector for me, but not the code line?
1
Jacek Stryk
How can I cycle through all states with options in the new Animation API? I know I can do layer.stateCycle ["stateB", "stateC"], time: 0.5 but how can I apply options to layer.stateCycle()? Tried layer.stateCycle(), time: 0.5 or layer.stateCycle(,time:0.5) to no avail. Please advise Niels van Hoorn et al. Thanks!
2

October 07

Bernard Rouzeau
I backed this very promising and innovative product design tool on kickstarter today and highly recommend the design community help make it reach its goal! This is the UI design tool we've been missing. Something like this will work perfectly with Framer, take a look.
3
Jon Madison
I wish framer respected /Library/Application Support/Framer/Snippets as well. please? :D :D
1
Kishore Kumar
QQ I want the layer sketch.Bab sketch to hide when I scroll sketch.Scroll by 1000 pixels. I cant get the desired output. What am I doing wrong? ////// sketch = Framer.Importer.load("[email protected]") scroll = ScrollComponent.wrap sketch.Scroll scroll.scrollHorizontal = false sketch.BAB.superLayer = sketch.Scroll scroll.Scroll = false sketch.BAB.on Events.Click, -> sketch.BAB.animate properties: scale: 1.25 repeat: 999 sketch.Scroll.on Events.Scroll, -> if sketch.Scroll.Y > 1000 sketch.BAB.visible = false
2
Noam Elbaz
Getting in to States & using .next() Is there such thing as .previous() If I scroll down 50px --> Next State but If I scroll up 50px --> Previous state. My guess is to use .current to somehow subtract one to get to the previous state??
5
Vincenzo Petito
Hi all, i'm trying to put a sketch artboard in a scrollComponent to make it scrollable but it isn't working (also the artoboard is kind of centered in the scrollComponent and not aligned at the top)! Here's my code: mainScreen = new ScrollComponent width: Framer.Device.screen.width height: Framer.Device.screen.height backgroundColor: "ffffff" scrollHorizontal: false sketch = Framer.Importer.load("[email protected]") sketch.parent = mainScreen Any thougths?
1
Oleksii Drozdenko
Hey all, need your help, please. How do I animate numbers, let's say from 1105 to 2245, like here https://share.framerjs.com/238ws0qd1b41/ but without parenting to an svg animation. Need a simple solution. P.S. I researched the web and was surprised that there weren't any answers :(
3
Sergey Nikishkin
Hi, guys! Sorry if such question already was. Is there a way to remove item from array and then put it back?
4
Jiwoong Lee
Because we wanted more controls over Material spinners, so created crappy one with using Framer elements, not hacky ways like GIFs or CSS to be able to use Framer goodies. http://share.framerjs.com/iompt0uj30yn/ Feel free to copy and modify. :)
9
Ricardo Vazquez
Hey everyone. I'm having some problems with PageComponent. I'm working on a carousel. Right now the carousel for the most part works. However, I'm trying to layer something on top of the page component (like the Status Bar). I've tried `placeBefore`, `layer.index` but no matter what I try, the layer gets placed after the PageComponent. Am I missing something simple? As you can see from the image, the carousel shows, but the Status Bar is being hidden underneath. Here is a link of my prototype: http://share.framerjs.com/fokyk5a3nix1/
2
Sergey Yashchuk
Happy Monday! I'm trying to figure out why my scroll component not scrolling all the way down when using Framer.Device.contentScale = 2. I created a canvas with a web page (1440 width) to show parallax behaviour. Added scroll component and inserted content inside it. Everything was working good. But then I decided to put this prototype inside MacBook pro. So I added content scale. Now everything seems to be working but content does not scroll all the way down. Here is an example of what I'm talking about: http://share.framerjs.com/gr19zj9km913/ Can anyone tell what I'm doing wrong? Thanks!
1
Vi Ri
Hey, I'd like to ask for help with styling text in my prototype. Are there all properties for styling available in the Framer? This property doesn't show any change in text: lrMenuActiveTextStyler.style.textDecorationLine = "underline" Thank you for help.
1
Nik Udovitskiy
Hey guys, I'm struggling with Benjamin Den Boer's "List Sorting" demo in the Framer's gallery. My problem is that the code throws an "undefined is not an object" for the layer variable when the getIndexByFrame(layer.frame) line is called (iPhone 6+ in the preview). https://share.framerjs.com/xkfv4958ql47 Note: this code works fine if you open the project, but if you open a fresh Framer file and copy/paste the code, it breaks. Please help me out if you can. Thank you!
1
Benjamin Den Boer
Hey all, next week we’re unveiling a brand new way to design animations! As part of our design process, we prototyped this feature entirely in Framer. Here’s a sneak peek of what’s in store for you next Thursday, October 13th — http://share.framerjs.com/l9zzgpkpi0ns/
4

October 08

Rafael Lüder
Today I spent a couple of hours playing with Framer and was happy with the results for the short amount of time I put in it. I do however have some questions related more to the concepts and uses of Framer: 1. How easy is it for developers to implement (iOS or Android) transitions and interactions created on Framer? Would they have to spend some time looking at the source code to understand what's going on or would it be mainly based on how it feels when they look at a prototype and trying to replicate it as close as possible on their native language? 2. Spring physics does look/feel really cool but I think it's being slightly over used (not everything behaves like a spring in the real world). Are there plans for extending the physics that can be applied to objects? For example, allowing objects to have "weight" or collide? Would this even be possible? A quick google search brings up some existing JavaScript physics engines: http://jonobr1.github.io/Physics/ http://box2d-js.sourceforge.net/ http://wellcaffeinated.net/PhysicsJS/ 3. The current workflow is based on using Photoshop or Sketch as starting points. I was wondering how easy it would be (or if it'd make sense at all) to be able to integrate something like http://goratchet.com/ in the workflow. In my simple prototype today I needed a basic table (headers, columns, striped rows, etc.) and Sketch is not easiest tool for creating it. Being able to add small self-contained snippets (html/css) can be easier and quicker depending on what's needed. Awesome tool, thanks for all your hard work!
11
Benjamin E Saravia
Help framers, I can make this work on Chrome and Safari... BUT it won't work on any mobile (ie: Safari Mobile) ... it just won't 'detect any change on my dragging layer. Source: http://share.framerjs.com/lxijqefg2cfi/ * Any pointers will be appreciated ! This will detect a change, but it's not the same behaviour: if Utils.isMobile Final = InitialValue - (event.point.y).toFixed(0) else Final = InitialValue - event.y
1
Agisilaos Tsaraboulidis
So, hey guys. I run into a weird problem again.. I have this prototype that as always first I want to present the onboarding screens and then the user can press skip to go to the next screen. When I'm not adding the code to work with the ViewController module that I'm using the prototype works fine but, when I add the code for the VC module, the transitions between the views are not working.Any clue why? Prototype here: http://share.framerjs.com/ejl4vjmtmuh3/
3
Alexandre Plennevaux
Hello! I've imported a sketch file inside which there is a layer "card" that I'd like to use to generate a list of card via a for loop. I can't seem to get the code creating the layer instance right. This is what I've tried: allCards = [] for i in [0...10] card = new Layer sketch.card width: scroll.width height: 400 x: 0 y: (150 + 4) * i allCards.push(card)
1
Ray Yip
This is an example project to show you how i built iOS App and macOS App using FramerStudio. That was an exciting experiment!! :D
1

October 09

Sigurd Tapio Mannsåker
Is this a bug, or am I doing it wrong? This is one layer inside another, with a border radius and clip: true on the parent. Works fine in Chrome and Safari, but in Framer Studio the child layer's corners aren't clipped. Koen Bok / Niels van Hoorn?
1
Giles Perry
Just written my first Medium article on how to create a custom layer class module in Framer. I'm still a bit of a rookie so feedback would be much appreciated. Have a great weekend.
2
Jason Brown
Hi all, I am very new to coding and Framer and am having issues importing my Sketch design into Framer. I can import the Sketch file perfectly fine, but when I use the Decive Type "Mac Book Pro" in Framer it doesn't scale evenly. My Sketch Artboard was designed at 1440x1025. I know there has been a ton of a questions regarding this, and I have searched everywhere for an answer, but when I scale my Artboard 2x the width fits perfectly but the height of my design is too long and gets cut off. What would be the correct Artboard size to design in for a 1x or even if i need to 2x import into the MacBook Pro screen? It just seems like its not carrying over the same aspect ratio. Thank you all so much for the help.
0

October 10

Adam Mazurick
How does one mask a video?
2
Adam Mazurick
Today I explored a Design Challenge. The Design Challenge sought to answer the question, "How might we make the Netflix "iOS CTA more engaging and accessible." I'd like to share with you what I came up with. http://share.framerjs.com/xw9xh40zzn7t/
1
Ben Ellis
Hi all, This might be a bit of a dumb question. But I couldn't find any information on Sketch Import & Auto-Code. This page: https://framer.com/getstarted/guide/ says they 'work great together', but when importing a sketch file into Framer I don't then see the Auto-Code panel as you would if you just pulled in flat PNGs or created layers within Sketch. Am I missing something? Does Auto-Code only work when you create layers within Framer or drag in static assets rather than a layered Sketch file? I'm using the latest update of Framer, v68 and the latest version of Sketch, v39.1 Thanks Ben PS: Just to clarify, I get the layer inspector that displays all the Sketch layer names, rolling over them highlights the respective layer in the device preview. But no Auto-Code. Am I missing something?
3
Thomas Law
http://share.framerjs.com/13qpvuqky911/ Inspired by Black Ray's proto. Just burst!
2
Nathanon Inplub
How to get asynchronous JSON to Framer project?
3
Adam Mazurick
Our Toronto Framer.js meet up went fantastic this past week! We had around 25 attendees and everyone had a great time. It was surprising to see it fill-up so quickly! I received tons of requests to make this a monthly affair with more content and live streaming. I'm extremely excited and thankful to everyone who showed up. We had a photographer taking pictures and we will be posting those next week! Please look out for another Framer.js meet-up! We are really excited! Connected Lab will be posting all our content to www.framertoronto.com in the coming weeks and building a local hub to help Toronto grow Framer.js.
1
Igōr Kōchājkiēwicz
Hello Framer users! Do you know of any workarounds for the following: - navigator.geolocation.getCurrentPosition - access control allow origin Both seem to be blocked when called from 127.0.0.1 (or non-HTTPS origin), which makes prototypes using maps and some APIs very difficult. The prototype I'm working on is a mess, but it might offer some insight into what I'm struggling with:
2
Sigurd Tapio Mannsåker
I'm having some trouble previewing stuff on my phone. The premise is as follows: Big office building, weird wi-fi, so Framer does not pick up that my phone is running Framer Mirror on the same network. Navigating to my MacBook's IP address in mobile Safari works, but I can't get the link to turn up in the Links section in Mirror when I copy the URL from Safari. What to do? Sketch Mirror now works reliably when the phone is connected via USB, which would be great to have in Framer as well. But in the meantime, could there be a more straightforward way to simply navigate to an arbitrary URL? Or am I just missing something about how Links work?
2
Arman Nobari
I'm trying to build a feed of Page Components to make a series of vertically stacked horizontal carousels that can be scrolled through. What I need help with is just the stacking of multiple Page Components on top of eachother in a feed. Apologies in advance if my code is horrendous, and for how basic this must be - very new to Framer and coding in general :) Edit: Link here- http://share.framerjs.com/cc4zoia9as2d/
1

October 11

Alexandre Plennevaux
hi! am wondering: is it possible to organize my codebase in multiple files, perhaps using an include/ import/ require function ?
6
Sandro Walet
Hey guys, quick question! I've been trying to figure out how to make a certain scroll work, but I can't seem to figure it out, the following video contains an example of what I'm trying to accomplish: https://youtu.be/FF6gNUBwk-s?t=32 Starts at 0:32 (The scrolling through the letters by dragging) Curious to see what you guys think about it!
1
Jacques Decazes
Hi Framers! Quick question, is there a way to remove those purple active highlights frames from the mobile device app preview?
1
Adam Mazurick
Hey Framers!!!! Super excited to launch the Toronto Chapter for Framer.js Here is the Toronto Framer Group Page! https://www.facebook.com/groups/framerjs.Toronto/
1
Jon Madison
Would framer studio spoof browser type within studio when switching between devices please? and maybe provide some other variable to check if we're in framer studio. it's kinda annoying to have to run an emulator in order to pass around the correct device type. Okay so i also can run it and spoof via chrome, but i'd love to sit inside Studio all day and have awesomeness. Thanks. Side note -- should i post these kinds of requests as an issue on the Framer github? wasn't sure how appropriate it was given it's a Studio question. (and i like the idea of getting votes here via likes, if things seem compelling:)
3

October 12

David Plakon
Hey framer fam. Is it possible to embed things into Framer? Specifically, looking to embed a youtube video into a desktop prototype.
2
Dhruv Saxena
Just published this -
1
David Plakon
Framer team: I'd love to use this as an art medium. It'd be cool to have a more limited, read-only free version of the app to distribute experimental ideas.
1
Junha Kang
Hi, i was working on this problem all day is there a way to ignore a layer's tap event while it's long pressed ? i was trying to give a layer a two different function one with tap and one with long press but i can't stop the tap event from firing while it's long pressed i tried to use ignoreEvents in long press event so it will ignore the event when it's long pressed, but it works only after the tap event was fired once could there be a way to ignore tap event while it is long pressed ? thank you
3
Kevyn Arnott
Hey everyone! I'm really excited to share a module that I've been working on. the module's goal is to provide native iOS offerings inside of Framer, so that you can rapidly prototype on iOS without having to recreate anything native in iOS. https://github.com/k-vyn/framer-ios-kit It has bunch of things like iOS Keyboards for all iPhone & iPads (except-iPad Pro), a constraint-based layout engine (comparable to Auto Layout), Alerts, Banners, auto-sizing Text & Buttons, Status Bars with real time, Tab Bars, Navigation Bars, Sheets, Fields, and more. I'm sure it still has some bugs, so if you run into any let me know. Also, if you'd like me to add anything in the future send me any suggestions you may have. Enjoy!
43
Gregory J. Orton
Hey folks Trying to use <input> elements in my framer prototype. But I want to style what happens when it's 'checked'. Obvs normal css selector would be .checkbox:checked {..} Anyway i can use CSS selectors inside framer?
3
Marco Mueller
Hi, I am trying to create a really simple animation, but I keep getting an error that the Maximum call stack size is exceeded. Can someone have a look an tell me what is wrong with this? Many thanks! http://share.framerjs.com/7wca67d4al04/
2
Vladimir Shlygin
Hi everybody! Lately, I found myself working a lot with animated paths, so I made a small module that allows you to create vector shapes point by point in Processing / Paper JS way and animate them with native Framer animation. Currently, it supports only simple and bezier points (cubic and quadratic). https://github.com/vladimirshlygin/framer-path Some examples: http://share.framerjs.com/w27sxwwsn1rw/ http://share.framerjs.com/j6977iinxa65/ http://share.framerjs.com/2kfa8aoiw2jo/
13
Marty Laurita
Hey Framers! Only two days until #Bostonframer!! We have an amazing speaker lined up, (Andrew Nalband) we have food and drink, and if you're lucky, even some Framer swag. Also, we will try a live-stream of the event on Facebook for those that can't be with us in person. It's gonna be a blast, join us!
1
Mike Johnson
I mentioned to a few people at the Seattle meet up that I was working on a little screencast site, but wasn't quite ready to put it up yet. I figured I would just announce it already and get some feedback rather than waiting longer... http://www.framercasts.com/ Please let me know if you run into any bugs or errors. Or ideas, questions, comments, anything really. I want to have case study videos where I'll make a full prototype from start to finish, but first I wanted to start with some fundamentals.
8
Sune Lorem
Hey, for some reason I can not get 'layer.states.next()' to work correctly. When I click my "BTNbuy" button the "cart_on" is displayed with cart_off's delay — and the cart_off does not happen at all. I understand the delay thing, but don't see why "cart_off" state is not being triggered when using 'cart.states.next("cart_on", "cart_off")'. ############# My code below: ############# # cart states — show cart with .3sec delayed, and remove cart after 5 sec. cart.states.add cart_on: y: 46 x: 1692 opacity: 1 scale: 1 cart.states.animationOptions = delay: .3 cart_off: opacity: 0 cart.states.animationOptions = delay: 5 # button BTNbuy.on Events.click, -> cart.states.next("cart_on", "cart_off")
4
Sergey Voronov
Hola amigos, for months I was gathering cool framer examples made by other people on my harddrive in order to understand the code, or get some inspiration. This archive became really unusable, cause was hard to categorize it or search through, so I decided to start website the collection of rad framerjs things I found on web. When I will be old and retired I will have time to create an ability for people to submit their resources:) But for now - if you have something interesting you want to showcase there- feel free to drop me a line at [email protected]
0
Sarah Walker
6 Stages of Debugging: 1. That can't happen 2. That doesn't happen on my machine. 3. That shouldn't happen. 4. Why does that happen? 5. Oh, I see. 6. How did that ever work?
0

October 13

Justin Fuisz
Hey guys! I'm looking to hire a freelance UI/UX designer to help build out the mobile front-end for a funded innovative/Design-first video startup. PM me if you are interested. Thank you! Justin
0
George Otsubo
In the new animation API it says states can now also include animation options in the state itself. The doc uses animationOptions: which doesn't seem to work but options: does. Is this a typo?
1
Agisilaos Tsaraboulidis
It's me once again. Today I tried to organize the sketch file and I imported the file. When I tried to go to the 3rd onboarding screen some elements were missing and I can't figure out why.. I know it's something simple but still can't find it. Prototype here:
2
Teodoro Mylonopoulos Labella
Hi guys, I would like to know if there is any option to enable and disable the "Access code" of the mirror system. Actually I'm working with several prototypes and is little bit tricky to share the project link and its code every time. Even more when I restart Framer, the url is the same but the code changes.
1
Dhruv Saxena
Is there a place where I can look at the source code for Framer? I want to write a few classes which would extend the Layer class.
2
Feles Daniel
I was asked to create some animations for Amuse UX Conference. Then I realized, I don't have After Effects on my laptop, so turned to Framer and ended up with a much more organic animation than what I was originially planning: https://dribbble.com/shots/3019303-Amuse-Conference-Animation (framer link is attached to the dribbble post)
1
Vince Pataky
Hi Guys, I was struggling to add reactive scaling to a pageComponent, but it turned out to be far easier than I thought. Here is the result, if anybody had trouble with the same problem :)
2
Marco Paglia
Hi folks, does anyone know if it might be possible pulling video titles from YouTube in Framer, using the YT API? I saw the Spotify example from George Kedenburg III which is fascinating, and I wonder if other people have experience with similar types of projects.
3
Junhyuk Jang
I made "Long press" affordance prototype. I use some trigger to make long press gesture. Please check this url : http://share.framerjs.com/o8dbfqx42zau/
5

October 14

Marty Laurita
We are live at #FramerBoston!
3
Thomas Law
Hey, look at the loading animation.
1
Mike Johnson
Hey Framers! Finished up the follow up to the Batman v Superman saga for the fundamentals series! This one is the first "pro" subscription video, but it's worth it. From here on I'll be making 1 pro video and 1 free video per week, so the subscription will give unlimited access to all future videos while subbed. We'll be going over classes, constructors, what "super" means, how to extend other classes, and how they are the building blocks of Framer itself. After this video you'll be able to make your own classes, extend them, and really start to organize and reuse your code. After all, `new Layer` is really just a class. :)
0
Nikolas Dalton
So I have this very simple question. Say I have 3 pages. I want page2 to be to the right of page1 and page3 at the bottom of page2. I start on page 1 I swipe left and page 2 comes in from the right I now swipe up and page3 comes up from the bottom. You know any examples of this behaviour?
3
Karol Piwowarczyk
Hello! I am interested in VR prototyping. Could you sharing material that use framerJS for VR/AR prototyping? Thank for all!
4
Sergey Voronov
Hi everyone, I have created a module to prototype facebook messenger bot experience and wrote small article bout this. Hope will be handy to some people. https:[email protected][email protected]2723b7153#.a7lt27yfw . Module on github - https://github.com/mamezito/FramerMessengerChatBot
6
Kishore Kumar
Hi Everyone I am making an end-to-end app on Framer. Considering the complexity of making the enitre app (140+ screens) I'm breaking it down into multiple framer projects. Is there a way to link between these projects? I can link between projects using share.framer.... link (document.location) but since I am working on all the projects simultaneously, the links update dynamically. Is there another way? Feature request - Why wouldn't framer allow me to update the same link!
3
Sergey Yashchuk
Hi Framers, Quick question: Is there a way to hide or move "made with Framer" box when sharing prototype? Currently, it's covering logo on my web page prototype. Thanks!
1
Francois W Brahic
Hey guys, I'm working on some modules for a project. How do I use images in modules? I can't seem to reach a project's images folder from within the module for some reason. Any best practices? Thanks!
2
Victor Arellano
Super simple question. I know how to scale each slide as a layer individually, but I'm trying to figure out how to do this inside a loop to give it a 3d effect. Can anyone help me figure out how to scale each slide down by 0.1 inside the loop. Slide1 scale should be 1, Slide2 should be 0.9 etc.
1
Jeff Young
When I click a child of a parent, but listen for the event on the parent, I expect the layer variable in the handler to give me the name of the child. It's returning the parent name instead. Any ideas? In the DOM I would usually be checking event.target and event.currentTarget. I checked in this case and event.currentTarget is the same as event.target.
2
Mitchell Petrie
Hey 👋, I'm working on a little animation & I want to animate the colour of a text layer I've made from black to green. Is this currently possible?
2
Jordan Robert Dobson
MODULE: Device Pixel Ratio Updated @: https://www.facebook.com/groups/framerjs/permalink/779107232216350/ Demo + Code: http://jrdn.io/d5or I typically prototype across various devices with various screen densities. I do this because at Microsoft it's hard to know what type of a device someone will have when viewing my Prototypes. I also like to keep my base units and sizes at 1x to keep things simple. I needed a tool to help me do this... So, I created a module to help me convert values I use when creating UI elements to a value based off of the DevicePixelRatio to ensure the layout is consistent across devices. It helps to keep a UI consistent regardless if you're viewing in Framer Studio, in a browser, and on a 1x, 2x, or 3x device. I hope this helps you on your prototypes. It's definitely helped me! If anyone finds any issues or irregularities, let me know right away and I'll get it fixed up. #framercode
7
Jordan Robert Dobson
http://FramerCo.de has new updates! This update includes remote layers, drag and drop detection, layer distribution, value conversion, slow motion control and more… Much thanks to Mårten Björk, Ian Bellomy (Isa), Weston Thayer, Trevor Phillippi, Black Pixel and Dave Crow for sharing these latest examples with the community. I'm back to doing regular weekday updates so keep checking back. If you have tips, snippets, modules, examples or walkthroughs you’d like to contribute please hit me up here, tag me in comments or leave a suggestion on the Framer Code site. Also, if you'd like to volunteer to help curate, redesign or help in any way, I'd love to talk. - Jordan Robert Dobson
9
Michael Darius
As a general rule of 👍🏼 , engineering principles should remain simple and accessible yet beautiful and besides the point.
0
Sergey Voronov
As designer I was always confused how scope works in loop. Was struggling to do events for different objects in loop effecting only the object of same step in loop. Do(bla)-> stuff instructions on framerjs site didnt help me much:) So was digging that topic and found the way it works for multiple objects events - http://share.framerjs.com/lpblijqhkq78/
3

October 15

Benjamin Den Boer
Hey all! Here's an example of a staggered fade-in effect, completely designed using Auto-Code Animation. You can use simple logic to give each layer unique timing — and still edit the curve, timing and more in the new Animation Panel. Go ahead and play around with it, it's a lotta fun. :-) http://share.framerjs.com/nw1g6991qsnz/
4
Jon Madison
Need another of eyes on this. trying to dynamically register event handlers for two different events on one layer. Doing this separately works fine, but as soon as i create a loop to handle the events things breaks down. I'm guessing it's an issue with my CoffeeScript knowledge (of scope?) at any rate, here's the code, v simple: layerA = new Layer x: Align.center y: Align.center e = "Touch" eventOptions = [ { "eventName": "#{e}Start", "handler": () -> print "began event" }, { "eventName": "#{e}End", "handler": () -> print "ended event" } ] for eo in eventOptions print "attaching handler on event", eo layerA.on Events[eo.eventName], -> print "calling", eo.handler, " due to ", eo.eventName eo.handler() Somehow the "TouchEnd" event is being fired on both touch start and touch end. Any ideas? http://share.framerjs.com/czyp79b2lqpt/ is the correct share link -- fb is buggin
3
Olivier Truc
Hey Did Someone already code a file upload widget with framer? Could someone help us? We tried with dropzonejs but we didn't manage to making work We just want to have a trendy widget (as dropzone) then if we can get the file uploaded (like an input of type file) we know how to handle it and send it for instance to syncano We could manage this with filestack but we would like to avoid this third party service. Thanks
2

October 16

Marco Paglia
Hi frameristas, Let's say: - I create a LayerA - I create a textlayerA and I make it superLayer:LayerA - I create a copy of LayerA, such as LayerB=LayerA.copy(). Is there a way to access the copied version of the textlayer that is now children of LayerB? By access I mean changing its properties, such as its text. Thank you m
7
Blake Manzo
Anyone had any experience progressively loading JSON data to improve load speed?
0
Steven Ren
Very simple question about new .stateCycle: My understanding is: when stateA stop, stateB will start immediately. but it seems doesn't work?
1
Blake Manzo
Can anyone point me in the right direction of how I might wrap a web app using Framer.js in an iPhone similar to the share links that come from Framer studio?
4
Joseph Hall
Can native iOS apps be built with Framer alone? If not, I'd love to get involved as a designer for a project that does
3
Adam Mazurick
Auto-Code Animation where have you been all my life?!?!?! It's like you guys took After Effects and stuck it inside Framer! Mind blown! The implementation of this feature allows you to dig into your animations quickly and add a level of polish that I'd previously have to use a motion tool for. I just wanted to share my experiment with Auto-Code Animation.
3

October 17

Marco Aurélio Rodrigues
Hey guys, does imported Sketch symbols work in Framer? I am importing a file with a few symbols but they do not appear under the layers. Do I need to add all of them in folders to get it working? the elements appear under the content but I don't know how get to them. Thanks
3
Joshua Bradley
Hi everyone. Does anybody have any opinions/experience with importing symbols from Sketch into Framer? As far as I can tell the default import script ignores the existence of any symbols outside of groups, which it flattens. Seems to me that depending on the project, this approach to symbols might not be optimal (ie. requiring manual unlinking or layer-grouping before Framer import). Or am I missing some configurability in the import system?
5
Stephen Crowley
Come join us in person or virtually for our 17th Framer-Seattle Meetup next Thursday, Oct. 20th hosted by HBO. For more local information and updates feel free to join the group. Hope to see you there. https://www.facebook.com/groups/framerjs.seattle/
2
Sigurd Tapio Mannsåker
I made a quick scrollbar example as a proof of concept over in the Framer Slack, so I'll share it here as well in case anyone finds it useful. Not perfect since onDrag doesn't capture scrollbar movement after you let it go, but you get the general idea. Works by dragging both the scrollbar and the feed itself:
1
James Muirhead
Has anyone had any luck getting the "onImageLoaded" event handler working?
2
Jon Madison
let's play collab. :) We found a long press affordance: https://www.facebook.com/groups/framerjs/permalink/668226229971118/ On the framer group this friday. i cleaned it up for more general use (it was creating a lot of objects), and got more focused on the long press affordance firing off an event of your choosing. Current issue, however, is that, while you scroll, it is still growing the circle (i.e. a TouchEnd doesn't seem to get fired after letting go to scroll up/down, to cancel the touch). i will when i get time this afternoon, but want to improve further while i'm away? ;-) http://share.framerjs.com/komtwr7qyrw6/ i didn't want to put in event handlers for the scroll moving because this affordance may not always be used on a scroll.
0
Patryk Adaś
Anyone seen something like this created in Framer?
3
Jason Nelson
Any reason I would suddenly be unable to download any of my prototypes to my iOS devices?
3
Agisilaos Tsaraboulidis
Hey, guys, I'm struggling with a weird thing lately. So I have a layer and I want this layer, for example, to stay at his place when I"m dragging in the up direction and to animate when I'm dragging to then down direction. Ho I can achieve this? Here the framer project: http://share.framerjs.com/lo15y78ak11e/
2
Burak Esen
New SliderComponent is great, Its saving a lot of time. I would like to see a Slider.knob.dragIncrements function or something like that.
9
Osmose Esomso
hi All, i'm newbie in framerJS and i want to make a scroll in multilayer. the problem is that ScrollComponent is ok in the first layer but not in the rest. I've imported my sketch design but i think that this is the problem PS : Sorry for my english ^^ http://share.framerjs.com/b12le2wbf1st/
5
Thomas Law
Hey guys, today I'm introducing a sound wave animation made in Framer, it appears and disappears like old TV! If you like it, why not come to my Dribbble and give it a "like"? https://dribbble.com/shots/3030012-Listen-to-Your-Book
3
Jon Madison
I have implemented a long press affordance, based on code from https://www.facebook.com/groups/framerjs/permalink/668226229971118/ I'm attempting to make it a module that works anywhere. Unfortunately, when i'm trying to use it on a layer with the html property set, the touch events run amok. see this example. http://share.framerjs.com/ms0v8st5q8x3/ Clicking into the HTML text results in the resulting touch circles' midX and midY being computed incorrectly, due to the event fields (seemingly) corresponding to the block of HTML, and not the layer itself. Is this expected, or a bug? How might i work around it?
0
Jordan Robert Dobson
Normalize Click & Touch Event Coordinates I put together this Pointer Class module to help myself in my own project as well as address some questions I've seen regarding this in the community lately. http://jrdn.io/cEnw My brother Josh was having trouble getting one of Jay Stakelon's exercises working in both Framer Studio and on the device. It's working now. :) http://share.framerjs.com/q3a04hzyaqb8/ I was dealing with a similar problem and recently noticed Brandon Souba was too. So, I decided to wrap the code up into a module for all to share. :) Once you add the module to your project, you can use the Pointer class to get either the Screen or Offset x & y coordinates. Here's two quick usage examples: 1. btn.on Events.Click, (event, layer) -> print Pointer.screen(event, layer) 2. btn.on Events.Click, (event, layer) -> print Pointer.offset(event, layer) Instructions for adding it to your project are in the comments at the top of the module file. You can also check out this link to read the comments and download the file: http://jrdn.io/cEnw This should take away a lot of the frustration and WTF moments when dealing with cross platform scenarios involving pointer location. I hope this helps... <3 Jordan #framerCode
15

October 18

Qin Rong
I have a problem:I bought framer license and use it on two computers, but one computer is broken and I want to use the lisence on another one, the notice shows the license beyond the number,how can I resent the license?
1
Benjamin Den Boer
Hiya Frameristas! Here's a simple example prototype that highlights the flexibility of Auto-Code Animation. I've used it to design this screen transition, "like" animation, and more. Check out the Framer file below. :-) Open in Framer: http://share.framerjs.com/2vaiz3nnqhjw/
2
Jared Okabayashi
Hey everyone, I have a question hoping to get some help with. I'm pretty new to framer and getting my head around it but I'm trying to add an onClick event to an layer that appears on a MouseOver event. The animation is a simple opacity: 0 - opacity: 1. Currently whenever I add my onClick Event, it breaks the MouseOver. Any suggestions? Thanks in advance!
2
Regimantas Vegele
Hi All, I'm a bit confused as to how framer colors work. I have multiple 'parents' for a layer and they all seem to give their opacity to the child. If I set Opacity 1.0 on the child the color is totally different if I just draw a layer with the same color but without parents. In addition, I'm not sure if this is something that I don't fully understand, but if I do a screenshot of the prototype and pick the colors, they are not what I assigned them to be in the first place.
2
Mazzy Bart
If you are using Framer Studio for free, would it be called Origami Studio?
0
Gracjan Złotucha
I love that autocode animation feature :) Good job, guys!
1
Youran You
Hey! Anyone knows how to prototype the app organization effect? You drag an icon and it pushes other icons along the way until you drop it. Thanks in advance :)
5
Henrik Eneroth
I'm using neither Sketch nor Photoshop, but Affinity Designer, for which there appears to be no support at the moment. However, Affinity can export to PSD. How do I get Framer to import a loose PSD file?
12
Dan Clarke
Hi all How do I go about importing assets from locations other than sketch/photoshop. I'm trailing affinity designer right now...
3
Denis Tomazin
Hi, I have a states question. How can i create an automatic animated loop through states of one layer. LayerA.states = one: y: 440 two: y: 430 three: y: 420
1
Benjamin Den Boer
Made this for Karol Piwowarczyk and on German Bauer's suggestion, but thought it'd be cool to share with you all: here's a neat little trick to simulate a typing effect in Framer. :-) http://share.framerjs.com/raln7x11bavv/
3
David Politi
Allo! Framer workshop this Thursday at Thumbtack in SF. Sold out, but there will be three more tickets released tomorrow at Noon PST. Special keynote from Koen and Jorn.
4
Yfat Eyal
Hey, I'm looking to find references or some help :) on building a slider on an SVG path (so I can have the full pathway on the map - as a slider - http://share.framerjs.com/686vawhusb2t/), any help would be appreciated :)
1
Alexis Morin
Hi everyone! Is there a way to modify the properties of my layer without having to repeat its name over and over again on each line? I'm heavily styling layerA so that layerB only needs slight changes. I also can't use a loop in this case because I only have 2 layers and they are different. Thanks!
2
Jacek Stryk
Trying to figure out the ScrollComponent and scroll the content off the screen with scroll.scrollY set to height of the content layer + screen height to make the content go off screen. Looks like the scrollToPoint can scroll up the content height not past it. Any ideas how to scroll the content layer (layer A below) completely off screen? Thanks!
5
Jacek Stryk
Hi there - how would you approach building an infinite scroll prototype that scrolls both up and down? The basic idea is to have a set of carouselling rows which slide in at the bottom of the screen once they scroll off the screen on the top to create an impression of infinite scrolling through a finite set of rows. See attached example:
1

October 19

Karol Piwowarczyk
Hello! How to make animation that simulates writing? Thanks for your help! :) Karol
3
Will Anderson
This doesn't relate directly to Framer, but relevant to a prototype I'm working on with Framer. Trying to wrap my head around how Apple animates shadows / highlights / movement on so many of their landing pages (http://www.apple.com/iphone-7/ is a great example). Based on a bit of exploration / googling, it looks like it could be a combination of image mapping / webGL controlled through JS. But if anyone has a more educated breakdown of how this is achieved, or could point to any relevant reads/tutorials out there, that would be much appreciated. Really fascinated by the subtle effects / integration with product photography. And hope to *eventually* incorporate some of these learnings into a prototype I'm building. Also, I could be totally off on how they are approaching this. So please correct me if I'm wrong! Edit: here's a link to the gif I posted below, which will show an example of the animation http://imgur.com/a/MF15r
10
Jon Madison
if anyone's using ajimix's awesome Input-Framer module, i've fixed two things that were bugging me. The first was fixed 'cos my daughter made fun of the tiny keyboard that was popping up when i hit the input box on my HTC one prototype (scale keyboard properly based on device), and the second was a bug that kept the virtualkeyboard popping up even when you didn't want it. I've created a pull request, but in the meantime feel free to grab from
2
Gregory J. Orton
So, I didn't know this existed: https://examples.framerjs.com/ This should totally be the way the library of modules is presented too. To see code side by side with the results.
1
Ben Callis
Two questions. First how do I keep a draggable layer from moving onCLick? How can I have draggable layers within a scroll component and still scroll without having the draggable layer open? here is an example
1
Claudio Guglieri Lillo
Hey everyone, I get these weird icons and illustrations when starting out framer and in the UI. Is this happening to anyone else?
4
Pedro Alejandro Wunderlich
Is it possible to scroll one scrollComponent by scrolling another? Say, you have a vertical and a horizontal scroll. I want them to move 1:1 as I drag on either the vertical or the horizontal. Possible?
2
Josh Max Rubinstein
In this example how would I access sub layers of each album so that I can create another animation (in addition to the current) triggered after a short delay to animate in the album titles separate from the covers? http://share.framerjs.com/sj0b4cdoj2ss/ (reload the browser to replay)
1
Francois W Brahic
Hey guys, Is there a way to differentiate between a left mouse click and a right mouse click in Framer? Thanks!
2
Darwin Campa
Hi all! I'm trying to achieve native Android scroll feel with Framer, and the default friction value of 2.1 seems like too little - at least in Framer Studio. I have a couple questions: 1. What is the relationship between Framer's friction value and the more sciencey "Coefficient of Friction" (COF) number, which is between 0 and 1, usually used to describe the concept? Android Views default to 0.015, which seems like a true COF value. 2. Does Framer do any work to match the native scroll feel? In other words, if I have the same prototype in the Android Framer browser, the iOS Frameless browser, and Framer Studio, will the scroll physics feel different? 3. What options should I set (friction, tolerance, etc.) to achieve the closest match with native Android scrolling? Thanks! :)
3
Koen Bok
After some complaints about Android performance I started a deep dive into it. These are some of my initial findings and plans where we can improve. Android has always been a bit of a weak spot for us as we're mostly iOS users, but we want to support Android just as good. If you are an advanced Android user with deep knowledge about graphics, performance and browsers we'd love your help and insights. I'll turn this into a proper article on the site over time, feel free to add comments or feedback here or in the doc.
5
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. 📲
7

October 20

Maxence Le Corre
Hi, I'm trying a very simple animation here. The expected behaviour is to have the layer at the top being horizontally centered after being clicked thanks to the following property: midX: Framer.Device.screen.width/2 Once in a while it does. But most of the times it gets left aligned. Also I'm wondering why we cannot use the Align function on midX / midY / maxX / maxY. Wouldn't it be more convenient if we could? I'm guessing there might be reasons behind this limitation (some other recommended practices maybe).
2
Joshua Crowley
Cool little project from Runkit (formally Tonic Dev). Hopefully handy for folks in the Framer community who often demo web products. I wonder could this project be a really nice way to script/annotate your Framer prototypes, with the bonus of rendering into shareable videos...
0
Benjamin Den Boer
Auto-Code Animation meets Material Design. Check out this simple example featuring the signature ripple effect, parallel animations and more! http://share.framerjs.com/9p9mgdl41o52/
3
Gregory J. Orton
OK, not even sure where to start fixing this: running my prototype on my Mac and on iOS works fine, but when I load a page on Android Framer I get a 'Uncaught Exception: range error, stack call size exceeded.'. Also, android animations are running really really really slowly. Is Android Framer known to be sloooooow?
1
Mea Ningless
Hi, does anyone know of a place or community where I can post a screen or two about an app UI/UX and people could rate or provide feedback as far as which UX would work best?
3
Alan Dickinson
Hey all! I made a module for Framer that makes it dead simple to create and control views that stack on top of each other. You can swipe to dismiss them, or fan out the stack and tap one to bring it forward. Try it out and let me know what you think! Try it out: http://share.framerjs.com/ndjpzkhzas4z/ Use it in your own projects: https://github.com/alandickinson/framer-view-stack
3
George Otsubo
Hi Framer team, is there a way I can delete the cache in the Framer Preview iOS app. It still shows old files that are currently not open...
1
Stephen Crowley
Glad to see.. erm hear.. Jorn and Koen on Design Details. Give it a listen!
3
Sergey Voronov
anyone has connected Framer and leampotion js sdk?
5
Arthur Kocharyan
Hello, everyone! I’ve faced a problem which I’m not quite sure how to solve. You see, I’m trying to make header stick to the top of the screen or un stick from it if scroll reaches certain point. The problem is that it does so only if I scroll slowly. I use onScroll -> if screen.scrollY > 500 stick it to the top if <500 then un stick it. Now I tried print: screen.scrollY and it seems that if I swipe up quickly the scroll-by-inertia effect starts and it doesn’t count as scroll, because the print stops the count right were, to my eye, scroll-by-inertia starts. Any way to solve this?
4
Ruben van Gaalen
Hi! I'm working on a prototype with a draggable list and used: https://share.framerjs.com/exw00nylgvo3/ as an example. It's great, but I'd like to target the layers separately to add some extra content (text and image, like in the picture I uploaded). What would be the most efficient way to do this without changing too much of the framer example code?
3
Dwayne Tatum
Hey gang, Long time stalker, first time poster here. I've been using Framer for a few months and love it. My current issue is as follows: I have this prototype that makes use of an array to set up a grid of cards that scroll --> http://share.framerjs.com/kgymifnrells/. Inside each card I want to load a different image from the image folder in the framer project. I'm not fluent with javascript or coffeescript (yet) but I believe I've hit a wall as far as what I can piece together from various tutorials online and within this great community. What I'm looking to get help with: 1. I'd like to load in the 10 images from the images folder starting at the top left (grey rounded box that has no image), then the next image under that one, then top square in the next column the the one under that and so on... 2.Why am I getting this first empty grey box at the top left? Any help along with an explanation on how the solution works would be very much appreciated! Thanks!
2
Jim Simpson
Hi All, excited to be getting started in Framer! Quick question - I just imported a Sketch file with a few rectangles in a group. I'm trying to target one of the rectangles named "layerA", but I keep getting an undefined error and I can't seem to select the layer. Any suggestions?
5
Jacek Stryk
Is it possible to specify animation option per property? Example: layerAnimation = new Animation layerA, x: 461 options: curve:"spring(250,50,0)" opacity : 1 options: curve: "linear" time: 0.3
0

October 21

Chris Camargo
I feel like I'm going crazy... This is a method I swear I've used in the past to check for the existence of a variable or a layer, but it's breaking. What am I doing wrong? I was expecting the code simply NOT to print the second string. I wasn't expecting a ReferenceError. Thoughts?
4
Adam Mazurick
I am pleased to Announce that our next meet-up in Toronto is happening on November 23, 2016. ConnectedLab is really proud to be hosting Framer.js meet-ups in Toronto every month. Meet-ups are free. Our last meet-up went pretty well so we're stoked to keep them happening every month. This month we're diving into Autocode and Autocode Animation. I'm going to do some live-coding and walk through 1 demo from start to finish! Our meet-ups are getting bigger and better. We're crazy thankful to everyone who came out last time. Please join our Toronto page https://www.facebook.com/groups/framerjs.Toronto/
1
Gracjan Złotucha
Guys any plans to add in future text layer? I mean auto-code layer where u can edit font type,size etc
1
Quinnie Chen
Hi everyone, I was trying to use framer and imported an exercise sketch file in, but it seems when I tapped the layers, nothing happens... Did I do anything wrong here. P.S my trail version is going to be expired in 7 hours and I haven't made my mind about using it or not. Here is the screenshot
2
Sona Solbrook
hey i need some help...i gave the wrong email on my form buying the software. i sent support an email. any help would be awesome.
1
Angie Marie
Hi all! Does anyone have any tips for the best way to build a module for a navigation bar (desktop) that is reusable across applications? For instance, we have a standard template that we use across apps so all of the navigation bars have the same style with different app icons and menu items. For building prototypes, it would be nice to just call the navigation bar and edit the navigation items. If people just import the Sketch component, how do you change the text styles for active navigation items/dropdowns/etc.? Thanks in advance! I'm obviously new. :)
1
Adam Mazurick
Hi Framers. I have a blocker. I'm making a prototype an it's a card sort prototype but when each of the cards get clicked they are intended to expand. Koen Bok and Benjamin den Boer made the initial breakdown. Pay attention to card number 3. 3 expands. Upon expand I'd like to show additional card details. 3 were on top of the order, I would like the other cards to move below and maintain padding so I could scroll. Any ideas on next steps?
0
Arturo Goicochea
Hey guys, I'm building what should be a pretty simple prototype...butI don't know why it keeps acting super weird. I just want to drag a layer and have it animate to different coordinates based on how far it was dragged. But after a few drags, it goes crazy and animates to random positions. It should only animate to 240 or 0 (along the x axis). http://share.framerjs.com/scwnkry867du/
3
Marco Mueller
Sorry, this is really simple but I don't get it: how can I get all squares moving? Thanks a lot!
2
Holger Kuehnle
There is a nice way to password protect Framer prototypes as described here: https://gist.github.com/josefrichter/561dfd823f829f87ec6e - is there a way to make a prototype still downloadable in Framer viewer when it is password protected this way?
0
Lior Azi
My first experience with FramerJS, tried to imitate F1's graphics that I like & had fun doing it. You can see the TV Video I was imitating here: http://eli1981.bitbucket.org/video.html. I'd appreciate your feedback.
1
James Muirhead
Any plans to implement Auto-Code and Auto-Code Animation for layers imported via Sketch plugin?
4

October 22

Ryan O'Rourke
Anyone else run into this? If I leave a running composition idle for ~minute it freezes up — tapping around brings it back to life but usually takes 10 or 15 seconds before it starts responding again. Problem is really when presenting and you stop to talk through what's being shown and then come back and you can't interact.
3
Thomas Law
I made a music player, with 2 modes to show the volume, and you can switch between 2 modes freely. If you like it, please give a "like" on my Dribbble page: https://dribbble.com/shots/3040020-Music-Player Also the Framer prototype here, you can try it: http://share.framerjs.com/mknumpt0b52l/
1
Benjamin Den Boer
Hi all! Here's a simple example featuring multiple staggered animations of Sketch layers. Plus, a menu icon designed and animated completely in code. Both can be previewed and fine-tuned in the new Animation Panel. :-) On Dribbble — https://dribbble.com/shots/3040718-Menu-Animation Open in Framer — http://share.framerjs.com/5w05x3kbx7ey/
1
Thomas Law
Blossom. http://share.framerjs.com/5hoiz0ataxm6/ Like it on Dribbble: https://dribbble.com/shots/3042273-Blossom
1
Kishore Kumar
Hey guys, I am using the View Controller sketch plugin. When I import to Framer using it's import option, only the sketch file gets imported, not the relevant code for transition. Any one knows why?
2
David Louie
Mimicking the card interaction in Apple Maps, I started w/ the intent of trying some of the new auto-code animation, but it's a little awkward when most of the transitions I use occur when switching states? How can I use the auto-code animation when animating from state switches I guess? http://share.framerjs.com/96gp43ftusss/
2
Stephen Crowley
Framer Seattle Meetup #17
51
Karol Piwowarczyk
Hello, I have a little question for us. I am working on PageComponent for my application and I can make automatically change page in my PageComponent (for example with 2sec break) How I have to do it? Thank for help!
2
Elliot Pessah
Hi all I been working on this interactive wireframe and I am having a problem with my horizontal scrolling / click event page.onClick -> page.snapToPage(this) the line of code I thought would work but is not working :( side not if anyone has the solution for an arrow that could be clicked to move the carousel left to right that would be awesome also lol
3

October 23

Thomas Law
As many people are curious about how I animated the earpods (or other parts in this animation), the Framer file is shared here: http://share.framerjs.com/rbjvdq7a8v6m/ Click your mouse, and it will be played! The codes are kind of messy, but I'm too busy to sort them out, and I think you can work it out. Inside this file you can see my thinking on realizing SVG + CSS animation in Framer. If my work helps you extend your mind and make cooler prototypes, I hope you can follow my Dribbble page and give this shot a "like": https://dribbble.com/shots/3043359-Construct Thank you very much!
1
Nik Udovitskiy
Might be a foolish question, but what do you guys use to screen record your prototypes?
3

October 24

Thomas Law
Made an animation in Framer! Like it on Dribbble: https://dribbble.com/shots/3043359-Construct
6
Jacek Stryk
Hi folks - trying to prototype an infinite scrolling set of pages where once the last page scrolls off screen it slides in at the very bottom. I'm trying to use the Page Component to implement a simple logic of: 0 screen starts with pageOne 1 scroll pageOne off screen 2 scroll pageTwo on screen 3 move pageOne below pageTwo 4 scroll pageOne on screen 5 back to #1 What I have trouble with is: A) not able to track the pageOne.y cause when I'm looking at it in page.onMove -> print "PAGE onMove" print pageOne.y print pageTwo.y it constantly shows 0 (zero) even though when I mouse over pageOne in the layers panel I see its y set to -720 (once it is scrolled off scree) B) trying to update pageOne.y to 720 to move it at the bottom of the screen does not cause the layer to change its y coordinates even after page.updateContent() is called C) I like to know when a certain page stops scrolling and tried to listen to pageOne.onScrollEnd -> etc but it seems the scroll events are not firing upon page scroll stop so how can I listen if a page snapped into place? The page.on "change:currentPage", -> fires as soon as the pages start moving but I want to know when a particular page stopped moving. Here's the code I have so far - appreciate any insight into how the Page Component works and how could I possible prototype an infinite scroll with repositioning AND re-useing the pages. Thanks!
4
Thomas Law
If you like this like, why not like it on Dribbble? https://dribbble.com/shots/3044293-Like-Me-Like-Me-Not Framer link, of course: http://share.framerjs.com/8yapf56zf89e/
1
Paul Kooi
Feature Request for Niels van Hoorn and company: I really enjoy the new animation engine. However I'd like to politely request support for the Bezier type animation curve. It would be nice to have manual control over the bezier handles similar to CSS animation tools found on line like... http://cubic-bezier.com/ Thanks guys.
1
Steven Ren
Hi, a new prototype for particular pages between overview and details. http://share.framerjs.com/0hjbxjurs9i0/ Also, you can open it in Framer for iOS to play around with it, and download to local~ enjoy~
1
Agisilaos Tsaraboulidis
Hey there Framers, this time I'm not here for a question. I want to share with you a prototype that I've made for the upcoming version of my game: SoundMemory Rush. Many users did not understand how the game works so I have decided that I need to create an interactive tutorial in the next major version. Feel free to ask me anything about the game and of course, I'm open to suggestions that will make the Onboarding experience better. Prototype: http://share.framerjs.com/e9rhpeq6kwie/
1
Niels van Hoorn
Hey everyone, I'd love to announce that Auto-Code Animation is now live in Framer! You can now create and refine awesome animations using the new Animation Panel and live preview, all while Framer writes the code for you. For quick iteration, we’ve even added in-canvas playback controls. We’ve spent a lot of time perfecting this feature, and we’re really excited to see what you’ll create with it. Watch the product video and read the full announcement here: https://www.youtube.com/watch?v=BYwIjaIPxgU http://blog.framerjs.com/posts/introducing-autocode-animation.html
18
Christie Gettler Tarazon
Hi All, new to framer here :) Loving the implementation of the auto-code animation! Is there a way to access children imported from sketch directly on the canvas? i.e. if i import and entire sketch file, and want to animate one of the groups/layers using the canvas rather than writing it in code directly, is this possible yet? Currently I cannot select any children on the canvas to move them around... Cheers!
1
Silvia Bormüller
Hey guys, we are happy to announce our first Framer Meetup in Munich, Germany. Join us on November 28th at Microsoft Germany. Hope to see you there. 👋🏻
1
Isaac Weinhausen
Any Phoenix, AZ frameristas here? Join us tomorrow for our first meetup! Learn how to code your first prototype or show others what you've been working on. https://www.facebook.com/events/1593039464339215/
0
Benjamin Den Boer
Hiiya guys. I made this little clock in Framer, for fun! It's cool to play around with different animations here, too. Perhaps useful to some of you. :-) http://share.framerjs.com/uilwg5c5i8ec/
2
Calvin Teoh
Is there an event I can listen for to know when the Framer preloader is complete? I have some timed triggers that are happening while the preloader is still covering the prototype when I view it on a share link.
3
Koen Bok
We'll be in Berlin this Wednesday for a meetup hosted by our friends at Ableton. We'll do some show and tell and a workshop. From what I heard they're going to share how they prototyped for their awesome Push product. If you're in Berlin, there are still a few spots left. https://www.ableton.com/en/push/ https://nvite.com/FramerMeetup/d81d
12

October 25

Ash Adamson
THANK YOU Framer community for one of the best Framer Sessions SF yet w Koen Bok & Jorn van Dijk. We had 70 attendees and could not been possible without such a vibrant community and the help from our mentors, David Politi and Thumbtack. Big thanks to our mentors Mike Feldstein, Jay Stakelon, Arun Venkatesan, Michael Lee, Tisho Georgiev Nicolas Duc-Dodon.
5
Jason Brown
Hello Framers, I am having trouble figuring out how to scroll my content up but delay the wrapped content within the layer to not scroll until my layer is scrolled to its final Y position. And instead just move the wrapped content up with the scroll content layer. So, essentially I want to be able to pull the main content up and then once at the top the wrapped content will scroll. All within the same original scroll component. I hope this makes sense, as I could really use some help. Thank you!
1
Chris Camargo
I'm working on a prototype with shopping cart functionality. To keep track of what's in the cart, I use an array. As the user adds products to the cart, I simply add an object to the array that contains the name and price of the item, which will feed the cart's display and price calculations. When the user adds more than one of the same product type to the cart, I just add another object with name and price. So, in practice, it's possible that multiple objects appear in the cart array that are identical. My question is – how would I go about removing an item from the cart array, without knowing its index, and with the possibility that multiple items in the array may have the same value? And overall – is this how you would go about constructing a simple cart in JavaScript? Anything else I should consider?
7
Mike Johnson
Hey Framers! New free video up at FramerCasts! This time looking at the Auto-Code Animation features and seeing some of the fun stuff it can do, and learned a few new tricks in the process.
1
Marc Krenn
I'm currently writing my first module called "circleConstraint", allowing to constrain a draggable layer to a circle. Unfortunately, I'm stuck at a certain point. Instead of dragging the constrained layer directly, an invisible helper is used to calculate layer.x/y . Now, I'd like to pass the helper's "private" DragStatus (DragStart, DragMove, DragEnd) on to Framer, so it can be used to trigger events like animations. I've tried some different approaches (passing&validating arguments etc.), but so far, only a shitty/buggy workaround using Utils.interval worked. There must be a way better, way more elegant way to do this. http://share.framerjs.com/djsdo474638z/ Can anyone help? Thanks.
4
Gavin Atkinson
Quick bug report - imageOnLoad event listener does not seem to work: http://share.framerjs.com/inn3u5b54ejx/ The above uses only the code from the reference doc, it should print "The image couldn't be loaded". The 404 error can be found in inspector but Framer does not respond.
1
Adam Mazurick
Updated Toronto meet up link! http://meetu.ps/e/C7ZyW/ypplz/f
0
Hoffer Gábor
Yo Budapest Framerheads! If you think it would be good to have a FramerJS Meetup in Budapest please 👍 — If you have suggestions/ideas about what you would like to hear about, please comment here. — I can make it happen if 100-200 ppl are interested!
3
Regimantas Vegele
Is there a way for framer(studio) to know it's main canvas position relative the whole of the display screen? So let's say your monitor left top is (0, 0) the window in which framer(studio) main canvas is at (123, 456). It doesn't even have to be canvas. It can be the framer(studio) app position on screen. I can get the app's size with window.document.width and the canvas's Canvas.width, but knowing where they are relative to the overall screen is still a mystery. Perhaps this is more of a javascript question than framer? window.screen.top doesn't seem to return anything
2
Adhithya R Kumar
So, I am trying to share my prototype for testing. I noticed that the URL generated has this particular card expanded. I'd like to know if this can be made invisible or at least closed on startup. I tried checking for this on the docs and could not find it. Thanks in advance.
1
Gene Becker
Hi all, just learning Framer and have a question about performance on Android. The project is a scrolling feed of expandable cards, imported from a Sketch file. I used ScrollComponent for the whole feed and Tap events for opening and closing the individual cards. It seems to work pretty well on the Macbook, but when I mirror to my Android phone the performance of the Tap events is abysmal, need to press for ~1 sec to get the animations to work right. I tried using Chrome browser on the phone, same issue. If I mirror to iPhone, the sizing is all wrong but the Tap events are fast. Not sure if I'm doing something really inefficient here...could anyone recommend a better approach? http://share.framerjs.com/qbc3vykktpxn/
0
Jordan Robert Dobson
MODULE: Device Pixel Ratio **UPDATE** The latest code can now be found on GitHub: http://jrdn.io/ffkn Demo & Module Post: http://jrdn.io/eANh I never managed to post my first version of this module to http://framerCo.de and after using it myself for a while and watching Lauren use it at work I've changed a few things. I tend to have the need to prototype for various devices and pixel densities at Microsoft. You never know what type of device someone will have there. I like to build my prototypes to be fluid and adaptable to the device. This module assists you in building prototypes @ 1x and adjusts the prototype using the Device Pixel Ratio of any device for values where you use the dpr() function in the module. This allows you to build fluid and adaptable prototypes in combination with the Screen.width & Screen.height values in Framer. Here’s a quick usage example for the same sizing in Framer and on any device:  {dpr} = require “DevicePixelRatio”  rect = new Layer   width: dpr 300   height: dpr 50 This will make sure it's 300x50 @1x, 450x75 @1.5x, 600x100 @2x, 900x150 @3x, and so on... It will even give you the correct values in FramerStudio for any device regardless if you use retina or not. :D Framer Studio Usage Demo: http://jrdn.io/ffzH Module Code: http://jrdn.io/ffkn I hope this helps you on your prototypes. It's definitely helped me! Happy Holidays! #framercode
13
Pedro Alejandro Wunderlich
Using a for loop, how do I get an animation to apply to all layers and not just the one? I can't figure it out. I've managed to get a stateCycle going for each layer using a "this." but can't make it work with the animation. Here's the code if you'd like to fiddle: http://share.framerjs.com/d8cgy44y7mq9/ (funny, didn't know FB didn't animate gifs.)
2

October 26

Chris Lee
Anyone else having issues with tap events occurring twice when running on device?
5
Liu Zhou
page snap problem on android mirror I have a btn on every page of the PageComponent to snapToNextPage. It works fine in framer studio and chrome/Mac. But failed on android device. Some help pls Here's the test page
0
張尊尼
Anyone knows how to switch your figma account in framer? After I connect my first account for figma import, there is no button for me to log it out. It keeps loading the contents of my first account even I have logged out the figma on the web.
2
Struan Fraser
Hello all, I seem to be having some trouble setting the positioning of my device. I can't un-center it.
1
Chris Camargo
How does one avoid this madness? I'm trying to modify the property of the object in the array, while leaving the original unmodified. What's going wrong here?
2
Chad Smith
Hey Framers! Does anyone know how to change the inertia of the Scroll Component? I know how to change the scroll speed with scroll.speedY = 0.5, but I'd like to change how far the component scrolls after the swipe. The velocity property doesn't seem to help either. Any help would be awesome, thanks! Here's the demo I'm working on: http://share.framerjs.com/8qobkgvzhafx/
2
Jacek Stryk
How can I set only one attribute of a layerA.screenFrame, example just want to set the Y value i.e. layerA.screenFrame.y = 100 I tried different things and could not figure it out. I can do "print layerA.screenFrame.y" and it prints only the Y coordinate yet layerA.screenFrame.y = 100 does not changes the layerA y coordinates. I can do layerA.screenFrame = x: 200 y: 100 width: whatever size: whatever but I just want to adjust the Y attribute of layerA not everything.
5
Andre LaMont
I've been using Framer for a few weeks now! Love it. I'll post my work here as soon as I land on something I favor. Loving all of the amazing work that I'm seeing in this group though. Kudos guys and gals!
2
Marco Aurélio Rodrigues
Hey guys, I am trying to hide a button when I am on a specific page using a condition and snapToPage, but I can't figure out how to target the current page on view. I tried the currentPage but for some reason, it did not work. It hides the button permanently. Can anyone give me a hand? Here is a demo I hope this makes sense. Thanks
3
Angie Marie
Hi! I am finally getting a working navigation bar module -- you can add items in the app and it should auto-size the navigation bar based on number of items. HOWEVER, I just can't figure out the right `x: _____` formula for making the navigation bar start in the left-hand side and build from there based on the number of items. I don't even know how much I want it to be spaced, but I can figure that out once I get it working properly. Currently I have `x: i * (defaults.screenWidth / itemCount)` which I took from another example. Here's a link to the prototype -- please feel free to offer any suggestions as well -- there's probably better ways to do this.
5
Jacques Decazes
Hi all! Here's my problem: http://share.framerjs.com/u2cx9fv6m44f/ I have this image that I can zoom in on double tap on it. Then I want the image to be draggable, but before the double tap and when I double tap again on the image to zoom out I want the image to be static (no draggable anymore). I definitely think that there's a simple way to do it but cannot find the solution :( Any idea ?
3

October 27

Adam Mazurick
Connected Lab has officially been selected to be Toronto’s Official Framer.js Chapter! We'll be using a new format :) It’s going to be very focused on just Auto-code. There will be more T-shirts too! Tickets are now available! https://www.meetup.com/Framer-JS-Toronto/events/235095428/ Beautiful subtle movement enhances the user experience and makes products more engaging, dynamic and memorable. This month we'll be diving into Autocode Animation-a powerful feature that helps you easily design animations. https://www.youtube.com/watch?v=BYwIjaIPxgU FORMAT: 1. We'll do some teaching and then we're going to work 1-on-1 with every attendee so that you walk out of our meetup with 1 complete prototype! 2. We're going to break down Autocode. 3. We're going to do some live-code. Yeah, I’ll actually put files on Git and do stuff from scratch. 4. We're going to work 1-on-1 with you and teach you how to get going even if you don't know code :)
1
Steven Ren
The borderline around an interactive element for hint can be disabled? I've found wiki of Framer but with no result.
1
Alex Venus
Quick beginner question here: > what do i have to do so that the "sketch.all.animate properties" has a delay or only starts after the first animation (gallery button ends?). Simply adding "delay" doesn't do anything?
4
Zoltan Ray
Are there particular techniques to use/avoid for quick compile times?
1
Wouter Van de Kamp
Yesterday I came across the following scroll effect on Pitchfork: http://pitchfork.com/reviews/tracks/18582-drake-fake-love/ I had some spare time today and really liked the effect so I made a real quick replica of it in Framer. Might be useful for creating a blog scrolling effect or anything. http://share.framerjs.com/f9tpua2ej3l2/ It's not extendable yet, so it's fixed on two items.
2
Fausto Pérez
Hi all! Only one week to go for the first Madrid Framer Meetup! It's Friday Nov 4th 4PM - 7PM UTC/GMT +1 We'll go live here on Facebook (any tips are welcome). We'll try to use English as much as possible but expect some Spanish. Also, if you happen to be in Madrid and want to join as a mentor let me know and we'll save a spot for you. At the event: - Niels van Hoorn and Krijn Rijshouwer from Framer will be joining all the way from Amsterdam. - Ale Muñoz from Bohemian Coding, the company that builds Sketch. - Free pizza and beer! Let's do it! https://nvite.com/FramerMeetupMAD/c415
0
Alex Venus
Hello framer community, so i have a scroll component wrapper but he shows a great overlay over my designs and i want to get rid of it. A friend told me to simply set the BG of the scroll thing to null but that doesn't work. Any other ideas?
3
Ee Venn Soh
Jonas Treub Koen Bok I will trying to figure the purpose of the pointer conversion module. How do we use this? https://framer.com/docs/#canvas.convertPointToScreen
0
Dhruv Saxena
A different take on prototyping with Code which might interest the folks in this awesome group -
1
George Otsubo
Hello, wondering if somebody can help me understand for() vs .map() loops better. Trying to pick apart and learn from an old Ed Chao prototype and I was curious to see if a for() loop worked instead of .map() but it errors out. I guess .map() creates it's own scope but...why and how? When should you use a .map() vs a for() loop?
2
Markus Ölhafen
Hey Everyone, I have been using Framer as prototyping tool for our latest project. This prototype was the first one I also used Classes and modules to reuse the elements in further prototypes. Thanks to the amazing community and examples I found in this group and on medium I really learned a lot and keep on learning :) I know there is room for improvement in my code, but for now I'm super happy with Framer and what it can do :) Feel free to check out the prototype: http://share.framerjs.com/h4pkme69xvke/
2
Jacques Decazes
Hi everyone, I have a little question there. Is it possible to apply a kind of "autoplay" to a page component? I want the page component switching from page to page without any finger interactions. Is it possible? Any ideas?
3
Sajid Saiyed
Hi, I am running into some problem with the Scroll Component. I have a scrollComponent which I am controlling both using a slider as well as scrolling the content itself. Whenever I scroll the content in the scrollcontent by directly touching and moving the content, I always get scroll.isMoving as TRUE Even when the scrolling has ended. Is there a way to make scroll.isMoving to be set to false when scrolling has stopped? Thanks for any help.
2
Sajid Saiyed
How can I bring a translucent layer on top of a slider component? When I try to do that, slider always stays on top of any layer. Even when its index is lower than the layer index. Is there any fix for this?
1
Adam Mazurick
Having trouble disabling dragging beyond certain constraints inside this scroll component. Any help? When a user pulls down they shouldn’t be able to see white. They shouldn’t be able to pulldown at all.
2
Elias Suske
Hi! 1) While I press my Key Events, os x makes a system alert sound … how can i fix that? 2) And can I make the mouse invisible?
2

October 28

Arturo Goicochea
Hey guys, wanted to share a prototype I built which I want to turn (soon I hope) into my first module. We've all seen apps that hide the toolbar/chrome/etc on scroll which can be done by reading the velocity of a scroll component. I wanted to add another layer to this interaction. Basically, what I've done is that as you scroll (the scroll component) in one direction, you also move another layer, and you can then trigger an animation/event based on this additional layer reaching a certain point. Let me know what you guys think! http://share.framerjs.com/3h2btoznlamn/
1
Matthew Blode
Hi Framer Friends, I have redesigned my portfolio website: https://matthewblode.com Could you guys offer me any feedback and tips on how to add interactions/micro-interactions/transitions or anything delightful into the web design? Thanks so much 😄
0
Josh Ackerman
Hi everyone, A few months ago I made a prototype of a virtual keyboard in Framer, and although I intended to publish the source once I finished, I never really got around to finishing it. After seeing the Apple event today, and the big focus on the Touch Bar, I thought this prototype could somehow help (or be extended\simplified by) people interested in testing keyboard related designs. The original prototype was basically a working keyboard (using a custom text field I made), however this release is simplified in the sense that I removed the firebase integration that made this work, and didn't include anything but the keyboard. If people are interested I'll release the other Framer document which takes advantage of working shortcuts, app launcher, keyboard, UI bar, and glitchy mouse control. As I mentioned before, it is unfinished and the code wasn't necessarily meant to be made public in this condition but anyway here is the download link, http://share.framerjs.com/f3rqiv0o8i5i/. Original on Dribbble: goo.gl/uXY1Xp
1
Andrea Pedrina
Hi all. I'm new to Framer but I've having troubles finding a complete documentation. The one on Framer's website doesn't cover all the functions I'm finding in demos here. So if you know one, please share :) But most important I would love to understand how to do these things: 1) Make a layer draggable after a short press. I need this because I've a scrollable list of circle elements that the user should also be able to drag and drop. So i'm having troubles. 1.1) Any good demo of a working drag and drop? 2) How do i fix the wrap dimensions of a scrollable element without moving the content? 3) How do i change the turning default position speed of a dragged element? Thanks! :)
2
Markus Ölhafen
Hey everyone. I'm currently experimenting with custom devices. Is there a way to reposition the whole device? "Framer.device.y = value" just like for the screen position doesn't seem to work.. Anybody has a solution for that? Thanks in advance
2
John Grendon Enderby
Hey folks, I'm having a weird issue this morning on version 73, not sure if it is a weird bug or I'm just missing something but for some reason I'm not about to interact with the dev tools/console when the canvas is detached. Simply won't allow me to click on anything. Anyone else experiencing this?
8
Sune Lorem
I'm trying to figure out an If/Else statement that keeps the drop down visible when user has MouseOver'ed on the nav button and MouseOver's onto the visible dropdown. — MouseOut will hide the dropdown. When I mouseOut on BTN_5 the dropdown hides. ######## BTN_5.on Events.MouseOver, -> dropdown_5.visible = true dropdown_5.states.switch("show") BTN_5.states.switch("hit") if dropdown_5.visible = true && dropdown_5.states("show") dropdown_5.states("show") else dropdown_5.states("default") dropdown_5.on Events.MouseOut, -> dropdown_5.states.switch("default") ######## Is there an easier (and simpler) way to do this?
1
Christie Gettler Tarazon
Hi all! Can you speak to a specific vertex on an object? say, if i want a rectangle to scale based on how far one of its corners is dragged, I'd assume I'd have to make a draggable event listener for the corner. Is that correct, and is this possible?
6
Dave OB
QQ : Is it possible to use transparent .mov files in Framer?
0
Fran Pérez
I'm trying to import the library shake.js into Framer through npm, but I'm getting this error. Does anybody knows what's going on? I'm following this: https://framer.com/docs/#modules.npm
3

October 29

Koen Bok
Our friends at Facebook just shipped a huge update to Origami. An unconstrained interactive design tool like Framer, but based on visual programming. It's a big step up from Quartz Composer and if you're into noodles and patches it's worth checking out!
13
Adam Mazurick
Thanks to the Framer team for helping us make our Monthly Framer Meetups awesome! Our Framer gear showed up and we're excited to share it with people who attend our event on November 23rd! http://meetu.ps/e/C7ZyW/ypplz/f
5
Sergey Voronov
On yesterdays Framer JS London meetup we were discussing that pointing to sublayers can be painful thing:) So I found a way to do it with "dot" - layerA = new Layer layerA.layerB=layerB = new Layer superLayer:layerA print layerA.layerB Of course this is no news for people who actually knows what they are doing with coffescript:) But for me it was a big discovery. http://share.framerjs.com/rrbe7iqk8r3b/
4
Marty Laurita
Hey Framers! I have a quick question: I have an artsy glow-orb animation that I'm working on but there are two problems: 1. I have randomized the colors in the framer file, but when they're rendered on the web, they all show up as the same color. 2. When on mobile, I'm trying to duplicate the "MouseOver" effect with a swipe, but to no avail. When you swipe your finger across the screen, nothing happens. Let me know if you have any solutions. Thanks!
0
Dhruv Saxena
Hi, I want to export SVGs from Sketch to Framer. I found this plugin-https://github.com/joshpuckett/FramerModules, but it does not work with the latest version of sketch. Can someone help?
4

October 30

Ray Cheng
Hi Everyone, I'm new to coding and are learning to use Framer. I was able to put together a for-loop pageComponent using one of the examples on the site, but I can't seem to figure out how to insert different contents into each page. Here's what I've done so far: http://share.framerjs.com/o9q97cuksctt/ How do I "put" things like photos or build things on individual pages? Can anyone help? Thanks!
1
Brad Ryan
Here’s a look at a fully responsive, end-to-end Framer prototype of Uber. Each component is a separate module, so its easy for our designers to build on top of. Want to come make cool stuff with us? Email me at [email protected] for an intro.
14

October 31

Ryan O'Rourke
Would be awesome if there was a way to trigger canvas zoom events from the editor (or is there?), even better if you could then set a custom curve for those zoom animations. (Speaking of the canvas cmd+,cmd- triggers.)
1
Ashwini Purohit
For practice, I'm trying to replicate the Uber Eats animation of selecting a restaurant and adding a meal from that restaurant to the cart. I have a (badly coded) version of what I want, but I would really appreciate any guidance on how to do this in a better/more efficient way. -I tried to use states, but I run into problems because I want the restaurants to scroll *behind* the header, but the restaurant image to expand *in front of* the header when tapped. I tried including the z order in a 'tapped' state for my scroll component but that didn't seem to work. -I also wanted to use states so it's easy to reverse the animation when I click 'x'...not sure how to do that efficiently without states... -Also because I want the photo when tapped to go to the screen's (0,0) not the parent's, I included a transparent layer in the scroll group that's the size of the screen. Feels hacky. Is there a better way? http://share.framerjs.com/18zij93ljb1t/ Thank you!
9
Ch Nasir Iftikhar
Is there no installation files in the downloaded Framer folder?
1
Clint Miller
I'm having some issues with a prototype I'm working on. 1. I can't get both page components to work at the same time. 2. I'm getting this error "Error: Can't scroll to this layer because it's not in the ScrollComponent. Add it to the content like layer.parent = scroll.content." I understand what it's trying to tell me, but it looks like in my layer panel that I have added the layers I need to the page component. 3. The layers I've added to my bottom page component aren't sitting flush with it. I made the second page components background red to illustrate this. You can interact with the component, which does cause them to come up and be in the correct place, but they pages don't start in the correct place. It seems to be an inheritance issue to me, but I'm not having any problems with the other page component. I'd appreciate any help someone is willing to give me. Thanks! http://share.framerjs.com/wteuftikb58p/
1
Jeongmin Kim
Hi! Framerz, suddenly I have a basic question. coffeeScript use `is` as `===` but Framer seems like use `==` as `is` rather than `===`. You know, we used `===` rather than `==` for safe in javaScript commonly. Can I ask you why does it run like this?
1
Srdjan Markovic
Is there a way to detect onMouseUp (or TouchEnd) event outside a clicked layer? Thanks
2
Niels van Hoorn
During our meetup yesterday I was talking to Maarten Werner, about applying the style of Sketch text layers to a Framer layer. This is some (intentionally, because subject to change) undocumented API some of you might not know yet, so here's an example of how you might do that: applyStyles = (sketchLayer) -> . sketchLayer.image = null . sketchLayer.html = sketchLayer._info.metadata.string . for style in sketchLayer._info.metadata.css . . if _.startsWith style, '/*' . . . continue . . matches = /(.*):\s*(.*);/.exec(style) . . sketchLayer.style[matches[1]] = matches[2] Here's how you would use it: http://share.framerjs.com/dwna15strtma/ It's not perfect (try disabling the "sketchLayer.image = null" line to see the differences), but still might come in handy in some cases.
1
Min-Sang Choi
Hi guys, This is framer.js version of facebook camera prototype that I created a while ago with origami(https://www.facebook.com/photo.php?v=398794546927367). Note: It's chrome+desktop (works on mobile chrome though) only, and you have to allow camera access to see cameraview. Dribbble : https://dribbble.com/shots/1643436-Facebook-Camera-with-Framer-js you can try yourself here: http://qcnoodling.com/fbmessenger.framer/
13
Charlie Sneath
I'm having trouble detecting a "scroll up" event. Attached video shows Framer intermittently confusing "scroll up" events with "scroll down" event. Doesn't have trouble when scrolling down. Is something wrong with my approach in code?
3

Monthly archives

2017

2016

2015

2014

2013