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

What is Framer? Join the Community
Return to index
Leslie Liu
Posted Jul 02 - Read on Facebook

Hi, Guys,
I have a question about subLayers.
How could I make each subLayer to move to the same default position by click and go back to their original position by click again?
:)
http://share.framerjs.com/zmwwb51mbh8v/

18 Comments

Leslie Liu

for child, i in main.group.subLayers
small = true
child.on Events.Click, ->
if !small
this.animate
properties:
scale: 1
x: this.originX #doesn't work
y: this.originY #doesn't work
time: .4
small = true
else
this.animate
properties:
scale: 1.5
x: 150
y: 100
time: .4
curve: "spring(100, 20, 10)"
small = false

Leslie Liu

It didn't work.

Chris Camargo

Why are you using originX and originY?

Leslie Liu

Chris Camargo I want each layer move to the same position(x:150, y:150) after I click, and back to their original x, y(layerA: x:10, y: 50, layerB: x:10, y: 100 ..layerC....layerD....) after click again.

Chris Camargo

I think I understand your intent, but have you read about originX and originY in the docs? Do you understand what they are for?

Leslie Liu

Chris Camargo omg! I used the wrong properties!!

Chris Camargo

I was trying to avoid *handing* Leslie the answer, and instead help her work through the logic, but if you'd wanna jump to the end of the book, feel free. :)

Alan Dickinson

Gotcha Chris -- didn't mean to get in the way of that!

Chris Camargo

No sweat. ;)

Leslie Liu

Alan Dickinson Chris Camargo Thank you both. It works. But where can I find the originalFrame property, I looked up the doc, it mentioned only screenFrame, contentFrame, and centerFrame. And what's the difference for I just write

x: this.frame.x
y: this.frame.y

why should it be child.originalFrame = child.frame instead of this.originalFrame = this.frame?

Alan Dickinson

It's actually not part of framer.js. I basically created a new property on the Layer object called originalFrame and assigned the current frame to it. That lets you reference the original x and y values like you see in the prototype.

Alan Dickinson

this.frame.x will always look at the current value for x

Leslie Liu

Alan Dickinson :D Thank you so much!!

Chris Camargo

Love the "originalFrame" approach. Great strategy.

Leslie Liu

inspired by the originalFrame approach
child.originalPoint = child.point works as well. :)

Alan Dickinson

:)

Jordan Robert Dobson

Yeah I saw originalFrame a month or two back and then realized... Duh. It's not a framer prop. Clever!

And that right there gives me an idea for something else I was working on today!

Read the entire post on Facebook