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

What is Framer? Join the Community
Return to index

June 2015

June 01

Jaime De Ascanio
Hello! This is my first post here, and I hope is not a silly question, I'm trying to get the scroll position of a layer when I start to drag the layer, thanks!
6
Marvin Kennis
Hey everyone. Just wanted to check if anyone has connected the LEAP motion to Framer yet. Want to prototype Soli-like wearable interactions, and this seems like a good way to go. If not I'll probably get working on it. Thanks!
2
Arved Baumgärtner
Hey guys, I have some simple questions to a prototype i started working on: http://share.framerjs.com/s5q76h19mtwk/ If card1 gets clicked, the heart appears on the card. I added a time declaration to the states, which are getting triggered, but for some reason they don't work, am I doing something wrong here? Is there a way to apply the same behaviour on card 3 and 4, without writing the same code again? (like a css class). Card 2 is triggering a detail view which I would like to scale from the center of the card, no matter where its positioned. I tried combine their y.value, but without success :/ I'm thankful for any help :)
2
Andy Jakubowski
Is there a way to switch states of a layer only if it is not being animated? I change layer states on DragStart, and later conditionally in Drag. These conditionals interfere with the initial DragStart animation. Do you know how to overcome this? gif (watch white square): http://www.gfycat.com/ConcernedChiefIndri project: http://share.framerjs.com/1usxhh5mnlts/ Thanks a lot!
2
Noam Elbaz
How could I drag around a point ? Like a knob? (Draggable is horizontal / vertical.)
7
Nicolas Russo-Larsson
feeling like a total newb, why is the video here not displaying?
3
Ben Deter
I'm working on a desktop web app and wondering what the best way to handle multiple dropdowns with different open and close animations is. When layerA is clicked show layerB, when layerA is clicked again hide layerB (show and hide have different animations) If layerB is open and I click layerC to show layerD, layerB should close. I've tried working with States and chaining Animations but haven't been able to get this work. Any help would be appreciated. Thanks.
8
Zoltan Ray
Wanted to try motion graphics in Framer. I animated most of the alphabet and didn't end up using it - hoping it's useful for someone. You'll need Roboto Mono if you want to play with the source: https://www.google.com/fonts/specimen/Roboto+Mono. And the project is here: http://share.framerjs.com/rt82crpoocfb/
18
Jacky Lee
Hello! Me again, sharing another little module, hopefully some of you may find it useful. This module will take in 4 parameters: 1. Front image 2. Back image 3. Perspective 4. Flip animation curve And create a flip card that flips when you click it. Module + Example project here: https://github.com/aboutjax/framer-flip-card-module
15

June 02

Ed Lea
Is there a way to quickly turn an imported Sketch file into a module?
0
Carl Cooper
What's the difference between AnimationEnd and AnimationStop? I see in the docs that end means reached end point but i'm not really understanding when you would use one over the other. I tried to print out a statement for each one and it seems they happen pretty much at the same time no matter what i make the curve.
2
Joey Lamelas
I'm trying to put an input field in a scroll component on an Android device. When I tap on the input field, the blinking text cursor shows up, but the Android keyboard doesn't come up. Can't share what I'm working on, but if anyone can help out, that would be great! :)
1
Nir Benita
Solid foundation
0
Mike Feldstein
Is there a way to tell when framer "restarts" the sketch, when you change the code in framer studio? I am using an audio tag to play a song, and it looks like the audio tag sticks around after it auto-reloads because the song keeps playing.
3
Jaime De Ascanio
Hello guys, I don't understand why the first block of code hides the layer but the second doesn't. Any tips? Thanks
6
Mauro Sicard Salcedo
Hello! Sorry for the noob question, but: Is there any good tutorial for starting to learn FramerJS :)?
3
Calvin Wilson
Hey all, I was working on some bar chart stuff today and thought I'd share. Still working on smoothing out the timing and adding some real data soon. Cheers! http://share.framerjs.com/z0ctpyo8u71w/
6
Caitlin Charniga
How would I go about changing where the animations begin? Right now everything just flies in from the top left.
5
Thiago Figueiredo Rocha
Quick playing with Framer JS: http://share.framerjs.com/6fasv7mgxln2/ https://dribbble.com/shots/2090178-TV-Series-Splash-Screen
0
Ash Adamson
Hey all! Need help with a SF location for Framer Sessions 02. Somewhere between June 8th to June 10th. We'll have Koen in town, let me know if you have a hook up!
15

June 03

Ash Adamson
Hey everyone! Framer Sessions 02 is a go w Koen Bok! Please rsvp or sign up for the newsletter if you'd like to get the learning resources after the event :)
16
Josh Puckett
I just published "Modern Design Tools: Adaptive Layouts", the first in a series of articles I'm writing about design tools. I used Framer for aspects of making the tool I show in the article. Give it a read on Medium! https:[email protected]/modern-design-tools-adaptive-layouts-e236070856e3
16
Jinglu Liu
hello guys, sorry for this noob question, I am not sure whether there could be more than one animationOptions in the same states. if yes, how could I add it?
4
Constantin Jacob
Hey, is there a way to use something differently than the round circle for pointing and clicking? I understand that it's supposed to be a thumb and it should make clicking harder because it's more representative how we would click on a phone, but I'd love to sometimes just use my real OSX cursor :/ (Or even use my own graphic. Maybe when creating a promotional video?) ____ context: The second gif showing the interaction has this little red dot animation indication touches. That would be cool to have. I had the idea because that gif looks like a really nice prototype and not the actual iOS app...
2
Jaime De Ascanio
Hello guys, I have imported a sketch file into framer with two parent groups, Card_1 and Card_2 but inside they both have the same layer groups, is there any way to select those subLayers, doing something like "myLayers.Card_1.Photo" and "myLayers.Card_2.Photo" or I have to renamed them?
2
玉青张
Hello, guys here, I‘m a novice and have a problem when prototyping, do you know how to differentiate click and long-press? :)
3
Irwansyah
Hi Guys! I created this Cordova app for a friend. Hope you guys can give suggestions on how to do better animations because I am still learning to acquire good taste of it. This is also a proof that we can create a full mobile app with Framer.
2
Lennart Schoors
How do I disable horizontal scrolling/swiping inside a PageComponent? I only want to use the PageComponent with paging buttons, but `pager.scroll = false` or `scrollHorizontal: false` don't seem to do the trick?
3
Jens Nikolaus
Any plans on having something like snapshots for framer projects? A fancier version control? That way I would not need to save 5 versions with slightly different variables as I do at the moment. Built in git would already make me happy, but I am imagining something more visual at the moment.
10
Emil Widlund
Good evening! Just wondering how I could achieve the effect of animating the width from the layer's center? Whenever I animate the width, it occurs from the left. The originX-property doesn't seem to help. Thanks in advance.
1
Koen Bok
Khoi Vinh et al are doing a design tools survey. If you have five, help them out. https://twitter.com/zeldman/status/606116330790645760
0
Ivan Cruz
Hey guys is there a way to view prototypes on the apple watch?
1
Arron J Hunt
It would be awesome if we could add the ability to use the digital crown on the Apple Watch in framer and get a scroll value. A la Boris Borisov's dribbble shot
0

June 04

