OK, thanks for adding me. I'm new to FramerJS, so far I am liking it. Not very good at writing codes, though. So this may not be as trivial as I think it is. What I want to do is target all child elements (in this example, called "sidebaritem-menu") of each object (viewitem1, viewitem2, etc.) I imagined it would be an array, but I've been searching online for hours and cant find an example how I can solve this. Please check out the screenshot to get a better idea. Help? Thank you and happy new year.

Hi guys, I'm a new framer .I create multiple layers and I'm failed to center one of them. How can I do this?or use loop function to center all layers ?Thx

Happy New years folks. I'm having trouble understanding how to configure the structure for a basic hover on/ off function for a layer. see here:

Hey Guys, does anyone know if there is a Sketch facebook group?

How do folks develop components? It seems like I have to save in both my texteditor (textmate) as well as in Framer Studio to make any changes in my component propagate/ go live. Is there a better workflow?

Hey folks. have a look any advice/ room for improvement is cool too…

Updated prototype: http://share.framerjs.com/xu12ebbzrz52/ And video: https://www.youtube.com/watch?v=1t9FZkNM-qk I'm making some example prototypes for my next article about how to use array (with If and For statements) in Framer. I'm sharing one of the prototypes (Clear app) which is sort of an afterschool excercise for those who push themselves further. Any thoughts on improvements are welcome :) Btw, I'm thinking of the title as 'Lightsaber for Jedi, Array for Framer: Make Better Prototypes with Array'. What do you think? Music ⓒ - Kevin MacLeod

Hi everyone, I am new to framer. Is there way to make an endless loop out of pageComponent? I am trying to experiment on the following example so it won't bounce back on the first or last layer.

Hello, What is the best way to achieve the following scroll effect (see attached image)? I tried a few different ways, the closest being using Utils.modulate to map scroll.scrollY to a number in [1,0] whenever the user scrolls. The issue with this method was that every layer in the grid would change position, and I only need to top row to do so. Adding a conditional statement to solve this broke the effect altogether. Any suggestions?

Hey guys, What's the proper way to check if an element has a particular state? buttonConfirm.on Events.Click, -> if @.states == 'active' print "clicked" Doesn't seem to work

Hey there! May I ask, is that the hsb in Sketch is not the same as the hsb in framerjs? I type the hsb color code I get from Sketch to framerjs, but the result is different.

Hey y'all. I got really puzzled today trying to realize why this piece of code can't work inside Framer Studio. Look: Object::test = (props...) -> v.constructor for p, v of @ print { a: 1, b: 2, c: [1,2], d:{pt:true, pf:false}, e:'test', f:false }.test() This trows the following "TypeError: undefined is not a object (evaluating 'v.constructor')" In any other coffeescript environment it should work perfectly - swapping 'print' for the 'alert' method. - Is this really an issue with the 'print' method or something other I missed?

I try to animate my SVG (injected through Framer layers) with GSAP but in vain. If I paste my SVG in HTML directly, it works, If I inject my SVG with jQuery it works. But not Framer + GSAP. Any idea? Here is a codepen for it.

What is the best way to add SVG code into a framer prototype so I can animate it?

This used to work in the previous version: resultsText = new Layer backgroundColor: "none" Previously it removed the background and now gives me a solid black background instead of the default transparent blue. The alternative version: resultsText = new Layer style: "background": "none" Works fine, however.

Hey friends, the next Framer NYC meetup is a go. Would be sweet to see a bunch of you there https://www.facebook.com/events/1534723643505347/ cc Hoyd, Andrew, Mindy

Happy new year everybody! If, like me, you're trying to level up your coding/logic skills and enjoy using Framer, here's a site with 25 riddles that are language agnostic. It's about analyzing a problem, planning a solution, and then you use whatever language you prefer. I've got 10 gold stars so far and I might be the only one solving these riddles using Framer/Coffeescript haha. Enjoy: http://adventofcode.com/

Would love to get some help from the pros :) I've come up with this recursive function that prints the hierarchy of a layer. To my surprise this terrible hackjob ended up working but there must be a better way to do this. Would you please point me in the right direction? Thanks! http://share.framerjs.com/evj3h58040c9/

Hello, I just finished another widget which focuses on easy color selection. Big thanks to all the people in this Facebook group who helped me with the scroll effect! Like on Dribbble: https://goo.gl/e4lLhl Source: http://share.framerjs.com/rylicngkgj27/

Hi! Does anyone have an example with a JSONP request? I'd like to use this endpoint which returns a list of products from the bol.com webshop: http://nolten.co/bolcomapi.php/lists/ids=8299&limit=20

Hi guys, I've written a blog post about my redesign for Mixcloud's login form done as part of a job interview. It's built in Framer, and you can read about it here: https://medium.com/@a7dc/redesigning-mixcloud-s-login-form-with-framer-js-d49a4f4d5b1f#.3d3o2huuv Is also my debut shot on dribbble so if you like it feel free to give it a like. Thanks again to the guys behind Framer and the fantastic docs and community, have been really approachable and helpful! :D

I am spring cleaning my design resources and want to beef up my Snippets in Framer. What are some people's favorite custom snippets?

Is there any equivalent to something like Swift / ObjC's userInteractionEnabled = false in Framer? I've tried ignoreEvents however this doesn't seem to stop invisible layers from blocking interaction with my scroll view. Also tried setting the visible state, which works, but then blocks any animation on the layer. Alternatively I could move layers off the screen while they're invisible but that seems super tedious. Thanks for any help!

Hi all ! I made to turn the dial concept prototype. But it was not smooth and good. I think difference between my touch start point( e.clientX, e.clientY) and touch move point can change circles rotation, but it was not move my intention. Is it better way ??

I'm new to Framer so this is probably a pretty simple problem but I can't seem to figure it out. I'm intending for everything to scroll except the start button and the navigation button. It's all contained in the ScrollComponent but when I change the z index to 0 the scrolling section becomes inactive. Any ideas? Prototype: http://share.framerjs.com/vngwz3txdm18/ Thanks!

Hi guys. Using the page component, I've got two pages side by side, reached by swiping left and right. I put a smaller, secondary left/right page component within one of those pages. How can I limit swiping on the secondary component just to that component, so that trying to swipe through its pages doesn't also activate switching between primary pages?

Hopefully an easy question here. How would I determine the native size of the image object so that I can resize the layer to fit the image? layerA = new Layer image: "http://cl.ly/arBO/bg.jpg"

Hi guys, I've just started prototyping with Framer for a while. Just wondering, Is there a way to restart prototype by Events handling?? Thanks.

Hello Framers. Can anyone lead me in the right direction when it comes to prototyping the animation from the horizontal feed scroll in the Facebook Paper app, where you drag the post up and it scales and snap to the screen size?

Just wondering: anyone been using Framer to build Prezi-like animated presentations? Or is there any tool built on top of Framer for this? Thanks.

I am using Framer Generator to export my icons from Photoshop. However, generator seems to ignore the bounding area that I have defined within a smart object and output the icon by trimming to the very edges of a visible image. How do I retain the transparent area so my icons have a consistent width and height?

Hi everyone! I was wondering if anyone knows if there is a way to apply an effect to a layer in Framer similar to the "Multiply" or "Color" layer style effect in Adobe Photoshop/Illustrator? I have a greyscale illustration on top of which I want to put a solid color layer with dynamic backgroundColor. Thanks!

I want a line of code to run in Framer, but not in the browser (when shared). Is this possible?

