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

What is Framer? Join the Community
Return to index

April 2015

April 01

Jordan Robert Dobson
Shorthand Layer Creator Is this something people would find useful if I wrapped it up into a module and placed up on GitHub? Framer Source Code: http://jrdn.io/aSLM
3
David Lee
Has anyone played with Hype Pro 3? How would you compare it with Framer JS? Our team is trying to decide which tool would be better for us to use.
6
Josef Richter
Has anybody been prototyping some messaging app / feature? Need some ideas how to handle multiple dummy messages showing up, or maybe even functional input field. It can get quite messy if each message is a separate layer with states, etc. Any code samples please?
3
Andy Law
New to FramerJS: Can you use an event listener to detect the correct device orientation and rotate the UI accordingly? Right now I'm using a button with... Framer.Device.rotateLeft(true) ...to drive the orientation change. Any advice?
2
Joshua Tucker
I didn't want to post this originally because the code isn't ready for everyone, but oh well! Soon though. I'm working on a more comprehensive prototype to explore more ways to interact with multi-selection interactions like this. I'd love to see what your thoughts are or ideas! Cool area to adventure into.
10
Kailash Singh Bhati
Today is my third day working with framer js and i created this http://share.framerjs.com/6s1cjanq03ip/ Feeling awesome :D . Thanks! to the framerjs team for providing us a platform to express designs in better way.
0
Ian McClure
Here is a little tutorial project that I made a while ago. It describes how I fade between images and/or colors. Feel free to tear my logic apart, it is something that I'd like to post as a resource for people. http://share.framerjs.com/sv71fpoxw0gx/ P.S. I might have been watching an old Godzilla movie while doing this.
0
Joakim Wimmerstedt
Question: What are your ways of locking orientation in framer? I tried rotating # FramerContextRoot-Default 90deg on window.onorientationchange but it's behaving very badly. EDIT: I should mention that device.setOrientation(90, false) also doesn't work.
3
Matthew McGriskin
hi all, I am just working on showing a download state. So when the user hits download the icon changes state to indicate its downloading. I have done that simply by using .states.next when the event is clicked. But I want to be able to show a download complete icon to replace the downloading icon if the download isn't cancelled. Does anyone have a way of doing this? I am sure its simple! but just not sure of the best route to go down. thanks!
8
Florian Ludwig
Hey all – I'm currently working on a library for framer.js to recreate image galleries and navigation concepts easily. I published a medium article about it with a beginners tutorial guide and some github files included. Hopefully some of you might found it helpful!
2
Harley Donaldson
Forgive me if this is a basic question, but when viewing my Framer prototypes on (Win 8) laptops with touchscreens - for some reason it ignores mouse inputs entirely, so click events don't fire. Touch events are fine but clicks just don't register. Is this known? And if so, is there a simple fix I'm missing?
4

April 02

Ash Adamson
How does Framer.js choose which layers to show on top of others? Is it first defined in code, is the top layer? I'm aware of superlayers and sublayers, but wondering if it's not defined where it decides to place things. How are layers from Sketch prioritized in the stack?
4
Min Hu
Hey guys. I got another question here: Is it possible to change color property of a layer's sublayers? So something like Layer.subLayer.backgroundcolor?
2
Josef Richter
might be useful for some: messaging prototype that uses PubNub.com to send messages realtime between prototypes. it generates random usernames and avatars for now. if you open this now, we should probably all be chatting in real time in one channel :-) if you want your own, open an account with pubnub.com and get your own publish/subscribe keys. EDIT: fixed the scrolling issue http://share.framerjs.com/0tlv0ovcjyfu/
3
Ash Adamson
I'm stuck! I'm trying to do a drag down menu, something similar to what you see when you drag down on the iphone to pull up search. I'm sure there's an example out there...
2
Leslie Liu
Hi, Is there any way to trigger a double click event on framer? Like double click on images to zoom in.
6
Josef Richter
Dumb question: I've seen this line in one demo: scrollLayer.draggable.inertialScroll = true Is that built-in Framer stuff? Any documentation? I've seen it in
5
Joakim Wimmerstedt
Potentially dumb question: I've got a draggable layer that has worked previously on an ipad. Now, all of a sudden it doesn't. Events.DragEnd and Events.DragStart runs as expected - but Events.DragMove doesn't respond at all. Any ideas?
2
Sindu Narasimhan
I have a prototype in Framer that I am looking to convert to a gif to be able to show the interactions and animations. What is the best way to do it?
15
Wendy Lim
Hello, Another basic Q that's got me head-scratching. I have 2 different photoshop files that I'd like to use for my prototype. I've managed to import the two of them and can access layers ok. Is there a way to specify I want ALL layers in one of the PS files as hidden, but then specific specific sub-layers one at a time to be shown.
2
이정익
Hi, everyone. I made ios schedule box. But, I am sorry, it is not module. So if you want to use this, you have to modify this file. Enjoy framer !! :) http://share.framerjs.com/g9az3wd6dklz/
0
Benny Chew
I'm working on a food app concept and this is my first test with the new PageComponent. As my scroll layer width is smaller than the device width, I'm running to a problem with the last page (card). Any idea how to fix this? Also, how can I detect whether the user is swiping to the left or right? I want to set the current page to opacity 0.25 and the next to 1 and keeping track of the current page with a variable.
1
Devin Abbott
Ever wanted your draggable layers to scroll like native iOS, while still being able to bind events to position? What about horizontally draggable rows within a vertically draggable scrollview? Now you can have all that and more! New LayerDraggable properties: - draggable.inertialScroll (keeps moving after you let go) - draggable.overscroll (drags with resistance past the edges - will spring back if inertialScroll is true) - draggable.directionLock (can lock in a direction.. same as iOS) - draggable.multipleDraggables (propagate touch events until directionLock) It’s compatible with existing properties: speedX|Y, calculateVelocity, maxDragFrame, and layer animations. The physics constants are adjustable if you don’t want your Android to feel like an iPhone. Demos: - https://db.tt/bJqVil5A - Fling an object - https://db.tt/XlOGXQvL- Crop a photo - https://db.tt/8U3UgwAx - A re-creation of the Yahoo Weather app with inertial scroll, multi-direction drag, parallax scroll, paging scroll, pull to refresh (photo credit to Kim Alvarez, http://instagram.com/imtotallynormal) PS: As usual, it runs slow on desktop Chrome unless you make the width of your browser window smaller… make it about phone-width. No need to do so on Safari. The inertial scroll code is written from scratch, but based on the physics concepts from: http://iamralpht.github.io/physics/ - using a spring and friction simulation feels just right. I’ll make a PR to Framer soon (though, I’m not sure if Framer is going in this direction).
43

April 03

