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 "Always" behavior and "onalways" View property.
https://gist.github.com/subtleGradient/6445897#file-do-behavior-framer-js

Example:

Scale a view and set its opacity as you move your mouse. Top of the screen is scale 0, bottom is scale 1, and everything in between. Left is transparent, right is opaque.

myAwesomeView.onalways = "opacity=Pointer.y/document.height"
myAwesomeView.onalways += "scale=Pointer.x/document.width"

Photoshop Layer Name Example:

"My Awesome View `opacity=Pointer.y/document.height; scale=Pointer.x/document.width`"

Note: Use backticks "`"

Pointer is a separate behavior. To use it, simply name a layer "Pointer" and it'll be your mouse pointer.

TODO: Touch support

2 Comments

Thomas Aylott

Rotate depending on the Pointer position

myView.onalways += "rotationX=(Pointer.x/document.width)*90"
myView.onalways += "rotationY=(Pointer.y/document.height)*90"

Thomas Aylott

Stay centered on screen

myView.onalways += "x=document.width/2-width/2"
myView.onalways += "y=document.height/2-height/2"

Read the entire post on Facebook