JavaScript Animation Part- I

js-animation

In the trend of HTML 5 and CSS 3 it becomes easier to create animations which are supported by modern browsers. We can create any kind of animation using CSS 3. Also, JQuery provides animate() function to create simple animations. In this tutorial, we are going to learn a animation library Tweenmax.js.

Why Tweenmax.js?
JQuery animate function is used to create simple kind of animations. However, it is very difficult to perform reverse, pause, timeUpdate, 3D efffects such operations using animate method. It is very easy to achieve this using Tweenmax.js. We can create slideshow effect using Tweenmax. Advantage of using Tweenmax is we can control animation. Like Tweenmax there are some other objects TweenLite, TimeLineMax which are used to create video kind of animation.

Downloading Tweenmax.js
Use Tweenmax.js from CDN

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>

OR
Download it from https://greensock.com/tweenmax

Simple zoom effect using Tweenmax:

We can use scale() property of CSS 3 to create zoom effect.

<style>
    #boxImg{
      transform:scale(0);
      -webkit-transform:scale(0);
    }
</style>

var box=$("#boxImg")
TweenMax.to(box, 1, {css:{transform:"scale(1)"}, repeat:1});

<img id='boxImg' src="http://kodecrash.com/demos/galleria/images/gallery/daisy.jpg" width="400" height="300"/>

Here, We have used css property of tweenmax. You can use previous syntax also. Initially we have used transform scale to 0 in CSS. In tweenmax we are changing transform property of image. So, this looks like image is scaling through its center. Note, we haven’t use any yoyo, reverse, onUpdate property of tweenmax here. This depends on our requirement. If you want to perform any action during animation you can use those properties and methods.

Click here to see demo

Zoom effect at corner using Tweenmax:

You can scale image at corner using transform-origin property of CSS 3. Refer our previous article on Rotate div at Corner CSS 3 transform to know about transform-origin.

<style>
    #boxImg{
      transform:scale(0);
      -webkit-transform:scale(0);
      -ms-transform:scale(0);
      transform-origin:100% 100%;
      -webkit-transform-origin:100% 100%;
      -ms-transform-origin:100% 100%;
    }
</style>

var box=$("#boxImg")
TweenMax.to(box, 1, {css:{transform:"scale(1)"}, repeat:1});

<img id='boxImg' src="http://kodecrash.com/demos/galleria/images/gallery/daisy.jpg" width="400" height="300"/>

Click here to see demo

Basic Tweenmax example:
In this example we will animate a div using tweenmax.

     var box=$("#demo");
     TweenMax.to(box, 2, {left:"300px", repeat:10, yoyo:true,  repeatDelay:0.5, ease:Linear.easeNone});

In above code, we have used tweenmax object to animate a box. We are animating left position of a box.

Properties:

  • box: box is jquery selector
  • repeat: repeat animation for specified interval
  • repeatDelay: wait for next cycle to repeat.
  • ease: easing effect of animation.
  • yoyo: Boolean – If true, every other repeat cycle will run in the opposite direction so that the tween appears to go back and forth (forward then backward).
  • delay: Duration of one cycle of animation. Here, delay parameter is 2 seconds.
  • onUpdate: Function – A function that should be called every time the tween updates (on every frame while the tween is active)
  • onComplete: Function – A function that should be called when the tween has completed

Callback in Tweenmax:

Like jQuery animate function tweenmax provides callback functions (onUpdate, onComplete etc… )

Using onComplete() in Tweenmax:

 var box;
    $(document).ready(function(){
     box=$("#demo");
    
 TweenMax.to(box, 2, {left:"300px", repeat:4,   repeatDelay:0.5,onComplete:onCompleteHandler, ease:Linear.easeNone});
    });

function onCompleteHandler() {

  box.html("Completed");
 
}

Here, we are using onComplete() function of tweenmax. onComplete will call when animation with specified duration is completed.
Click here to see demo

Using onUpdate() in Tweenmax:

var box;
 var count=0;
    $(document).ready(function(){
     box=$("#demo");
     TweenMax.to(box, 2, {left:"300px", repeat:4,  repeatDelay:0.5, onComplete:onCompleteHandler,ease:Linear.easeNone, onUpdate:onUpdateHandler});
    });

function onCompleteHandler() {

  box.html("Completed");
  
}  
function onUpdateHandler(){
      count++;
      box.html("Count:"+ count );
}

onUpdate() will call every seconds during the animation. Here, you can perform any operations like updating dom elements.

Click here to see demo

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>