Ed Chao
Anyone noticing strange behavior when passing animationOptions to state switches? In this included case, only a single state successfully switches.
0
Koen Bok
I saw a bug report somewhere with photoshop importing, but I can't find it now. Anyway, it's fixed if you do File > Update Framer in Framer Studio.
0
Attila Oláh
Koen Bok the footer links are broken at http://blog.framerjs.com/ because the footer is shared between framerjs.com & blog.framerjs.com and the links have relative paths.
2
Bert Timmermans
The new scroll component makes life so much easier. I have build this in just a few hours and I am really loving the final result. http://share.framerjs.com/cifuggxo0d89/
7
Giovanni Caruso
Benjamin Den Boer some stuff to fix in the Docs: Sidebar > layer.draggable.direction > wrong anchor (#layer.draggable.angle) Main column > layer.draggable.direction ... "print drag.draggable.direction" >>> should be "print layer.draggable.direction" Love this release!!! Thank you, guys!
2
Logan Merriam
Super newbie coffeescript question: the framer docs show a loop to create new layers, but it looks like they all get the same layer name: for number in [0...5] pageContent = new Layer How would I increment the name (i.e. "pageContent1", "pageContent2") so I can refer to them later? Bonus points: good way to print all existing layer names in a project so I can see what's happening.
3
Nick Bewley
Coffeescript question. If I have an array: arrows = [arrow1, arrow2, arrow3] How do I iterate over the arrows individually so I can add a delay to their animation? Something like: for arrow in arrows __Utils.delay 0.5, -> ____arrow.animate ______properties: ________opacity:1 So that "arrow1" would appear first, "arrow2" would appear after the 0.5 delay, "arrow3" would appear after a delay of 1, etc.. Any ideas to help? Thanks a ton!
8

April 04

David Lau
Noob question, but why is it that i keep getting "ReferenceError: Can't find variable: ScrollComponent" when using scroll = new ScrollComponent
2
Benny Chew
Hi Koen Bok Benjamin Den Boer is there something like a layer.globalX or layer.convertLocalToGlobal() in Framer? I looked into layer.screenFrame but that didn't solved my problem. I have pages in a PageContainer I want to detect when each page goes beyond the global 0 x axis.
7

April 05

Pablo Caro
Hello framers! - I have a newbie quick question - When I import a sketch file into framer, how do I get the whole imported artboard to be scrollable? #sketch #import #scroll (I figure I would # this for future reference?)
1

April 06

Nir Benita
Hi guys! I have an array of 5 elements, and I want - on event - to run the same animation on each of the elements, with an incrementing delay. Basically, I'm trying to get a collapsing effect. I'm super new at this and will appreciate any help. Thanks!
3
Christian Selig
Is there a way to have an event fire on "long press"? Holding down for half a second, for example?
3
Josef Richter
Any ideas why snapToNextPage() is not working under a click event? the event fires, but snapToNextPage won't... pageOne.on Events.Click, -> page.snapToNextPage()
5
Joey Lamelas
I've set layer.draggable.momentum to false, but the layer still moves after the drag has ended. Is anyone else having this problem?
1

April 07

Josef Richter
Any ideas how to create two "rubber string connected" layers? I.e. you drag one layer, and the other copies the movement, but as if it was connected by rubber string, with all the dynamics.. Do you understand what I mean? :-) Thanks
3
Ken Yiu
Created the wave animation in AE and exported as MP4. Put the video on the video layer and it works fine on desktop browser and studio but it can't autoplay on iPhone. Any hints will be great! http://share.framerjs.com/ori3sr9rzhph/
23
Andy Law
Is there a trick to getting video to be scrollable? For example, I have a video in the center of the screen (device is in portrait) then I scroll vertically and want the video to move to the top of the screen while the video continues to play. Any ideas?
0
Josef Richter
Guys, how do I make sure my content scales properly on iPhone 6+ @3x? That basically means 100x100 layer should show up as 150x150 on iPhone 6+. I have a client with iPhone 6+ so it looks bad on his phone :-( Help please.
2
Shane Brown
I'm having a ton of trouble trying to get a hold and select working (similar to the Apple iMessage hold and move to capture sound / video). I don't know how, after getting the touchStart on the main object, that I can then detect movement over another object properly. I've done a bit of searching on here but haven't been able to get anything working =/ It feels like it should be pretty simple, and some suggestions seemed to revolve using javascript and the dom directly (elementFromPoint). I'm not sure how to set id's via Framer to do that, or how to accurately detect touch/mouse location within the device itself. very simple Framer Project here http://share.framerjs.com/ts045uui01s2/
4
Max Petriv
Hey guys, super excited to launch this this morning. Already number 2 on Product Hunt.
7
Alex Lingeman
Hi guys, I've got a layer with the y:500 property and I've made it draggable. But when you drag, I don't want it to be dragged higher than 500. Is there a minimal and max x/y position you can drag a layer to, and how do you specify this ? Keep up the good work !
4
Derek Mack
Here's a little prototype I put together today for Apple Watch. It makes use of the new ScrollComponent. I needed to wrap the ScrollComponent inside another layer in order to get the page transition to work… trying to animate content inside a scroll view proved difficult. Try scrolling and clicking the row with the green highlight. Hopefully more to come soon. And thanks to the Framer team for such an incredibly useful and powerful tool :)
1
Andre Sebastian Tacuyan
How do I make an object have two different interactions (ex. clicked on or be held down)?
3
Mike Brand
Hey All, I find when I share framer files (with the share button) the images don't upload or show up in the browser. Is this expected behaviour? or am I doing something wrong?
2
Sebastien Tran
Hey everyone. Anyone having problems importing Sketch files after Sketch 3.3 update? I get a 'TypeError: undefined is not a function (evaluating 'Utils.zeroFramr()') message. Thanks for the help.
2
Zoltan Ray
Trying out the new draggable options but changing the values doesn't seem to have any effect. Am I missing something obvious? iconLayer.draggable.enabled = true iconLayer.momentumOptions = { friction: 2.1 tolerance: 0.1 } Setting friction to 1, 100, 1000 or whatever appears to make no difference, and same with the tolerance value.
3
Logan Merriam
Today I had a project working perfectly in studio, I went to sketch and made some changes to content on an existing artboard, imported again and now all layer images fail to load (the console says it can't find them). Even after reverting back to a version of the sketch file that previously worked I still have the problem. I can see the images in their respective folder. What's up?
3
Joshua Tucker
Hola everyone! Question: is there way to pass other variables with an event handler? Example: touchHander = (event, layer, othervariable) layer.on(Events.TouchStart, touchHandler <-- pass othervariable here) If I were to do (..., touchHandler(other variable)), it just executes the function when I am setting up the handler. Cheers!
4
Matt Wujek
Is anyone else having problems with video on Framer?
2

April 08

Jon Nguyen
Is there a recommended way to use a custom stylesheet when using Framer Studio? There doesn't seem to be any facility in the application itself for adding this kind of stuff. Do most people import it in javascript? Or maybe they go into the project folder and edit files that aren't normally exposed?
0
Neil J Krishnan
Hey all - I've been seeing questions related to Framer and other prototyping tools scattered across UX Stack Exchange and Stack Overflow, but there isn't an SE site dedicated to design prototyping/tooling. Thought I'd share the proposal for one (tool-agnostic) in case anyone else is also interested in seeing one made:
13
Sudhir Nain
"Import Again" doesn't update, it imports another instance. Looks like a recent bug.
2
Ondrej Rohoň
Is there a way how to specify onComplete function for animation? And extend onUpdate function? Or is there a way how to differentiate animation events of one particular layer? Imagine we have two different animations on the same layer. How can I know which one of them just finished? Thanks.
3
Logan Merriam
I'm trying to make a scrollable layer snap to a nearby point when it slows. But I'm creating a bad loop because ScrollToPoint makes an animation that can go slower than the velocity threshold I'm watching for, and restarts the ScrollToPoint. There a way to turn the listener off while the ScrollToPoint is completing?
6
Metin Saray
Hey guys, I draw a container to use a mask for the album artworks. Then i want my ui to get on top of it. But whatever i do (index, bringToFront, placeBefore, placeBehind) my ui does not come on top of my drawed Layer (my mask) What is the reason? Thanks, M.
7
Chris Camargo
Can someone point out what I'm doing wrong here? I feel like I've used this approach before to address each layer that belongs to an object.
1

April 09

Cemre Güngör
I'm having trouble opening Framer projects in the app. Nothing happens when I use File > Open or drag it. Any ideas?
4
Raphael Essoo-Snowdon
I've got a layer called mineButton, that I've given a `i.button.superLayer = mineButton.content`so it references my Sketch button. Is there a way to give mineButton a superLayer of a PageComponent called `item` so it moves with the rest of my PageComponent? At the moment it's fixed.
1
Koen Bok
Small bugfix release:
4
Jeff Szpak
Hi all, quick question that I can't seem to figure out. Is it possible to nest a page component inside of another page component? If so, how is it done?
7
Mike Kotsch
Hi everyone, can you tell me how I make two things happen: + just show the top three circles (not the other ones) + give those three circles a mouseover event as well. Thanks a lot in advance.
2
Sebastian Berge
Anyone here that can help me out and make this Sketchfile workable in Framer? Its recreated from how I have made it in another project, but I dont want to share the whole project because of confusion. I am kinda looking to understand best practice.
0
Chase Curry
Hi all, Is there a simple way to create multiple instances of a single object? e.g. I've created a panel that reduces its opacity to 0.5 when hovered on, and would like to populate the screen with 9 of these panels. Is there something akin to Panel1 = new Panel (where Panel is an object I've defined)? I noticed a few examples where ppl used for loops and defined the object inside of the loop.... seems to come close, but could be a bit messy. Thanks!
30

April 10

Josef Richter
Is there a way to observe x, y position properties of a layer while it is animating, please? I.e. it's not a drag/scroll event.. Ideally a way to observe any changes in x, y, no matter what caused them? Thanks a lot.
19
Paul Cotton
Any clues as to how I can assign different outcomes for click events to the one button? Example: I have a next button and title1, I click next and the title slides out of view to the left, and title2 appears in its place. I click next again, and title2 slides away, and title3 appears in its place. I click next, now title3 is gone, and title4 appears. I could have as many identical buttons waiting in place on top of each other as I need and just .destroy the button being clicked every time, but I feel like there must be a more efficient way. Or is this a situation where I need to set up multiple states for each item, and animationOption properties when I need them - but then I'm left with the same problem... Press the button once: trigger state switch for title1, title 2 only Press button again: trigger state switch for title2, title3 only
18
Paul Cotton
Possible bug? When I Save As a project it didn't copy over the /image folder. Maybe because I was importing from Sketch as well?
1
Paul Rich
Is there a way to scale the proto depends on device? For example I create mockup on Sketch for iPhone 6 screen size, but on iPhone 5 it looks cuted
1
Sebastian Berge
Anyone found a way to Share a prototype with video that works?
2
Chris Camargo
Anyone else run into a bug when trying to get screenFrame coordinates on a layer that's inside a ScrollComponent? My numbers do not seem accurate.
1
Chase Curry
I'm loving the new scroll component- super super easy to implement. One issue I've run into is with animated gifs. I have a long scroll of 10 different gifs which are constantly looping. At any given time, 3 of them are visible. However, for some reason, when I scroll down, and then back up, a few of the gifs simply stop playing. Is there any way to force them to play again from the start when they come back into frame? I'm also not sure why they're stopping to begin with. Thanks!
1

April 11

Ricardo Aguilar
Hello all, has anyone tried to run a Framer prototype locally on an offline device?
1
Cemre Güngör
Two questions: 1- How would you have a draggable layer animate to another position while my finger is still down (I can't drag it until the animation is over), then resume dragging from its new location? Currently when I resume dragging, the object just snaps 2- After changing the dragging speed mid-drag, the layer jumps (I think the logic is starting_position + change * speed and it still has the old starting_position and change values). Any way around this?
4

April 12

Andre Sebastian Tacuyan
I need a lot of help with this: http://share.framerjs.com/xlbncaa571tf/ Doesn't help that my first prototype I'm making with framer has to be something for Android Wear, something I can't find any examples for. So frustrating haha I'm having a ton of problems with this when it should be something super simple.
4
Joshua Tucker
Anyone else observed interesting screenFrame values when you are using items inside a scrollView? I built a really basic project to show what I mean. Up until you scroll the content, the screenFrame prints out fine, but if you click elements that you scroll into view, it gives negative numbers/positive numbers without any clear pattern. http://share.framerjs.com/7bcosas0vl3r/
0
Ash Adamson
How does one go about debugging? I'm getting an "ReferenceError: Can't find variable: Frame"
5
Chris Lee
Can anyone help me debug this? http://share.framerjs.com/6bde0796i6b3/ Some weird behavior involving a ScrollComponent with a contentInset.
1
Anton Kartashov
Sticky avatars from Instagram feed http://share.framerjs.com/trfzryw403d0/
5
Chris Camargo
So my Framer workshops at the office have been going incredibly well, and I keep getting asked to repeat my intro session. I've been thinking about offering intro workshops via live stream. Does anyone have any suggestions for a good (free) streaming platform that could allow interactivity with the presenter?
9
Michał Sambora
Why this obiect is returning "undefined" on mobile ? Any ideas Stack[i].on Events.TouchStart, (event, layer) -> startX = event.x
2
Chris Camargo
Sooo... is this a bug? Take a look at the on-screen console. I'm printing the screenFrame.x of Panel 1 and Panel 2. Before Panel 1 moves offscreen, it's screenFrame.x value is already higher than the screen's width. And Panel 2 reaches 0 way before it hits the left edge of the screen. Here's the project: http://share.framerjs.com/t9dsjuoovk3g/
2
Alexander Zapadenko
Hey guys, i'm trying to deal with prototype which will be ready for multiple screens. For example, i have a sketch file for android application in mdpi, the goal is to be able to view the prototype on multiple devices (hdpi, xhdpi etc.). Fluid-framer giving ability to set auto-width but i can't find a way to scale height proportionally based on auto-width result. Maybe there is other workaround based on dp units, but still, no any idea where to dig to find it. Thanks for any help.
7
Andre Sebastian Tacuyan
Can I put states in states? For example, if one state turns on, how can I make that trigger other states? Thanks!
3

April 13

Matt Barr
Is it possible to have a draggable layer's feed layer exceed the bounds of the art board where the position of the feed layer has negative X and Y values in Sketch? It seems like it only drags the layer in the positive direction (to the right and down). The phone UI sits at X:0 Y:0 on the art board and the feed layer is a sub-layer in the UI hierarchy. Thanks for any help!
3
Arron J Hunt
It's probably staring me in the face, but how do I get the scroll position on a scroll component? Basically I want to set up a function that will run iff the content has been scrolled past something like 300px
11
Aatur Harsh
People Interested in
0

April 14

Paul Cotton
Out of curiosity, what do borderColor and borderWidth do? My expectation was that they'd change the colour and thickness of a border around the layer (which it seems can be done instead with .style), but when I punch 'em in nothing visibly changes. So... what's actually happening?
4
Chris Camargo
If I have a horizontal scroller nested inside a vertical scrolling page, how do I prevent vertical scrolling when dragging my horizontal scroller? Both are ScrollComponents.
2
Joey Lamelas
So, I noticed that the "change:currentPage" event fires even if the page doesn't change. Is this intended behavior or is there another event to look out for if the page actually did change?
0
Paul Cotton
Not sure if this is an impossibility or a syntax issue, but how do I group multiple variables under one variable? Example: I have two layers named card1 and card2. I want to define: bothCards = card1, card2 So that I can use: bothCards.states.add in order to apply the same state properties and animations to each of them, without having to write it out twice. Or bothCards.y, or bothCards.animate etc.
7
Balraj Chana
Hey guys, it's great to be part of the group! As I'm fairly new to Framer JS, I've been looking for a way to detect which layer was selected within an array of layers without repeating myself. I'm sharing it in case anyone needs it so check out the demo here: http://share.framerjs.com/4ea233kckt8a/. Any feedback is welcome!
3
Constantin Jacob
Hey guys & girls, I'll be around in Berlin and I'm already really excited to see what's happening. For anyone interested I have offered before to write something up on how to install Gitlab (Free open source Git Server) on a really cheap hosted server (VPS). I don't have time to write this up at the moment but I'd like to offer to help some in Berlin if anyone is interested and if Koen Bok is ok with it (due to schedule etc and me doing something somewhat unrelated to Framer there. I don't want to be an attention whore. I'd just like to help you guys out) :) Disclaimer: I do not work for said hosting company and I do not get any money advertising them. I would simply help you deploy Gitlab with them because I have 3 servers myself all over the world and have not yet experienced any downtime. I simply advise you to choose them because they are awesome in every way! (And I got to know some really kind people working there) Also: if anyone is staying longer and likes to get advise for food/bars/partying hit me up as well. I'm in town until Sunday night.
0
Mike Kotsch
When trying this prototype on my Mac, everything works perfectly fine. But iPad not so much? How can I fix the drag event?
0
Nir Benita
Are there any differences from Framer Studio, or using Framer.js in terms of prototyping capabilities? The live preview is great, but I'm just more comfortable using Sublime and the browser
8
Josh Puckett
Gauging interest in the potential for a SF based Framer class. These could be recorded/streamed as well. Vote for whichever you'd be most likely to attend.
1
Derek Kapa
having issues getting borderWidth and borderColor properties to work on trial version? Is it nerfed or is my syntax incorrect:
3
Michał Sambora
Is it possible to add multiple comments like this to make some parts of code invisible if needed, like this :
1
Ash Adamson
Is there a way so that a function calls when another is completed? For example: Events.DragEnd, (event, layer) -> nav.show nav.hide Currently, coffeescript seems to run both at the same time, so nothing appears to happen since nav is shown and hidden at the same time. I would like it to hide.nav after nav.show has completed it's animation. Can't figure out how to use Events.AnimationEnd either...
10
Michał Jarosz
Maybe it's silly, but do we have better option to animate than this: layer.y -= 100; ... animation y: layer.y + 100
1
Benjamin Zanatta
Hi ! I think that I have a bug with PSD import. I have groups inside a group but one on those group doesn't seem to be include inside this group :/
7
Michał Sambora
I've run into some delay problems when I used states to swich image on Click, what is the best way to fix this? or maybe I Should use touchStart/End? source: http://share.framerjs.com/lq5681krkz5v/ (just wait a moment) addd.states.add one: rotationZ: -45 scale: 1.2 image: "images/add2.png" addd.states.animationOptions = curve: "spring(500,20,5)"
4
Zoltan Ray
Having problems with a really simple transition - a sanity check would be really helpful! The rotation for the two animated elements only changes the first time they're toggled. Here's the project (with everything irrelevant removed): http://share.framerjs.com/zqz6qr1glqhq/
2
Mitja Semolič
Hello Framer Team, love your product ... so far ... a have a little problem, hope you can help me I am trying to recreate the simple example Artboards. But when doing my own import I get an error “Can’t find variable: PageComponent”, also the same error if I want to use ScrollComponent. Whats the catch?
1
Tarun Chakravorty
Since the new scroll components came out, when i open an existing prototype in studio and fiddle with it and save, it stops scrolling on the phone (since its using the native scroll, not the new scroll components). :( Is there any way to fix this, or to revert framer studio to the previous versions of framer?
3
Emanuele Salamone
Good day everyone, i'm new here, i love FramerJS, it's so powerful and fast to use! Does anybody knows if there is a way to animate style properties? I made a few layers with text (.html property), then i choose the font color, weight and size with style. Now i need to animate the text color to white. Anybody can help?
3
Aidan Simpson
Hey guys, has anyone explored a single prototype that explored landscape and portrait orientations? I am trying to show different types of UI depending on orientation in a single prototype. Before I make a start, does anyone have any examples or advice? Thanks!
0

April 15

Derek Kapa
Does anyone have a good example of a Material or iOS style UI slider widget?
5
Ash Adamson
How do you move an object from A to point B, but with a curve? Say for example a cubic-bezier curve trajectory.
6
Ken Yiu
A simple sample of drawing vector path in Framer using paper.js and svg strokeDasharray and strokeDashoffset properties http://share.framerjs.com/6fkwhokhe2ny/
11
Paul Cotton
What happened to hitting ESC in Framer Studio to see layer labels? Seems to have disappeared sometime in the last update or two? ...or it's not ESC and I've forgotten what it is.
0
Adria Jimenez
Any idea why this inheritance not working? http://share.framerjs.com/2ea0bgudyrvp/ The code: Layer::__on = Layer::on Layer::on = (event, fn, context) -> ....print 1 ....Layer::__on event, fn, context layer = new Layer layer.on Events.Click, -> ....print "It works!" (dots only used for indentation, check the link for normal code)
1
James Matchett
Is it possible to change the background color of a layer in an animation?
4
Daniel Maniés
I guess there is no solution, but does anybody know how to disable the form bar over the keyboard when I click on an input field in an iOS browser like Safari or Frameless? Thanks in advance!
5
Benjamin Zanatta
Quick question : if you import a PSD, have you to set all layers on "visible: false" and make them visible when needed ? For example you have a button with a hover state, you set a visible: false on this layer and make an event to switch.
1
Koen Bok
If you're in Berlin and want to get a beer with us come here around 6pm. https://www.facebook.com/events/679060705534591/
1

April 16

Fran Pérez
Hi guys, question: do you know if there is a way to read/overwrite the final position of a draggable layer with momentum on DragEnd? Thanks!
8
Nadia Kiamilev
how would you recommend to design for resolutions that aren't pre-loaded and available? I would like to prototype on a 1920x1080 res screen based on the android OS. So far I've been using the nexus 9 tablet viewer option, but that just doesn't seem to do it when i view it full screen. any suggestions on how I could go about customizing the viewer size or if that's at all possible? thanks in advance!
2
Ken Yiu
Is there any better way to focus a text field inside a scroll / page component? Now, i just use focus() when the layer is clicked. So, it won't work for multiple text fields inside the scroll layer http://share.framerjs.com/yarvu3u3h257/
3
David Phillips
Are there any plans for expanding the "Share" functionality in Framer Studio? On the one hand, the 1-click and share flow is very cool, but there are several issues with that for client work: 1) not every client will be comfortable with a prototype on someone else's server that isn't behind a password. 2) the link changes with each iteration. 3) it doesn't seem like you can ever take down a proto that you've shared. Bad for multiple reasons: clients with old links, outdated thinking, team changes, etc. 4) the "open" and "download" buttons are a distraction for certain audiences. I'd really like to see an "export" feature...
2
Tin Kadoić
I constantly get this error when I want to import files. What am I doing wrong? Just some text, backgrounds and an icon. I had this on every project so far...
2
Will Simons
I'm new to Framer and still finding my feet but does anyone have any examples/code of a header that slides out of view when scrolling down and slides back in when scrolling up? Cheers
2
Adria Jimenez
At Xing we created a Watch Kit module to easily create Apple Watch prototypes. You can find it here, I hope it helps :) https://github.com/ajimix/WatchKit-Framer
4
Ken Yiu
Use getPointAtLength() to create follow along path animation http://share.framerjs.com/txw9r3jidl32/
9
Chris Lee
#framerinthewild :)
4