anyone know how to change this to vertical slider (top red to yellow bottom? I am using the sample from @benjaminnathan http://share.framerjs.com/cu88bfkn0avj/. @arronhunt suggested hue.rotation = 90, anyone knows how to change the knob to vertical direction? http://share.framerjs.com/epwwhjcjnrej/

Does anyone have good examples of building a timer?

Going through some old prototypes and thought I'd share this early "speed dial" prototype from Inbox. http://share.framerjs.com/pxedrh7sysao/

Event.Click is fired when you on mouseup inside of the layer, regardless of whether or not the click began on that element. This causes a lot of misfires, particularly when working with scroll views, etc. I find myself having to do a lot of checks inside the click event like checking if isMoving is false. Does anybody have any better way to do this? Would love a "Tap" gesture that is more strict about how it's triggered.

Greetings, From conception to Sketch then FramerJS. Fuckin love this application. Yes! Here is a shopping card I created this morning. I'm still not too pleased with the bezier - curve timing and slide in though - but I'll chisel it down… to my liking later. I' would like to create a 'click event' that adds a 'quantity' to the cart [top right of the screen] that in the 'black dot' feeds { i.e. 1, 2, 3, ,4 etc? Any idea how to start this? http://share.framerjs.com/udmswi28b9e8/ p.s touch the shoe :0

Happy New Year everybody! Happy prototyping in 2016! Here's a little firework launcher to get the year started off on a good foot. http://share.framerjs.com/69f68i5d3u9p/ Open up the prototype with the link above to enjoy the sound effects.

Hey framers, assume we have four states: 0, 1, 2, 3. Now I want these four states form a loop like "0->1->2->3->0->1..." and never end, how can I do this? Thanks 🙏

Hello! New to Framer and trying to create a web carousel that automatically rotates through a few images and then flips back to the beginning. I tried aligning the secondary images off to the right in my Sketch file but they are not appearing in Framer Studio. What is the best way to do this?

Hey guys, love the new version - but it doesn't work the way I expected it to. Shouldn't the 2x import from Sketch import everything so it automatically is scaled to 50%? I get a 2880 artboard from my 1440 Sketch file - I assumed I would get a 1440 artboard with double the resolution for sharper text and images? Bonus: All "_" characters in sketch layers also disappear during import.

Another minor question to everyone - what are some people's favorite springs? I want to create a little micro-site/framer example with a bunch of different spring examples and am trying to crowd-source some of the dopest ones. I am always tweaking the springs endlessly because I only have a child's understanding of the parameters. It would be nice to see a bunch in action all next to each other.

I'm really digging the updated import functionality! I would also find it really useful to be able to exclude a layer from import. When I have a file with multiple artboards, they often have elements repeated and it would be nice to be able to exclude all but one instance of them with a "-" or something in the layer name.

Quick question, I can only install framer on 2 of my computers, any reason for this? i'd like to be able to use it on all of them without having to unregister on one.

Hi, member of Framer Studio. Thank you for update framer so nicely every time. really appreciate for your efforts with many features and changes. But while png import methods has been changed, Frames(app) cannot import png file anymore. Maybe they(Frames app maker) are struggle to follow updates now. But why don't you guys make viewer application? I think framer native application is necessary for all of framer users. Because third party application is so difficult to follow updates. And website link history manage, performance, stability…There are many reasons. I just wondering about any plan to make native Framer viewer application. Thanks.

Hi guys. I'm trying to recreate a shake or bounce effect. Any idea or example how to apply this kind of effect?

G'morning, ladies & gentlemen. Anyone knows if this udemy course is good? Thx in advance for feedback.

Newbie question. I have a layerA which I would like to scale to 1.4 its original size in such a way that all the size gain is to the top and to the right. But I am unable to put that into code. I would like to tell framer that the "large" state is such that the left edge of the scaled thing is where the left edge of the unscaled thing used to be. But how would I even express "the left edge of the scaled thing"? I hope I am making sense. Thanks in advance.

I'm sure other people may have noticed this but I thought I'd share so it will come up in group search. If you want to use audio in your prototype but you're v lazy and don't feel like adding the audio module, you can just use a 0 by 0px video layer.

Hi everybody I’m new on FramerJs, great tool btw. I need to create a recording progress bar, similar to the the one used in Instagram (see image below). Do you know where I can find documentation that can help me with this task, or how approach this. Thanks in advance.

I'd like to report a bug. Well, I suppose it's a bug. Utils.isSafari() is returning 'true' in Chrome.

Quick question on File I/O - not sure if FramerJS supports this: - how would I read/write json, text and binary files? - what if the file is on a server, or I have to ask the user to pick one? Any examples utmost appreciated!

Hey all ! Quick fix needed : I have several draggable cards on my screen (similar to Google Primer, or Tinder). When I drag it up, left or right, it goes off screen. I want to find a way to get the previous card back on the screen when I swipe down (just like Primer does). I tried this : Card.on Events.DragStart, -> if Card.draggable.direction is “up” # nothing else # bring card back but I can’t make it work, as it always returns “up”. Tried the same with Scroll instead, but also failed. Any quick fix for that ? Thanks and lovely day to all !

We're having our 8th meetup this coming Tuesday, January 12th @ Substantial on Capitol Hill in Seattle. We'll have mentors there to walk you through the basics or help you with a problem in your prototypes. We'll also introduce you to some new modules, talk about recent updates to Framer, discuss some features on the horizon and take a look at some cool prototypes from our attendees. We'll also have food, beer, drinks and good times... oh and a 50% off code for Framer for those of you that don't have it yet! We'd love to see you there. - Jordan & Stephen

I've created an awesome prototype with a little micro-interaction that uses the spring-rk4 animation curve, but I'm worried that it'll be too hard to actually implement when we build the real site. Is there an easy way to achieve a similar result outside of framer? Is there a library that could help?

FramerCode.com Updates I've added a few tips, examples and modules recently. Check it out. http://FramerCo.de I'll be updating a few of the older modules and adding a few more over the next few days including work and examples by Isaac, Stephen, Weston, Josh, Jay and a few others. Let me know if there is something missing you'd like to see there or leave a suggestion on the site.

Hi guys, I'm following this tutorial to learn about material design http://www.prototypingwithframer.com/material-design-with-framer/ However I'm getting slow and laggy animations using the latest release of Framer Studio... no issues if I open the demo in a browser... anyone can confirm this issue?

Anybody done something like this in/with framer ? :)

Hi guys! I am trying to create a simple drag slider in which the ball will only be limited to be dragged within the constraints of the container it is in. (something like the video). I tried to achieve this by using ball.draggable.maxDragFrame = container.frame with container being the superLayer of the ball but still it just doesn't seem to work. I tried the exact code on Codepen and it works but not in Framer. Can you please help me out? Here's the link to the framer file: http://share.framerjs.com/ymtpgh5v55fm/

Hi gangsters, have a problem with a project I'm working on. Can't get to work the scrollComponent right. I want the content least beneath "Category 1" to be scrollable. But it just scrolls one line und not the whole height of the text frame.Why is that? Anyone some ideas? Project is here: http://share.framerjs.com/s18v1j8gfs7f/ Thanks in advance for helping me out on this one. (Will surely approach more probs on the way to finish this project)

Is Framer.Device Component included with the FramerStudio only?

I recently come across this error in my code right after updating Framer Studio to the latest version (v47 [2665]). I started working on my prototyp using an older version and it worked without any problems. Also I'm using states like this many times in my code without getting any errors. Any idea how to fix this?

Hello! I presented my prototype to a client today and experienced interactivity issues with it on several pc laptops (works fine on my mac book pro). Anyone else have issues with this? Win 7 and 10 with latest Chrome Browser.

Wanted to put something together that implemented some of the 12 Principles of Animation. Here's a thoroughly unnecessary yet completely enjoyable Menu interaction:

Hey guys, my placeholder module is now ready for consumption! It fetches dynamic placeholder images from ‚placem.at‘ and - if you want to - applies them magically to your most recently created layer. Yes, there I’ve said it: Magically. Git: http://bit.ly/placeholderGit Demo: https://tr.im/placeholder

Yesterday we shipped Human for Android. Human lets you compare your daily activity with people around you. We used Framer a lot to explore different directions. Making the transitions look smooth on both hi- and low-end devices was a challenge. Here’s a prototype of the dashboard, it shows how you’re doing compared to the people in your city. If you’re on Android, check it out in the Play Store. https://play.google.com/store/apps/details?id=co.human.android

For a non-Studio localhost Frameless setup, inline video playback doesn't work. But it works as expected in Studio. Is this correct?

I do have the latest version, but I'm not able to specify the scale to import. Does anyone have an explanation for this?

Hi there, there is a small typo/mix-up in the docs: In the description for page.originY, it should say that the effect of adjusting originY can only be seen when the *height* of a page is smaller than the PageComponent, and analogously for page.originX (where it should be the *width*). The documentation has it exactly reversed.

Hi guys, I am working on a desktop prototype which is 1440x1024px. When I click on present or share, the image quality seems to be reduced. The text and other elements are not as crisp as they appear in my sketch file. Is there perhaps a workaround for this so the images Framer pulls from the sketch file are of a much higher quality? Thanks guys! Appreciate your support.

