cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

I'm moving around a whole bunch of elements with Julian Shapiro's Velocity.js. It's running pretty well on my Chrome at anywhere between 60 - 48 frames per second, impressive :)

It took around 4 hours to bang this out after first looking at the documentation, pretty easy to use if you are already a jQuery user. http://julian.com/research/velocity/

No markup because why select when you can create right?

*** I should add that this sort of thing (animation sequence) isn't really what Velocity.js was built for, but I just wanted to crank up the elements/intensity to see how the browser handled it. Incorporating Velocity.js in to your average UI transitions/animations should be a dream :)

Comments

  1. insanely smooth even on my laptop in "battery saving" mode where it crunches my GPU and CPU.

    Really nice demo, good example of what is possible! :) thanks for sharing

  2. Maximum hearts Rachel! This is great.

  3. This is amazingly awesome.

  4. whoa.... I've gotta start playing with velocity. nice.

  5. Nicely conceived but a bit janky on my iPad - have you tried Greensock? Totally built for this kind of animation and it's super smooth. Nice one!

  6. @chrisgannon Hey Chris, I have used GSAP and yes it is a library specifically made for these sorts of animation sequences. As I wrote in the description Velocity.js wasn't really purposed for this sort of thing but I made this demo when it was released specifically put it through its paces to see how it performed.

  7. Yes given the relatively basic nature of Velocity I think you've pulled off a pretty cool animation.

  8. No words. How incredible.

  9. That's cool velocity.js is really smooth/fast.

  10. Inspiring! So cool.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...