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

What is Framer? Join the Community
Return to index
Craig Murray
Posted Nov 12 - Read on Facebook

Trying to rotate my view (picRef) counter clockwise by 90 degress on the Z axis each time turnLeft_BTN is clicked:

cycler = utils.cycle(-90, -180, -270, 180);

turnLeft_BTN.style.cursor = "pointer";
turnLeft_BTN.on("click", function() {

// get the next position value to rotate to
var nextRotate = cycler();

picRef.animate({
properties: {rotationZ:nextRotate},
time: 8000,
curve: "spring(220,20,1600)",
});
})

How do I get the last value in that sequence to be equal to what picRef was before turnLeft_BTN was ever clicked?

5 Comments

Koen Bok

cycler = utils.cycle(-90, -180, -270, turnLeft_BTN.rotationZ);

Craig Murray

picRef still freaks out when the last variable in that string is reached.

If you paste the following code into the framer editor - you can demo and see what I'm referencing:
================================
var picRef = new View({
x:100,
y:100,
width:400,
height:300,

});

var turnLeft_BTN = new View({
x:4,
y:4,
width:50,
height:50,

});
// setup button event for rotate left
cycler = utils.cycle(-90, -180, -270, picRef.rotationZ);
turnLeft_BTN.style.cursor = "pointer";
turnLeft_BTN.on("click", function() {

// get the next position value to rotate to
var nextRotate = cycler();

picRef.animate({
properties: {rotationZ:nextRotate},
time: 8000,
curve: "spring(220,20,1600)",
});
})
================================

The first full rotation goes haywire after you hit the button 4 times. After that - picRef rotates to the left counter clockwise smoothly.

Anyways I can smooth this out?

Aaron Carámbula

First, I see you have a time set for the spring. Springs ignore time, fyi. I say that because it's set to 8000 and I think you're meaning to slow it down to understand what's happening.

If that's the case, hot tip: Holding shift when firing actions will slow motion the animations for debugging.

Once you do that you see it's rotating back to the original position, which is 0, and it does that clockwise because it's a greater value than the -270 (right Koen?). So you need to rotate to -360.

That however breaks going to -90. What you need to do is translate the rotationZ to a positive number in an instant when it's at -270.

Gist for you: https://gist.github.com/carambula/7387609

This breaks with lots of fast clicks; the cycler gets ahead of the rotating view, which sets itself to a positive rotation when past -270.

To really do this 'right' you'd have to keep track of the clicks independent of the rotation and queue them up, then whenever there is a rotation in the queue, spin the view. Or fail the click if it's getting ahead of itself, before cycling.

Craig Murray

Thanks, Aaron Carámbula ... makes sense. I appreciate the help.

Aaron Carámbula

anytime, you found an interesting behavior, I hope I helped you work around it.

Read the entire post on Facebook