Hi all, I am a total novice to coffee, js or framer, but since i like it a lot, I am trying to learn as much as i can. I am facing 3 issues in prototype i am doing for a project. This is a similar layout to share with you. 1. The feed list when scroll vertically upward, the topbar background needs to appears with a fade. And fades out when list goes down at initial state. Problem is I am not able to execute it correctly. 2. The top image layer, will expand if the feed is dragged below and will behave similar to google+ when scrolled up, i.e parallax. Don't know how to do that. 3. I am trying to make the first feed item, that has a circular blob on top (depicts as 4-5 horizontal cards) a left-right swipe-able cards. Problem is, that the cards are getting cut, whereas in the sketch its alright. Framer file I am working on: http://goo.gl/e3LqQO Sketch file if you need: https://goo.gl/1K0LYW Help highly appreciated. Thanks

Is there an easy way to turn a series of three click states into a looping animation?

I want my layer to be as wide and as tall as the (styled) html content inside of it. Is this possible? Got to mention: the display property of the div class in the html is set to 'inline-block', so the div's wrap around the content (and the content differs all the time). See the picture below for an example. EDIT: Solved the problem myself. Utils.textSize did the job.

FYI: The good folks at Facebook Design just released a large amount of devices to prototype.

I do not know why the "unexpected if" always appear when I input the if?? somebody know the reason?

Hey all! If you have a minute to spare, I'd love to hear how you got started with Framer. Specifically, what made Framer click & stick with you? Or, what made the syntax / code in general click with you? Was it the product, a specific feature, a website or a resource, or even simply out of necessity (work, a client)? If you still vividly remember your early experiences with Framer, please do share. Anything we can pick up here is valuable. :-)

Hello, Below is the source for a button with a working radial menu that lets users pick colors (I really love the recent addition to animate colors). Radial menus minimize the required travel time and distance for a finger to perform a menu function. The menu is dynamic so if you would want a radial menu with 12 items just change "number" to 12. Also properties like distance and the function of each item are super easy to customize. Like on Dribbble: https://goo.gl/pQWltO Download: http://share.framerjs.com/u08rq17h8r5r/

Hey everyone, I'm trying to replicate the iOS Messages App's "select text" feature as seen below: http://i.imgur.com/mTGB1Vh.png Particularly, I want the **zoomed in bubble** to show up on any location when I press and hold. I'm not sure where to begin though.

when the scroll direction is down(drag up)do one event,if the scroll direction is up(drag down)do another event. How should I do that？ e.g Base on the scroll direction to change the states of imageLayer ,or just change "scale".

Hey all! We're super excited to host our first-ever Framer Meetup in Amsterdam, with a presentation + workshops from the team. Learn more about design tools, prototyping and how you can bring your designs to life with Framer. RSVP here — nvite.co/db01

Statistics concept for biking/fitness app on dribbble Framer link: http://goo.gl/N2iMy7

Hello-hello! So I've been using Framer since last September and have finally managed to integrate Framer into our design processes at our video startup. I've found it immensely helpful. This prototype is for the next iteration of our interactive video player. Our intention is to figure out a standardized approach to interactive video. You pause the video and access the content bar (top left icon) which gives you a list of related content (image galleries, articles etc), essentially making it easier for content creators to monetise and engage viewers. I would love some feedback on the design/random thoughts. Link: http://share.framerjs.com/n1b7mwmyp2t0/ My startup is also part of the 500 Startups family of companies and so I've been evangelizing Framer JS to everyone I meet at the HQ's in the Valley and in London. Thanks particularly to Jay Stakelon and Noah Levin for their courses and all those who've answered random questions on here. I hope to pay it forward! Note: We're also looking for folks who would want to get involved so give me a shout!

Hey everyone. I have multiple screens in the same scroll component. They start offscreen (x: 750) until clicked. My problem is that the longest screen keeps setting the default height for everything else in scroll.content, causing the shorter screens to display a huge empty gap below them. Can anyone help? How should I fix this?

Is it possible to cancel an in-flight state transitions? I have a state transition with a 2s delay that can get triggered multiple times before it completes; I only want the stop any previous transitions and only play the *last* one. layer.animateStop() doesn't seem to work they way I'd think it would, for some reason.

Hello, friends! I'd like to throw my hat into this awesome ring and kickstart my 30-Day Framer Challenge. ----- Prototype #1: AlphaBlocks, a simple JSON powered stream of alphabet blocks. http://share.framerjs.com/ctmvqwvs1ka3/ Backstory: I made this for my 18-month-old goddaughter, Olive. She currently loves two things: reciting the alphabet and swiping things on her mom's iPhone. This is a way for her to do both :) ---- Feedback is always welcome. #framer30daychallenge #prototype1

Hey guys I'm talking some time out to work on modules ripple effect for an fab. it's kinda easy, but only if it works… See the attached what I'm trying to accomplish. Also my module folder has the 'rippleModule.coffee' file http://share.framerjs.com/7va8i9430rpe/ I'm at a lose now. # Import the ripple transition module rippleModule = require "rippleModule" # Define the animationOptions object animOps = { curve:"cubic-bezier(0.75, 0, 1, 1)" time:0.3 } # Create the 2 layers to switch between fab1 = new Layer x:0, y:0, width:100, height:100, borderRadius: "50%", backgroundColor:"black" fab2 = new Layer x:0, y:0, width:100, height:100, borderRadius: "50%", backgroundColor:"blue" # Call module to create the ripple object ripl = rippleModule.ripple fab1, fab2, fab1.midX, fab1.midY, animOps # On button tap, toggle the ripple's states: fill, empty fab1.on Events.TouchEnd, (event, layer) -> ripl.states.next "fill", "empty"

Is it possible to get the mouse position without using an event?

Fun experiment. I have been thinking on a nice way to handle positioning and positioning updates in Framer. Apple for example has autolayout, but while it's very powerful I find it hard to use for simple things and overkill for Framer. So I came up with layer.anchor. You use it with 6 simple rules: top, left, right, bottom, centerX, centerY. Like this: layer.anchor({top:100, left:100}). It will then stick to this position, also when resizing the window. Here is a module project to play around and see how you like it: http://share.framerjs.com/r9yd2nqg8kpo/ It's just testing so these things are unsolved: - What happens with animations and anchoring? Who wins? - What to do with unsolvable rules (centerX:0 and unequal left and right). - Only works fullscreen for now.

[SOLVED] Hi guys, I have a Problem. I created a module called Marker. It contains a class and extends from Layer. Now i want handle a click on it self.No clicks on a single Marker will recognized. What can I do? The file is located in ./app/modules Project: https://github.com/cschaf/tourist-app

Sooo... Open a new Framer file. Set Viewer to iPhone 6. Do "print Screen.width". Result printed in Framer Studio: 750. Result printed on iPhone 6 in Frameless: 980. EDIT: Starting to sound like an iOS 9 Beta bug?

I'm used to installing apps via Homebrew cask. Framer studio was available via cask, but after the recent change in versions it is no longer the latest. I'm trying to update the formula but need a static download link. the current one from cdn.hockeyapp isn't static. Koen Bok can you help?

Some pretty great new updates to Safari 9.1. I especially like the new inspector look. Another improvement is the removal of the tap delay on mobile. All this will appear in Framer Studio as soon as it is released too.

Mohafiz acknowledge all the women out there for the wonders they do each day! https://www.facebook.com/meraymohafiz/videos/1680648525544920/

Koen Bok Benjamin Den Boer is this a bug? It seems like copy() is not respecting layer names in the layer inspector and then the layer inspector seems to be buggy when mouse over the layer names https://monosnap.com/file/hAx2iy3v7JuAFJLWcCqN7oDxvmW3TA.png Here is a prototype to test http://share.framerjs.com/k5swyk4iz281/

Hey Frameristos, Chris Aga and I were working on a magnifying effect yesterday and I think it turned out pretty cool :) Grab it here: https://tr.im/magnifyingGlass

Anyone having problems when Framer is in a directory that has spaces in its filename like "System>Users>User 1>Desktop"? Interestingly, when Sketch layers are imported only the latest on renders when Framer is on a path containing space. With no space in the path all Sketch imported layers are visible. Should I avoid having Framer in a directory that has spaces in its path?

I have a videoLayer I'm trying to create a border around with: VideoLayer.style["outline"] = "1px solid red" I want the border to be overlaid on top of the video so tried with VideoLayer.style["outline-offset"] = "1px" but that does render the border on the layer behind the video. Is there a way of rendering the outline ON top of the VideoLayer but INSIDE of the video so it overlays the video? Thanks for any hints!

