Cannot chain cheshire rotate events

[astanley]

When chaining 2 cheshire events together, only the second one is applied.

Expected results:

1. Rotate an image 90 degrees
2. Then start an infinite 360 rotation every minute, with the rotation starting from that initial 90 deg position.

Actual results:

1. The initial rotation (first cheshire in the following chained code snippet) seems to be ignored.
2. The 360 deg animation always starts from 0 degrees, instead of the rotated 90deg angle I had tried to initially set the object to.

Is the following code how one should be able to do this chaining event? If not, can you specify the correction?

How to reproduce:

var a = alice.init({workflow: true});

a.cheshire({
        "perspectiveOrigin": "bottom",
        "elems": ["orbit"],
        "rotate": 90,
        "overshoot": 0,
        "duration": "0ms",
        "timing": "linear",
        "iteration": "1",
        "direction": "reverse"
    }).delay(0)
        .cheshire({
        "perspectiveOrigin": "bottom",
        "elems": ["orbit"],
        "rotate": 360,
        "overshoot": 0,
        "duration": "60000ms",
        "timing": "linear",
        "delay": {
            "value": "0ms",
            "randomness": "0%"
        },
        "iteration": "infinite",
        "direction": "reverse",
        "playstate": "running"
    }).start();

[mlantz]

I think it has to do with the delay. The delay is what separates the events. Without putting a value such as 1000 it will run each event right away in which case the first is bypassed and the second action runs. So give the first action a duration of like 1000 and then set the delay for 1000 and it should run them in order.

[astanley]

Thanks for your suggestion Matt. Unfortunately it didn't work as we both expected. I changed the duration of the 1st cheshire to 1000ms and delay(1000).

That caused my object to rotate 90deg in 1 second, but then it 'snapped' back to its original position.

here is a jsfiddle

http://jsfiddle.net/feNsL/

For the record I want the 1st animation to happen immediately and the 2nd animation to 'continue' onwards for the position set by the 1st animation. Any suggestion on how to do this with alice?

[mlantz]

Try this add: elem.style[alice.prefixJS + "AnimationFillMode"] = 'forwards'; to alice.cheshire.js in the SRC folder after like 235 this should force each animated object to keep the css properties it inherits from the animation.

You'll have to do a new build then of Alice but it may be what it needs.
I had to do this with the page flip I didnt think to review it in cheshire though. Keep me posted.

[astanley]

Ooooo good suggestion. Thanks!

Just tried your recommendation but seem to be getting the same results. Dang.

This fiddle has the re-built copy of alice (with your recommended change) pasted into the JS section, with my code snippet at the bottom http://jsfiddle.net/HBwNa/ The 2nd animation restarts from the original position rather than continuing from the first.

Any other suggestions? Or can what I'm trying to do be done with another Alice effect (besides cheshire)?

[mlantz]

Damn I'll look into it sometime tonight. I'm not sure of any other effects that would achieve this since cheshire is the core of all the effects except the book effect... I'll see if I can find a way to do this and keep you posted.

[mlantz]

Check out what happens when you set the direction to forwards on both and make both rotations negative values its closer to what your looking for

[astanley]

That sir, is some crazy voodoo magic. I do see the change in behavior, but I think its a trick (Akbar: "Its a traaap") - i'll fiddle and see if I can get it working closer to what I'm looking for. But would also appreciate your help in poking away at a solution. Thanks for helping to look into this.