Vedran Arnautovic
Last night I started working on a library of standard Material Design interactions, and I thought I'd share it with you. So far, I've only built - ripple (thanks Balraj) - lift card on touch - expanding card on touch - show FAB Check it out: http://share.framerjs.com/r6v36512dvb4/ If you feel like contributing, it's up on GitHub https://github.com/ThatBaldUXGuy/Material-Design-Interactions All the interactions should be defined in materialInteractions.coffee Framer app.coffee is used purely to showcase the interactions and should not contain the definition of any of the interactions
0
Miguel Pawl
has anyone experience getting a framer sketch on a android smartwatch? is it generally possible? / ideas?
0
Michael Dorian Bach
I can't ever get clipping to work when trying to import from Sketch 3.3.1 Mac App Store version. Is their a trick to getting this to work? I've followed the exact directory structure as shown in the sample file. Screen -- gallery ----- slider (Has multiple images that extend beyond the artboard) ----- content (mask for slider) slider gets imported but doesn't clip. It gets cropped to be the width of the artboard. In this case 750 for iPhone 6. I would like it to extend beyond the screen so I can have items off screen to scroll to. Any help would be great.
2
Constantin Jacob
Hey does anyone know how I can draw a ring with a layer? And I do not mean a circle. I'm looking for a way to draw a ring that I then with color. fill up. I want to indicate progress with a ring but I don't know how I could achieve this and the docs aren't helpful for me
4
Patrick Lenz
Grüezi :) I'm relatively new to Framer and have a strange issue when importing my designs from Sketch to Framer Studio: When importing, all my designs are looking fuzzy and a little bit pixelated. My sketch files are @2x and I even tried a @4x version but still getting the same issue. Does anybody have similar problems or can help me fixing it?
11
Cristian Constantin Olarasu
Hi guys, noob question: is there anyway to export Photoshop Assets on a Windows PC and work with framer.js without studio or mac exporter? I've been searching all over the internet but no clues yet Thanks
2
Min-Sang Choi
Hi all, This is another material design, with dynamic color. I used colorthief.js ( http://lokeshdhakar.com/projects/color-thief/ ) to extract key color from given image. which is pretty cool. It also has working audioplayer. but I didn't include playback for copyright issue. you can find it out once you download full project. If you're interested, play with it here : http://qcnoodling.com/material-player.framer/ https://dribbble.com/shots/1676217-Material-Design-Dynamic-Color-with-Framer-js?list=users&offset=0
11
Dima Neskorodiev
My first prototype in FramerJS [concept] - "target" is an app that shows you the progress of your goals and helps to collect money for certain needs! http://share.framerjs.com/noxdws9m12ln/
0
Lukas Imrich
Dear Framer community, I am scratching my head over this little thing. I am working with page component and I would like to switch to the next page after a click event, like: topBarButton2.on Events.Click, -> page.snapToNextPage() I thought this should work, but it didnt. Does someone has an idea what I am doing wrong here? Cheers
9
Pieter Snoeck
I guess I found a bug in the SliderComponent. If you use animateToValue(0) or animateToValue(100), the knob animates to the wrong position. It adds the radius of the knob. Just drag the know below value 25 or over 75 to see the effect. http://share.framerjs.com/m13i7y1l7vmz/ As a bonus: how could I read the value during the animateToValue?
0
Laura Galbraith
Hey everyone! Is it possible to disable dragging for a PageComponent? Using page.draggable.enabled = false does not work for me. (My PageComponent is named 'page')
4
Ken Miura
Hi ! So, we make apps with UI like what's in the video (this one isn't made using Framer, but it is actually done in a different Javascript based app platform). I just wanted to see if I can prototype stuff like this in Framer for my engineer. For you Framer ninjas out there, what do you think the effort is to recreate something like this?
8
Thierry Meier
Just a quick beginner question. How can one manipulate a defined HTML layer? Example: A button with a HTML layer on top that says "Click me" and once clicked, the same HTML layer will say "Clicked". Thanks!
6
Raphaël de Courville
Hello framers. I'm struggling with a scope issue using snapToPage() in an event callback function (see the image). Could somebody point me in the right direction? Thanks!
19

June 05

Laura Galbraith
Hey again! I promise my last question of the day :) what would be the best way to track the users' scrolling direction? I wanted to use it to control a PageComponent... I'm thinking it might look something like this... (or am i oversimplifying?) on Events.MouseScrollUp, -> page.snapToPreviousPage("bottom", true) on Events.MouseScrollDown, -> page.snapToNextPage("bottom", true)
2
Noah Levin
For fun last night I tried remaking pinterest's new filter selection based on their video here: https://about.pinterest.com/en/buy-it http://share.framerjs.com/rnz4vbs07dpz/ -- click the blue dollar sign
2
Abdou Ghr
Hi guys, has anyone experienced a problem with the Slider component on Framer Android? As soon as I release the knob I get "Nan" number. Any idea how to fix this? Thanks.
3
Paul Stamatiou
Is it possible to have an object animate along an arc or path? Being able to specify more than just x, y. Or do I just need to use canvas
10
Giacomo Alonzi
Hello everybody :) this is my first job in FramerJS :)!
9
Joe Lifrieri
I run into this error message a lot when manipulating the movement of an object with something like .draggable or very rarely with .animate and I'm not really sure how to troubleshoot it. Any advice?
3
Lucien Vrc
Hi everybody, I'm working on a prototype for a Samsung Galaxy S5 and I was wondering if it were possible to take control of the "back button" of the phone? I know it can easily be done with something like PhoneGap, but can we access native features with FramerJS?
0
Marco Kapitän
Hi there, can you recommend any good starter tutorial for using FramerJS with Sketch? How to set Artboards (right sizing, etc.) and how to point those groups in artboards, etc. The Learn Section doesn’t really help with the essential things (like when my Sketch artboard is set for iPhone 6S I have to scale the artboard to 3x and center it etc. again to get it into a unsharp fullscreen :/ )
2
Jenton Lee
if you're importing some designs from Sketch, how do you make it responsive? I created a prototype for the iPhone6, but when I switch to the 6+ viewer, do I have to scale up the sketch layer?
6
Thomas Salah
Hello framers!!! I am new to framer. I have played around and managed to create simple prototype. But I am not sure how to transfer or use the prototype code to a production website or app? Do I need to rewrite the JS or can I reused the prototype code as it is. Can I inject the layer created by framer as a body or div background for example?? could you point me out to reads, tutorial or share your experience. Sorry if it is a stupid or an already answered question. many thanks
2
Metin Saray
Hey Guys, I noticed Sketch changed the Canvas sizes, they are much smallar now! And it's not working with Framer anymore. Is this because im on a new laptop? Or is this some sort of update? Thanks.
5
Giacomo Alonzi
Hey, this is a great tuts to improve framerjs skills?
0
Jono Hunt
I tend to duplicate the same elements (buttons, animations etc.) often, and have managed to find out how to reuse the text style and animation for different layers (see the 1st screenshot). I've been trying to do the same with layer properties, but haven't been successful. If I could make them as a variable I could edit them once, and (for example) all the buttons I've created would update and look the same. You can see what I've tried in the 2nd screenshot. Any ideas on how I can write a layer's properties as a variable and then just use the variable for different layers? I guess I could set each property as a variable: myX = 100 myY = 200 myOpacity = 0.5 then layerA = new Layer x: myX, y: myY, opacity: myOpacity layerB = new Layer x: myX, y: myY, opacity: myOpacity etc… Just wondering if I can do it the way I tried in the screenshot?
4
Raphaël de Courville
Hi! I'm trying to reproduce the horizontal scrollComponent from the iOS weather app example and I have problems with the masking. I followed the folder structure from the Sketch document, but in my version everything that falls out of the artboard gets cut. http://share.framerjs.com/rej47pnvyvfv/ Can you tell me what I'm doing wrong?
8
Simon Rood
Hey guys, Been using framerJS for a while now, but I'm wondering; I have generated cells with subLayers in them. Now I would like to switch the state of a subLayer when clicking on a certain cell: What I am trying to accomplish is: After clicking a cell I want the text layer (sublayer of cell) to sit on top of the navigation bar. What would be the best way to do this? (Tried removing sublayer and tried selecting sublayer with this) Regards, Simon
3
Baisampayan Saha
Hi....Is there a way to simulate vibrations in framer?
4
Ilter Canberk
If I'm expanding a frame by changing the width value, is there way to keep the content aligned to the center? (Just like when you do scaleX, but I do not want to resize the content inside the frame)
5
Sindu Narasimhan
Any Seattle framers interested in meeting up in Kirkland or Bellevue? Jordan Robert Dobson Chris Camargo Sean Crowley
24
Arron J Hunt
Best way to prevent a scroll component from going negative? I want to be able to scroll up all the way but not pull down
1
Giel Cobben
Here’s an all-new example of a photo editor which allows you to swipe and click between a set of 3 filters. The masking effect is actually achieved using the PageComponent. See how you can also use it to create this nifty masking effect. All filters are created within Framer, I’m only using a single image imported from Sketch. So you can play with it and adjust the various intensity levels. Hope this helps! See: http://share.framerjs.com/mjltzbx7pe72/
4
Noah Levin
Taught a fun small workshop at Whitespace today. Here were the slides in case any of this is helpful for anyone: http://nlevin.com/whitespace/ (Use the arrow keys to navigate)
4

