Description
jQuery Transit is a plugin for to help you do CSS transformations and
transitions in jQuery.
Refer to the jQuery Transit website for
examples.
jquery.transit alternatives and similar libraries
Based on the "Animations" category.
Alternatively, view jquery.transit alternatives based on common mentions on social networks and blogs.
-
AutoAnimate
A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. -
tsParticles
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components. -
Scrawl-canvas Library
Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element easier, and more fun -
Scroll Btween
ScrollBtween uses scroll position of document - or any DOM element - to tween CSS values on any DOM element. -
TransitionEnd
:dizzy: TransitionEnd is an agnostic and cross-browser library to work with transitionend event. -
Scroll Frames
Animate sequences of still frames on any DOM element in relation with its position into the viewport. https://olivier3lanc.github.io/Scroll-Frames/
CodeRabbit: AI Code Reviews for Developers
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of jquery.transit or a related project?
README
jQuery Transit
Super-smooth CSS3 transformations and transitions for jQuery
jQuery Transit is a plugin for to help you do CSS transformations and transitions in jQuery.
Refer to the jQuery Transit website for examples.
Usage
Just include jquery.transit.js after jQuery. Requires jQuery 1.4+.
<script src='jquery.js'></script>
<script src='jquery.transit.js'></script>
It is also available via bower and npm.
$ bower install --save jquery.transit
$ npm install --save jquery.transit
Transformations
You can set transformations as you would any CSS property in jQuery.
(Note that you cannot $.fn.animate()
them, only set them.)
$("#box").css({ x: '30px' }); // Move right
$("#box").css({ y: '60px' }); // Move down
$("#box").css({ translate: [60,30] }); // Move right and down
$("#box").css({ rotate: '30deg' }); // Rotate clockwise
$("#box").css({ scale: 2 }); // Scale up 2x (200%)
$("#box").css({ scale: [2, 1.5] }); // Scale horiz and vertical
$("#box").css({ skewX: '30deg' }); // Skew horizontally
$("#box").css({ skewY: '30deg' }); // Skew vertical
$("#box").css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation
$("#box").css({ rotateY: 30 });
$("#box").css({ rotate3d: [1, 1, 0, 45] });
Relative values are supported.
$("#box").css({ rotate: '+=30' }); // 30 degrees more
$("#box").css({ rotate: '-=30' }); // 30 degrees less
All units are optional.
$("#box").css({ x: '30px' });
$("#box").css({ x: 30 });
Multiple arguments can be commas or an array.
$("#box").css({ translate: [60,30] });
$("#box").css({ translate: ['60px','30px'] });
$("#box").css({ translate: '60px,30px' });
Getters are supported. (Getting properties with multiple arguments returns arrays.)
$("#box").css('rotate'); //=> "30deg"
$("#box").css('translate'); //=> ['60px', '30px']
Animating - $.fn.transition
$('...').transition(options, [duration], [easing], [complete])
You can animate with CSS3 transitions using $.fn.transition()
. It works
exactly like $.fn.animate()
, except it uses CSS3 transitions.
$("#box").transition({ opacity: 0.1, scale: 0.3 });
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500); // duration
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 'fast'); // easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in'); // duration+easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, function() {..}); // callback
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() {..}); // everything
You can also pass duration and easing and complete as values in options
, just like in $.fn.animate()
.
$("#box").transition({
opacity: 0.1, scale: 0.3,
duration: 500,
easing: 'in',
complete: function() { /* ... */ }
});
Tests
Transit has a unique test suite. Open test/index.html
to see it. When
contibuting fixes, be sure to test this out with different jQuery versions and
different browsers.
Alternatives
Velocity.js (recommended!)
- Pros: optimized for situations with hundreds of simultaneous transitions. Lots of extra features.
- Pros: no jQuery dependency, great syntax.
- Cons (at time of writing): no iOS support (doesn't use
translate3d
), some IE bugs, no 3D transforms, no animation queue.
- Pros: transparently overrides
$.fn.animate()
to provide CSS transitions support. - Cons: transparently overrides
$.fn.animate()
. No transformations support.
- Pros: Tons of transformations.
- Cons: No CSS transition support; animates via
fx.step
.
- Pros: simply provides rotation.
- Cons: simply provides rotation. No transitions support.
Support
Bugs and requests: submit them through the project's issues tracker.
Questions: ask them at StackOverflow with the tag jquery-transit.
Thanks
jQuery Transit © 2011-2014+, Rico Sta. Cruz. Released under the MIT License. Authored and maintained by Rico Sta. Cruz with help from contributors.
ricostacruz.com · GitHub @rstacruz · Twitter @rstacruz
*Note that all licence references and agreements mentioned in the jquery.transit README section above
are relevant to that project's source code only.