April 17

Aj Chan
This may seem like a stupid question but do Framer studio export code that is production ready? Thanks!
2
William Song
I decided to create a new treadmill interface using Framer. I'd love to hear any feedback!
4
Kevin Velasco
How do you guys manage your modules? We keep all of our framer docs in a repo and each one has to have a copy of the modules that we use. It can get tricky when modules need updating.
0
Ondrej Rohoň
Any recommendations for coffeescript syntax highlighting for sublime? I got spoiled in Framer Studio. I don't like that sublime-better-coffescript keeps @methodNames() all white. Not so legible. I hope that framer studio will quickly add file browser for nicer work with modules.
0
Zoltan Ray
Anyone got tips on how to keep Framer projects compiling quickly?
2
Arron J Hunt
I have a scrollview with multiple items that have click events. When I scroll and then let go, it initiates the click action (if my finger is on one of these items). Can I prevent this? propagateEvents looks promising but it's for draggable layers.
2

April 18

William Song
An interesting navigation feature for Instagram. To navigate pictures on the original Instagram app, you'd have to go back and forth. For example, to go back to the previous screen after you clicked a photo in the Explore section, you can either click the left arrow, or slide the screen to the right. I think there are better/quicker ways to navigate through many photos, so I spent an hour exploring possible navigation options for Instagram. I don't consider this to be a must-have feature, but for those who wants a faster way to navigate through a bunch of pictures, this feature might help them. To initiate this feature, you will tap and hold one of the pictures, then select as many pictures as you'd like to view.
1
Adria Jimenez
Another Framer module. This time to easily add inputs to your designs! Something that I wanted since the beginning of framer. Again, I hope it helps :) https://github.com/ajimix/Input-Framer
3
Jon Nguyen
I'm trying to use the TouchMove event, but it seems to constantly fire if the cursor is anywhere over the layer. I was expecting it to only fire if I am touching the layer and move the cursor (between a TouchStart and TouchEnd event). For example, if I add this to the bottom of the default example when you create a new project, it seems to fire if you put the cursor over the icon but never start a touch on it. iconLayer.on Events.TouchMove, -> print "moving!" Am I doing something incorrect?
3

