koenbok / framer Goto Github PK

Framer can't generate keyframes if the time is smaller then 2 * (precision/1000)

Can't find a clear answer for this question on your website. Thanks!

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

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!

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.

Currently this works with javascript timers. The performance will likely be a lot better with keyframe animations.

https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations#Defining_the_animation_sequence_using_keyframes

I'd like to create something that depends on Framer.

Download from the Framer landing page. Get this error repeatedly.

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.

I am interested in running the framer app on Windows. Is this possible?

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!

in Framer2, Layer.name was also reflected in the DOM so layers could be easily identified when inspecting elements.

It looks like the DOM name doesn't appear anymore

Screenshot from a Framer2 prototype:

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() {...});

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?

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

This would be a handy shortcut to reverse an animation without having to set up a new one by hand.

• Reverse or revert?
• Should it also inverse the animation curve?

Example:

zoomIn = view.animate({
    properties: {x: 100}
})

zoomOut = zoomIn.reverse()
zoomOut.start()

Can't seem to run Framer. Shows some kind of syntax error message.

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();

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

I'd love to be able to animate box-shadow, border-radius, etc.

If you rotate a view 180 degrees it dissapears.

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.

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.

Demonstrated here:
http://codepen.io/cemre/pen/Ayija

Scenario:

• I have a view Buttons with subviews Button1, Button2, Button3
• I use .copy() to clone Buttons

Expected:

• Buttons has two children, clones of Button1, Button2, Button3

Actual:

• Buttons has six children, the original subviews Button1, Button2, Button3, as well as their clones. The clones don't have their names cloned.

We should make it stick around after your animation is done so the next animation will re-use it.

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

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.

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()
})

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?

• Add something like shouldDragMove(old, new) where you can avoid a drag if beyond bounds
• Maybe add something like a maxDragArea with optional resistance
• Add a way to make .stopPropagate() work on DragMove so you can have a slider in a panel for example

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);

Alert informs WebKit is required.

Steps to reproduce

Visit framerjs website via tweetbot on iPhone (iPhone 4, iOS 6)

Expected result

Either have access to site or get iPhone specific warning.

Actual result

Warning appears with generic WebKit required message.

On some windows machine, it might throw both events.

https://twitter.com/amenthes_de/status/466539234594406400

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.

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)

For some reason opacity animations won't stop when you tell them to.

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?

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/...

view.animate({properties: {scale: 0}, time: 300});

"Animation[56] Warning: nothing to animate".

scale: 0.01 does animate.

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.

Image -> Trim -> Top and Left are set off.

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.

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"

When I switch between states, I get a bouncy animation instead of the default one I defined with Framer.Defaults.Animation

Just filing a request for illustrator CS6 support.

It would be great if Framer could recognise art boards and layers within illustrator.

Cheers,
Steve

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;

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.