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

What is Framer? Join the Community
Return to index

April 2014

April 01

Garen Checkley
Hey all, Animation Question: I'm trying to animate a view and Framer seems to be unhappy parsing a curve I'm feeding it. In the console I get "Animation.parseCurve: could not parse curve 'cubic-bezier(0,0,.5,1)'" -- but not sure what I'm doing wrong. Any ideas? I'm using Framer 2.0-45-g7942d46. Thanks in advance.
3
Josh Puckett
Hey guys! I made a really quick web viewer for Framer prototypes over the weekend. It's pretty simple (basically loads a prototype in as an iFrame), but has some nice features (resize the browser, toggle iPhone color, backgrounds, etc). I've found it really useful and easy to send prototypes to people in a nicely presented format. Check it out on Github: https://github.com/joshpuckett/FramerWebView I'll be adding more features/improving it over time, and would love to know what you all think!
6

April 02

John Kumahara
Anyone have a example or tutorial of rotating objects?
2

April 04

Sarath Kumar
Is there an easy way to have an HTML form on a webpage that, when the user submits, puts the data into a PDF file and sends it to the receiver?
0

April 06

Mark Badger
I'd like to get this code to work so I can save "i" on the view and then access it from the click for creating dynamic menus and working with arrays, unfortunately it only logs 4, the last number for all the views when clicking on them. Actionscript guy learning JS/framer which is great for( var i=0; i< 5; i++){ var _mc = "_mc"+i//"mc"+i _mc = new View({ x:0, y:35*i, width:20, height:30 , style:{"background": "blue" } }) _mc.on('click', function (){ console.log(this.count) }) }
4
Florian Pnn
Hey everyone! I'm trying to use Hammer with FramerJS but I was wondering how you select the view you want to target? In the getting started part (https://github.com/EightMedia/hammer.js/wiki/Getting-Started) they use the ID but on framer ID is kind of random. Any idea how I can easily target a view? Thanks!
2
Adam Kopec
Just figured out how to remove event listeners in Framer. Turns out while "on(event, function)" listens to events, the opposite "off(event, function)" stops listening. Took me 15 minutes of researching before I finally stopped and thought "what's the opposite of on?" #noob
2

April 08

Koen Bok
(repost) For everyone working on/with scrollviews, here are the custom scrollviews I built a while ago. They are not perfect but easy to steal and build upon. http://snappy-view-zoom.s3-website-us-east-1.amazonaws.com/ http://snappy-view-tabs.s3-website-us-east-1.amazonaws.com/ http://snappy-view-rubberband.s3-website-us-east-1.amazonaws.com/ http://snappy-view-inertia.s3-website-us-east-1.amazonaws.com/ http://snappy-view.s3-website-us-east-1.amazonaws.com/
4
Patrick Visser
Hey, I need some help with the easing paramters. Except for spring or ease-out / ease-in nothing seems to work, e.g. ease-in-out. Any help appreciated.
3
Sebastian Grąz
If anyone is working on slide-out menus I started a little something here that you can fork code from:
0
Abhishek Kumar
Hi guys. This is most likely a newbie question. I am trying to stop an animation loop in progress for a view. What's the right way to do this? view1 = new View({width:100, height:100, x:50, y:50}); view1.opacity = 0.5; animation1 = new Animation ({ view: view1, properties: {opacity: 1.0}, curve: "ease-in", time: 300 }) animation2 = animation1.reverse() animation1.on("end", animation2.start) animation2.on("end", animation1.start) animation1.start() view1.on("click", function() { view1.animateStop() })
5

April 10

Ilter Canberk
Is there an easy way to bind mouse drag gestures to ScrollViews? Right now it feels a little unintuitive when working on mobile stuff.
1

April 11

William Hutter
Hey guys, I was wondering what's the best way to stop an object from being draggable after it's been dragged a certain distance ? Thanks !
2

April 12

Cemre Güngör
I want to drag in only one axis, and when I override draggable with (view.x = 0) on DragMove, I still sometimes end up with views that are a couple pixels off in the axis I want to make fixed. Is there a better way to do this? Koen Bok
3

April 13

Koen Bok
If you're struggling to understand Javascript, this is one of the better primers I have seen. https://www.discovermeteor.com/blog/javascript-for-meteor/
0

April 14

