Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Cannot chain cheshire rotate events #43

astanley opened this Issue Dec 31, 2012 · 7 comments


None yet
2 participants

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});

        "perspectiveOrigin": "bottom",
        "elems": ["orbit"],
        "rotate": 90,
        "overshoot": 0,
        "duration": "0ms",
        "timing": "linear",
        "iteration": "1",
        "direction": "reverse"
        "perspectiveOrigin": "bottom",
        "elems": ["orbit"],
        "rotate": 360,
        "overshoot": 0,
        "duration": "60000ms",
        "timing": "linear",
        "delay": {
            "value": "0ms",
            "randomness": "0%"
        "iteration": "infinite",
        "direction": "reverse",
        "playstate": "running"

mlantz commented Jan 2, 2013

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 commented Jan 7, 2013

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


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 commented Jan 7, 2013

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 commented Jan 8, 2013

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)?

astanley pushed a commit to astanley/Alice that referenced this issue Jan 8, 2013


mlantz commented Jan 8, 2013

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 commented Jan 8, 2013

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 commented Jan 8, 2013

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.

pelegri added a commit that referenced this issue Jan 18, 2013

Merge pull request #44 from astanley/master
recommended bug fix for issue #43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment