Cquence: a very tiny JavaScript animation library

https://github.com/RamonGebben/Cquence

by PindakaasMan • 12 years ago

45 14 12 years ago

github.com

diminish• 12 years ago

Impressive.

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

PindakaasMan5• 12 years 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• 12 years 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• 12 years ago

Nice!

jlengrand• 12 years 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?

PindakaasMan5• 12 years ago

Sure, I will include some example code for you. Check back tomorrow.

dugmartin• 12 years ago

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

PindakaasMan5• 12 years 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• 12 years 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...

PindakaasMan5• 12 years ago

The project was designed to be easily extendable. Feel feel to send a pull request for other functions the "utilize" more CSS.

ralfn• 12 years 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• 12 years 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 )

PindakaasMan5• 12 years ago

Correct I will update the readme thanks

paulojreis• 12 years 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!

Cquence: a very tiny JavaScript animation library

Related Stories