Cemre Güngör
Is it just me, or is draggable broken on mobile browsers on 2.0-49? Framer is looking for a "webkitMovementX" in a touch event which isn't there anymore in the latest webkit. 2.0-20 uses "touchEvent.clientX - this._start.x" which works. Koen Bok
4

April 15

Craig Murray
Curious if springs could easily port to React:
5

April 19

Chris Bernardi
Some help needed: I've gone through all the docs and examples and am completely stuck on scroll views. I have a PSD group names Store Scroll, which I can't get to display unless I hide everything else and definitely can't get it too scroll. Here's my app.js so far -
6
Koen Bok
How many people here are using Coffee Script over Javascript for Framer? I like Coffee Script better but always just stuck to Javascript for Framer content because there is so much more knowledge about js. So it's easier to find other examples and people to help you out. The downside of Javascript is that is can seem very complicated to beginners. Coffee Script solves some of that. Consider these examples: - "for (var i; i<l.length; i--) {}" vs "for item in list" - "function() {}" vs "->" - "var myVar = 1" vs "myVar = 1" (no var) I think I might do some tests on people trying to learn coding for Framer to go with Coffee Script directly. If you have an opinion on this, Id love to hear it. To learn more about Coffee Script see:
15
Koen Bok
Framer course at General Assembly San Francisco Noah and Cemre are doing a Framer course. If you are learning or working with Framer this is for you. Reserve soon because space is limited.
5
Josh Puckett
Quick update to FramerWebView: • Toggle iPhone/Android viewers using the controls in the top left • Quickly change the prototype by entering a URL in the top left. • Controls fade out when you're not interacting with them • Hit 'Z' to zoom to 100% https://github.com/joshpuckett/FramerWebView
12

April 21

Jonatan Castro
Hello! I've released this UI Kit and I thought you might find this useful for your mockups. There's also an old PS version I did a few years ago.
0
David Holl
Has anyone had luck using the framer plugin with Sketch 3 yet?
11

April 23

Koen Bok
Framer Update I just updated Framer with a bunch of features/fixes. Help me test it before it lands on the official page by replacing you current framer.js with this one: https://raw.githubusercontent.com/koenbok/Framer/master/build/framer.js Changes: - Add a delay option to animations Example: myView.animate({properties: {...}, delay: 1000}) - Fix the draggable on (mobile) Safari https://github.com/koenbok/Framer/pull/52 - Add a view.draggable = true|false shortcut for draggable Example: myView.draggable.enabled = true|false - Fix the curve typo https://www.facebook.com/groups/framerjs/permalink/469402916520118/ - Add a default width, height and color By default views now get a width and height of 100 and some blue color Change the defaults by setting: Framer.config.defaultViewWidth Framer.config.defaultViewHeight Framer.config.defaultViewBackgroundColor - Fix frame error https://github.com/koenbok/Framer/pull/46 - Add view copy Example: myViewCopy = myView.copy() The entire hierarchy will be duplicated
17
Chris Bernardi
I feel like I'm getting the hang of the basics, however I'm stumped again. All but one function is working correctly (see link:its the last function). The function works to the extent that console.log registers but the action fails too.
4

April 24

Cemre Güngör
Anyone run into a bug where you try to run an animation on something that's already animating and it causes one of the animations to get stuck? Any techniques in handling overlapping animations better? (Such as stopping the old one)
3
Cemre Güngör
What is the most code-efficient way to make looping animations in framer? (Aside from chaining animations with on "end") Tisho Georgiev Koen Bok
13
Tarun Chakravorty
Hi guys, I'm having some trouble using the delay function in framer. Here is a gif of what I have so far: http://goo.gl/lbEsLS What i want to do is have those arrows fadein _after_ the box in the middle slides in. But as you see in the gif, the arrows start fading in almost as soon as the boxes start sliding left right. I am doing the following : function moveBoxes(){ //animate x,y position using spring(500,90,500) utils.delay(9000, fadeinArrows()) //change opacity in 300ms in this function } This should give plenty time between the boxes sliding into position and executing the function to fade the arrows no? Not sure whats going on here.
2

April 25