Does anyone know how to use Atom.io with Framer? I tried this tutorial: http://www.prototypingwithframer.com/framer-on-windows-with-atom/ But the thing is, you have to reload the index.html, and then click the "try anyway" button EVERY time, whereas Framer Studio just reloads on key change or save.

hi guys if i choose the device as desktop, how to make the height of web browser longer?

Help strange error?! I'm trying to use the ripple effect i added to my module folder but getting this: prototype: http://share.framerjs.com/ng3kvdeuozz7/

I wanted to see if this would work and bingo! Maybe other people have done this before, but here's how to animate layers along curved lines:

Hi guys, a suggestion. It would be great if it were possible to selectively import Sketch documents, that is: being able to choose the *page* (in the Sketch document) one would like to import. This would be very helpful, e.g., for preparing variants of a layout (sharing the same layer hierarchy) and being able to quickly switch from one layout to the other in Framer (by just chaning the page one wants to import). Would also be helpful for importing just one Framer-relevant page from a "bigger" Sketch document that might contain all sorts of (Framer-irrelevant) stuff. Has this been considered? Would others find it helpful, too?

Try to figure out how to make a simple tab interaction from a imported sketch file with 2 layers overlay. Please advise how could I do this? This is my code sketch = Framer.Importer.load("imported/[email protected]") btn_A = new Layer(width: 100, height: 50, x: 250, y: 150) btn_A.on Events.Click -> sketch.LayerA.visible = true sketch.LayerB.visible = false

Where can I find details on the framer challenges?

Is it possible to make a pageComponent that is both horizontal AND vertical?

How do I use a for loop to change the opacity of all the layers named "selected"?

hey guys, i have a question about variable, is the framer have a global variable and domestic variable?

Hey does anybody know if there's a better way to mask an image within certain constraints? Right now I'm setting a superLayer for it but when I do a hover animation it shows a blue box where the superLayer is cropping it. Is there a better way to mask or can I turn off that blue overlay?

So I've multiple art-boards imported from Sketch, which can be swipped left & right. On every art-board coming in the view port, I waana show some interactions, i.e., add a new element & animate it. How do I know if a particular art-board is in the viewport (& then add interactions)? Best way to go about it? Thanks in advance.

Hi everyone. I've created a D3 svg. Does anyone know how to add it to a new layer, so I can apply Framer animations to it? Thanks!

Hey guys, Was wondering if there is a module that will on a Click event add/subtract quantities to a cart basket? it's for a shopping card click flow? Thanks

Hey, first time creating for the Apple Watch - is it possible to use the digital crown in your mockup?

thanks for the meetup in Amsterdam yesterday guys. Met some awesome people and learned some new tricks :)

Image is loaded correctly but the Events.ImageLoaded seems not working for me. Any idea?

Hi everybody! I tried to reproduce Clear App and filled the list with a Twitter feed via Parse just for fun and learning – http://share.framerjs.com/q7sasts190um/ Currently supported interactions: – Scroll – Tap and Hold to reorder – Swipe Right to complete – Swipe Left to delete Shared also a few thoughts on this – https://medium.com/@raitislinde/high-fidelity-prototyping-with-framer-51e152af2b51#.dmrpi23ed

https://css-tricks.com/shape-blobbing-css/ This is super easy and awesome !! ( thanks Marc Krenn ) now I can make liquid effect for more elastic interaction :) http://share.framerjs.com/rmiyn6380fz8/

Does anyone have experience with Cross-Origin Resource Sharing (CORS) (requests) in Framer? I'm trying to load data from a XML file from another domain/origin ('public' API, HTTP basic acces authentication), but without any results. :( I can post the code too if you guys want me to, but I don't think there's anything wrong with the code.

Is it possible to require modules that are outside of the /modules folder?

It was a lot of fun learning new techniques from Danny, Jared and the team at the Framer NYC meet-up. I shared my desktop prototype which had 2.5k lines with the group and got awesome feedback and solutions to a few bugs I was facing. Jared also taught me how I can use animations into separate functions so that the code is much cleaner, smarter and less heavier on the system. In my case, I was assigning a superlayer on every button to get the material ripple effect and Jared helped me create a function which I could call instead of manually assigning the superlayer each time (see images). I intend to start using this in my workflow and am pretty sure I will come up with much better and bug free prototype next time. I am so grateful to have learned so much in just a few hours from this meetup. If there was something that I didn't understand (which were most things :P), Jared broke it down into the simple examples so we understood the whole thing. Thanks a lot for hosting this meet-up Danny. Looking forward to the next one. I will share the whole prototype once I am done with my submissions soon :)

Yesterday, I tried using variables inside spring curves, writing stuff like "spring(theTension,theFriction,0)", where theTension and theFriction had been set to numerical values before. But that didn't seem to work. Is it correct that I cannot use variables in this way, or am I going about this the wrong way? Thanks in advance.

Hi all, I'm new to Framer and I can't get my hands off of it, it's so addictive ! That's my first question, and it's pretty stupid : how do you "reverse indent" in Framer ? i.e. you press Tab to indent text to the right, what's the shortcut to indent back to the left an entire paragraph ? Thanks a lot !

Hi guys, I am trying to share my prototype but I am getting the error in the attached image. Can you guys please help me figure this out? It is a desktop prototype and I think this error occurred because the prototype is pretty heavy and has a lot of layers.

Hey folks, Stuck on an issue and am summoning the troops for some help! I'm trying to animate all of the items in a for-loop, but my method is only causing the last item in the loop to animate. I'd appreciate any insights on how to fix. Example here:

How do you remove the prefix to refer to imported sketch layers as simply 'layerA' rather than 'sketch.layerA'? I remember seeing this somewhere but can't remember the snippet.

I am trying to create animations for switching from screen to screen via click events. I have basically two differents kinds of animation, zoom into the button i pressed and zoom out. Is there an option to make these animation "global" or something like that for using it for more than one click event with just changing the coordinates for zooming in/out? I thought about a function or an array for filling in the variables...

Hey guys, I have this prototype, where I have a list of items. Each item will show additional actions on hover (As seen on the first item in my screenshot), and hovering over these actions should change the opacity. The problem I'm getting, is that whenever the mouse enters the nested “actions” layers, it freaks out because technically, the mouse has fired a MouseOut on it’s parent. Has anyone encountered/solved this issue?

Be sure to switch on HD! ### Here's an old, yet unreleased prototype showing a reinterpretation of Android's timepicker. It's one of my most complete prototypes I've worked on, spanning topics like ... * ... coming up with a new UI element - I used to call it the 'mercury slider' - that A) fits the use-case (a hybrid radial-menu) on a functional and aesthetic level and B) feels like a natural extension of Material Design's current family of UI elements. * ... improving on while keeping it's current functionality, which results in a flat learning curve, helping to bridge all sorts of skill levels. (Did you notice the current timepicker doesn't *really* work like a radial-menu, even though it's such a natural fit?) * ... trying to increase the joy-of-use / 'itch' while also improving it on a functional level (dat 'infinite' Fitt's score!). ### Anyway, while I unfortunately can't share the prototype, I'll happily try to answer all the question you might have about it! (@ Mohammed) :) btw: I'm curious to hear what our Googlers (Joshua / German / Min-Sang / Fran / etc.) think about this!

Is it possible not to play audio on a video? Something like: videoLayer = new VideoLayer width: 160, height: 210 audio: false video: "images/myvideo.mov"

Dear Framers, First question for me here :) I was wondering if someone has any experience using real data coming from an API call. What i'm trying to do is, reach the wercker API with the "request" npm module, which i installed and imported according to the framer docs. The following error occurs: [framer.modules.js] TypeError: invalid array length argument But the error from the callback function does get print » <Error {line:25726, column:32, sourceURL:"http://127.0.0.1:8000/CQRBA0/realdata.framer/framer/framer.modules.js?nocache=3581b3f9cf9dfd4588a6aca25ac4782b"}> Thanks in advance.

Hi everyone, I have a quick question regarding animating between states: Are you able to animate the style properties between states? Here's a setup that I'm trying to get to work and can't get the font color to change. Wondering if it's even possible. Maybe I should set it up differently?

Hey all. Is it possible to use vanilla JavaScript? Or even load in jQuery to Framer?

