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

What is Framer? Join the Community
Return to index

November 2013

November 01

Eugene Kudashev
Hey guys. This is a small start, yet it's a start. Love Framer, although it took me a bit more time to put it all together compared to, say, AfterEffects. http://eugenekudashev.com/imessage_concept/ — click the link in the last message, then proceed to Instagram
4
Taylor Rogalski
Hey all - has anyone been able to resolve performance of prototypes on Android? Chrome on my HTC One is pretty abysmal.
4

November 02

Johannes Eckert
I have a problem with mutliple animations and when they end: It seems that when two animations are running simultaneously, the first one ending (with the shortest timing) will end the other running one, too. I also discovered similar behaviour when listening to .on("end") on one of the animations and starting another animation. I am using framer v2.0.0b1-14-g2870f60 (the special one I got from Koen's examples for paginated dragging). I couldn't update to the latest framer because this version has the _calculateVelocity
2
Florian Pnn
Hey Guys, I have a problem with animation, sometimes the end of the animation is not the one I expect. For example the an animation to change opacity to 1 sometimes stop at random number. Is that a problem of performance? Happens a lot on mobile device.
2
Carri Craver
Hi All - I'm much more of a designer, than developer. If I wanted to do something like PSD["GroupName"].xxx but I am using sketch instead of photoshop, how would I reference the section? I tried putting Sketch in place of PSD. That didn't work. Any help is greatly appreciated.
4
Cemre Güngör
Hey! Wrote about our experience prototyping Potluck's new transitions with Framer and implementing them with Angular.
4

November 03

Dominique Briggs
Has any delivered or knows of production level apps built with Framer?
8
Koen Bok
Beta Framer App for Sketch. I have a very early version of the Framer app that supports both Photoshop and Sketch. Thanks to @bomberstudios, Cemre and Pieter for their code. If you use Sketch with Framer please help me test this a bit before I release it publicly. I'll post app updates here. http://cl.ly/2U2T172X2L2Q
10

November 05

Koen Bok
For all windows users, I added a direct download link to the jsx and some explanation in the faq. Enjoy.
0
David Phillips
Is it feasible to have a version of the Framer App that supports Illustrator? I've tried a bit messing around with exporting PSDs from Illustrator, but it looks a bit messy...
5
Johannes Eckert
btw a fadeout transition would be super helpful. I always end up having to animate opacity and after it ends make sure to also set .visible = false. is there a trick doing this in one step?
4

November 06

Craig Murray
I'd like to store original values for all properties (opacity, rotation etc.) much like Cemre Güngör suggested with position. My goal is to later revert to these original values after an event fires. However, I have no idea how to capture that to call on later. Any ideas? Thanks much.
4

November 08

Bobby Smith
I'm not much of a developer, I just make my way around js just 'o.k.'. that being said, I'm trying to see if there is a way to run a function after the animation is complete.
2

November 11

Eugene Kudashev
Hey guys. I've made an animated prototype in After Effects recently, and now I'm wondering how I would've created it in Framer. Here is the animation: https://vimeo.com/79058936 The thing I'm mostly concerned with is how I would create the rapid motion-blurred scrolling. Regarding the scrolling itself, I guess I have to imitate y-axis change with JS—is that right, Koen? Now, I have no idea which way to go with the blurring thing. Any ideas?
9

November 12

Craig Murray
Trying to rotate my view (picRef) counter clockwise by 90 degress on the Z axis each time turnLeft_BTN is clicked: cycler = utils.cycle(-90, -180, -270, 180); turnLeft_BTN.style.cursor = "pointer"; turnLeft_BTN.on("click", function() { // get the next position value to rotate to var nextRotate = cycler(); picRef.animate({ properties: {rotationZ:nextRotate}, time: 8000, curve: "spring(220,20,1600)", }); }) How do I get the last value in that sequence to be equal to what picRef was before turnLeft_BTN was ever clicked?
5
Aaron Carámbula
I've started making more lessons for Framer's myriad features. With any code, there's never one way to do things so I'm trying to show not only what a feature does but a few ways to implement it. The two that I found most informative so far are convertPoint and cycle. Take a look and give me some feedback on how these help and might be improved: - cycle: http://codepen.io/carambula/pen/izobl ( gist: https://gist.github.com/carambula/7382970 ) - convertPoint: http://codepen.io/carambula/pen/jqlyK (gist: https://gist.github.com/carambula/7387438 ) Edit: - style: http://codepen.io/carambula/pen/qnKJm - view/navigation controller: http://codepen.io/carambula/pen/DlJvK
22

November 13

Fredrik Ampler
Sketch question: can't get the export to work - it just opens an empty checkerboard page (index.html). It that because I just copied the "Export to Framer.jstalk" file to Sketch's plugin folder? I tried following the instructions on the Github page, but the terminal command to clone the repository ("git clone [email protected]:bomberstudios/sketch-framer.git") returned Permission denied. Instead I just downloaded the zip from Github, and copied the "Export to Framer.jstalk" file into Sketch's plugin folder. That part seems to work, the menu item appears in Sketch. What am I missing?
12
Jeremie Michaels Lim
Hey guys! Any tips on how to skew? I'm trying to emulate this 3d interaction with framer
4
Koen Bok
A few of us started using CodePen to make quick examples for each other the last week or so. You can find a nice overview here: http://codepen.io/tag/framer There are only a handful now, but that should change quickly. If you make an example you can fork the starter template that Aaron made: http://codepen.io/carambula/pen/haIlf. Please remember to add the framer tag to it. I also added these links to the Framer site under examples: http://www.framerjs.com/examples/index.html#codepen
0
Jonas Kamber
Framer looks like a great tool for prototyping. But right now I have a problem with a vector mask. I think I did exactly the same like Koen Bok in his "Framer Introduction" video, but my result looks strange. I tried to rasterize the type layer, but it didn't work. What am I doing wrong?
5
Bobby Smith
is this limited to webkit only? my client is using firefox and says she's getting only the checkerboard pattern.
2

November 14

Gabriel Lovato
Hello everyone, I'm trying to fire an animation when a view becomes visible after scrolling it's parent scrollView. Here's the code : http://codepen.io/gabrielhl/pen/iJLeg In the example I "cheated" by starting the animation when the scrollView reaches a specific position, but I'd like to make this dependent on the child view and not the scrollView (so I can do it for any view that comes into my "viewport"). Is it possible? Thanks!
3

November 15

Tom Jenkins
I'm trying to get the equivalent to 'mouseout' for a Framer project. Tried including mobile jquery 'vmouseout' with no success so far. Any plans to support 'touchout' in Framer? Any other suggested solutions? Thanks
6
Koen Bok
Now I'm working on the Framer app for Sketch I can do a quick UI update too. On one hand I think it would be better as a menu item, but on the other hand I feel like every other app today is a menu item. What do you guys think? Thomas Miller made a mock of how it could look as a menu item:
20
Craig Murray
Hey guys: I'm looking to do a similar (parallax-like view swipe) effect on a set of images, much like Yahoo weather's app. I found this script: http://stereobit.github.io/dragend/demos/yahoo-swipe/ I was wondering if it's possible to pull something like this off using Framer exclusively?
8
Fredrik Ampler
Great stuff! What's an easy way to implement a simple parallax effect, e.g moving an imageView at a different scroll speed? E.g like yahoo's weather app. I haven't been able to figure out the scrollFrame attribute (?), if that has anything to do with it?
15

November 16

Fredrik Ampler
Hi! Is thre a simple way to define View type in Sketch? I can't create a scrollView orher than manually in the code.
3

November 18

Koen Bok
Made a small example of something I saw on Dribble. It's a deck of cards where you can pull the top card to see the rest of the stack. If you release beyond a certain distance the card flies offscreen. http://codepen.io/koenbok/pen/Lotci
7

November 19

Koen Bok
Did you know you could re-use Framer animations on any website? Today we shipped a small app that has a nice bouncy animation on the site. A few people asked me how to make these yourself. It's easy: just create an animation in Framer and copy the css keyframes. Example: http://glueprintapp.com Codepen: http://codepen.io/koenbok/pen/FqEsi Docs: http://www.framerjs.com/advanced/index.html#keyframes
1

November 20

Craig Murray
The scroll behavior in https://ultravisual.com/ is soo nice. Any pointers on how to replicate using Framer?
1

November 21

Cemre Güngör
I got some inside info from Codepen folks about how to customize the viewer when you're giving out links. http://codepen.io/koenbok/pen/FqEsi/left?editors=001 When you use this syntax, you get JS editor on left, preview on right, and HTML/CSS hidden :)
3
Craig Murray
Anyone else having issues implementing any of the custom easings off of http://easings.net/ ? I've tried a few and nothing feels that nice inside of my framer prototype. I'm resorting to Springs for 'softer' ease-ins because it's all I've had luck with.
5
Ester Serrano
Hi all. Congrats for the tool, it's pretty amazing. Discussing about it with some colleagues we thought that being able to export SVGs from Sketch and editing them through code could be a pretty nice functionality. That would allow animations that include change of color or shape, for example. Did you think about it?
3
Koen Bok
Small example after the Tumblr animation that Alex Carpenter posted today on designer news: http://codepen.io/alexcarpenter/details/JKhcv http://codepen.io/koenbok/pen/uAEhe?editors=001 I also found a nice Facebook home-ish animation by Tim Gale http://codepen.io/timgale/pen/pEJeA?editors=001
1

November 22

Koen Bok
About to add a TextView that can calculate text sizes. So you can for example create text bubbles for a chat app: http://codepen.io/koenbok/pen/xroCm?editors=001
3

November 24

Fredrik Ampler
how can I move the scrollposition of a scrollView? This example is not doing it, can it not be set?; scrollView.scrollFrame.y = 1700;
4
Anne Doncaster
Hi Koen Bok, I have sent you an email about this but thought I might be able to get a quicker response using the group. I hope you don't mind me asking, but I wondered if there was anyway of having a copy of the Facebook Android PSD you use in your overview video? I am planning to go through this exercise with some students tomorrow and it would be really very useful to have this to hand. Many thanks in advance and for all your help so far.
2
Daan van Klinken
How to bring a Sketch-view on top of a “new” view? I am making a prototype with exported views from Sketch, then I drew a new view (“Circle”) in app.js on top of the views from Sketch. Now I want to bring one view from Sketch (“PSD.Delete”) on top of the view I drew (“Circle”) in app.js. I tried bringToFront(), changing the Z-index of both views, but couldn’t get it to work. Example: http://framer.daanvanklinken.nl/NotificationCenter/
7

November 25

Cemre Güngör
We have an update to Sketch-Framer! You can now export hidden layers, which become hidden in Framer after being exported. Just append & at the end of the layer name. Works well for maintaining different states in your mock. https://github.com/bomberstudios/sketch-framer/
7
Masato Miura
Hi everyone, Huge fan of framer.js from Japan. Such a great project =) Currently I'm stucked and wondering if I can get little help here. I'm new to JS but would love use Hammer.js with framer.js to provide proper swipe detection. Here is what I'm working on for android mobile device: https://dl.dropboxusercontent.com/u/186855/dm_framer/index.html Now, when you hover left sidebar, menu will appear. After that, if you hover right sidebar, menu will disappear. I'm trying to replace left sidebar hover to swipe-right, and right sidebar hover to swipe-left by using hammer.js. Any suggestions by any chance? Your advice would be really appreciated.
2

November 26

Fran Pérez
This is driving me crazy: I have a simple loop animation triggered by a toggle action, so click it would start the loop and click it again would stop it. My problem is that I can't figure out how to stop the loop… any ideas?
8
Craig Murray
Anyone figure out how to combat the delay on touch for mobile prototyping? I'm noticing an ever so subtle delay on my iPhone (using Clear Browser for fullscreen app simulation).
14
Craig Murray
Just taught a crash course on the basics of Framer to our team. Couldn't have done it without all your help and support over the last month. This community kicks butt.
2

November 27

Miki Setlur
I'm prototyping some mobile composition interactions (add text, insert photo in a scroll view). Any advice on how to approach the insertion and reflowing?
1
Jorn van Dijk
Here's a fun thing I made with Koen the other day to show what the 3 spring values do. You can click or drag and drop the boxes to see how they move back into place. http://framer-spring.s3-website-us-east-1.amazonaws.com And here are the files for you to play with: http://cl.ly/ShK0
0

November 28

Aaron Carámbula
Minor performance tip: mobile safari performs "touchend" instantly on a touch release and "click" events on a slight delay. If you want a native feel, go for touchend. If you have other tips, or a better hack for this, please share!
7
Kristian Andersen
Right now i'm just playing around, getting to learn Framer. but what if a client fall in love with the prototype? How do i take that Prototype to production, or how du you guys do it? can i reuse any code from my project, do i have to do it all from scratch, Any tips/tricks to recomende! regardes Kristian Andersen
0

Monthly archives

2017

2016

2015

2014

2013