June 06

Tobin Harris
Has anyone created a full app prototype with Framer yet? One with several screens. Does Framer make this easy?
19
Vedran Arnautovic
In the example I shared earlier (http://share.framerjs.com/r6v36512dvb4/), the tap origin for the ripple effect is correctly positioned when viewing the prototype on desktop. However, when I view it on devices (tried an Android phone and iPhone), the taps/ripples always appear to be originating from the top left hand corner of the layer that receives the click event. Any idea why this is different on device, compared to browser? Is there something I need to do differently to handle the click events on device? Currently, the ripple effect function gets passed the click/touch coordinates the following way rippleEffect(event.offsetX, event.offsetY, clickedLayer)
3

June 07

Nilton Rasoilo
Hello group. I'm using the open source version of framer from github. When i add a pageComponent the javascript gives me an error. Does the components only work in framer studio or can i use them in the framer.js open source?
5
Bimma Bimma
Module question anyone: I have multiple modules that I want to run sequentially. The first module simply runs a 2 second video, but I do not want the second module to load / execute until the video completes. How can I signal to the top (root) level that a media element (video) in the first module has completed, then fire the next module? Right now they both execute at the same time obviously.
4

June 08

Benji Honeysingh Potratz
Hello, I work for a software reseller and we had just placed an order for one of our end users. However, the product was licensed to our email alias as opposed to the end user. How may we get this corrected? Thank you
1
JL Flores Mena
I think the new update might have broken something... I can no longer use something like "class MyClass extends Layer" in my code. If I do, the device on the right goes black, and no errors are reported. Also, if I open a file that was saved in a previous version of Framer (one in which I'm using classes) everything works right up until I hit save. If I save, then the screen on the right goes black. The only workaround I've found is moving my code to a module, and then importing that module in my project. That means working on both Framer and SublimeText at the same time, which is OK, but my workflow was much faster by having everything in Framer (and once certain part of the code was ready, I moved that part to a module using SublimeText). Is someone else having this issue or is it just me? Thanks!
3
Sumul Shah
So I have a nice prototype of a web app done in Framer Studio, and I'm getting ready to implement it in real HTML, CSS, and JS. Any tips on going from Framer 3 spring physics animations to CSS keyframes or some production-ready JS? Back in the Framer 2 days, it was relatively straightforward (see https://github.com/koenbok/Framer/issues/5 and https:[email protected]/announcing-framer-2-95d2682d07). I love Framer Studio, but I'm pretty much stuck at this point. I'd hate to lose my painstakingly crafted springy animations by trying to approximate them with CSS cubic beziers. I've spent the afternoon digging through the inspector, the generated code, and the internets to no avail. If there's something I'm missing, a nudge in the right direction would really make my day.
2

June 09

Ed Lea
I wanted to have a paging effect, but not full bleed pages and I wanted to have smaller cards with the next/previous edges peeking out. I couldn't manage this with PageComponent as there was no contentInset or page margin values that I could see. Posting here incase a) there's a better solution or b) there isn't, and this will save someone some work =D http://share.framerjs.com/8e8shs1ooaaf/
8
Giacomo Alonzi
Hello framer community, i'm newbie on framer! Today i spent my time to do something w/ framer and i have made this! but i've found the gap with the FAB shadow i wanna decrease his opacity when it was expanded. Any suggestion? :)
2
David Dusanek
http://share.framerjs.com/id9x94h58r1i/ hi, i'm getting an error message whenever releasing one of the draggable elements in this pagecomponent, but only when i'm holding the mouse perfectly still. does anyone know why or what i could do to fix this? thank you!
0
Lukas Imrich
Any idea if such animation would be achievable with framer?
46
Koen Bok
New web inspector with animation debugging in Safari 9.0. Looks pretty nice. This will automatically be added to Framer Studio too. https://developer.apple.com/library/safari/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html#//apple_ref/doc/uid/TP40014305-CH9-SW25
5
Greg Woods
Hi guys, I was wondering if you were planning to add any more android tablet devices please. The Samusung galaxy tab range for example.
5
Mike Meyer
Backdrop filters are now a thing in Safari 9.0 (and presumably Webkit 2): https://developer.apple.com/library/safari/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html#//apple_ref/doc/uid/TP40014305-CH9-SW22
9

June 10

JL Flores Mena
I just noticed "layer.draggable.calculateVelocity" in the Docs menu, but there's no content for it. Is that a deprecated method?
2
Jinglu Liu
Hi guys, one simple question, how can I add gif picture in the framer? just like this kind of gif picture http://games.sina.com.cn/comic/yaoji/
1
Julio Radesca
Hi guys. Quick question: when I import a sketch file to Framer Studio, whatever part of a shape/layer/image that is not visible on the artboard (say a circle that is halfway into the artboard), it gets clipped on Framer Studio (I get a semi-circle). Is that a way to prevent this from happening?
3
Alejandro Cámara López
Hi everyone! I'm struggling with this animation, because from what I recall you can't modify text with framer ¿or can I? When you press the first card, the background fills the whole view and the title moves upwards, gets bigger and align: center.
2
Julio Radesca
Quick question: Say I add states to a layer: layerA.states.add A: {width: 100} B: {width: 150} C: {width: 200} Then I switch to one of the added states: layerA.states.switch("B") How do I switch back to the initial state, the one that no name was given?
2
Chris Chiusano
I have a rectangle that is centered on the page and on click I want to have it's width expand so it becomes a rectangle. The issue i'm having is it only grows on the right side, is there a way to have it expand from the middle?
3
Charlie Sneath
Is there a way to use scroll.updateContent() without scrolling back to the top?
3
Koen Bok
Really great turnout for our Framer session at Uber yesterday. Thanks a lot Ben and Peter for organizing. I'm looking forward to the next one!
1
James Caruso
Anyone noticing an issue with image heavy prototypes not reloading? Having to re-start Framer to get my preview back online. Thoughts?
7
Stephen Crowley
For anyone in the Seattle area who may have missed it, please join us tomorrow night! https://www.facebook.com/events/402822123237623/
0
Brian Beavers
I can't get projects to mirror to an iPhone 6. I've downloaded Frameless, but FramerJS does not give me any URLs to use. Suggestions?
1
Chad Lonberger
Suggestion: support rotation of the SliderComponent so it can be used vertically (or perhaps simply a vert/horz property). Currently a vertical slider still responds to horizontal drag:
5
Giacomo Alonzi
guys there is a method in framer to set one layer like a mask of another? thanks!
13
Ash Adamson
Framer Sessions SF 02 photos! If you'd like a recap and shared lessons from mentors, join the newsletter list on the eventbrite http://bit.ly/1TbL39D Big thanks to our mentors! Koen Bok, Tisho Georgiev, Jon Gold, Cemre Güngör, George Kedenburg III, Noah Levin, Peter Ng, Mike Feldstein, Fran Pérez.
5
Giacomo Alonzi
Hello Everybody, this days i've spent many hour on framer and i've found some limits between sketch and framer, but i hope this is only a fruit of my "incopetence" lol 1: if i make a layer with borderRadius = 100 in sketch, in framer i can't modify the borderRadius right? 2: the layers made in sketch are not indexed in relationship with layers made in framerjs right?? 3: one layers made in sketch, can't work like clip for a layer made in framer js? i hope you help me to solve this questions! Thank you! :)
2

June 11

