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

What is Framer? Join the Community
Return to index
Rob Jones
Posted Jun 13 - Read on Facebook

I was porting Andreas Wahlström's "Paper Flip" Codepen to Javascript and realized that locally , when I dragged the "cover" up, it was not rotating "straight up", but was "skewed". I messed with this a while, then I realized that even the *original* pen did this when viewed " full screen. Any ideas? I'm sure it's related to the Xrotation, but I'm confused! http://codepen.io/aw2/pen/kjHAt

17 Comments

Koen Bok

Yes. You want to look into originX, originY or even the css property https://developer.mozilla.org/en-US/docs/Web/CSS/perspective-origin

Rob Jones

yes, I bet it's related to the fact that in the "preview" on codepen, it's near the center of the frame. When full screen, it's not.

Rob Jones

This fixed it:

#FramerRoot {
-webkit-perspective-origin: 250px 280px;
}

Rob Jones

Just had to manually computer the center of the framer div, and set up persepctive origin to those x,y values

Rob Jones

Another issue I'm having is the computed variables don't seem to be being applied to the styles. I'm sure this is a JS vs Coffeescript syntax issue...

Johannes Eckert

yes, that's coffeescript syntax. in JS, you need to end the string and add the value with +

"shadow: "+value+"px"

Rob Jones

<facepalm> Thanks... I *knew* that. Just psyching myself out by making things seem more difficult than they are :P

Johannes Eckert

why are you doing this back-translate anyways?

Johannes Eckert

couldn't you just look at the compiled preview in codepen?

Rob Jones

I am teaching a class where I work for the other designers and want to stay in JS

Rob Jones

Nice tip on the compiled preview in Codepen

Rafael Rinaldi

Thumbs up for Bill Murray.

Rob Jones

I have the "Pen" working the way I like in JS now (perspective bug fixed):

http://codepen.io/sugarfreejones/pen/gqron

What would be cool is if the book could fully open (or close) based on the drag distance (so you don't have to drag it all the way open).

It's simple enough to add a DragEnd event handler, but since there's no object being dragged directly (and all the animation is handled by the drag event itself), I don't see how to continue the animation after the drag is over.

Any ideas?

Rob Jones

It's almost like we want to virtually continue the drag if they have not dragged far enough...

Johannes Eckert

You have to check if they dragged "far enough" by comparing the position on dragEnd with the position on DragStart. Then you either set all the values to min (o, closed) or the maximum rotation (180, opened)

Johannes Eckert

And to change the values use c.animate so it will animate and move without the mouse interaction

Rob Jones

Got it... the trick DragStart was the key. I was trying to record the start position on DragMove and it kept gettin overwritten <derp>

Read the entire post on Facebook