koenbok / framer Goto Github PK
View Code? Open in Web Editor NEWFramer - Design Everything
Home Page: https://framer.com
License: MIT License
Framer - Design Everything
Home Page: https://framer.com
License: MIT License
Image -> Trim -> Top and Left are set off.
When I switch between states, I get a bouncy animation instead of the default one I defined with Framer.Defaults.Animation
Framer seems to require Photoshop 13.0 or later (CS6). Many of us are running older versions of Photoshop, and Creative Suite, still. I assume it would be complicated to support older Photoshop versions but could you list the requirements on the website as well as GitHub?
I'm inserting Framer into some other web content, and the way that div ids are defined is problematic for detection within css.
I've fixed this on my own copy of framer.js with just changing how the id is defined by adding "framer-" to the beginning. I've also added a function to define to get and set the id and the element id to the supplied value:
View.define("viewId", {
get: function() {
return this.id;
},
set: function(value) {
this.id = value;
this._element.id = value;
return this._element.setAttribute("id", this.id);
}
});
I would add this to source and push it to my fork, but I am having some whitespace issues and just coffeescript in general, plus, I'm not sure what the effects of this down the line might be, thought I'd post it here before doing anything like that.
I'm trying to create a new layer that contains a canvas element:
htmlLayer.html = '<canvas id="threeCanvas></canvas>'
And then attach a Three.js instance to that canvas.
var canvas = document.getElementById("threeCanvas");
var renderer = new THREE.WebGLRenderer({ canvas: canvas });
However, I'm getting the error Uncaught TypeError: Cannot read property 'width' of null
from Three.js. I'm thinking this is because the DOM element has not yet been created by Framer. Is there any way to call my Three.js code after Framer has initialized all of the DOM structure? Anyone had luck with this?
So you can modify the order. Behind the scenes this should just work with z-index.
Functions:
View.placeIndex
View.placeBefore(view)
View.placeBehind(view)
Hi,
The included example produces the following error on Firefox 17.0.1 / Mac OS X 10.8.2:
WebKitCSSMatrix is not defined
Only gets empty page with the pattern background.
good luck.
This would be a handy shortcut to reverse an animation without having to set up a new one by hand.
Example:
zoomIn = view.animate({
properties: {x: 100}
})
zoomOut = zoomIn.reverse()
zoomOut.start()
The CodePen examples seem to link to either of these resources, which are both 404s now:
http://framerjs.com/static/js/framer.js
https://rawgit.com/koenbok/Framer/master/build/framer.js
I understand it's hard to find these CodePen authors to update their code, but if the pens can't be updated, then they should be removed from the website. It was quite the letdown to hear about v3, going straight to the examples, and getting nothing.
I am interested in running the framer app on Windows. Is this possible?
I'm trying to generate simple psd files that I created on the spot.
The app shouts an error code at me
"syntax error: Expected end of line but found indentifier ~2741"
On some windows machine, it might throw both events.
Would it be posible to add top, bottom, left, right
params for element to allow for easier fluid layouts. Similar to how Appcelerator's Titanium does it?
example:
var view = Titanium.UI.createView({
borderRadius:10,
top: 10,
left: 10,
bottom: 10,
right: 10,
backgroundColor:'red'
});
window.add(view);
Finishing a big project using framer and must say this project is amazing. I'm hoping to do a presentation on it at a local Meetup in the near future.
Issue:
I noticed that when there is white space in the end and maybe beginning of a PSD's folder name it causes an issue.
If you remove the whitespace from the folder name, and re-run Framer, it doesn't recognize the change and leaves the white space in the view's name.
I'd like to create something that depends on Framer.
Demonstrated here:
http://codepen.io/cemre/pen/Ayija
Scenario:
Expected:
Actual:
Hi,
I tried to upgrade my framer.js to the last one and it appear that when I duplicate a view a -webkit-filter is applied and give me a grey image instead of my previous image.
Let me know if you want a link to download and try the prototype to find the problem (can't upload it publicly)
Cheers,
Florian.
Edit : and the master is the one used by @bomberstudios for Framer-Sketch, so it's a bit annoying
Just filing a request for illustrator CS6 support.
It would be great if Framer could recognise art boards and layers within illustrator.
Cheers,
Steve
In this example, framer3 will ignore the time
property and default to 1 second.
layerC = new Layer width: 80, height: 80, x: 200, backgroundColor: "orange"
layerC.animate
properties:
y: 300
time: 5
curve: "cubic-bezier"
curveOptions: "ease-out"
Downloaded Framer, ran it locally, pointed mobile Safari to it, runs great on mobile Safari.
The problem arises when I then tap the Share icon in mobile Safari and choose "Add to Home Screen". When I run the app from its new Home Screen icon, it throws the "only WebKit browsers are currently supported" error.
Dismissing the error, the app seems to work fine, but the error is pretty annoying to have on every page load.
I always try to run prototypes from a Home Screen icon to eliminate the mobile Safari browser chrome, which is otherwise in the way.
I noticed .gitignore lists node_modules and there's no package.json file or similar. By fiddling around a bit I discovered browserify is required, but this won't compile coffeescript since v2.0. Any change of listing dependencies of Framer so I can build a version of my own?
thanks!
Example of color overlays: I'm working on a prototype in it's wireframe stage and want to pulsate which areas are clickable. Having it pulsate to a little nice color, without having to add any complexity — like views on top of it — would be nice.
Keep getting this error. I even started a brand new project with 2 groups and 1 layer in each. The first time I ran it I only had 1 group with one layer. It worked! As soon as I added the second group, it gave me a similar error with the same line number 14375.
- The object “ <unknown> of layer 4” is not currently available.
Line: 14375
-> return executeActionGet(ref).getObjectValue(stringIDToTypeID("metadata"));
There is a different behavior between Framer2 and Framer3 on the animation creation.
In my current prototype I'm creating animation without initial view and assign them later, as they will change based on user behavior.
Framer3 act differently and return an error when I do that.
Here is a simple example to get the error :
basicLayer = new Layer({ x:0, y:0, width:300, height:300 });
movingLayer = new Animation({
properties: { x:20, y:20 },
curve : 'spring(1000,30,50)',
time: 200
})
movingLayer.layer = basicLayer;
movingLayer.start();
Can't find a clear answer for this question on your website. Thanks!
I'm creating this issue as a place to discuss the best approach to add SVG support in Framer (if it makes sense, that is).
I don't know how easy it is to export SVG files from Photoshop, but generating SVG instead of PNG/JPG is trivial in Sketch, so adding SVG support makes a lot of sense for Sketch Framer users.
Your opinions?
Currently this works with javascript timers. The performance will likely be a lot better with keyframe animations.
Hey Koen,
I'm trying to set a classname for a view, but it doesn't seem to be working.
The doc says:
You can also set a css class on a view by doing view.class = "myClass". This way you can >use an external css file for styling.
...but I can't see the property in the view table on www.framerjs.com
I couldn't find a way to request the browser height or width in Framer. I wanted to do this so that I could run my Framer prototypes on both 3.5" and 4" screens.
My workaround was to include jquery in to my index.html and request using .height()
viewportY = $(window).height();
I am using this to make a sticky footer work like this
PSD.footer.y = viewportY - PSD.footer.height;
http://cl.ly/image/0L3a1n2p1c05
There are wrong links to documentation in app.js. I suppose should be http://framerjs.com/... instead http://framer.com/...
If there's a delay applied to an animation, it'd be nice to have events fired for both when the animation is triggered and when it actually starts animating.
I'd love to be able to animate box-shadow, border-radius, etc.
Adobe just announced Generator today. http://blogs.adobe.com/photoshopdotcom/2013/09/introducing-adobe-generator-for-photoshop-cc.html
"Generator is based on the popular Node.js platform and plug-ins can be written in JavaScript. Generator plug-ins give you deep access to your Photoshop documents, including bitmap representations, layer bounds, and much more. "
Here's the source code for Generator.
https://github.com/adobe-photoshop/
I haven't looked at it too closely yet, but this is exciting!
When testing on a computer, events are extremely responsive and fire animations immediately. When I test on a touch device the animations are delayed by a few hundred milliseconds. Is there a workaround for this?
PSD.object.on("click", function() {...});
view.animate({properties: {scale: 0}, time: 300});
"Animation[56] Warning: nothing to animate".
scale: 0.01 does animate.
Based on knowing before and after properties (especially makes sense with states) and an input and its range of values (ex. a draggable layer's y position), it should be possible to set the layer's properties to an appropriately scaled in between state. This'd make it easy for users to set up interactive draggable transitions by just calling this function within a dragmove
event. This is similar to what can be done manually with Utils.mapRange
and I'm not sure what the right approach is for how much more this should be built into Framer, but it seems like it's a popular use case that could be made easier.
Doesn't seem like backgroundColor changes when set in states. Maybe this is expected behavior?
box = new Layer({backgroundColor: "blue"})
box.states.add({
second: {backgroundColor: "red", y: 20}
})
box.on(Events.Click, function() {
box.states.next()
})
For some reason opacity animations won't stop when you tell them to.
Sub layers doesn't seem to be positioned after their superview's coordinates. Also, can't seem to get clip to work. Here's an example:
super = new Layer
width: 250
height: 300
midX: 200
clip: true
sub = new Layer
y: super.maxY-20
height: 100
width: super.width
superView: super
Framer can't generate keyframes if the time is smaller then 2 * (precision/1000)
If you rotate a view 180 degrees it dissapears.
We should make it stick around after your animation is done so the next animation will re-use it.
It would be nice to have a parameter to accept delays in Animation
Class, that would set the animation-delay
CSS property.
Right now delays can be done with delay or SetTimeout function . But things can get worse when there are many animations with delays.
If it makes sense, would be happy to send a PR
If you try to stop an animation that is not active you can get this JS error :
Uncaught TypeError: Cannot read property 'stop' of undefined
I got it while trying to stop an animation in a DragMove event if that help you solve it.
Can't seem to run Framer. Shows some kind of syntax error message.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.