I swear, I saw someone post a Framer module/library that lets you select layers with jQuery-like syntax. I tried searching for it, but maybe it got taken down :(

In CoffeeScript, how can you swap two spans (slices) in an array. In the following example I'd like to swap the A's with the B's [0, 1, A1, A2, B1, B2, B3, 7, 8] becomes [0, 1, B1, B2, B3, A1, A2, 7, 8]

Reminder: there are three Framer meetups this week: SEA — http://on.fb.me/22Vdfm1 AMS — http://bit.ly/22Vdfm6 NYC — http://on.fb.me/22Vdfm7 People on any skill level are welcome. The point is to build things, learn, and make new friends. If you'd like to bring one of these to your own city, we'd love to help. Ping Sara.

I know the Star Wars hype is over, but wanted to play around with perspective (the perspective stuff isn't working on mobile–kp?). Everything I post online feels like it's launched into the void to either be forgotten forever, or discovered in the future to ruin my presidential campaign. http://share.framerjs.com/6omcfyexu6z2/ Content from twitter.com/kylo43n

Are there any resources for learning how to use 'for' loops to increase productivity when applying states/styles/animations to multiple elements? It seems like looping is the most powerful ways to reduce code size and prototype faster but I can't find a lot of examples or holistic explanations of the syntax. Thanks!

Having trouble getting the positioning right in Frameless iOS. It appears correctly in Framer, but when I open it in Frameless the videos do not show (except for one video thumbnail). Any ideas? I've had this similar problem before, where I'd have to position the video differently to get it to show correctly on Frameless, which would make it out of position in Framer. UPDATED LINK WITH SMALLER VIDEO FILES: http://share.framerjs.com/6f1k713rrqgj/ - not very clean sorry :)

I have a ScrollComponent that unexpectedly snaps to it's top position after some interactions with it's content. Any ideas of what could be causing this? Notice in the second interaction (highlighting a group of images in brown), once the touch has ended the ScrollComponent snaps to the top. Files: http://share.framerjs.com/gzxd6hjrsa1c/

Hey Jonas, is it possible to (Object) extend/merge the cssNames object? If so, could you please tell me how? :) In case you're wondering what I'm trying to do: I'd love to add those brand colors from http://brand-colors.com/ to Framer ...

How do you clear output from "print" with code? my project generates a lot of debug print and I'd like the option to clear it without refreshing the project.

Quick one : When I hide an element in Sketch and import it to Framer, its size is a lot bigger than it should, whereas when I hide it afterwards directly in Framer it keeps its actual size. Is it a small bug or am I missing something ?

In the attachment you see an image with a semitransparent white layer with grey type on it (which is rendered using layer.html). What I would like to have, though, is the type being *fully* transparent (with the white layer still being semitransparent). Any ideas how I could go about this? (Context: the semitransparent layer is briefly shown once a new series of images begins, showing the title of the series, and then vanishes, fully revealing the first picture in the series).

Hi Framer community - I did some prototyping for my app on Framer, leveraging the ScrollComponent for my long Home view. (shout out to Adria Jimenez for his Udemy course). Well now the app is live in the App Store. Would be psyched if some of you could benefit from it. It's for parents of a newborn and their pediatrician.

Sometimes all you want is to print some text :) That's why I've hacked Framer's console to be ... * 'fullscreen' * customizable * added a clearConsole() - function * and a GUI button calling the above-mentioned function I might add 'println'/linebreaks at some point, if anyone is interested. grab it @ https://tr.im/console ### Caution: Auto refresh must be deactivated for this hack to work! Koen / Taylor Wright

Is there a simple way to use percentages for x/y position, rather than static pixel position?

Hey Folks! Does anyone know how to apply a copied layer to a superLayer? In this example, I have some objects in a nested container. When one is tapped, I'd like to copy the layer, and have it move from its original layer's position to the top of the screen. As you'll see here, the copy currently animates from the top-left of the screen, not the original layer's position. Would appreciate any recommendations :)

I'm having an issue hosting my prototype on an internal server. I can hit the "Share" button and everything works fine, but I'm trying to host a prototype on an internal server, yet when uploaded to the server, loading the index.html file just results in a blank screen. I've also tried using the "Mirror" app and it will not connect even with both devices on the same network. Any ideas how to fix this? Thanks!

Is there a way to have Framer prototypes saved on to the phone, rather than be downloaded each time you want to show them?

Hi! Could someone explain me how I could apply layer.animate to all layers stored in the array instead of the last one? Thanks!

Hi all - any idea what I'm doing wrong here. Need to print the array values into a html layer to sit on some buttons - last line I think is wrong??? I can print the loop number i.e 1,2,3,4,5 but not the value in the array. btnBandSizeTxt = [32, 33, 34, 33, 33, 34] for i in [0...5] btnBandSizeTxt[i] = btnTxt = new Layer superLayer: rowContents[0] width: 50 height: 50 borderColor: "red" borderWidth: 4 backgroundColor: "red" x: (i+0)*120 y: 20 btnTxt.html = [i] in btnBandSizeTxt

Hi all! I'am very happy to host first-ever Framer Meetup in Poland, Gdańsk. Starting with some basics, we will go throught challenges doing prototypes from a scratch step by step. RSVP here —

I updated Framer today and there is something wrong with .on Events.Click and TouchEnd and TouchStart. They used to work fine on the desktop and mobile, now they don/t work on mobile (i am using Framless)

Are there any examples using the page action. like when the page 1 is changed perform actions 1 and when page 2 is scrolled perform action 2.? i am using product_scroller.onchange:page2 but i am getting error Uncaught SyntaxError: Unexpected token : i am using framer.js ,javascript

Hello, I have a PageComponent inside of a vertical ScrollComponent, is there any way to block the scroll when using the PageComponent? Thanks!

Ok so it's going to be a day of questions for me it looks like. I'm trying to update a value in a callout with the time remaining in a video that is playing in timeLeft if I use return I get a single number like 29364 show, but if I use print the time in the console updates as expected counting down from 44 to 0. Any ideas?

Hey folks! Was just wondering about the videoLayer, if is set .controls = true I can't actually use the controls. Is this normal? Is there something else I need to do to allow interaction with the controls?

Hi all. How is it possible to detect tap event on a real device? Not click. For example. I have a button with Click event inside of scrollComponent so when I scrolling Click event triggered every time when the scrolling ends. ignoreEvents when scroll isn't works in this case. Any ideas? Here is an example — http://share.framerjs.com/25yp6sedn8nn

Hi there! Is there any way to make the PageComponent work with tap instead of swipe? What would be the best approach to accomplish something like that? Thanks!

I'm trying to use a variable as a property in an Animation. I set the initial value and the ani object gets the value but when i run the animation again with a new value for my var it doesn't update. Thoughts?

I saw a Dribbble that detected scroll direction to affect other elements. Any idea how I can collapse the header and navigation when scrolling down and bring them back when scrolling up? I think that was made before Framer started using CoffeeScript.

Hey guys, any idea how to target a specific layer which has been created in a loop? I have named some layers in a loop through 'name: "page" + (i + 1)' but when I go to use the layer outside the loop, it cannot be found - despite the fact it appears and is named correctly in the layer tree. Any help is much appreciated! Code:

Hey guys, I downloaded the "page-simple" example, but when I updated the file in Framer Studio the alignment of pages in the pageComponent is different. Is this a bug? Or should things like contentInset be used differently? Thanks!

Framer friends, is it possible to have arrays within pageComponent (instead of layers) ? Here I have 2 arrays (cards and copies) each composed of 6 swipable layers. I'd like each array to be on a different page, so that when all cards from array1 are gone, it goes to the second page showing array2 (whereas both arrays are currently shown on top of each other). Any idea on how to do that ?

I have a for loop creating a row of buttons & setting up 2 states. I want to change the state of the clicked button to stateA & the others to stateB - Do I need an 'if' statement or a click handler or is there a simple line i can add to the following? for btn in btnBandSizeTxt btn.on Events.Click, (event,btn) -> btn.states.switch("stateA") bandSize = event.target.innerHTML updateFilters() Thanks all :)

Hey friends--happy to share another prototype! Prototype #2: Whise, a fake streaming service for white noise (and a help to those in an open office plan ;) ) http://share.framerjs.com/1qpskqju1yyc/ I learned a ton about for-loops and states on this one. Thanks to Marc Krenn for his help on some of my earlier attempts! As always, feedback is helpful and appreciated.

