Animation - make things move with Velocity.js - accelerated JavaScript animation
Summary of features
COLOURcode integrates the incredible Velocity, an accelerated JavaScript animation engine with the same API as jQuery's $.animate(). It's incredibly fast, and is the best of jQuery and CSS transitions combined into one neat package. COLOURcode includes a set of JavaScript handlers that enable any element to be animated via its markup. Simply add a class of .animate, and then a set of data-attributes e.g. data-animate-action='transition.whirlIn', data-animate-duration='1000', data-animate-target='#panelwhirl'.
At a glance
- Simply replace all instances of jQuery's $.animate() with $.velocity().
- Velocity easily outperforms jQuery animations at all levels of stress.
- Boosts performance across all browsers and devices — especially mobile.
- Template includes JavaScript handlers to enable animation from the markup.
- Velocity animations can be chained and combined in very creative ways.
Move panel right and down
animate
verb 1. Bring to life. 2. Give the appearance of movement.
adjective 1. Alive or having life.
Stretch panel to the right
animate
verb 1. Bring to life. 2. Give the appearance of movement.
adjective 1. Alive or having life.
Turn and flip panel (then back again)
animate
verb 1. Bring to life. 2. Give the appearance of movement.
adjective 1. Alive or having life.
Shake panel
animate
verb 1. Bring to life. 2. Give the appearance of movement.
adjective 1. Alive or having life.
Appear from above
animate
verb 1. Bring to life. 2. Give the appearance of movement.
adjective 1. Alive or having life.
Whirl in
animate
verb 1. Bring to life. 2. Give the appearance of movement.
adjective 1. Alive or having life.
Change panel's opacity
animate
verb 1. Bring to life. 2. Give the appearance of movement.
adjective 1. Alive or having life.
Change panel's colour
animate
verb 1. Bring to life. 2. Give the appearance of movement.
adjective 1. Alive or having life.
Perspective in from right
animate
verb 1. Bring to life. 2. Give the appearance of movement.
adjective 1. Alive or having life.
Flip panel out X
animate
verb 1. Bring to life. 2. Give the appearance of movement.
adjective 1. Alive or having life.
Chaining animations
Velocity animation calls can be 'chained' and combined to produce a series of movements. To illustrate this, the image below has been given a single chain of over 20 different animations (excluding the reset).
Combine animations
Velocity animation calls can be configured to act on different elements at the same time. Here the background panel's colour is changing seperately but at the same time as the text.
Animate a scroll
1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
4. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
5. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
6. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.