Giter Club home page Giter Club logo

jquerytween's Introduction

Important

jQueryTween is not the lightest anymore, I highly recommend using my kute.js

jQueryTween

Lightest Tweening Engine for jQuery / busted

Why jQueryTween?

  • A super light & simple jQuery plugin that works as a controller for tween.js (javascript animation engine), and for jQuery users, makes work alot easier. Imagine writing init(), animate() and update() over and over again?
  • Supports most popular transitions such as transform, opacity, color and backgroundPosition for up to 60 frames per second.
  • Can also do smooth scrollTo
  • It's about 8k minified and plus 6k of tween.js, you can do a ton of cool things without the need to use expensive or complicated animation engines.
  • This one is simple, light and I dare to say it's much more performance driven when it comes to simple tweens.
  • Keep in mind that tween.js is not included into the jQueryTween plugin, except for the AIO package. See demo for details.

DEMO

jQueryTween

Get to know some features

  • works with jQuery, yes I know it's cool for n00bs and scary for advanced devs
  • developer friendly and heavily documented
  • commercial use friendly license
  • can use all tween.js easing functions, can do delays and repeats
  • supports callback functions to be used for onUpdate or onComplete events
  • performance tweaks, when only a few tween properties are used, the others don't update
  • for most properties you don't need to set an initial value, it gets it's current properties values, except transform (translate,rotate,scale) and position (top,right,bottom,left)
  • tween control: play/pause/stop
  • tween scrollTo window or target
  • tween text color and background-color
  • tween position: top, bottom, left, right (for absolute/relative positioned objects)
  • tween background-position, but only when using percent values for X and Y
  • tween transform - translate3d
  • tween transform - rotateX, rotateY, rotateZ
  • tween transform - scale
  • tween opacity

Quick Example

//Simple example jQueryTween syntax, very simple indeed
 $('#selector').jQueryTween({ to: { opacity: 0.5, translate: {y: 50} }, duration: 700 });

Please notice that it's best to use a unique ID selector to perform an jQueryTween animation, you don't want all your things to fly around.

Advanced Example

 // Complex example jQueryTween syntax 
$('#selector').jQueryTween({
	from: {
		opacity: 1,
		translate: {x:0, y:0, z:0},
		rotate: {x:0, y:0, z:0},
		scale: 1
	}, 
	to: {
		opacity: 0.5, 
		translate: {x: 150, y: 50, z: -100}, 
		rotate: {x: 5, y:15, z:-25},
		scale: 1.5
	}, 
	repeat: 2, // can be number or 'Infinity'
	duration: 1500,
	easing: TWEEN.Easing.Exponential.InOut, // my favorite
	delay: 500,
}, function() {
	//do some cool stuff when tween finished animating
}, function() {
	//do some cool stuff while tween is running 
});

ScrollTo Tweens

// Scroll to top of window
$('#button').on('click', function() {
	$('body').jQueryTween({ to: { scroll: 0 } });
});
// Scroll to element when clicking anchor links
$('a#button').on('click', function(e) {
	var target = $( $.attr(this, 'href') );
	$('#element').jQueryTween({ to: { scroll: $(target).offset().top } });
});

Tween Control

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

TO DO / known issues

  • tween to relative values (such as "+200" or "-150") does not work properly with some properties
  • tweening background position only works for percent values
  • tween chaining is not implemented
  • does not tween text properties, spacing, etc, only what's shown in the examples
  • scroll events are only available for document.body, no other containers available

License

jQueryTween is licensed under MIT.

You want to support the project?

Please feel free to fork, report issues or donate.

jquerytween's People

Contributors

thednp avatar dalisoft avatar

Watchers

Carabineiro avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.