John Grendon Enderby
Hey guys. Just a quick request, not sure if this is the right place to post it or not but lets go for it for now. I would absolutely kill for scroll functionality with mice and touchpads in studio. I use framer loads for prototyping interactions for web but my magic mouse cant scroll anything and it’s not so good for demos for clients because of the lack of trackpad scrolling either. :) framer is awesome though!
14
Cemre Güngör
Is there a way to make Click events "bleed through" layers to the ones beneath? Both the layer on top and the layer under it would receive the click event.
14
Joshua Mauldin
I'm working on importing a Sketch file that's taller than the viewport. If I do that, I'm noticing that I can't get the ScrollComponent to work. Here's where I am so far: http://share.framerjs.com/npdz18arybvs/ If I don't use the import feature, I'm fine. If I do, I don't seem to be able to be able to scroll. Help?
6
Taylor Rogalski
This seems stupid-simple so apologies if I missed some documentation somewhere - but does Framer not allow style properties to be added to states? Or is there a different syntax required here? (btn.fill does not work in either case) I'm trying to create a reusable button module where I can conditionally swap out the rendered SVG icon + change its fill color.
12
Julio Radesca
Quick Question: Is there a way to create an event.click that refreshes the framer file from within the prototype?
3
Cemre Güngör
How would you make a text layer that's only as big as the text inside?
3
Caitlin Charniga
I'm running into an interesting problem with a prototype I want to make. Basically, I have a top nav (white), and then a sub nav (black). The sub nav is halfway down the page. What I want to happen is that once the black subnav hits the white main nav, it becomes fixed. Would I solve this with some type of if/then statement? Something like if the sub nav is at a certain y position, it's superlayer is removed and it's y position changes/becomes fixed?
3
Jaime De Ascanio
This is my first attempt to do some interactions with framer and i have to say, it is by far the best prototyping tool for interactions! You can watch 4 more prototype i did here: https://dribbble.com/shots/2102718-Framer-prototype-interactions
0
Benjamin Den Boer
Hey folks. Here's a new PageComponent example with page indicators. You can set a custom amount of cards, and the indicators will update accordingly (and stay centered). It also every-so-slightly animates cards on page switches. Included properties 'n methods: - page.horizontalPageIndex() - page.animationOptions - page.on "change:currentPage" - page.previousPage Hope this is helpful! :-) http://share.framerjs.com/x0li6cnk4pc4/
10
Sergey Voronov
Hi framers) i am beginner, so need some help, i am working with pages created in array, how i can work directly with page with defined index, something like page[index].html="bla" thanx
4
Jaydev Ajit Kumar
Im trying to move to the next page on click of a button The print statement works, but for some reason framer doesn't snapping to the next page inside my (onClick) function. If I move the same snapping command outside the function, it works fine . Could anyone tell me where I am going wrong ?
2

June 12

Rizki Mardita
I need some help guys...i want to create event with "scroll.direction". i want to hide top navigation when scroll is "up" and show top navigation when scroll is "down". Thanks :)
2
Josh Davis
Quick questions: I am using a new PageComponent set to a width of Screen.width and a height of Screen.height to swipe right to see the next image. A few issues: 1. The next image is longer than the first (because I want a scroll effect on it). Unfortunately, this causes the first screen to gain the ability to move around even though it's mean to just fill out the screen, no vertical scroll. Because they're both attached to the same PageComponent, if I do scrollVertical: false it doesn't allow the second image to scroll any longer (it's a vertical scroll). Any way around this? 2. When I scroll to the next screen, instead of seeing the next image, it's a white screen. Any clue why? My image path is correct and you can see it under the white page if you try moving the white page. 3. When I do a new PageComponent it overrides my very first image which is a simple loading screen. Why is it doing that (is it a weird z index?) and any clues on how to fix it? Sorry for the questions. I'm new to Framer and still finding my way around. This seemed like the best community to ask. Thanks for any help!
3
최최보금
hello. all nowadays I have been trying to prototype a app called 29cm with framer.js. This 29cm app is a shopping app that was awarded a reddot prize for good interaction and design. Now, I am trying to prototype the main display for the app. To make this app, I used javascript’s inbuilt function called ontime. Also, i have used svg to make a moving arrow. I used svg because when i swipe the display, i would like the arrow to change color but as it is an image , it wasnt possible. I tried to use css to make the arrow but it wasnt possible. so i used svg. However, there are two problems that i cannot solve. 1) If i want to scroll up the page, time, plus, arrow have to also scrolled up. So I used scroll.scrollY, but I can’t read scroll.scrollY coordinates. I tried to print scroll.scrollY but 0 is shown. LOL 2) I want to change time, plus, arrow’s color using array’s color data. If i swipe the main display, i would like to change the arrow's with pageData's color value, but it cannot be done. I would be much appreciated if you could give me some tips.
1
JT DiMartile
We're trying to create a prototype screen recording, and would like to show a different cursor on press so it's clear you've pressed in the video. Has anyone already done work to customize cursors in response to different events?
6
Marcus Gellermark
Is there a way to clear events on a layer? I would like to have one button that can do different things depending on where in the prototype I am. so ish like this: button = new Layer Blah blah button.on Events.TouchEnd, -> layerX.states.swich(Blah blah) But later on I want the layer to only do this: button.on Events.TouchEnd, -> layerY.states.swich(Blah blah) So can I somehow clear the events before adding the new one?
3
Rizki Mardita
how i can change "story1,story2,story3" html text with another html text like "Home, About, Contact us". anyone can help me. i'm refer from this example from medium
5
Jinglu Liu
hi everyone, I want to implement the progress bar which expands from right hand to left hand. I am trying to use set width animation to do this, but it only expands from left to right. this is my code layer.width = 1 layer.animate properties: width: 300 curve: "ease-in-out" Thanks :P
3
Min-Sang Choi
You can easily create Floating Action button patterns with Framer. Here are few new patterns introduced by Google Design.
3
Daniel Leinerud
Is it possible for Framer to play sounds? Like a small sound effect on a layer click.
1
YoungIm Jo
Is there any way that I can set the 'start point' while using scroll related functions(like scrollToPoint or scrollToLayer)? It seems that when I use scrollToPoint or scrollToLayer, it scrolls from the very top of the scroll.content.
4
David Martinez
Hi, trying to get mirroring to work on Framer with iOS Frameless app. Anyone know if the free trial version doesn't allow this?
1
Giacomo Alonzi
Hello everybody, I imported a svg, but can I access its properties? and especially if I have an icon set, I can access the individual icons calling the id specified in to svg? like this: <svg> <g> <g id = "play"> <polygon points = "38.25,0 38.25,357 318.75,178.5" /> </ g> </ g> <g> <g id = "pause"> <path d = "M25.5,357h102V0h-102V357z M229.5,0v357h102V0H229.5z" /> </ g> </ g> </ svg> Thank you guys ;)
1
James Roberts
When i'm working in Sketch my mock-ups are based on my preview devices at 100%. For example artboard size 375x677 to make it easy to design for iPhone 6. But when I come to move onto prototyping, i usually have to take that design, create a new document in sketch and scale it up for Framer... How does everyone else's workflow work?
1
Cemre Güngör
Experiencing this weird bug with the paging component. I drag the pages down, I expect nothing to happen (since I disabled vertical) but I advance to the next page. When I drag down on the third page, i snap back to the first page. It's quite odd? http://share.framerjs.com/6o3um0v25efj/ ZIP of sketch file: https://www.dropbox.com/s/0ohdttvmpcwnwpp/ScrollPage.zip?dl=0
6
Johannes Eckert
why do I have access to the layer that emits the event when I use Events.Click but not with Events.ScrollStart? Result for layer.name is "undefined"
6

June 13

