Comments (11)
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
});
});
});
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.
Related Issues (20)
- Sprite animation. HOT 1
- Animations do not start in ios7 HOT 5
- __defineGetter__ HOT 4
- Wrong easings computations? HOT 8
- Raf shim HOT 5
- Uncaught TypeError: Object #<Performance> has no method 'now'
- Stopping anima after it processes animation HOT 2
- CSS animations are broken when the first stylesheet in the page has a @charset declaration HOT 2
- fade in animation HOT 1
- Animate multiples elements of a specific classe? HOT 2
- pause and resume does not work HOT 4
- events not firing ? HOT 5
- Animation changes CSS HOT 2
- CSS easings not working HOT 1
- Enhancement: animate background color HOT 1
- Enhancement: Allow the ability to define things like `translate` with a function. HOT 2
- Using `top` instead of `window` to reference requestAnimationFrame, cancelAnimationFrame and performance throws security errors from within an iFrame.
- translateX, translateY, rotateX, rotateY, etc. HOT 2
- Timeline HOT 1
- example not work:cannot assign to read only property '0' of string '0.5'
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from animatic.