Propeller Katapulsky
hello nice people out there! framer is wonderful! i exported a project with framerps.jsx out of photoshop. now i have the question: how i can add an extra textview in app.js? also i can not find any documentation about textvies in general. i would be glad if someone could help me out. have a nice day!
5
Jagadeesh K Hari
framer is the best thing i discovered recently. Thanks for sharing it with all. One question, is it possible to make interactions touch sensitive..? I am imagining running a demo using iPhone.
1
Ale Muñoz
I've just spent 5 minutes playing with this https://github.com/tisho/framer-templates and I am amazed. Tisho Georgiev, you are *the* man :D
4

April 26

Koen Bok
Some people asked me how I use Framer with auto refresh so you get immediate visual feedback. Surely I use my own Cactus for that :-) I just added a template for Framer projects for Cactus. You can find it on the Github page below. Then just "File > New", "Open Existing..." and select the Framer template. It supports both Javascript and Coffee Script. This one is bare bones, I'll also try to add one that support importing a Photoshop/Sketch based project in the near future. https://github.com/koenbok/CactusTemplatesExtras PS. This works great on mobile too.
7

April 28

Cemre Güngör
Ever had trouble visualizing the spring coefficients? I made this quick example to understand how velocity and tension work.
6
Cemre Güngör
I want to define tap events on 5 different views in a loop. When I'm doing view.on(Events.TouchEnd, function(e) { ... }); how can I access the tapped view inside the function? e.target gives me the div in the DOM, not the framer view. It also gives the child-most element, not necessarily what I defined the event on?
27
Tisho Georgiev
Here's something that might be interesting to those of you experimenting with animations in Framer. https://github.com/tisho/framer-animation-controls A while ago I was making a prototype for a flow that included quite a few steps. Tweaking animations in the later steps of the flow always seemed like a hassle, because it meant that every time I reloaded, I had to go through the whole flow again, just to see the results of the change I made. I wanted a way to tweak animation parameters and see my changes reflected immediately, without reloading. To do that, I used a combination of dat.GUI (a lightweight JS controls UI), which is typically used in a lot of WebGL demos, and a custom animation class that automatically exposed a few of the animation's parameters for "live editing". Today, I dusted off that old code, made it usable with any Framer animation and put together a quick demo to share with the group. Let me know if you find this useful!
12
Gary Jacobs
Is there anyway to loop a function .onLoad in framer?
4

April 29

Gary Jacobs
Has anyone got any working examples of draggable UI that you can on { dragEnd (make the draggable UI keep going in the direction you dragged) } If that makes sense. Similar to how tweetbot lets you dismiss photo previews?
2
Mike Bulajewski
I'm building a prototype with Framer where I need several ScrollingViews nested in a PagingView. This works as expected on desktop browsers: I can swipe horizontally between pages, and scroll vertically on each using the trackpad. But on mobile touch browsers, scrolling doesn't work. Here's some sample code illustrating the problem: http://codepen.io/mbulaj/pen/vsiyC/ Anyone have any advice of how to make this work correctly? Thanks!
2
Propeller Katapulsky
i am trying to read out all names of the views in my project but it won´t work. can anybody push me into the right direction? function readOutAllViewNamesAndAddSomething() { for (var a=0; a<views.length;a++) { currentView = views.getByName(views[a].name); result = result + views[a].name + " something" + "\n"; } return result; }
1
William Hutter
Hi guys! I'm trying to make a view animate while dragging its parent element, but the animated view is shaking while it's dragged and does look smooth. How can I prevent this ? parentView.on(Events.DragMove, function() { parentView.x = 0; parentViewOffset = Math.abs(parentView.y) view.animate({ properties: {y: parentViewOffset}, time: 200 }); });
1
Goran Bajazetov
Probably really newbie question, sorry guys! How do you triger events on load? I've tried something like this... http://d.pr/i/mUye Thanks so much!
3

April 30

Florian Pnn
I got an error while using the animation.on('end",...) that looks like : "Uncaught TypeError: Cannot read property 'apply' of undefined" Any idea where that can comes from?
8
Jess Eddy
Hey Everyone, so excited to part of the group! I was first wondering if there's anyone in New York that is skilled at Framerjs. I'd like to learn and am willing to pay for lessons to help accelerate the process. Secondly, I'm using the Sketch plugin to export to Framer. When I do, my index.html file is blank. From the tutorials I've watched (using .PSD examples) this is not the case. I'm wondering if there's an error on my part or if someone has experienced the same issue. Thanks!
11

Monthly archives

2017

2016

2015

2014

2013