Josh Davis
Here's a basic version of what I'm trying to do: http://share.framerjs.com/v6fwo09r4nnl/ I'm lost. 1. When I swipe to the right the second view doesn't start at the top. It starts off midway down. How do I make it smooth like the Medium example on the Framer site? 3. Then my second screen doesn't scroll up and down. I tried wrapping it in my scroll component but that didn't work. 2. Finally, when I swipe right to my third view, it does an awkward/jerky movement up instead of it being smooth like the Medium example. I feel like I have the pieces. I just don't know how to assemble them. Thanks for any suggestions you might have!
0
Patrick Keenan
I'm getting a flicker of my text cursor when moving around in the editor, anyone else getting this?
3
Kelvin Leung
Hi, everyone. I'm a beginner to Framer. I'm learning to use Sketch and Framer for prototyping. When I try to import my Sketch file into Framer, I only get a quarter size of it. How should I set my artboard? I'm using the default iPhone 6 artboard (@1x, 375x667) and iPhone 6 for preview.
5
Koen Bok
Headsup: I'm preparing a next Framer/Sketch bug sprint and I'm looking for two things specifically: 1) Sketch files where the pure export went wrong (layers have wrong position/size), this most often happen with masks in masks. 2) Other Framer/Sketch bugs that you don't see in the list below yet. https://github.com/bomberstudios/sketch-framer/milestones/Fix%20Sprint%203.5
0
James Morris
Hey guys. I want to better organise my projects. I know and used custom events before in other projects but was curious if Framer offers a tried and tested or more official way to actually create your own events, to listen to them and trigger them? Want to start using global events more in my prototypes... Any insights or tips? Thanks!
5
JT DiMartile
Is it possible to get Framer to create PDF's on export from sketch instead of PNG's? It would be really useful for After Effects if I could make those PDF's somehow. Thanks! (cc: Zack Lovatt )
4

June 14

Arron J Hunt
Do originX and originY not work with PageComponents? I'm trying to scale a page component and changing those values has no effect.
1

June 15

Min-Sang Choi
Calling designer folks at Tokyo! I'm going to host interaction design meetup at Google Tokyo office, June 25. Agendas are as following: - Framer basics and examples - Form basics and examples with sneak peak of upcoming features - Mingling and Casual Talks Should be fun! RSVP at following url.
2
Giovanni Caruso
Hi! To the Italian folks: what's about a Framer Studio Meetup in Milan? (I'm thinking to replicate the same formula proposed by Ben Adamson)
0
Jorn van Dijk
We just made Framer Studio work on El Capitan. My version crashed on launch, so you might have to download the latest version from the site.
0
Thomas Law
Framer Studio just crashed on OS X 10.11. Can you fix it please?
5
唐龍
Hello, I just contact framerjs 😄 This is a simple code I wrote: layer1 = new Layer backgroundColor:"red", borderRadius:20 layer1.center() layer1.states.add A:{scale:2, rotation:45} B:{x:100, y:200, rotation:0} layer1.states.animationOptions = curve:"spring(200, 15, 0)" layer1. on Events.Click, -> layer1.states.switch("B") When I click on the event, how can I return to the original state? How to write code? I never learned programming.. Thank you!!
8
Giel Cobben
Learn how to use the “change” event in our updated documentation. You might have seen the event in one of our examples or even used it yourself. The “change” event allows you to retrieve and listen to properties as they’re changing. See the documentation for a full overview of properties you can listen for. http://framer.com/docs/#events.change
6
Sebastien Tran
Hey all, when handing off your Framer prototype to iOS engineers, how do you "translate" animations done Framer like spring(600,20,0) (or with the 4th parameter) to the iOS world? One of my eng. pal asked what were those values when I thought it was standard. Thanks !
2
John Hamman
I am getting undefined in not an object (evaluating input_store_name.text) when I try to set a variable of a photoshop layer (text layer) named text. My photoshop layers are grouped as such: signup_landing (group) - model_activate (group) - - input_store_name (group) - - - text (text layer) My framer.js code is like so: signin_activate = Framer.Importer.load "imported/prototype.v1" model_activate = signin_activate.model_activate input_store_name = model_activate.input_store_name input_store_name_default_txt = input_store_name.text #error on this code I tried also : input_store_name_default_txt = input_store_name.index = 1 and got the same message. What am I doing wrong?
1
Caitlin Charniga
Anybody know how I would go about doing something like this? When you press down the green bar loads around the circle.
5
Alexandre Saddi
Put together this circular progress bar today using just regular layers in Framer Studio. Since I saw people asking about this a few days ago, I thought I'd share. Did it in a way that's easy to customize colors, width and time. Grab the code here: https://www.dropbox.com/s/9oxxil8yws6kufh/circularProgress.zip?dl=0
3
Andrew Larking
Hi all. Have a strange error with scrollToPoint : question is here:
3
Jitendra Vyas
http://dynamicsjs.com/
0

June 16

David Lee
I tried a quick List-Map transition effect. It's a draft so any comments are welcome :)
25
Gabriel Lovato
Here's a modified version of the sticky headers from the example page, adapted to use a Sketch file source. http://share.framerjs.com/73n92417n26v/ It can handle different numbers of cells under each header, and should be able to handle different header heights (though I haven't tested that). It should work with any Sketch file as long as you follow the suggested group hierarchy (describe in the code comments).
0
唐龍
A very young and to ask questions, thank "Jordan Robert Dobson" careful help. No code experience, new to "framerjs" learned a few days, try to do a set on a switch IOS. Thank noted that the recommendations.
1
JinJu Jang
When you create a superLayer and add an image to go inside and fit, is there any way to use "aspect fit" or "scale to fill"?
7
Susan McKenzie
Hi! I am having trouble reopening my projects. I save my work and when I go back and try to open it to work on it again, I get nothing ... Any ideas?
2
Joe Lifrieri
Sometimes, when I import a Sketch file, text layers that aren't wrapped in a group don't get imported. There are blank spaces in my prototype where the text should be. The only fix I've found so far is to either turn the text into vector shapes or wrap every text layer in a group. Is this a known problem? Anybody else see this? It typically only happens if the Sketch file is somewhat complex.
4
Luis Ricardo La Torre
Do you guys know of any good examples of Search: layerA.html = "<input type='text' value='Search'>" I wanna be able to stylize that input
1
Jinglu Liu
hi everyone, how can I translate spring(300,15,0) curve to the cubic-bezier as spring curve cannot be used in CSS3
2
Josh Puckett
Another article in my series on design tools. We use Framer quite a bit to build prototypes that use real data, would love to hear about how others are using it!
16

June 17