April 19

Will Simons
Another newbie question: What is the method for making one scrollable area the parent of another. For example, I have a main view that can be scrolled vertically and a series of "trays" that can be scrolled horizontally. The trays are a component of the main view and can be scrolled with it, in a vertical direction. But only the trays can be scrolled in a horizontal direction. A recent example of what I have in mind is the category page for selecting an Apple watch. Does anyone know of an example of this behaviour, which they could share.
2

April 20

Brandon Charles
Hey all! Brand new to Framer and Coffescript/JS for that matter. I'm giving the 14 day trial a whirl and loving it so far. I have somewhat of a noob question and am looking for some guidance. I'm creating an interaction where I have a clickable object that also has a hover state. When the object is clicked it expands revealing content. At this point I want the MouseOut event to be terminated but I can't figure out how to go about it. (See attached video) Here is some of my code - partner["maButton_hover"].on Events.MouseOut, -> partner.maButton_hover.animate properties: opacity: 0 scale: 1 curve:"spring(400,30,0)" time: .1 partner["maButton_hover"].on Events.Click, -> partner["maButton_hover"].off Events.MouseOut partner["maButtonBg"].off Events.MouseOut partner.maButtonBg.animate Any help would be greatly appreciated.
7
Paul Rich
How to call object with the same name but on the other artboard? Tried Artboard2.buttonNext no results ( PS Artboard1 has object buttonNext too
1
Moses Tg
When using the Importer for Sketch, would or will it be possible to automatically scale each layer to a pre-defined scale? The benefits of designing at 1x and having the importer automatically scale to 2x or 3x would be useful.
1
Chris Conover
Hi, does anyone know how to change the cursor to a custom image? I'm currently trying: document.body.style.cursor = "url(images/myCursorImage.png), crosshair" Here is my super simple project: http://share.framerjs.com/kyucotu9coc4/
5
Michael Frohberg
Has anyone else noticed that the resolutions for all devices have doubled? So instead of the normal 2X iPhone 6 size of 750/1334 I am now getting a resolution of 1500/2668... Is there any way to change that back??
2
Lennart Schoors
Running into issues with clickable layers inside a scrollComponent. Clicks are fired everytime you release the scroll on that layer. How do you prevent that?
2
Niko Knappe
Is there a way to define & add your own device types?
2
Ondrej Rohoň
Hey guys, any ideas how to prevent multi touch on some layer? Or how to use only touch event of the first finger in touch start, move, end? Thanks a lot.
0
Petter Nilsson
Hey! I've created a module that makes it super easy to set up a tab bar navigation. It has some nice features and is pretty customizable. Started out as something I needed for a project, but then rewrote it into a module to learn more about framer/coffeescript. Any thoughts on how to improve it is greatly appreciated :) https://github.com/petterheterjag/tabBarModule
8

April 21

Bimma Bimma
This http://codepen.io/seoh/pen/rgKjp?editors=001&hc_location=ufi is very close to a solution I need, but can anyone explain to me why the very first click does not fire the click event? Only the second, and subsequent, clicks fire (assuming no movement). Is there a simple way to capture click intent vs. drag intent? (Sorry if this has been covered ...)
0
Mike Kotsch
Hi guys, is there a way to rotate an object via dragging? So blocking the movement, with speedX and speedY, but enabling rotation.
5
Albin Martinsson
I've been using Adria Jimenez inputModule for a project and I'm trying to change the input type to date. I tried to tamper with the input.coffee file but then I realized that I have no idea what I'm doing. Do you guys know how to go about this?
4
Jason Nelson
Quick question. Having issues scaling layers. When I have a sublayer that's dimensions differ from its super layer, the sub layer doesn't scale. Example: container = new Layer ({x:0, y:0, width: 320, height: 480, backgroundColor:"blue"}) header = new Layer ({x:0, y:0, width: 320, height: 240, backgroundColor:"orange"}) container.addSubLayer(header) container.scale = 2 In this example, the width of the sub layer is scaling with the super layer but the height is not. Thoughts? Is this a bug?
2
Julian Camacho
A proposal of a confirmation dialog for wearable devices (smart watches). It gives you assurance that you are selecting the right option even when the UI element is under your finger, besides, you can change your opinion while performing the action. As a good prototype, it is not final and rather serves as a way to receive feedback from potential users (you!), so I can iterate on it (or throw the idea away). Please let me know your thoughts :D The code is WIP but you can grab it here: github.com/jugerardo/FramerPrototypes/tree/master/ https://vimeo.com/125352399
7
Yazin Akkawi
Help! I want to change the state of a layer when I type in text into an input module. Can I do this in Framer? Essentially, I'm designing a search functionality that loads search matches before submitting input text.
1
Ash Adamson
Framer community, I need your help! I'm having trouble with scrollComponent and pageComponent! The viewers layer somehow moves the scrollComponent on the y axis when it's not supposed to. Then when I drag diagonally right quickly on the viewers scroll, I sometimes pull up the second page. I've tried horizontallock, direction lock and frankly have no clue how to fix this. Please help! http://share.framerjs.com/85kzownzhddk/
4

April 22

Ed Chao
Fun little experiment creating orbital behavior by combining animations and assigning superLayers.
4
Christian Poschmann
Hi guys, latley i'm having the issue that my Sketch files don't scale to fit into the Framer Device frame. I have a iPhone 6 Artboard in Sketch, but when I import into Framer it's way too small. A link to the project with the skech file is here: https://www.dropbox.com/sh/nvwqhaddl51cch3/AAB8e_O9rO_jA8cuHakMnmv8a?dl=0
3
Will Simons
Whenever I try to load a Sketch file using the Import button, I get the following error message. Can anyone explain why and what I might be doing wrong? [Error] XMLHttpRequest cannot load file:///var/folders/7p/bp8kxkfs1f3_hxpjc43w5djm0000gn/T/B1DC59C5-FB8F-4593-9BE7-635EAE5AB518-11614-000212586EB61CA6/Untitled%203.framer/imported/framer_weather_app_test_1/layers.json. Cross origin requests are only supported for HTTP. [Error] Error: Utils.domLoadDataSync: no data was loaded (url not found?)
1
Jesper Wøldiche
Is it possible to lock dragging to a direction other that strictly vertical or horizontal? Alternatively is there a way to change the y position based on x position as the user drags a layer? I'm trying to prototype an interface in which the user can drag a marker along a simple line chart.
2
Raphael D'Amico
Hey guys! Thought you might dig this prototype which faithfully recreates an iOS picker, with momentum scrolling, custom events as the picker is being dragged and uses http://momentjs.com/ to parse the dates in the picker. Let me know what you think! http://share.framerjs.com/22aey0bvfr74/
16
Marcin Wichary
Hey all, Noah Levin mentioned I could get a little bit of help with Framer Studio here… unsure if I’m doing something wrong, or if this is a Framer issue. 1. Go here: http://share.framerjs.com/7g1m6tcefdcs/ 2. Click/tap on the gray highlight. 3. A new pane will open. 4. Drag that pane left and right. Issue: On a desktop browser, dragging works and I see DragStart/DragMove/DragEnd events (I am printing them for convenience). However, on the phone (simulated or Frameless) I only get DragStart and DragEnd. I’ve heard that this should work on mobile too, and I am unsure why it doesn’t. The above prototype is a simplified case I prepared for this. Any help would be appreciated!
5
Ash Adamson
Would anyone want to teach me Framer? I'm a designer and hoping I could find someone to tutor me once or twice a week. I need help reading code in examples, and understanding fundamentals of what's going on. We could meet online. Thanks!
109

April 23

Joe Lifrieri
Having a perf problem related to videos that I'm not sure how to solve. I'm scrolling a feed of content. When you hit a certain scroll position, a video in the feed of content begins playing. All of this works very well, with one snag: when previewing my prototype on an iOS device (via Frameless), once a video starts playing, there's a brief stutter. For about half a second, the video goes black, the feed stops scrolling, and everything hangs. Is there any way to make starting/stopping a video on a device more performant? Are there any tricks to make the gap between pre-playback and playback less noticeable? Thanks so much.
13
Fran Pérez
Hi guys. I've created a simple Alfred workflow to find and open Framer projects in Framer Studio. Enjoy :) https://github.com/mrrocks/framer-workflow
3
Gabriel Lovato
Hi everyone, recently I'm encountering Script Errors when importing from Sketch. The inspector error is : [Error] TypeError: undefined is not a function (evaluating 'Utils.zeroFrame()') (anonymous function) (framer.js, line 6)" I got it working by deleting some parts of the imported file and reimporting, but I can't really understand what is it that's causing the error. Any tips on how to pinpoint what in the sketch file may be causing this ?
3
Michael Bing
Hi all I am fairly new to framer, and coffeescript, but trying here ;) I have a question which i hope you can help with. I have made a list like this: scroll = new ScrollComponent({ width: 750, height: 1334 backgroundColor: "#ccc" scrollHorizontal: false }) allLayers = for i in [0...10] layerA = new Layer({ backgroundColor: "white" superLayer: scroll.content, width: scroll.width height: 260 y: (260 + 1) * i }) Now, i would like to connect say row 1 out of the 10. How can i call that?. I would like to add a tap action on the first row. I hope you understand my question here. Thanks
4
Ash Adamson
Does anyone want to be an online mentor for the Framer Sessions event tomorrow night? I'm hosting a live streaming event in parallel to the SF event and need one mentor to hold it down with the offline mentors who will also be joining in. Timezone Pacific 6:15pm - 8:30pm People will ask for help on a hangout, and you'll be able to help them live.
3
Jan Basko
Hi guys, Just have a maybe stupid question. Can I use my license what I bought for my work and personal computer? Or that license is just for one computer ?
2
John Magnér
Är du frontend utvecklare? Eller vill du tipsa en kreativ vän om att arbeta med att utveckla ett av Sveriges mest välkända företag? #Nyttjobb #Webjobb #mediajobb
0
Jason Nelson
Hey all, another scaling issue. I'm running into this weird bug where my objects scaled above 1 get this pixelated/blurry look in Safari. I don't have this issue with Chrome. (See picture). It does this for vector based assets (fonts, SVG files, etc.). Some quick googling leads me to believe this is a Safari-CSS scaling-Webkit bug. Have any of you found a workaround for this or a fix? The attached picture is a screenshots of Safari and Chrome rendering scaled SVGs.
2
Matt Marriotti
Trying to use the Framer app to view my project & the preview pane on the mac looks like how I built the screen, but the app is rendering everything in the top %30 of the iphone 6+ screen Is there some setting that needs to be setup?
2
Danke Alamien
Hey guys, I'm new to framer js. Is there any way we can simulate android lockscreen? a couple of things : - how to make a button draggable but come back to its original position when released? - I want to make the button 'nudge' another button and have it animate. I tried using pixate but I don't think it's possible. any help would be appreciated. Thanks!
4
Daniel Chang
Hey everyone, I'm having some trouble making a prototype. Here is the issue: http://community.pixate.com/t/vertical-list-to-fullscreen-interaction/510 I tried to make it in Framer but it keeps breaking when I drag down twice on the full screen. The parallax list scroll isn't behaving like the Pixate prototype. Here are my Framer files: https://tinyurl.com/k38j88c Thanks!
0
Daniel Maniés
Hey everyone. I use Sketch import and my file contains 4 artboards. Some layer (groups) are wider than the artboard, so a part of them are outside of the artboard. When I import this file to Framer this hidden part is gone and the layer contains just the visible part (look at the graphic) and has the width of the artboard/viewport. Is there any way to handle this?
1
Marc Krenn
Hey everyone, How can I access a sublayer that has been copied? I think it should be something like ' copiedLayer[copiedSublayer] ' .opacity = 0 (just as an example) Or is there any way to access a (sublayer) using its (unique?) ID? Thanks!
2
Ash Adamson
I added a few more tickets for tonight's Framer Session! Entry Tickets & Info: http://bit.ly/1IIJskL Live Stream (Archived Afterwards): http://ccst.io/e/framersessions01
15
Joe Lifrieri
Is there a good way to reload my prototype on a device? I'd like there to be a button in my prototype that, when pressed, reloaded my entire prototype. I've sort of got it working, but when I refresh via window.location.reload(), it doesn't seem to work (I get a black screen in Framer Studio). Any tips on the best way to do this?
2
Matt Marriotti
Stupid question. How do you install the GitHub samples that are being posted? There seems to be mention of a modules folder, but I don't see a place where Framer is "installed" where that folder would exist. Do I have to reference a folder within Framer itself?
1
David Caputo
I'm trying to do a check that says: If this layer exists: Destroy it. But I can't figure out how to check if a layer exists. Feels like I may be going about this the wrong way but just curious if there is a simple way to do this that I'm overlooking.
5
Joshua Tucker
Anyone else observed that printing a layer's properties returns undefined? This also means we can't set a layer's properties after creation like this: layer.properties = {.
2
Justin Glaeser
I am using the awesome new Page Component and I am looking for a way to add padding between the pages. Is there a way to accomplish this? Thanks in advance.
4