Hi guys, is there a way to turn off auto-complete in Framer Studio? My laptop is old and slow, so auto-complete takes too many resources for this particular machine ...

Facebook Design Resources now have Watches as well :) https://facebook.github.io/design/devices.html (props to Harry Copeman, Riccardo Carlet and Jeff Smith) -- I also wanted make this devices available to Framer immediately, including a simple prototype example and Sketch source file :) Please enjoy. Example Prototype: http://beta.rss-ems.com/Moto360/prototype Boilerplate Prototype with Moto 360: http://beta.rss-ems.com/Moto360/boilerplatePrototype Sketch File: http://beta.rss-ems.com/Moto360/sketch https://dribbble.com/shots/2473702-Android-Wear-Framer-Prototype

I had some fun with vector shapes today (Framer & Snap): Inspired by the animations from Thomas Quarre and Ken Yiu, I wanted to do simple SVG stuff, but also create the SVG directly inside Framer. I am using snapsvg.io that lets me draw SVG shapes very easily. All these use a handy workaround of a layer animating and then listening to change:x — that allows to use easings or even spring in the manipulation. 1) Circular Progress like google Fit: http://share.framerjs.com/195308v9yp1w/ This one actually draws an arc and is not using the dashArray workaround. There is no major advantage doing it this way. 2) Path animation: http://share.framerjs.com/i0q68bh9nop0/ This one creates an SVG path with coordinates directly from sketch (export vector as svg, open in text editor and paste coordinates from d attribute on path object). The animation is then done with dashArray 3) Move Framer Layer along Path: http://share.framerjs.com/mpj7ig3y1q19/ This one is a bit tricker, and requires a reference layer above the SVG layer with the same x and y coordinates than the canvas layer. The logo is a childlayer of that reference layer. Snap gives you the coordinates of any point along a path with getPointAtLength(length). These coordinates are then applied to layer.midX and layer.midY I find this a bit cleaner and more versatile, once you know how to use SVG directly in framer/snap. Copy&Pasting complicated shapes from sketch is also super helpful. Some of these things would be easier with Tisho's animation path API. but as far as drawing svgs (arcs, shapes, etc), Snap is super handy.

Does anyone have experience converting spring animations into production iOS code? Example — curve: "spring(300,24,0)" Thanks All!

Hi frens, posted about this yesterday but i've made some more progress. Everything works correctly in Framer, just not in Frameless - I can't get the bottom row of videos to play in Frameless (the big videos are playing fine). Any ideas how to get the small videos to play in Frameless? Does it have anything to do with having them in a ScrollComponent? http://share.framerjs.com/1h8ca0m248s8/ (All the videos combined are 11mb, avg 1mb each. )

Have you guys had success animating a layer's background color? Alternatively, is there an onUpdate event we can listen for during animations?

Whats the best way to create 2 or more switches to behave like shown in the image? Can someone provide an easy example. Thank you for the support!

Guys, what is the state value of the default state of a Layer? Example: You switch to a different state via layerA.states.switch("foobar"). Now, you want to switch back to the default state you have declared when you created the layer. layerA.states.switch("default") does not work ;p.

Hello Guys! I need to make a circular Slider in Framer. The Problem is I have no idea how to make one. Someone has a tutorial or a small explenation where to start? Would be wunderful :) I've found an Image of what i mean. http://i.stack.imgur.com/qjhAE.png I need the last one or the one in the middle! Thank you :)

Hey folks, Is there any way to "stopEventPropagation"? So for example a click on a given layer doesn't propagate to its superLayer. Thanks!

Anyone know if there's a plugin to search the layer viewer for pattern names? http://i.imgur.com/Bq2JDlB.png If not, is there hope in the future that this feature will be implemented?

Hey Framer community, this seems pretty simple but I can't figure out how to do it. I saw some similar thing but didn't really found the answer. I need to animate a container height from bottom to top instead of top to bottom. This container contains other layers so I can't move its y position neither its scale value. Here is an example

Has anyone created a dropdown menu before? And a radio button?

Any chance AI import is coming to framer? 🙏

Hey Framesters! I have never made or used a module, and I want to make a module for image content. Basically something I can stick into a project so I can pull 50 or so of the same images from. Do modules support assets in them or are they straight code?

Hello, I was wondering if it is possible to make use of external APIs within framer. Did anyone try it? I found some shaky examples on the web. Thanks in advance for any tips.

Accurate playhead control is a pain on mobile, here's a concept for the Youtube mobile app with thumbnail preview and scrub rate control. http://share.framerjs.com/uw5repp7h7aa/

Prepare for take-off... http://share.framerjs.com/vstqqmrnnps6/

Is there a simple way to destroy all sublayers? Something like foo.subLayers.destroy()? I've also tried storing all my layers in an array and then emptying the array, but the layers are not destroyed :(

Hi all. New to framer and have a basic question. I thought framer studio was supposed to recognize all artboards on canvas imported from sketch regardless of position? Working on a simple example where I have to stack all artboards so that they display in preview.

Hi guys, is there an Event "Events.AnimationAnimating" so that I can to an Operation line decrease an counter while the animation is running? Events.AnimationLoop isnt triggering.

Is there a way to express this all in one loop? Making a series of checkboxes.

Hi Framers! Anyone using framer.js in Vancouver? How do you like it so far? I am learning the steps to recreate the interactions and transitions from Facebook's Groups App for iOS with a scrollable feed and hope I can have framers meetup and meet many Framers in Vancouver this year! :D

Was making a typeahead for work and thought it might be useful to someone. It searches through an array of strings as you type. Here you go :) http://share.framerjs.com/6kh3vay2otvx/

Hi Framers! So after my post this week, I found cool Vancouver-based-Framers and one of them, Shirley Man opened Facebook Group for us. This is amazing. Join us if you want to fire up a Framer session! https://www.facebook.com/groups/FramerJSVancouver/?notif_t=group_r2j_approved

When drawing SVGs, is it possible to create a drawing effect for text, using the fill property, as opposed to strokeDashoffset?

Hello, As I promised Oskar Susłow, here is the source file to a radial slider I made. The code is not very elegant and there are a few noticeable bugs, which is why I never released it before, but it is a starting point. Hopefully someone will be able to improve it, otherwise it will be a few weeks until I get to fixing any of the bugs. Download: http://share.framerjs.com/1ugac9rb4pvc/

Hi, I'm new using Framer JS. I'm a Graphic Design Student. This semester I'm choose to a Mobile Development Class and we're learning PhoneGap. My question is it possible or viable to integrate Framer JS and Phonegap and release an App? Is just a doubt I have.

Hello Framer Jedi, I’m working on a prototype of a tableview transition. I want to smoothly remove rows from a tableview when they’re filtered. Right now it works perfectly when I use `switchInstant` but fails when I use `switch`. The state change is only applied to the last row that needs to change. I imagine this has something to do with the animations overlapping. The offending line is number 94. Any help would be much appreciated!

hello, I'm trying to build a carousel prototype and would love to get some help <3 The row of coloured cards should be swipeable horizontally. My problem is to get some nice momentum. When I allow overdrag, the animation gets totally weird, probably because the image of the cards is bigger than screen width?. I tried to play around with bounce.Options but .. well, it stayed weird. Any idea? http://share.framerjs.com/ida7neu3p42k/

Hi all - I'm creating buttons from an array. It was based on fixed widths as I only had single digit numbers but I now need to size them dynamically based on strings in the button. Do I need to target.innerHTML So something like width = target.innerHTML + padding Note I'm setting a width & then using it again in the loop lower down. The minus numbers position it within it's superlayer. btnStyleTxt = ["ALL", "Balcony", "Non wired", "Plunge", "Push-up", "Sports", "T-Shirt"] for i in [0...7] btnStyleTxt[i] = btn = new Layer superLayer: rowContents[2] html: btnStyleTxt[i] color: "#000" width: 170 height: 100 borderRadius: 16 borderColor: "#bdbdbd" borderWidth: 4 backgroundColor: "F9F9F9" x: (i+0)*170-50 y: -40 if btn.x > 550 btn.y = 80 btn.x = (i-4)*180-50 # CREATE 2 STATES OF THE BUTTONS (ROW 0) btn.states.add stateA: borderColor: "#53A0FD" stateB: borderColor: "#939393" btn.style = fontSize: "40px" btn.style = textAlign: "center" btn.style["padding"] = "30px 0 0 0"

