lvivski / animatic Goto Github PK
View Code? Open in Web Editor NEWCSS animations engine
Home Page: http://lvivski.com/animatic/
License: MIT License
CSS animations engine
Home Page: http://lvivski.com/animatic/
License: MIT License
item.pause() does not work.
Even in the example http://lvivski.com/anima/example/keyboard.html
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.
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);
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
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?
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
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();
}
}
}
How do I manually stop animating all or just specified properties?
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 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
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.
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/
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.
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:
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.
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
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:
How about some clarification in the docs on why to choose js versus css worlds, other than client support?
How about a browser support chart?
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.)
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,"
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!
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
});
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.
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
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)));
});
});
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.
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
run /example/delay.html and /example/delay_css.html,show error "Cannot assign to read only property '0' of string '0.5'".
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:
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, in IE10 this method was already removed. So it throws.
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.)
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();
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 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...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.