Ability to call css-defined animations (compatibility with animate.css) about animatic HOT 11 CLOSED

Nice idea, I'll add this, thanks.

from animatic.

Same request here. Defining animation in CSS, and control the flow in anima.js

from animatic.

It's actually in the Anima already, see https://github.com/lvivski/anima/blob/master/example/css_animation.html

Has some issues, but works

from animatic.

Hello Iviski,

Thanks for your prompt reply.

Besides animation, can I set css style to the item using css("property","value")?

What I like to achieve is :

item.animate(…).css(…).animate(…).attr(…).function(){
//callback function
});

Is it possible to do this kind of flexible chaining? Or I have to use Animation events of Anima.js?

Thanks!

Nathan

在 Jul 23, 2013，7:39 PM，Yehor Lvivski [email protected] ：

It's actually in the Anima already, see https://github.com/lvivski/anima/blob/master/example/css_animation.html

Has some issues, but works

—
Reply to this email directly or view it on GitHub.

from animatic.

Anima has no methods for setting css properties and I don't think It should have. You can use jQuery/Zepto for this kinds of manipulations and use Anima jQuery plugin for animations integration.

Can you please provide a full example of what you want to achieve and how do you want the code to look like? I just can't figure out what item.animate(…).css(…).animate(…).attr(…).function(){ //callback function }); should do.

from animatic.

Let me explain it step by step. I'll make it a tutorial so that others can learn from our conversations.

First of All, I need to add the heart icon to the "world", not all of those heart icons, but the one users click on.

Instead of using world.add(document.querySelector("a.icons.love"));

I tried the following:

$(document).ready(function() {
var world = anima.world();
$('a.icons.love').click(function(e){
e.preventDefault();
var item = world.add($(this));
item.animate({
opacity: .5,
duration: 500,
ease: 'ease-in-out-quad',
delay: 100
});
});
});

var item = world.add($(this)) doesn't seem working though. It throws error:

TypeError: Attempted to assign to readonly property.

from animatic.

$(this) is a jQuery object, you should use just world.add(this) instead. But there's already a jquery plugin (jquery.anima.js) That makes things event easier:

$(function() { 
    $('a').click(function(e){ 
        e.preventDefault(); 
        $(this).anima().animate({ 
            opacity: .5, 
            duration: 500, 
            ease: 'ease-in-out-quad', 
            delay: 100 
        }); 
    }); 
}); 

Complete example

from animatic.

This is very helpful! I could not find this in the documentation. It should be included in the future doc update maybe :) from a designer point of view.

Also, where can I find the donation link for the plugin?

Nathan

$(this) is a jQuery object, you should use just world.add(this) instead. But there's already a jquery plugin (jquery.anima.js) That makes things event easier:

$(function() {
$('a').click(function(e){
e.preventDefault();
$(this).anima().animate({
opacity: .5,
duration: 500,
ease: 'ease-in-out-quad',
delay: 100
});
});
});
Complete example

¡ª
Reply to this email directly or view it on GitHub.

from animatic.

The plugin is in the root folder of the project, it's called jquery.anima.js

from animatic.

This may not be classified as a bug. but putting .css() at the end throws an error if it's a css defined animation.
A little issue that doesn't matter too much.

So,

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

This works!

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

This doesn't.

Hope this helps.

from animatic.

Well, a predefined CSS animation is already CSS, so you don't have to call any methods after, thanks

from animatic.