This is a read-only archive of the
What is Framer?
Join the Community
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 😄
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
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!
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/
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! :)
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?
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.
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?
Arron J Hunt
So...Framer Studio support for the new Apple Touchbar? 😬
Christie Gettler Tarazon
Hey guys! I'm having some trouble trying to make something draggable in fake z space. I need the black dot to be constrained to the grey rectangle (layer named dragZ) note: all of this is constructed isometrically with rotation values... I have the constraints of the dot set to the dragZ layer, and it is *technically* working, except it's not reflecting that the layer dragZ has been rotated. My dot drags within the non-rotated area of dragZ... any help appreciated! Thanks! project link: http://share.framerjs.com/xxo5sg3znxld/
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
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://framerjs.com/docs/#canvas.convertPointToScreen
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?
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/
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
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?
A different take on prototyping with Code which might interest the folks in this awesome group -
The borderline around an interactive element for hint can be disabled? I've found wiki of Framer but with no result.
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.
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?
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?
Are there particular techniques to use/avoid for quick compile times?
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
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/
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!
Hello all, I seem to be having some trouble setting the positioning of my device. I can't un-center it.
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.
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
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.)
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/