Hi there! I just want to share one of my latest student projects with you. The project itself was fully prototyped with framer.js and is controlled by a touch potentiometer and a leap motion. For the communication between arduino and my mac I used breakout.js, which does all the websocket communication for you and has a growing hardware library. After the arduino was connected to the web, I simply used the offered javascript events to trigger my framer.js animations. To setup my LeapMotion I basically used the leapjs library and extended it with some self-written gesture recognition. The visuals itself are half programmed half embed videos. Please let me know if you have any questions! LeapMotion: https://github.com/leapmotion/leapjs BreakoutJS: http://breakoutjs.com/

Is there an issue with the “timeupdate” video method ? This might have been answered already, but I played around with Benjamin's video example from June (http://share.framerjs.com/ls45f54htojk/) where he uses this bit of code : vid.player.on "timeupdate", -> However when I hit “File” and “Update Framer” -- or when I use the same code in a new framer -- I get an error saying : “ undefined is not an object (evaluating ‘this.element.addEventListener’) " Any idea on that ?

Hi guys, I'm trying to style an input... the layer has html: '<input type="text"></input>', but when I set the 'style': ... nothing happens... It happens only to me? :(

Wandering FramerJS for the first time today. I'm trying to animate elements in a chart. At the moment I can animate using scaleY, but this doesn't quite get the effect I'd like. The animation scales from the center out. Animating with height actually draws each bar from the top down. Is there a way to animate this histogram bottom up so that the chart "grows"?

Trying to show some rich text editor functionality, bold, underline, add a link etc. Is this even possible?

Hi, How can I mask an image with a layer and be able to move the layer without the image. If the layer is half underneath the image, the image is only be shown half. See attachment for example. I tried the superlayer function but unfortunately that didn't work out. What I am trying to achieve is a bit the opposite of this example I have found in the community. (http://share.framerjs.com/8xqvscqqg58k/) Thanks!

I'm getting a hard crash every time I try to open a Framer prototype on OS 10.11 with Framer v49. The application opens fine, but opening prototypes causes an immediate crash. After checking Console, it looks like the problem is related to: Framer Studio[23717]: assertion failed: 15B42: libxpc.dylib

For some reason I'm unable to get the 'timeupdate' event to fire on my videolayer. http://share.framerjs.com/baetzn9mhkvd/ I can open the video player example from the framer site and it works fine, but for some reason whenever I recreate it from scratch nothing happens.

Framer Layer Alignment with minX/Y midX/Y maxX/Y I've seen a few people lately ask about alignment of layers. I highly recommend reviewing these properties and getting to know them better. They greatly reduce the amount of math you have to do in layout and in your states. Start here: http://framer.com/docs/#layer.maxX You can use them when you create your layer too. So, if you wanted to create a layer and place it on the bottom right hand side of the screen you'd do this: myLayer = new Layer 　maxX: Screen.width 　maxY: Screen.height Hope this helps you in your prototypes!

I am having the darnedest time figuring out how to animate my bar chat element heights from the bottom up rather than the top down. I am also trying to use the cycle utility to stagger the animation of each bar in the chart. Anyone have any suggestions for me? http://share.framerjs.com/k5k1s918q7s3/

Is there a way to use JavaScript instead of CoffeeScript with Framer? I find the CoffeeScript syntax awkward to use even though it's shorter.

Hi, I'm new to framer and struggling to show a circle animate inside of a card (img 1). Instead I can only display it overlaying the card (img 2). Is there a way to clip an animation within a layer? Any help appreciated.

maybe a dumb question, but how can i set an image to auto height? Solution: link = "yourimage.jpg" image = new Layer ____superLayer: scroll.content ____width: Framer.Device.screen.width ____height: Framer.Device.screen.height ____html: "<img class='import-image' src='#{link}' style='height:auto;width:100%;'>" image.on "change:size",-> ____image.style.backgroundSize = "auto #{@.height}px"

A few weeks ago, I linked a solution for password-protecting a prototype on Heroku (or really any LAMP server): https://gist.github.com/josefrichter/561dfd823f829f87ec6e. However for my work, I often have to do this on an Azure (IIS) server. Here's a quick write up for that: http://westonthayer.com/blog/_site/2015/10/23/hosting-framer-on-azure/.

Is there any documentation around the new gestures added in the beta?

Hey people - Is it possible to simulate a click event in a function? At set X/Y location? thanks guys...

Curious: anyone out there found a way to insert their Framer projects into a page on a Wordpress site? Failing that, what gif-making software anyone found a gif-making program/process they really love?

is there a way to customize the viewer? I'm creating a website prototype at 1400px wide and the preview is 1440px, is there a way to reduce its size without modifying my own design?

Hey guys, i'm new to Framer (been a member of this group for a while, but never used Framer before) because coding looked a bit scary at first. I decided to give it a go and did some javascript courses. I know some basics, but don't have much experience yet. I need your help! I'm trying to scale a container from 90% to 100% while scrolling. The amount of pixels scrolled determines the amount the container is scaled. It needs to scale to a 100% gradually. Does anyone have an idea on how to do it?

Please welcome Brittany to the Framer team!

scrollable #tabBar + #pages http://share.framerjs.com/1j74uk2gefm9/ Original file by Diego Oriani

Hello All, Has anyone else noticed that when you fire a click event on a video layer that brings it to the front then plays it, it is black until you do another click? I haven't been able to get around this. Any help would be appreciated.

I know I have seen this posted before but couldn't find it with a search: Is there a way to specify different curves for different properties as they animate simultaneously? For example, a spring curve on scale and a linear curve on opacity happening at the same time?

Hi everyone, I have a question: I started using Framer recently to prototype some interactivity for tablet apps and I am having a problem with multi-touch when previewing in Frameless on iPad. A simple example: TouchStart on one layer enables dragging on another layer, TouchEnd disables it. The problem is that while the target layer becomes draggable, on TouchStart, the interaction of the other hand is not detected. Example:

I have 5 layers: face1, face2, face3, face4, face5. I want to transform each of these layers with a loop rather than writing out the statement 5 times. But I can't quite get the correct syntax. Here's the idea: for x in [1...6] y = "face" + "#{x}" y.scale = .5 print y, y.scale When I print y, I do get face1, face2, face3, face4, face5. But y.scale is "undefined." What am I doing wrong?

Hello guys, does anyone knows the exact difference between layer.states.switch "default",delay = 0.5 & Util.delay 0.5, -> layer.states.switch "default". I tried to replace the latter with former in my project, but the effect seems quite different. Thanks a lot.

Is it possible to play two videos simultaneously in Frameless or Frames for iOS? Framer plays both videos fine, but when I try to view on my phone then only one video plays. Any ideas?

Hi all, I'm building out some really complex/multiple screen prototypes with Framer at work. Has anyone used some sort of architecture (i.e. Redux) with FramerJS before?

Working on a new design feed for jobs (I'm sorry that the screen are in spanish) Framer Link: http://share.framerjs.com/3hvp29vxhvg9/ Code credits Alejandro Rodriguez

Hey folks, Having a little trouble hashing out the state logic I should be using for a step by step progress bar. What I want to happen every time you hit 'Next': 1. The progress bar goes to the midX of the next icon 2. The 'active' black icon scales up to 1.3x 3. The previous icon goes back to 1x scale here is what I have so far...http://share.framerjs.com/9vjnazdyqzol/ Happy to clear things up if my explanation is a little muddy

Have noticed a few times today that when I try to open .framer files, either by dragging or using the in app recent items menu, the app dies. Thought it might be a good idea to let you all know :)

Hello everybody I am developer of hybrid applications which use Apache Cordova. I wonder if you can integrate the library frame.js and as integral to my aplicaion also that it works without a net, (excuse my English)

Hello, I have a beginner question: Is it possible to set different animations for separate states using next()? Spring curve for StateA but Ease-in for StateB?

How would I go about defining a style and then applying that to layers? As opposed to making layers with repetitive styles.