唐龍
Hello everyone, I ask: framer how to do color conversion animation? I try to use between two layers of different colors to switch, but that I feel inconvenient. Is there like "Quartz Composer" that there is a "Color Transition" control nodes? I want to be one click to change the color of the animation. How to write the code? Thank you! !
8
Josh Ackerman
Hello, I feel like this question has an obvious solution, although I am wondering why only one of the buttons is switching states? Here is the project
3
Chris Camargo
I'm having trouble using Framer.Device.deviceType when building a project outside of Framer Studio. When I add this line to the top of app.js in the latest FramerJS build: Framer.Device.deviceType = "iphone-6-spacegray" I get the following error: Uncaught TypeError: Cannot set property 'deviceType' of undefined Is this expected behavior? Did I miss a step? I'm pulling this from the docs (http://framer.com/docs/#device.deviceType).
1
Alex Bystrov
Koen Bok: Hey! Do you plan on supporting export from Photoshop CC2015 Artboards any time soon in production or beta release of Framer Studio? It would be super useful. Now after switching to CC2015 export doesn't seem to work at all :(
5
Anton Jarl
I'm having problem with the layer.index. I won't get it to work correctly. I have 3 imported Sketch layers and I want to put my Framer layer in between those but it won't work. Should it be possible to just add a layer index to ANY layer?
6
Preston Lee Turner Jr.
Good Evening, I've been apart of the group for a couple of weeks now, but finally got around to dabbling with Framer.js. I wanted to know are there any tutorials out there covering the foundation, or could show how to build a google now approach. I'm also interested in building motion UI for maps
1
Min-Sang Choi
Framer doesn't support transition for Backgroundcolor officially. Obviously there're lots of alternatives like chroma.js. but If you don't want to add another js library or couldn't figure out how, here's another solution. :-) Hope this helps!
10
Johannes Eckert
is there a good reason why Zoom has to be disabled when no device is selected? I'd like to still control the zoom of my prototype when viewing it (not all of them have devices)
4
Giacomo Alonzi
it's possibile for example animate a line around a circle? like loading animation for example? i'm can't find a right way
3
Robert Haverly
I'm not 100% sure when it happened, but I seem to have lost landscape for all devices. The preview changes orientation, but not the device. Running 1.11.72 (931). Anyone else?
9
Chris Lee
Is there a way to get an Animation object for a state switch without starting it? Trying to clean up some messy code for sequencing state-based animations.
0
Anton Jarl
Hello. I just ran into a really simple problem, but I can't get it to work. I'm trying to access nested layers of my sketch-import but it just won't work. I'm trying to add click event to layers that a grandchildren of the top layers. Like sketchLayers -> subLayer1 -> subLayer2 -> subLayer3. What's the syntax? "sketchLayers.subLayer1.subLayer2.subLayer3.on Events.Click, ->" won't work. And I don't even now what to Google for the answer..
3
David Siegel
PageComponent.snapToNextPage() (and other page change methods) doesn't work when called from a handler for a layer within a page. In my example, I want a Sign In button on the first page to cause the next page to come into view; the Events.Click handler is called but page.snapToNextPage() has no effect. Is this a known issue? Where should I report a bug like this?
1
Andy Ngo
Correct me if I'm wrong but if I'm not mistaken assets that go into Framer from Sketch will have their transparent area trimmed. For example, in the attached photo I want the location indicator icon to have a tappable area of 88px (right image), but when it's imported into Framer its effective tappable area is reduced to 61px (left). I've tried putting a transparent layer with 88px width in the same group as the icon but the result is the same. Is there anyway for me to change the tappable area size of the layer in Framer? Changing the padding property did not work for me. Thanks!
8

June 18

Kevin Cannon
Hey guys. slider.copy() seems to cause some weirdness, is it supposed to work?
0
Dave Poon
I installed Framer Studio Version 1.11.363 (1222), but I have been getting a blank preview for all projects, does anyone has got this problem?
8
Jordan Robert Dobson
http://FramerCo.de is live. :D We started FramerCo.de to create a collection of Framer modules, code examples, snippets and tips. There are only a few posts at this time but please feel free to suggest items to add to the site. Also, if you'd like to help curate content and be a contributor let me know and I'll add you as a member. http://FramerCo.de
38
Patryk Sobczak
For some reason my scrollable layers have a weird blue overlay. What's the issue here?
8
Ciaran Madigan
Has anyone managed to get the blur backdrop filter working?
2
Poamrong Rith
Still pretty new, but I get a chance to sit next to all my devs today #Pickinbrains
8
Stefan Zier
Framer Studio has been awesome and I've used it for a few clients already. However I had to update to El Capitan and unfortunately Framer Studio crashes every time I open the app. Is there going to be a fix for this soon or is there something I'm missing on my end? Thanks!
5
Kevin Cannon
I've noticed a bug in the Slider Component. The 'change' listener doesn't get called if you change the value directly. See example here:
0
Michael Stevens
Hey, I'm completely new to framer. Everywhere in the literature I see that framer is for rapid prototyping. Is framer.js also meant to be used in production or are you expected to implement the animations with some other framework?
2
Adrian Forster
Trying to work out this module but can't access the Google spreadsheet. Any ideas?
3
Sebastien Tran
Hey, when tracking the direction of ScrollComponent via Events.Move, it returns twice "down" at the end of a pull up scroll. Pulling down returns correctly "up" until the end. Anyone encountered that bug?
1

June 19

Koen Bok
We just shipped a big bugfix update with an improved error state. You can now click the error to automatically scroll to it. Thanks to Noah for helping with the design. Enjoy!
2
Earl Sinclair
Is there a way to fix the connection issues between my phone and my framer client? My phone no longer connects and its a real pain to copy and past the url to my phone every time.
6
Matt Hurley
I have imported a design from Sketch, and wrapped elements in a ScrollComponent (the same as the Scrollable example, here: http://framer.com/learn/import/templates/). I now need to interact with elements within the ScrollComponent (in the example, one of the photos) but I'm getting TypeError: undefined is not an object. It seems that the ScrollableComponent is being treated as a single element - how would I go about accessing specific elements within the ScrollComponent?
2
Thomas Veit
I want to do something like pinterest's pin-animation. tab somewhere to show icons, and then touchmove to scale and move them a little. This is what I have so far: http://share.framerjs.com/ocafz1653766/ (tab in the circle) but I can't think of a good way to scale/move them on touchmove... any ideas?
5
Carlos Henry
Hello guys... I'm a beginner in Framer JS and I wanna know what material or tutorial to getting started... I'm really a beginner... :D
2

June 20

Liu T
I want to show a touch point on screen at where finger touches the screen. Any good suggestions?
0
Jacky Lee
A bit of an overdue post, but here's a the part 2 breakdown of how I made a looping carousel. First part can be found here: https:[email protected]_90/framer-looping-carousel-module-part-1-5dd997cc1e9b
0
Randi Dumaguet
Hi guys, Can't seem to load anything from share.framerjs.com Cheers!
2
Arron J Hunt
Loving the new syntax highlighting in the new Framer Beta :)
1
Vova Nurenberg
Hi, Is there a good way to define an imported layer (from PS) as a scroll component rather than creating a new scroll component? Basically I have a design in Ps and I want to create scrollable content inside a panel. Thanks.
1
Danny White
Short & sweet question: is there a way to only allow a click event to occur on a layer if that layer is at a particular state?
3

June 21

Danny White
How could you reset the states of layers that have been made as part of an array, within a sublayer? See the attached example to see what I mean. Thanks!! http://share.framerjs.com/hqbvn9lp5bfb/
4
Stefan Vant
I have a scrollComponent containing a few layers that respond to click. I noticed that the scrollComponent generates a Click event automatically on ScrollEnd - and that gets transmitted to the child layers. Anyone knows how to remove this phantom Click event? Update: added two lines to the scrolling-basics example to demonstrate: http://share.framerjs.com/0xkbg6kwdhd7/
3
Enrique Gonzalez
What is the most straightforward way to vertically and horizontally center text in a layer? Currently I'm using two layers; making the text its own layer with a null background and applying superlayer and sublayer relationships along with positioning. It works well, but I wonder if there is a simpler way where I can just use one layer. Any help is appreciated, thanks.
2
Matt Barr
custom font shows up in Framer Studio but not on device when mirroring, any ideas on how to get it to show on device?
2
Ash Adamson
Just posted the Framer Sessions SF02 Recap w lessons! http://eepurl.com/bqYLBr
3

June 22

Lukas Imrich
Dear Framers, I am trying ti achieve this animation with framer. The same animation could be found in play store app, and apps category. The point is that while scrolling down, the header partially hides so title is not visibly. Can you help and tell me, what components shall I use and how shall I control them? At the moment, I have quite a hacky solution, in which the first scroll item is actually the header and i keep that first item partially revealed and sticky while scrolling down. However it makes eveything complicated, once i combine it with page component. Thanks for any try to help me
4
Chad Vavra
Checking out Framer Studio and finding that the viewer is always blank. Even after changing devices, dropping images, and loading example files. Continues to be blank in presentation mode. Examples on the web site do render correctly though. Any ideas would be very appreciated.
10
Brian Beavers
Apologies if there is already a solution for this (I'm sure there is.) I did a few searches and couldn't find anything. I'm trying to to change an image's opacity on scroll or gradually darken it with a black backgroundColor at 0.3 opacity. I've had no luck so far, so any suggestions would be much appreciated. I've only been able to get a black bar over the image in the dimensions I want, but not set the proper opacity.
4
Ilie Ciorba
Hey all, Is there a way to modify the default project that you get when you open the app (eg. put your own signature there)? Or not have one open at all?
2
Wojtek Jodel
Hello there, My first post here, nice to meet you all ;-) I am wondering if anyone tried to import Sketch documents with several nested masks inside? I'm having strange issue: Framer keeps trimming my document to the size of most inner mask, while it should take the outer. So, if I have [mask1[mask2]], my Framer workspace gets size & coords of mask2. Anyone have an idea how to overcome this? Thanks! Wojtek
4
Kevin Cannon
While I guess it's not coming any time soon, would really love better Firefox & IE support, even if it's just a little bit better :) I use Firefox, and it's a real shame most prototypes don't work, even if they don't seem so complicated. Also, our client now has IE-only (yes, those days still exist) so cannot share prototypes with them at all. I recall someone getting prototypes working better in Firefox just by adding the moz prefex to a bunch of lines of code.
3

June 23

