4 ms·

Cquence: a very tiny JavaScript animation library

45 points by PindakaasMan 12y ago

diminish 12y ago
Impressive. All this impressive animation frameworks will end up bringing flash animations back to the mainstream web.
- PindakaasMan 12y ago
  The syntax was inspired by flash. I really like that one liners you could do in there. My company is now using this for advertisements banners and such.
- emehrkay 12y ago
  Truth be told Flash is a great, I mean GREAT, platform and HTML is making strides to be more like it. It does/did everything that HTML5+ wants to do in a contained executable -- any new HTML/JS/CSS feature is already doable with Flash. Flash isn't without its warts, but that's not the point, but if you were to take a step back and evaluate it without bias, you'd be impressed with what Macromedia/Adobe did with that runtime. Anyway, I like the idea behind this library. I like that you can compose the animation keyframes the way it does. Any suggestions that I'd make to "improve" it would probably bloat it up -- classname selectors, css-based animations/transitions. What I like most about this lib is how it does what it does in such a small package.
lemiffe 12y ago
Nice!
jlengrand 12y ago
Cool project. I like how minimalist it is. Could you provide some templates as well, just for the lib to be ready to use in a glance?
- PindakaasMan 12y ago
  Sure, I will include some example code for you. Check back tomorrow.
dugmartin 12y ago
Nice work but I'd recommend name spacing this library - you are throwing a lot of functions and variables in the global namespace.
- PindakaasMan 12y ago
  Thanks for the tip. Its is mostly used within an iframe, since it was developed for banners and such so it wasn't an issue but will work on that thanks :)
WhitneyLand 12y ago
Why not utilize CSS more? For example how animation is done in AngularJS? I know it's supposed to be more light weight than that but at least conceptually...
- PindakaasMan 12y ago
  The project was designed to be easily extendable. Feel feel to send a pull request for other functions the "utilize" more CSS.
- ralfn 12y ago
  CSS animations are not faster perse, but they are compatible with less browsers and any programmatic animation (where the actual animation is configured based on dynamic inputs) would only get more complicated than just keeping everything in the javascript world. As for the CSS properties you can animate -- the code seems neutral enough to not really pick a baseline. So you have the freedom to pick your own level of browser support. Just a nice organised starting point, and keeping the stuff that should be your code, your code.
artpar 12y ago
I guess in the Basic example, you need to put comma after the easIn and easOut function. sequence( easIn( :id, :time, { :from }, { :to }) <-- Here easOut( :id, :time, { :from }, { :to }) <-- and Here sleep( :time ) // Wait utill time is passed )
- PindakaasMan 12y ago
  Correct I will update the readme thanks
paulojreis 12y ago
Just commenting to point this out: if( IE8 ){ // gemene browsers /* ... */ } else { // lieve browsers /* ... */ } No, it's not about browser vs. feature detection, it's just that you made me learn two new words. :) Gotta love developers' comments expressivity!

45 points by PindakaasMan 12y ago

diminish 12y ago

Impressive. All this impressive animation frameworks will end up bringing flash animations back to the mainstream web.

PindakaasMan 12y ago
The syntax was inspired by flash. I really like that one liners you could do in there. My company is now using this for advertisements banners and such.
emehrkay 12y ago
Truth be told Flash is a great, I mean GREAT, platform and HTML is making strides to be more like it. It does/did everything that HTML5+ wants to do in a contained executable -- any new HTML/JS/CSS feature is already doable with Flash. Flash isn't without its warts, but that's not the point, but if you were to take a step back and evaluate it without bias, you'd be impressed with what Macromedia/Adobe did with that runtime. Anyway, I like the idea behind this library. I like that you can compose the animation keyframes the way it does. Any suggestions that I'd make to "improve" it would probably bloat it up -- classname selectors, css-based animations/transitions. What I like most about this lib is how it does what it does in such a small package.

lemiffe 12y ago

Nice!

jlengrand 12y ago

Cool project. I like how minimalist it is. Could you provide some templates as well, just for the lib to be ready to use in a glance?

PindakaasMan 12y ago
Sure, I will include some example code for you. Check back tomorrow.

dugmartin 12y ago

Nice work but I'd recommend name spacing this library - you are throwing a lot of functions and variables in the global namespace.

PindakaasMan 12y ago
Thanks for the tip. Its is mostly used within an iframe, since it was developed for banners and such so it wasn't an issue but will work on that thanks :)

WhitneyLand 12y ago

Why not utilize CSS more? For example how animation is done in AngularJS? I know it's supposed to be more light weight than that but at least conceptually...

PindakaasMan 12y ago
The project was designed to be easily extendable. Feel feel to send a pull request for other functions the "utilize" more CSS.
ralfn 12y ago
CSS animations are not faster perse, but they are compatible with less browsers and any programmatic animation (where the actual animation is configured based on dynamic inputs) would only get more complicated than just keeping everything in the javascript world. As for the CSS properties you can animate -- the code seems neutral enough to not really pick a baseline. So you have the freedom to pick your own level of browser support. Just a nice organised starting point, and keeping the stuff that should be your code, your code.

artpar 12y ago

I guess in the Basic example, you need to put comma after the easIn and easOut function. sequence( easIn( :id, :time, { :from }, { :to }) <-- Here easOut( :id, :time, { :from }, { :to }) <-- and Here sleep( :time ) // Wait utill time is passed )

PindakaasMan 12y ago
Correct I will update the readme thanks

paulojreis 12y ago

Just commenting to point this out: if( IE8 ){ // gemene browsers /* ... */ } else { // lieve browsers /* ... */ } No, it's not about browser vs. feature detection, it's just that you made me learn two new words. :) Gotta love developers' comments expressivity!