April 24

Zoltan Ray
Has anyone tried to make a camera in Framer? Seems like it would open up more possibilities for motion graphics. Just to be clear, I don't mean connecting to a device camera, I mean a virtual camera to manipulate the view of a project. Something like the PerspectiveCamera in Three.js. Or an orthographic camera - either would be awesome :) I want to do panning, zooming, rotating etc. Even better would be the ability track layers or 'look at' coordinates. Better still would be having events for whether layers are in view or not, bezier paths to define tracking, and parenting for easy arc movements.
10
Michael Bing
Hi All Another "newb" question for all you clever cookies out there ;) I love Framer, and would like to use it for prototypes. Question is, as far as i know you can't really use the code for real production. Is this something that will change further down the road?. Would love to see some React + Framer love :)
0
Metin Saray
Hey guys, Is there an quick way to reset an animation? I have this splash screen animation, where i animate my elements on a single tap, as a trigger. But everytime i tap, they add another value and the animation goes on and on. I just want it to stop, or at least reset itself in the second tap. How do you do it? Thx.
1
Guus Baggermans
Hey guys, what am I doing wrong? I want to use a custom device. I have the image imported correctly, because it does show up as a layer, but using the same image for the Framer.DeviceView.Devices does not seem to work...
3
Daniel Maniés
How can I get the y-position of a TouchEnd event on a mobile device? I tried event.pageY, event.clientY, event.offsetY. But nothing works on mobile. I hope you can help me!
8
Alex Miles
player.autoplay doesn't seem to be working or am I doing something terribly stupid? http://share.framerjs.com/cf9j96nh0ue7/ http://framerjs.com/docs/#videolayer.player
7

