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

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

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 tried to use the 'end' event but it doesn't fire :+1:

$(".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

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.

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

Browsers without native raf end up currently in endless loop. I use top instead of window, because there are bugs where animation frame is used inside of an iframe and this stops to work sometimes.

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.

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

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

}

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.

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.

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

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!