Animating Object Size Example

//first example
$('.selector').jQueryTween({ to: { width: 150 }, yoyo: true });
//second example
$('.selector').jQueryTween({ to: { height: 150 }, yoyo: true });
//third example
$('.selector').jQueryTween({ to: { height: 150 }, yoyo: true, duration: 1500, easing: TWEEN.Easing.Cubic.Out }); 
$('.selector').jQueryTween({ to: { width: 150 }, yoyo: true, duration: 1000, delay: 500, easing: TWEEN.Easing.Bounce.In });

Tips for usage

1. Animating object dimension can be tricky, especially if the object has paddings or borders. It works best on objects with clear formatting. If your object has padding you may need to set an initial value like from: { width: $('.selector').outerHeight() } and this is to make sure the animation is not "jumpy".
2. Both width and height accept values such as 150, "150px" and "150%" but will always use the measurement unit of the target values, that's right, the { to: { width: '150px' } } values.
3. If you only do a simple width animation for instance, in most cases you don't need to specify an initial value, jQueryTween will measure it for you.
4. TIP | you can animate same object with 2 tweens at the same time, one for width and one for height, but with different options of delay, speed or easing. Just like in my demos.

Animating Color Example

//first example
$('.selector').jQueryTween({ to: { color: '#069' }, yoyo: true });
//second example
$('.selector').jQueryTween({ to: { background-color: 'rgb(0,102,153)' }, yoyo: true });

Tips for usage

1. So here we go, another thing jQuery cannot do by itself, animating color transitions.
2. Both color and background-color accept all possible cross-browser color values: #069, #006699, rgb(0,102,153) and even rgba(0,102,153,1), just that the alpha value is ignored.
3. If you only do a simple color animation for instance, in most cases you don't need to specify an initial value, jQueryTween will get it for you.
4. TIP | both color and background-color can run well in separate tween instances.

Animating Transform Translate Example

$('.selector').jQueryTween({ to: { translate: { x: 150 } }, yoyo: true });
$('.selector').jQueryTween({ to: { translate: { y: -150 } }, yoyo: true });
$('.selector').jQueryTween({ to: { translate: { z: -150 } }, yoyo: true });
$('.selector').jQueryTween({ to: { translate: { x: 150, y: -150, z: -300 } }, yoyo: true }); 

Tips for usage

1. If you only do a simple translateZ animation for instance, you will not see any effect taking place until you give the object or the object wrapper a perspective: 400px;. The more perspective value the deeper the depth of view, producing less effect.
2. Sometimes when you perform a tween with translateZ and another property, they could compete and produce little to no effect. That is because the perspective.
3. All translate properties accept values such as 150, "150px" and "150%", will always use the measurement unit of the target values, but the initial values are 0 by default and you may need to provide { from: { translate: {x: 50, y: 20} } } value if you have set the object styling this way. Why? The script cannot read the browser computed matrix3d() values, it's a matter of performance and honestly not worth the effort.
4. Notice | unlike tweening width/height, transform does not allow tweening different properties with multiple tween instances at the same time. Just like with CSS you cannot set multiple transforms at once. Only used all together in the same tween instance or CSS line. You can only combine any transform instance with any other jQueryTween supported property.

Animating Transform Rotation Example

$('.selector').jQueryTween({ to: { rotate: { x: 180 } }, yoyo: true });
$('.selector').jQueryTween({ to: { rotate: { y: -180 } }, yoyo: true });
$('.selector').jQueryTween({ to: { rotate: { x: 90, y: -180, z: -360 } }, yoyo: true }); 

Tips for usage

1. Same as for translation, rotation also requires a perspective. If the perspective is not set anywhere, the rotation would not produce a 3D effect.
2. Also same as for translate, rotation requires initial values if they were set by user via CSS, else default value 0 will be used.
3. Unlike translate, rotate always performs with degrees. So it accepts values like "180" or "180deg" only.

