I noticed that in the input example (http://lvivski.com/anima/example/keyboard_mixed.html) you have code to make sure that only one axis is affected at a time:

a.translate = translate.map(function(t, i) { return t || a.translate[i] })

It's a functionality that I often need when I'm coding for user interaction. It might be nice if that were built into the library so that a user wouldn't have to do it themselves each time they wanted to affect only a single axis. If there was the option to translate, rotate, scale, etc. for each axis (translateX, scaleY, rotateZ, etc.), it could really help.

I currently use move.js but am looking to replace it with anima for its pause/resume functionality. With move.js I can animate the background color of an item using move(element).set('background-color', 'red'). I use this quite a bit in my app. It would be nice if anima supported such a feature.

Hello there,

first sorry my english, but I meet some problem need your help...

UI animation flow:(like Loop)

functionA make animation-a -> click butttonA -> make butttonA do animation-A -> on animation-A end event -> call a functionC

animation-a: make butttonA appear，add end event
animation-A: make butttonA disappear，add end event
functionC: call functionA again

but in actually situation,first time(first Loop), when I click button, it will trigger animation-a end event first,then do animation-A, then trigger animation-A end event.

secend time(second Loop), when I click button, it will trigger animation-a end event twice! then do animation-A twice, then trigger animation-A end event twice...

third time, when I click button, it will trigger animation-a end event triple! then do animation-A triple, then trigger animation-A end event triple... and so on..

I couldn't separate animation in the same item object...I don't know why..

below is my codes:

function showUI2(){
if(scene2_finished){

    scene2_finished = false;

    item3
        .animate({
            opacity:0
        },0)
        .animate({
            translate: [0, -220, 0],
            opacity:0.8
        }, 800, 'ease-in-quat')
        .animate({
            scale: [0.3,0.3, 0]
        }, 500, 'ease-in-out-back');
    backBtn_item
        .animate({
            opacity:0
        },0)
        .animate({
            translate: [0, 30, 0],
            opacity:1
        }, 1300, 'ease-in-quat');

    backBtn.addEventListener('click',function(e){

        backBtn_clickflag = true;
        e.preventDefault();

        item3
            .animate({
                scale: [-.3, -.3, 0],
                translate: [0, 220, 0],
                opacity:0
            }, 600, 'ease-in-out-back');


        backBtn_item
            .animate({
                translate: [0, -30, 0],
                opacity:0
            }, 600, 'ease-in-out-back')

            .on('end', after_end());

    },false);

}

}
function after_end(){
return function () {
if(backBtn_clickflag){
backBtn_clickflag =false;

        showUI2();
    }
}

}

Hello,

First of all, thanks for this amazing tool! I just touch it, there are some questions to ask.

I have read the doc, but does not seem to set CSS. For example, I want to make an element from white to red. If this is the solution?

Thank you!

What about sprite animation?
You planning this feature?

I want to fade in an element like this:

world.add(elem).animate({
opacity: 0
}, 0).animate({
opacity: 1
}, 2000, 'ease-in-out-quad');

but it does not start with full transparency, what am i doing wrong?

I'm not sure if this is the case for every browser, but this seems to be the case on modern ones. There may be a reason you chose to use top instead of window, but if your script is running within an iFrame, something about this will throw a cross-domain security error, while using window won't.

(Obviously only if the content of the iFrame is on a different domain as the host.)

How do I manually stop animating all or just specified properties?

Like http://api.jquery.com/stop/

Hello there,

first sorry my english, but I meet some problem need your help...

UI animation flow:(like Loop)

functionA make animation-a -> click butttonA -> make butttonA do animation-A -> on animation-A end event -> call a functionC

animation-a: make butttonA appear，add end event
animation-A: make butttonA disappear，add end event
functionC: call functionA again

but in actually situation,first time(first Loop), when I click button, it will trigger animation-a end event first,then do animation-A, then trigger animation-A end event.

secend time(second Loop), when I click button, it will trigger animation-a end event twice! then do animation-A twice, then trigger animation-A end event twice...

third time, when I click button, it will trigger animation-a end event triple! then do animation-A triple, then trigger animation-A end event triple... and so on..

I couldn't separate animation in the same item object...I don't know why..

below is my codes:

function showUI2(){
if(scene2_finished){

    scene2_finished = false;

    item3
        .animate({
            opacity:0
        },0)
        .animate({
            translate: [0, -220, 0],
            opacity:0.8
        }, 800, 'ease-in-quat')
        .animate({
            scale: [0.3,0.3, 0]
        }, 500, 'ease-in-out-back');
    backBtn_item
        .animate({
            opacity:0
        },0)
        .animate({
            translate: [0, 30, 0],
            opacity:1
        }, 1300, 'ease-in-quat');

    backBtn.addEventListener('click',function(e){

        backBtn_clickflag = true;
        e.preventDefault();

        item3
            .animate({
                scale: [-.3, -.3, 0],
                translate: [0, 220, 0],
                opacity:0
            }, 600, 'ease-in-out-back');


        backBtn_item
            .animate({
                translate: [0, -30, 0],
                opacity:0
            }, 600, 'ease-in-out-back')

            .on('end', after_end());

    },false);

}

}
function after_end(){
return function () {
if(backBtn_clickflag){
backBtn_clickflag =false;

        showUI2();
    }
}

}

why my code not run in Safari? in console, syntax_err: DOM exception 12. in FF, it's running well. sorry for my bad english

First of all, amazing work!

Now, I detected an issue. If I force CSS I lost the easings.
I set up a very simple demo: http://fiddle.jshell.net/Yerba/r0kpsr6m/show/

Source: https://jsfiddle.net/Yerba/r0kpsr6m/

Hi

Just tried your examples on the latest version of ios, both safari and chrome. Nothing happens. No errors. Matrix transformation isn't applied, css transformations do not work too.

Thanks

Hi Jehor,

So I have this little bit of code. The thing is: no matter where I put world.stop it is being called before animation finishes. setTimeout did not work, animate(..).end didnt work. Do you have a nice way to invoke world.stop after all animations are finished? Any help would be highly appreciated

function animaHandler() {

              //here are all necessary calls and variable definitions

        item[0]
        .animate({
          translate: [-vectorSize, -vectorSize, 0]
        }, {duration:animSpeed,queue:false}, 'ease-out-quart' );

        item[1]
        .animate({
          translate: [vectorSize, -vectorSize, 0]
        }, {duration:animSpeed,queue:false}, 'ease-out-quart' );

        item[2]
        .animate({
          translate: [-vectorSize, vectorSize, 0]
        }, {duration:animSpeed,queue:false}, 'ease-out-quart' );

        item[3]
        .animate({
          translate: [vectorSize, vectorSize, 0]
        }, {duration:animSpeed,queue:false}, 'ease-out-quart');
           world.stop();          

    }

    var onlyone = 0
    $('#some-div').mouseenter(function(){
        if (onlyone == 0){
            animaHandler();
            onlyone=++onlyone
        }
    });

I'm not sure if this is possible to do reliably given your approach, but GSAP does this nicely. jQuery did something vaguely similar in the new 1.9 branch, adding a finish() method.

Single animations are easy to do, but what happens when they start overlapping? GSAP which has a great timelining features where you can essentially drop a scrubber into the bottom of the browser window for development and control an animation timeline directly with a draggable scrubber, just like a video program! For serious timeline animations, full-featured development controls are a must...

Hello,

First of all, thank you for this amazing tool! I have been using it, and It is really great.

I was wondering if it is possible to animate multiples elements at once, for instance, to animate all div with the class ".xyz".

I have read the doc, but it seems to only animate a single element, not to apply an animation to multiple elements like it's possible to do in CSS.

Thank you!

Hi, in IE10 this method was already removed. So it throws.

run /example/delay.html and /example/delay_css.html,show error "Cannot assign to read only property '0' of string '0.5'".

Let's say I have an object wiggling from left to right and back in a continuous infinite loop:

myObject.animate({  
    translate : [10,0,0],  // to the right
    duration: 500
}).animate({  
    translate : [-10,0,0],  // back to origin
    duration: 500
}).infinite();

and then later, responding to some event, I want to move the whole object a defined distance to the right, without the left-right wiggle ever stopping:

myButton.onclick = function() {
  myObject.animate({  
      translate : [100,0,0],  // to the right
      duration: 2000
  });
};

This doesn't work right now:

http://jsfiddle.net/N2v6H/

Instead, the ball goes careening off the screen. Re-expressing the wiggle in parallel at the time of the second call doesn't fix things, either:

ball.stop().animate([{  
   translate : [100,0,0],  // to the right
   duration: 1000
},{ 
    translate : [10,0,0],  // to the right
    duration: 250
},{  
    translate : [-10,0,0],  // back to origin
    duration: 250
}]);

http://jsfiddle.net/N2v6H/1/
(This is also throwing an error because the stop method isn't chainable as it stands, another issue.)

I think it's pretty clear that the existing behavior isn't useful in any real world context. My sense is that the cleanest solution might be to add an argument to the animate function, specifying whether it adds to existing animations or overwrites them.

Using the latest codebase from master ....

User-Agent
Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; SAMSUNG GT-I9100/I9100XWLSD Build/JZO54K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

Hi, I was just trying to mimic an ios7 animation and I don't get a simlar easing (ease-
out-expo seems to be the right thing)

I then took a look at your easing functions (js) and the don't seem to be the same like:

http://www.gizma.com/easing/

or

http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js

wdyt?

Best,
Oleg

Adding a new item into a world initializes it's opacity to 1 no matter the current value.

See http://jsfiddle.net/2SpzY/

Setting the opacity in Item.prototype.init as opacity: this.dom.style.opacity seems to fix it.

Hello. I've got Opera 12.14 on Windows 7.
I'm using your library for animate translation and anima works very well, but I got some toubles on Opera. Below you can see errors from error console:

Uncaught exception: TypeError: '_requestAnimationFrame' is not a function
Error thrown at line 743, column 4 in () in http://....../js/anima.js.xhtml:
this.frame = _requestAnimationFrame(update);
called from line 737, column 4 in World() in http://....../js/anima.js.xhtml:
this.init();
called from line 5, column 4 in () in http://....../js/anima.js.xhtml:
return new World();
called from line 1046, column 4 in http://....../map.xhtml?windowId=6be:
var world = anima.world();

This would allow the animator to do things such as take measurements at the point in time when an animation actually takes place. Example:

element1.animate({
  translate: function() {
    return [ 0, element2.state.translate[1], 0 ];
  },
  duration: 1000,
  delay: 3000
});

See example. When clicking on the heart icon, it should bounce first, and then change the color to red. But strangely it triggers to red at the very beginning before the animation's finish. Where am I doing it wrong?

function swapIcon(icon){
    icon.css("color", "red");
}

$(document).ready(function() {
   $('a.icons.love').click(function(e){
        e.preventDefault(); 
        $(this).anima().animate({ 
            name: 'bounce',
            duration: 1100
        }).on('end', swapIcon($(this)));
    }); 
});

We need a way to use external shims. Currently requestAnimationFrame reference is locally defined. I would recommend you to use https://github.com/kof/animation-frame or at least to provide a way to overwrite raf reference anima uses.

If you try to use a js library such as jQuery to add css to an element dynamically, the looping nature of the "world" strips the styles from the elements style attribute.

Love the concept, look forward to it being developed more.

Whoa, this is cool. The "matrix" demo is sweet! Having just completed a pretty complex animation sequence in pure Raphael (which has some painful limitations) the support for "parallel" animation is very appreciated. I want to fool around some more, but here are some initial thoughts. I've broken them into separate issues for ease of reference.

First, about the docs:

1. How about some clarification in the docs on why to choose js versus css worlds, other than client support?

2. How about a browser support chart?

3. Why don't you use semicolons in your demonstration code? I don't mean to start a debate here, but it really helps make your code accessible, especially to beginners. (At the very least, it's necessary for minification.)

4. A few typos:

"transformations’ values are relative to the last known Item state, it’s initial state..."

should be

"transformations’ values are relative to the last known Item state, its initial state..." (no apostrophe)

"You can call .infinite() at the end of you .animate’s chain,"

should be

"You can call .infinite() at the end of .animate’s chain,"

I actually prefer to write animations in css sometimes so it would be handy to be able to use this library to call them. This would allow for a seamless integration with other libraries such as animate.css or magic.

An example of this functionality can be found in move.js with .animate(..) which I'm currently using but would like to potentially switch over to this one in the future.

Apologies if this feature already exists but I couldn't find any documentation on it.

Really neat library btw, looking forward to exploring it a little bit further.

Thanks

CSS.prototype.style tries to insert a keyframe rule at the begining of the first stylesheet. That doesn't work in Chrome (Version 33.0.1750.152 to 36.0.1924.0 canary at least) if the stylesheet has a @charset (fails also with @import) rule at the very begining (no blank space before). It triggers an HierarchyRequestError with the message "Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to insert the rule."

The quick fix is to insert the new keyframes rule at the end of the stylesheet (or at least not at the 0 index) like: this.stylesheet.insertRule(this.keyframes(animation), this.stylesheet.rules.length);

Hi,
I tried to use the 'end' event but it doesn't fire 👍

$(".box").animate({
               left:'20%',
                opacity: .5,
                duration: 500,
                ease: 'ease-in-out-quad',
                delay: 100
              }).on('end', function(){
                  alert('end');
              });

What am i missing , please?
see live example:
http://jsbin.com/pawiho/1/edit?html,console,output

item.pause() does not work.
Even in the example http://lvivski.com/anima/example/keyboard.html

I tested in IE 10 and Firefox (Aurora) and none of the examples work. Only managed to view them in Chrome.

I'm looking at:

http://lvivski.github.com/anima/example/keyboard.html

Up arrow rotates vertically. Right arrow rotates horizontally. I want the user to be able to hold down both up and right arrow keys, and rotate both axes simultaneously, on the diagonal.

Hello. I just want to simply animate div resize (height and width).
Can you add this to your briliant library? I really like your library smooth animations, just missing this one feature.

Hi,

I just downloaded the latest version of plugin and observed that width, height and opacity are not working in timeline. Request you to solve the same Thanks in advance