Knockout-Animate.js

Knockout-Animate.js is a small collection of knockout.js binding handlers that allows you to quickly enhance your website or web application with subtle CSS3 animations. This library is great for showing/hiding elements in a fancy way.

View Github Project

Hovering

hoverScale: scale, duration: 250, scaleOut: 1.0, durationOut: 100, easing: 'ease-in', easingOut: 'ease-out'
Scaling up an element.
Scaling down an element.
Scaling up an element slowly.
Scaling out an element slowly
Scaling up an element, then scaling it down
Scaling an element disproportionately
hoverRotate: degrees, duration: 250, degreesOut: 0, durationOut: 100, easing: 'ease-in', easingOut: 'ease-out'

Visibility

fadeVisible: boolean, duration: 500, durationOut: 500, easing: 'ease-in', easingOut: 'ease-out'
Fading
HTML:

                        JS:
self.isFadeVisible1 = ko.observable(false);
Fade Slowly
HTML:

                        JS:
self.isFadeVisible2 = ko.observable(false);
Out Slowly
HTML:

                        JS:
self.isFadeVisible3 = ko.observable(false);
Fading Fast
HTML:

                        JS:
self.isFadeVisible4 = ko.observable(false);
scaleVisible: boolean, scale: 1.0, scaleOut: 0, scaleHideOut: 0, duration: 500, durationOut: 500, easing: 'ease-in', easingOut: 'ease-out'
Scaling Up HTML:

                        JS:
self.isScaleVisible1 = ko.observable(false);
Scaling Down HTML:

                        JS:
self.isScaleVisible2 = ko.observable(false);
Scaling Up Slowly HTML:

                        JS:
self.isScaleVisible3 = ko.observable(false);
Scaling Fast HTML:

                        JS:
self.isScaleVisible4 = ko.observable(false);
slideVisible: boolean, duration: 500, durationOut: 500, direction: 'left', directionOut: 'left', easing: 'ease-in', easingOut: 'ease-out'
Content sliding in
HTML:

                JS:
self.isSlideVisible1 = ko.observable(false);
Slowly Sliding in
HTML:

                JS:
self.isSlideVisible2 = ko.observable(false);
Slowly sliding out
HTML:

                JS:
self.isSlideVisible3 = ko.observable(false);
Slide in from right
HTML:

                JS:
self.isSlideVisible4 = ko.observable(false);
From bottom
HTML:

                JS:
self.isSlideVisible5 = ko.observable(false);

Animate.css

You can use the Animate.css library with Knockout-Animate to easily bring elements to life. Additional features such as duration and callback have been added to make it more useful in your web apps. You can even create your own CSS3 animations based off of the Animation.css model for endless animation possibilities.

cssAnimate: animation, event: 'click', duration: 1000, callback: null
Simple 'tada' animation.
A slow 'wobble' animation
A fast 'swing' animation
Alert is now visible.Hide Me
Call a function that shows an alert at the end of the animation
Animate on hovering over an element
Animate when typing text (okay, maybe this one is a bad idea)
Animate once your mouse leaves the picture
cssAnimateVisible: { animation: 'bounceIn', animationOut: 'bounceOut', duration: 1000, durationOut: 1000 }

Combines the Animate.css library with knockout.js to perform animations whenever the ko bindings visiblity changes.

HTML:

                JS:
self.isCssAnimateVisible1 = ko.observable(false);
Slide In Slide Out
HTML:

                JS:
self.isCssAnimateVisible2 = ko.observable(false);
Slide in slowly, Slide Out to the right normally
HTML:

                JS:
self.isCssAnimateVisible3 = ko.observable(false);
HTML:

                JS:
self.isCssAnimateVisible4 = ko.observable(false);
HTML:

                JS:
self.isCssAnimateVisible5 = ko.observable(false);
HTML:

                JS:
self.isCssAnimateVisible6 = ko.observable(false);
cssAnimateReveal: { animation: 'bounceIn', duration: 1000, offset: 0, callback: null }

Show elements as they come into view. You can set the delay and offset how far on the screen they must appear before becoming visible. Moreover, you can specify a callback function to trigger other javascript related functions.

HTML:

                JS:
self.isDelayVisible1 = ko.observable(false);

Delays

You can add delays to your animations, which can be useful for delaying entrances / exists to your page elements.

Scaling Scaling Scaling Scaling Scaling Scaling
HTML:

                JS:
self.isDelayVisible1 = ko.observable(false);

HTML:

                JS:
self.isDelayVisible2 = ko.observable(false);

Defaults

Do you dislike some of or all of the defaults? You can modify the animation defaults before you apply your knockout bindings. This can help keep your data-bind attributes from getting too large if you are going with a consistent approach in animating for a particular website or web app you are working on. Examples:

koAnimate.defaults.hoverScale.duration = 1000; //Set the default duration for hoverScale from 250 milliseconds to 1000 milliseconds

koAnimate.defaults.cssAnimate.animation = 'wobble'; //Set the default css animation to 'wobble' rather than 'tada'.
            
koAnimate.defaults.cssAnimate.event = 'mouseenter'; //Give your css animations a default hover event rather than a click event
        

Download

knockout-animate.min.js

knockout-animate.js