April 26

Marc Krenn
The new "layer.draggable.momentum" (enabled by default) might brake "layer.on Events.DragEnd" in SOME CASES, returning a ScriptError when a draggable is released without momentum. Funnily enough, releasing the said layer with momentum will still work fine! I'm talking about this common construction: layer.draggable.enabled = true layer.draggable.speedX = 0 # layer.draggable.momentum = false # <- fixes the problem layer.on Events.DragEnd, -> .....if layer.y > 100 ..........doSomething() .....else ..........doSomethingElse() It's a strange bug/feature and took me quite a while to figure it out, so I thought it would be nice to give you an headstart on your debugging process. Unfortunately, I wasn't able to replicate/confirm this behavior in an isolated case, so instead of a bug it could just be the result of my shaky programming ;) Nonetheless, I'm not sure if draggable.momentum should be enabled by default. Somehow, it just feels wrong in most cases anyway. What do you guys think?
6
Josh Ackerman
Hello, I intend to make two animated circles connected with a line. I am wondering if anyone has any ideas about the best way to achieve this effect? Thanks.
1
Ken Miura
hello what's a good sample to see how to do this? I want to "link" multiple layers together, keeping the same relative position to each other. Simple example is two layers, side by side (A &B). if I drag A, B should be dragged together. possible?
14