I am trying to have a context menu popup where I long press at the location of my cursor, (ideally only if there was text highlighted in a content editable area. I have tried to use the Pointer module and while it works in the X axis it isn’t in the Y axis in my example. I assume if is because I am putting animation states on there to do the animation on visible.

hi everyone, I am creating a date dropdown. It kinda works but I am struggling how to line up month, day and year horizontally when selected. I have tried .scrollToPoint but it doesn't work. Could you help? Thank you! http://share.framerjs.com/3wjx4dz3ilbf/ Sorry my code is not clean! If you have a better way, please help

Hi guys, I want to do some animation for my donut chart, and i only find the tutorial here for the path and framerjs for vectors, is there any place i can find some tutorials of how to do chart animation in framer.js?

After updating to the latest Framer (File > Update Framer) being able to focus on a layer that has content editable enabled is not showing a caret/editing abilitites. Koen if you update the following file http://share.framerjs.com/3z0eqfa40ihn/ you will see that (while new gestures do work) the text area is not working as a content editable area.

All the work I've been doing in the last 8 months I haven't been able to show. I do however have a Sunday morning Framer project to share: https://www.dropbox.com/sc/6qpx2xrvuuhv8w1/AAAzIBwNKtaUJTzsnjila7K_a This inspired me to learn XCode/Swift (XCode for Designers course and a lot of Googling), which has become quite challenging and rewarding. I do have a video of the progress and felt I should share this as well, mistakes and all. I call it Peepchat as a working title and had a little fun with some branding. I'm using Parse for the backend and I was able to capture the message and compress the image and send to Parse (hey, gotta start somewhere). Thinking of writing a post with progress if anyone is interested in the details. https://www.dropbox.com/sc/ikzupbfk7ap8euu/AADpfRjcOtKwXNNz81LMWlN7a

I just made these resizable panels for a project and I thought they might be useful for others. http://share.framerjs.com/m65u7f4c5o9c/

Koen, should I expect the following to work in the latest beta? layerName.on Events.LongPress, -> print "This is a builtin longpress"

I just pushed v50 with a bugfix for crashes that occurred after the latest osx update when you had multiple screens connected, and tried to open any document.

If you're like me and you've worked on web projects, there are times when Framer's "normal" cursor isn't what you want when hovering over a certain layers. Sometimes you want the pointer or a text cursor to show up. If you want to use any of the cursors in the image below, just add the following line wherever necessary and replace the word "auto" with any of the options in the image: document.body.style.cursor = "auto" Sample project with all the options: http://share.framerjs.com/h3c7ote6hz0e/ Note: these will appear differently depending on your browser.

I have gotten javascript errors when using the trackpad on a laptop to scroll through page components (with mouse-wheel enabled in Framer). The very same page component will work just fine when I drag it with the mouse. Is this something others have seen to, or would you rather suspect there is something wrong with my code? The error message says: "[Error] TypeError: undefined is not an object (evaluating 'start.x')" There are also delays in snapping to the next page, when initiating a page change in the page component via scrolling with the trackpad. Doing the same with mouse drag is very smooth, on the other hand.

Hey guys. I'm trying to do a simple mouse-roll-over state for web element. And something really weird is happening. Seems like .MouseOut event is firing before Mouse is actually out.

Question: I've got three pages which you can swipe through. I'd like to start Animations on multiple layers that are visible on the page you are viewing currently. How can I achieve this? The examples: multiple pages: http://share.framerjs.com/zgh6j793mghw/ just one page with the animations: http://share.framerjs.com/dy89zdm36dj6/

Could code folding be implemented in Studio, just to help manage chunks of code. Not sure what it would look like but I kind of feel like it's missing when I use it.

When I import a Sketch file with dashes or underscores in group names, the groups are imported without the dashes and underscores and so don’t work. Is this a bug? See attached images of Sketch and Framer's interpretation

Feature request: Quite a lot of the time I have multiple Sketch files open on a daily basis. It would be amazing to be able to select the imported document rather than import all of them. Not a massive issue I guess, just means I don't need to close most of my open files before importing.

Hi, i find some post in the group use svg code I know sketch have a plug in for you to get svg code, but i just have some difficulties to animate that in framer. Anyone know how the code of svg like square.html = "<svg viewBox='0 0 200 200'><path fill='none' stroke-width='10' stroke='white' stroke-dasharray='#{square.pathLength} #{square.pathLength}' stroke-dashoffset='#{square.pathLength}' d='M200,0H0v200h200V0L200'/></svg>" comes from?

Has anyone made a prototype where a draggable's movement is varied based on the inputs acceleration/velocity. For instance, the apple track pad works like this... slow movements move the mouse arrow slower, and fast movements move it further. I know there is speed and velocity in the draggable class but when I try to tie the speed to the velocity in various ways I get super weird results.

I'm trying to simulate a new tab opening to a web page on click, but I'm having a considerable amount of trouble using an anchor tag in my prototype...Any ideas? Hacky workarounds are welcome. This is my latest try

I'm stuck. Again. I have imported a few layers from Sketch, an artboard called "artboard" containging a group with an image called "background". The absolute size of this background is 2000x1500. After successfully centering the artboard, I then want to scale it to the screen size of whatever device this is viewed within. But this scaling is not working, even when I use "sketch.background.width = Screen.width" instead.

Hey guys, Here’s a prototype I made for an IoT app. Inspired by Google Now, the app allows users to install add-on cards to control different aspects of their possessions and wellbeing including fitness, home security and room temperature. Clicking on a card will display real-time information. Also it was a great exercise to gain more experience with prototyping. Direct link: http://share.framerjs.com/u3g0tj8pyyxv/

Hey all! I’m trying to figure out how to pass an Arrayindex from the layer inside that array? So imagine there is 10 layers in array and I have a for loop for them. for i in [0…10] ArrayA[i].on Events.MouseOver, -> print this.array.index The reason I want this so I could have multiple arrays, and having MouseOver one layer, it triggers a bunch a layers from different arrays with the same array index each.

The new update to Framer Studio kicked me back into a trial. It expired and I'm unable to reactivate using my paid license, error "No activations left for this number." I'm crunching trying to get a prototype ready for usability testing tomorrow. Already emailed [email protected], does anyone have a short-term fix to get me back up? Thanks in advance!

Is it possible to do any type of responsive design in Framer JS?

Does anyone have an example of an event that's triggered each time an array is increased by a new element ? (e.g. i++ when new element in array)

Hey frameristos, please join us for our 9th Framer JS Seattle Meetup! Hope to see you there. https://www.facebook.com/events/1516721411956569/

Hi Folks! Maybe a bit of a basic question for some of you and my guess is that it has something to do with scoping but why can't I access a layer created in a for loop by name, but pushing them to an array allows me to access the layer with [] notation, and I can pull the name from the array using products[0].name? I have attached an image to illustrate if my explanation is not good enough ;)

https://www.facebook.com/musiclegendary/ Just Mucis "Nothing else matters."

Hi guys, Has anyone got any examples of looping through an array and applying animation to them? Wanting to create a loading indicator (similar to the attached screen shot) https://dribbble.com/shots/2055128-Hop-Loading

Will Sketch and FramerJS make app for iPadPro in the future? so I can draw, design and code all-in-one device :), just curious

Is it possible to have a Click and a DragMove listener on a Layer? I tried doing it recently and there seems to be conflict between the two listeners which seems to cancels one or the other from responding. What I need is the ability for distinguishing between a click and a drag. I'll post an example if I need to clarify myself further.

hey guys, I find some examples are on https://share.framerjs.com, however, if I use the website share.framerjs.com, it go directly to the framer website, is there anyway I can see all the projects under share.framerjs.com?

Heya guys! Check out this new example of text fields with floating labels - as seen in the Material Design spec. It contains some nifty tricks too! Here's an overview of what's included within the prototype: - A custom input class. - Input events (onkeyup, onkeydown). - Custom behaviours for Mobile and Desktop. - Animating the font-size with the "change:y" event. http://share.framerjs.com/4rer1y5f8ol8/ Hope this helps! Feel free to message me here if you have any questions. :-)

hi, does anybody have an example of a video player with any kind of subtitles in framer?

Hey everyone, I've been working on this prototype and though it's still a wip, I think it's ready to be shared: http://share.framerjs.com/k74rpxep6tj4/ It's a cover of my favorite app: Google Photos. (make sure to do a longpress on a photo to activate the select-drag mode!) I learn a lot when I try to recreate interactions, so I decided to give this one a shot. If you're interested, you can follow this project on GitHub, as I plan to continue tweaking it and putting a few hours per week into it. https://github.com/72/GPhotos-Framer-Prototype Thanks for watching!

I'm using embedded Framer prototypes for my latest side project. It focuses on meaningful interaction improvements. Here's the latest post.