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

What is Framer? Join the Community
Return to index
Thomas Aylott
Posted Sep 05 - Read on Facebook

NEW Behavior Sheets for FramerJS
https://gist.github.com/subtleGradient/6445897

Very simple system to apply pre-defined behaviors to your Framer views simply by changing the name of your Photoshop layers.

The included example behavior shows a layer when it's hovered for all layers whose names begin with "Hover".

cc Christine Røde

22 Comments

Thomas Aylott

Inspired by: http://miekd.com/articles/classname-like-naming-in-framer/
And the MooTools Behavior Sheets system from Cloudera.

Christine Røde

This. Is. Awesome.

Maykel Loomans

WHAT.

Maykel Loomans

THIS IS A THING?!: Object.keys(PSD).forEach

Thomas Aylott

Yeah, epic right?!

Thomas Aylott

I don't even use MooTools anymore. All the best stuff has gotten into JavaScript itself in decent browsers. Just don't try it in IE6 ;)

Aaron Carámbula

YOU HAVE OBVIOUSLY INCEPTED ME.

Maykel Loomans

Time to start building a framertools include

Thomas Aylott

Now I'm trying to figure out the best way for one layer to control some other random layer.

Maykel Loomans

Thomas: Some kind of targeting mechanism?

Thomas Aylott

Yeah, something like "My Awesome Layer {onclick Hide Some Other Layer}"

Thomas Aylott

I was originally planning to use layer comps, but there's no reason why we can't have both.

Maykel Loomans

PhotoView onHover-fnName-target

Thomas Aylott

#worksForMe
/me goes to make that work…

Thomas Aylott

cc Christine Røde
Now if you rename your layer to "WhereContainer onClick-Toggle-Options_location", clicking on it will toggle the opacity of the Options_location layer.

Aaron Carámbula

He's on fire! also, most fun line of code to read:
Behavior.behaviors[behaviorName](PSD[targetName], targetName)

Christine Røde

Brilliant. I love watching my code get shorter and shorter! (more efficient)

Thomas Aylott

NEW "Do" Behavior
Keep your JS in Photoshop and write a lot less of it
https://gist.github.com/subtleGradient/6445897#file-do-behavior-framer-js

Thomas Aylott

NEW onAlways virtual event for the OnWhatever behavior
This event fires up to 60 times a second. Don't abuse it.

Thomas Aylott

NEW Pointer Behavior
Keep a layer stuck to your mouse (without killing browser performance).
https://gist.github.com/subtleGradient/6445897#file-pointer-framer-js

Maykel Loomans

Thomas 'NEW!' Aylott

Read the entire post on Facebook