April 27

Gordon Mei
I'm a bit unclear about what the args mean for Utils.modulate http://framerjs.com/docs/#utils.modulate For example: profilepic.scale = Utils.modulate(scroll.scrollY, [0, 100], [1, 0.3], true) So far, I can glean that we're scaling down to 30%.
3
Micke Skogström
Hi everyone. Just wondering if what is produced in Framer Stusio can be used in the final product? Or is it just for protottyping? I struggling to explain to my partner who is a developer how the animation of a future web app shoudld be. If I put in the time to learn to Framer Studio, could we use what I create in the final product? All the best Micke
5
Michael Bing
Hi all. I am trying to create a grid, which is all good. But when i want to add interaction to each block, it says it can't find block variable. What am i doing wrong here. componentContainer = new Layer backgroundColor: "transparent" width: 1427, height: 1048 componentContainer.center() rows = 3 cols = 4 size = 290 margin = 89 [0...rows].map (rows) -> [0...cols].map (cols) -> componentBlock = new Layer y: rows * (size + margin) x: cols * (size + margin) backgroundColor: "white" width: size height: size componentBlock.superLayer = componentContainer componentBlock[0].on Events.Click, -> componentBlock.animate properties: {scale: 2}
5
Noam Elbaz
Modules: I have successfully used modules made in Framer. I love it. Easy to use. Now I'm trying to get a JS Library in. I found a simple sound effects manager on NPM (seemed like a simple first step): https://www.npmjs.com/package/sound-effect-manager I did npm install. great. Now I make a sfx.coffee file in my Modules/ folder and inside sfx.coffee: I require the original package and then inside my framer project, I require the sfx file.... Is that correct?
0
Ken Miura
Hi, has anyone attempted the "railing" of a draggable layer? I basically mean preventing dragging diagonally. I figure it's something like, at the start of a drag taking the bigger of deltaX vs deltaY, and then disabling one of layer.draggable.horizontal or layer.draggable.vertical during that event? Does that sound like the right approach?
7
Kevin Cannon
Is there a way to create objects/classes in Framer? E.g. Have 3 buttons which are instances of a button object?
9
Joshua Tucker
My first stab at Leap Motion + FramerJS. Followed the beginner's tutorial for the API and got it working. This will keep me pretty busy for a while :). Anyone else played around with this before? (Sorry for ambient noise)
28
Marc Krenn
What's the best way to calculate a layer's velocity along one axis (X in this case) during an animation?
8
Joshua Tucker
Spent the last few days to get FramerJS/PaperJS working nicely together to create an undo interaction with dictation on the Apple Watch. Really love what it became! https://youtu.be/xwEQkYikwuo If you want to tinker with it too, the source is available along with my Dribbble post – https://dribbble.com/shots/2037766-Force-Touch-to-Undo-Dictation-Apple-Watch Keep creating y'all!
0
최최보금
Hello all. I am sharing my code with courage ( so I hope you enjoy it! ) I have added some functions to the Sticky Headers Framer by Jonas Treub(http://framerjs.com/examples/preview/#sticky-headers.framer). The original function of the sticky headers framer is that the header sticks to the top when the header is on the top. I have added 2 functions. The first function I added was the info Array which has people’s name and images. The second function I added was the ABCD…index. If you click this index, you can go directly to the index header. Thank you :) http://share.framerjs.com/0uage1hyegv3/
3
Bart Baekelandt
Seems like Chrome (for Mac) is blocking an unsafe script in the examples in https mode. eg. https://framerjs.com/examples/preview/#writer-slideshow.framer
6

April 28

Edward Sanchez
If ever I want to use a Framer.JS mock up in a promotional website, am I allowed to under your license? I want to have an interactive section. Thanks!
1
Nir Benita
Hey guys, contemplating with Framer. I'm trying to loop through an array of animation objects, and `.start()` them to reveal a panel, or '.reverse()' them to hide the panel. runAnim = (animObj, isVisible) -> if isVisible animObj.start() else animObj.reverse() btn.on Events.Click, -> panel.visible = !(panel.visible) debugger runAnim animObj, panel.visible for animObj in animations Start works fine, however, the reverse does not. I'm manipulating the `y` and `opacity` properties. Thanks!
2
Koen Bok
Hey everyone. We couldn't be more excited to share our latest update: scroll and page components. Scrolling is a huge part of building great prototypes and as of now you can build everything you'd like. http://blog.framerjs.com/posts/scroll-page-components.html The new scroll and page components are completely written in Framer with custom physics, based on an entirely rewritten layer.draggable. For examples and full documentation see our blog post. Huge thanks to Devin Abbott for the initial work on this, and we can't wait to see what you guys make with it.
48
Vikar Zhang
Is there a way to move some DIVs (already exists in the HTML document) into a layer?
2
Jordi Martinez Ortega
Not sure if this is the place but I thought I would start here. Looking for a good Framer prototype for some work. Can be remotely. Please message me directly. Thanks
0

April 29

Nir Benita
Hey! Just wondering, which notation do you use for naming layer groups
2
Mike Kotsch
Hi, I'm having a disappearing Layer, whenever I have a draggable element that is supposed to snap back into position. Is this happening on your machines as well? And if so, why is it?
2
Benjamin Den Boer
Hey everyone! Here is a new ScrollComponent example. This one's of an interaction that I've seen mentioned here quite often: Scroll and Click. Learn how to create a scrollable list of layers that can be individually selected, using the ScrollMove & ScrollAnimationDidEnd events. See: http://share.framerjs.com/ms7yscr79mmf/ Hope this helps. :-)
8
Thomas Quarre
Hey all! I'm looking to recreate the animation from the google fit app where the ring fills in to show daily activity (video https://vimeo.com/112889094). Is there a snippet which would be a good place to start? If not, any recommendations for resources are appreciated, thanks!
9
Ken Yiu
A quick test of using SVG path to create circular progress. Still using stroke-dasharray and stroke-dashoffset to create the animation. http://share.framerjs.com/xhnuhk2a3s0j/
4

April 30

Ken Yiu
A simple circular progress bar with slider control http://share.framerjs.com/0vklwlya76gp/
6
Nick Bewley
Trying to capture the x and y values of a user's starting drag location on the screen. Using event.x and event.y on Events.DragStart captures the wrong location. Can anyone help me understand why, or a possible alternate solution? Thanks a ton
5
Min Hu
Hi! Another question:). I have a layer.on Events.Click event and a layer.on Events.MouseOut event on a same layer. And every time I click on the layer it performs both events. Is there a way that I can disable the MouseOut event when I'm clicking on the layer?
2
George Kedenburg III
Is there a PageComponent equivalent of ScrollAnimationDidEnd?
5
Dan Jones
Hey everyone. I'm having an issue with the page component. If I want to snap to a page from a click event, I find it only works if I set animation in snapToPage to false - otherwise nothing appears to happen. Am I doing something daft? Example here:
1
Sebastien Tran
Hey, is there a way to install older versions of Framer? The latest update seems to have messed up one of my prototype with ScrollComponent but not sure :-/
7
Guus Baggermans
Playing with android wear prototypes :) http://lab.raftcollective.com/android_wear_notification_delay.framer/ - special thanks to Ed Chao :)
5
Keith Rumjahn
Anybody here from Hong Kong? Would love to meet up!
1
Anthony Roscoe
It appears Events.Move and Events.Scroll aren't called when using scrollToPoint(). Maybe I'm doing something wrong but I would have assumed any scrolling regardless of what made it scroll would call those events.
4
Matt Wujek
Quick question: What's the easiest way to clear an interval? I'm making an animated odometer (http://jsfiddle.net/adamschwartz/rx6BQ/). I just need a way to end the interval after it reaches the target amount. Thanks!!
2
Benjamin Den Boer
The Scroll and Page Components contain many new properties and methods. They open up a range of new creative possibilities, but can be challenging to grasp at first. Our goal is to make them as accessible as possible. Today, we're launching new sections to the Learn pages, covering the new Draggable, ScrollComponent and PageComponent. http://blog.framerjs.com/posts/dragging-scrolling-paging.html http://framerjs.com/learn/basics/dragging/ http://framerjs.com/learn/basics/scrolling/ http://framerjs.com/learn/basics/pages/
2

Monthly archives

2017

2016

2015

2014

2013