Chad Lonberger
Anyone in San Francisco currently working at a more design-focused coworking space (or interested in being a part of one)? I'd love to cross-pollinate w/ other Framer/ui/ux/prototyping/interaction designers on a daily basis.
0
Greg Woods
Hello, I'm struggling with Sketch and importing layers. I hope you can help. Here are my grouped layers in sketch. As you can see, I have two artboards. When I import them, I only see the layered groups from wishlist2, ther 2nd artbaord. This is my first confusion - I thought it should default to showing only 'wishlist1' artboard. Secondly, to make a scrollable component where the imported sketch fle scrools within the superlayer I've used the following code: pull = Framer.Importer.load "imported/pull-to-refresh" Framer.Device.screen.backgroundColor = "white" scroll = ScrollComponent.wrap(pull.wish1) Where 'wish1' is an imported group layer from artboard 'wishlist1' Again, this is not working. Can anyone offer any advice of where I'm going wrong. Thanks for your help Greg Woods
4
Chase Curry
So I have an event listener attached to a scroll component (on Events.Scroll), but it doesn't seem to be firing when I tell the scroll to scrollToClosestLayer(0.5, 0.5). Does that function somehow get ignored by the scroll event listener? Thanks in advance!
6

June 24

Luis Ricardo La Torre
Has anyone figured out a way to embed a Framer prototype on a website? I'm renewing my portfolio and it would be nice to let people play with the prototypes.
5
Greg Woods
I'm loving framer studio. Can you suggest any courses that go beyond the basics please?
6
Daniel Lee
Hey guys, I've just started using Framer and I've run into a problem. I believe the solution is simple but I can't see it. I am basically trying to import group layers for photoshop and place them into scroll components. From there I am hoping I can scroll the different photoshop grouped layers. When I open example files it seems to work. I can't tell what I am doing wrong. I saw small success defining the imported layer as sublayer of new layer. Then wrapping the new layer into the scroll component. I ran into a problem with the new superlayers and how they overlapped. Is there a difference between importing from Photoshop vs Sketch? Is there more to prepping your photoshop file than just making layer groups? So sorry for the simple problem. I have just been scratching my head for a while. What I am seeing at the result is: I can scroll another layer which now sits on top of the photoshop import but doesn't scroll the actual photoshop import
2
Brendan Hastings
Is it possible to create a Slider with more than one "knob"?
0
Chase Curry
Probably a simple question... I'm trying to get a sublayer in a group to animate... what's the syntax to call out a sublayer? Currently I'm doing this: parentLayerName.subLayers[3].animate. That works until I add more sublayers into the group. Thanks!
4
Stephen Crowley
Join us for our second Framer Seattle Meetup hosted by Chris Camargo of Disney Parks and Resorts Digital https://www.facebook.com/events/440491706131696/
0

June 25

Marat Gaipov
Hey guys how can i do flip animation? like this -
5
Josh Davis
Quick question: How do I add multiple on click events to separate layers? Here's my code; can't think of anything I did wrong (though obviously it's something).. I have three layers. I have on click events for the first two - when the layer is clicked, the opacity goes to 0 revealing the next layer. The final layer has scroll. Thanks for your troubleshooting ideas!
8
JL Flores Mena
Hi! I wrote something about unlocking new ideas using high-fidelity prototypes, and I mentioned Framer a bit. *Includes two youtube videos with Framer examples.* Thought I could share it here.
2
이정익
i make schedule app prototype. my prototype plan is as follows. scroll component -> touch layer -> extend width, height layer -> roll back scroll component so i make prototype. oops!! i find two problem of prototype. first, my action is scroll but layer respond click action. and second problem is coordinate. Layer's superlayer is scroll componet, so layer's coordinate can't fix on the screen coordinate. this is my first code. http://share.framerjs.com/ulixiyfbf586/ i solve to use this trick that problems.;;;; to use touch area and screenFrame method. When i touch layer, scroll component remove layer. It is smooth. here is second my code. http://share.framerjs.com/jfh2s1n1f3l3/ but.......another problem comes up. ;; if include png source file in layer, layer.width and layer.height animation is cause perfomrmance fall. Is there another good solution??!!
4
Justin Mariano
anyone having issues with the share.framer server? keep getting a 504.
1
Brendan Hastings
Is share.framerjs.com down? Getting a 504
2
Charlie Deets
What is the best way to write a conditional based on the current page in pageComponent? For example, I'd like to say if page2 is the currentPage, then do this. Thanks!
2
Todd Hamilton
Hey everyone! I wanted a better way to demonstrate typing in my prototypes so I created a simple keyboard simulator. It's super easy to use, just copy the code into your project and run: type(yourLayer,'string you want typed out') Right now its only the default iPhone 6 keyboard but you could easily tweak this code for other devices. For non-letters I'm just hiding the key to keep things simple. Enjoy! Download the project here: https://www.dropbox.com/s/rvtz46wxibinifl/keyboard.framer.zip?dl=0
15
Craig Murray
Am I able to rebound a slider if the drag is too fast? I'm curious how I might achive that on the SliderComponenet. Any help appreciated. Thanks.
2
Matthew Rigodanzo
Quick question (or potentially feature request): Is there a way to easily show a scroll bar for scroll components? I'm thinking something like how you can enable the mouse wheel with MouseWheelEnabled, it'd be great to have ScrollBarVisible or something. Crazy, but there are still people out there who don't have awesome trackpads and mouse wheels...
0

June 26

Pietro Schirano
Is it possible to change the value of a property during the length of a certain animation? For example let's say that one of my states look like this: layer.states.add one: {rotationZ: rot+90 } Where "rot" is a variable that I want to change between a range of values in a random way during the duration of the animation. Thank you guys! This would be really helpful!
7
Fran Pérez
Hi guys, I put together a little prototype of "3D" dragging :) http://share.framerjs.com/j4pma3yublh7/
16
Josh Davis
I'm having a difficult time recreating iChat from a Sketch mockup. My problem is that when I add a ScrollComponent to the mainscreen group to scroll through messages, I can't then add an on click event to an individual message to "open it" to view the whole message like in iChat. The ScrollComponent blocks the on click from working, but both need to be initialized. How are people getting around that? Thanks!
0
Arvi Raquel-Santos
Has anyone been using share.framerjs.com links to folks and having them view the prototypes on their phone? If so, has anyone been able to find a way to remove the browser bar?
8
Stefan Hvlmnns
A Module to make Layers easily accessable Lets say you have a Thumbnail group with an Image and Title group inside In your App.coffee you would do this to select the Image and Title layer Layers = require "Layers" Layers.render(yourImportLayers) image = Layers.$Thumbnail.$Image image = Layers.$Thumbnail.$Title makes stuff a little bit easier :) Altho Framer JS why didnt you implement a shortcut to doubleclicking on layernames? like doubleclick results in "Image = yourImportLayers.sublayers.Image" cheers Stefan
1
Stefan Hvlmnns
Anyone knows how i can select only the First Layers? Searched their attributs, sadly nothing found so far
2
Reshad Farid
Guys I have an error at a little piece of code I have the following: sketch = Framer.Importer.load "imported/Watch_true_player" page = PageComponent.wrap(sketch.content) But the PageComponent.wrap returns an error. It says: undefined is not an object (evaluating 'layer[propKey]') How can I fix this? Im completely new to FramerJS and I am following the basics on the website where they explain the swiping mechanism. Thanks in advance!
3
Rory Smyth
Is there an elegant way to chain animations for an element without having a global listener for Events.AnimationEnd Say I have an start, middle and end sequence. I want to chain 5 animations for an element at each stage. There's no real way to do this now is there? I'd have to set up some sort of state variable and have the Events.AnimationEnd check it before doing anything. or is there?
6
Josef Richter
Has anyone done Path app style menu, please?
2
Stefan Hvlmnns
https://framer-slack-signup.herokuapp.com/ lets get this partey started Just send me a message if you want an invite
13
Jason Lang
I've got a superLayer that contains several subLayers. Is there a way that I can force subLayer's X any Y positions to be relative to the superLayer, and not the overall canvas? I'm looking for a simple/logical way to arrange all my subLayers. Then I can just animated my superLayer.
9

June 27