Animating Transform Scale Example

$('.selector').jQueryTween({ to: { scale: 2 }, yoyo: true });
$('.selector').jQueryTween({ from: {scale: 2}, to: { scale: 1 }, yoyo: true });

Tips for usage

1. scale is also a transform property, but it does not require a perspective.
2. Unlike translate or rotate, scale is always taken as absolute value. No unit required.

Animating Background Position Example

$('.selector').jQueryTween({ to: { backgroundPosition: { x: 'left' } }, yoyo: true });
$('.selector').jQueryTween({ to: { backgroundPosition: { y: '100%' } }, yoyo: true });
$('.selector').jQueryTween({ to: { backgroundPosition: { x: 90, y: 'center' } }, yoyo: true }); 

Tips for usage

1. This effect is not producing if the background image is not large enough or it's a case of background-size: cover.
2. jQueryTween only performs background position animation in percent values, but this can be easily changed if you want.
3. As you could see in the examples, it accepts strings as values but transforms them into percent. Example: "top" becomes "0%", or "center" becomes "50%".
4. Using large background images can cause severe performance drawbacks so use with caution.

Animating Object Position Example

In this example, jQueryTween is going to perform multiple tween instances for the same object with an absolute positioned element. yoyo is not used.

Let's go ahead and hit play and see what's going on.

Play

$('.selector').jQueryTween({ to: { position: { left: '50%' } } });
$('.selector').jQueryTween({ to: { position: { left: '-100%' } } });

Tips for usage

1. Notice | unlike width and height, for positioning the script does not read the current values, it will assume it's 0, so you must always define initial values in the from option. This is to avoid jumpy animations.
2. In order to perform properly, make sure the parent element is set to position: relative.
3. This effect can be used as fallback and replace translate for old browsers.
4. The positioning animation accepts for all top, right, bottom, left values such as "150", "150px" or "150%".
5. The positioning animation can work for both position: absolute and position: relative elements, except top and bottom only work for absolute.
6. To have a smooth animation and prevent jumps, you must use values for both from and to in the exact same units for initial and target values.

Animating Window Scroll Example

// a simple scroll to top
$('.selector').jQueryTween({ to: { scroll: 0 } });

//a simple way to scroll to some element
$('.selector').jQueryTween({ to: { scroll: $(this).offset().top } });

// you may want to have a smooth animation on mouse scroll, here's the code
// remember, this feature can chew your browser if has the console enabled
$(window).on('mousewheel DOMMouseScroll',function(e) {
  e.preventDefault();							
  var el = $(this);
  var scrollAmount = 250, currentScroll = $(el).scrollTop();
  var delta = e.originalEvent.wheelDelta/120 || -e.originalEvent.detail/3;
  var finalScroll = currentScroll - parseInt(delta*scrollAmount);

  $('body').jQueryTween( { to : { scroll: finalScroll }, easing: TWEEN.Easing.Exponential.Out, duration : 500 } );
});

Tips for usage

1. You don't want to use yoyo for this kind of stuff :D.
2. The selector does not really matter since we only scroll the document.body.
3. You may wanna check the ../assets/js/scripts.js I used for these demos, the scrolling can get quite fun.

Tween Manipulation Stop / Pause / Resume

$('.selector').stop(); // stops all the object's tweens
$('.selector').pause(); // pauses all the object's tweens 
$('.selector').play(); // resumes all the object's tweens

Tips for usage

1. Make sure you check the ./assets/js/scripts.js for more detailed usage.
2. The method controls all tween instances, so for instance when you pause, all tweens assigned to your object will pause.
3. Sometimes pausing delayed tweens or yoyo enabled tweens, the callback functions will trigger prematurely on resume.

Easing Functions

The tween.js distribution comes with all the easing functions that we need to perform most of the animation needs. There are 31 functions so far, here is a complete list.

下面的每个demo会重复5次动画，请点击表格相应的行来激活动画查看easing效果。