Fran Pérez
I was helping a friend with a project and thinking that this would probably be useful to others as well, so here it is: super simple sticky header inside a scroll component :) http://share.framerjs.com/cke5lnwtthwd/
3
Enrique Gonzalez
I'm not able to import any sketch templates. To eliminate my work from the equation, I downloaded the starter templates located at: http://framer.com/learn/import/templates/. When I attempt to import the iphone5 template. I received the same error: Import Failed. Please check Console for errors. Console does not provide any errors. I am using Framer Studio Version 1.12.0 and Sketch Version 3.3.2. Any help is appreciated. Thanks. P.S. Photoshop templates import fine.
6
Stefan Hvlmnns
http://share.framerjs.com/jcfq2znz2tl3/ Might seem not special, but all the functions are executed based on the layer names in Photoshop. Maybe i'll make a serious module out of this, to convert plain ps files into bootstrap previews in a breeze. download it and check out the psd file in images.
1
Anthony Roscoe
Just updated to 1.12 and Classes don't seem to be working anymore. Created a simple example but getting no errors. Open in old Framer Studio and you get a white box, new Framer Studio nothing. New way to write Classes that I missed or bug?
9
Daniel Lee
Hey guys, I'm still running into a problem with using a scoll component with a imported PSD. It doesn't have anything to do with layers going off screen and expanding the PSD canvas. When I apply a scroll component onto an imported layer. Instead of scroll the layer, it scrolls a mask or another generated layer on top of the photoshop layer. Attached is a simply example of the problem I am running into. The file also has the PSD. Can anyone help me?
4
Stefan Hvlmnns
http://share.framerjs.com/8c2677t2yv6l/ improved some stuff on my layer to prototype converter! be sure to check out the source
0
Parker Malenke
Is anyone able to use an external editor to make changes to app.coffee while preserving the live updating? This is listed as a feature in the last major release, but doesn't seem to be working.
5
Dae Hyuk Yoon
I just tried out the scrollComponent for the very first time but I'm having difficulty. I've managed to make it scrollable but it keeps spring back to its original position even though there's more content below. Any idea? Here's the link to the project
2
Koen Bok
The new Safari debugger looks very impressive. We will automatically get this in Framer Studio too.
7

June 28

Rory Smyth
Is there a way to interact with the object that "subLayersByName" returns. I'd like to target sublayers dynamically from my sketch file, but if i try to change the properties of the returned object, nothing happens.
2
Greg Woods
Hello, can you offer any tips please: I have a layer 'donetap' as a sublayer of another 'keypad'. I want to attach an event to donetap to animate 'keypad' on tap. It is not working. Here is the code. Any ideas please? PS. I suspect it something to do with superLayer. However, the reason donetap is a subLayer of keypad is so that it only appears on screen when the keypad appears. If you have any other ideas, I'm keen to hear thanks agaib donetap = new Layer superLayer: demo.keypad # 'demo' is imported sketch file x:0, y:0, width:280, height:200 donetap.on Events.Click, -> demo.keypad.animate properties: y:100
13

June 29

Dae Hyuk Yoon
Is there a way to show only a subset of layers in the layer inspector? I want to work with layers that are relevant to prototyping.
2
Paul Rich
Has someone used a code from prototype in production?
3
Gregory Benko-Prieur
Hi guys, I'm an absolute newbie in the web/ios developer world, and was wondering if the time spent learning Framer was "well-spent". I can't find if the code used in Framer can be exported in Xcode, or if coffeescript (I believe that's the js code used in framer) is only useful for the prototype, and not the actual final development. Can anyone let me know if we can just copy/paste the Framer code to the final development, or if there are other steps in-between a superb prototype and the final coding. Thank you so much, Have a great day
2

June 30

Giel Cobben
I made a list of resources for Framer. If you have any other resources that aren’t on the list, feel free to add a suggestion.
5
Brandon Souba
Few issues using sketch import: 1. My canvas is always offset in framer. I have to then wrap my sketch doc in a layer and then set the layer's x and y in framer to make it correct. 2. I'm using sketch on my retina MBP 13". When I import into framer it looks low res. Any fixes for this?
1
Horacio Mejía-Galarza
Hello, i'm new around here and I have a question: Can you use Framer JS for website (desktop) prototyping? ie. menu, buttons animations.
4
Rich Zarick
Alright guys, I wrote up a brain dump for the Framer/Parse/IFTTT demo I shared this past week. It's a bit of a novel in length, hope you guys get something out of it! (there's a link to the project at the end)
3
Stefan Hvlmnns
can i override the default import function of framer?
7
Christian Poschmann
Hi guys, I made a module that uses a JSON file to create a list of locations. http://share.framerjs.com/nrg308k9iljz/ Within the same module I added a Map prototype with MapBox using the geolocation from the same JSON File. http://share.framerjs.com/hwwd7kiaxlkx/
3
Stefan Vant
iOS webapp question: When using <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> the default text color is white. Any known ways to change it to a different color?
2
Pete Schaffner
Just wrote a little module for creating "labels". Label layers are by default the intrinsic height/width of the text they contain. You can also constrain their width and specify the number of lines that should be displayed before truncating (via an ellipsis). I will be improving the API and adding an alternate "fade-out" style soon. Let me know if you have any suggestions! Code: https://github.com/peteschaffner/framer-label http://share.framerjs.com/v9l2rpmlnsju/
2
Kevin Hamil
I just found FramerJS and it looks fantastic (I'm currently running the trial). I've tried connecting to my iPhone for previewing, but I can't seem to load the projects. I'm using Frameless and the app detects FramerJS on my mac, so I connect... but it fails to load the project. Not sure if this is a common user error mistake. Any ideas?
3
Christian Robert
hi there. I'm new to framer and have a noob question: please look at the image I attached. currently, the prototype shows the intended parallax behaviour on hover (touch). is there a way, to change things so that the same behaviour is triggered on scroll? i tried replacing "Events.TouchStart" with scroll equivalents - but couldnt get it to work (at all). thank you!
0
Greg Woods
Hi guys, Is it possible to have two scroll components in the same prototype? I'm not sure how to define them separately. Any suggestions please? # overview - scrolling content scroll = ScrollComponent.wrap(demo.content) scroll.scrollHorizontal = false # overview2 - scrolling content scroll2 = ScrollComponent.wrap(demo.content) scroll2.scrollHorizontal = false
5
Koen Bok
Can anyone help with a great place for Jordans next Framer event in Seattle?
32
Jacky Lee
Question: I got a prototype here: http://share.framerjs.com/umdt5fqzqe0c/ It performs fine on Safari but really buggy on Chrome. Specifically around layer index or z-index. Has anyone ever came across this issue?
2
Ryan Gambles
How would everyone suggest the best way to add "hardware" buttons outside the screen canvas? I'm prototyping a custom wearable device, and some of the functionality requires interacting with buttons not on the screen. Is there a best practice for doing something like this?
5
Harshad Kulkarni
I need help, I am new to framer I am defining a layer with an image I want to add states to that layer but with different images? Can someone please help? Thanks in advance.
8
Alex Bystrov
Module request. Sound Effects for our prototypes. It's always nice to have some of important user interactions followed by sound effects, right? This seems pretty easy to implement, but turns out that on mobile (Frameless/Safari) an implementation of multiple sound effects without delays could be a real clusterfuck. There are several problems: 1. No support of loading several audio files at once. One-in one-out. 2. iOS won't download the audio unless the user initiates the action. 3. There's about a 0.5-1 second delay before iOS is able to play the audio — because the audio object (in iOS, not HTML5) is being created. The most promising solution is using audio-sprites, where you store all of your sounds in one long .wav and then address different time/positions in it when needed. Two nice articles about it: https://remysharp.com/2010/12/23/audio-sprites https://www.ibm.com/developerworks/library/wa-ioshtml5 Ninja shit: JS compatible audio sprite generator (node.js, ffmpeg) https://github.com/tonistiigi/audiosprite. The module could also use the hosted version of this generator and be able to read the generated jsons. So any silly designer as myself could just drag'n'drop his sound files and be good to go. And a nice sound kit here: https://ui8.net/product/ui-sound-kit
3

Monthly archives

2017

2016

2015

2014

2013