SwishJS - Animating elements using pre-defined CSS transitions

Download   Demo

SwishJS is a lightweight JavaScript library for animating elements using pre-defined CSS transitions. Includes jQuery plugin.

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="../dist/css-swish-transitions.css">

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="../dist/jquery.css-swish.js"></script>

2. HTML

<div class="demo-section">
	<div class="x-demo-1-a hidden" data-swish-transition="swish-fade">
		<span>Fade In</span>
	</div>
	<div class="x-demo-1-b" data-swish-transition="swish-fade">
		<span>Fade Out</span>
	</div>
</div>
<div class="demo-section">
	<div class="x-demo-2-a hidden" data-swish-transition="swish-zoom">
		<span>Zoom In</span>
	</div>
	<div class="x-demo-2-b" data-swish-transition="swish-zoom">
		<span>Zoom Out</span>
	</div>
</div>
<div class="demo-section">
	<div class="x-demo-3-a hidden" data-swish-transition="swish-slide">
		<span>Slide In</span>
	</div>
	<div class="x-demo-3-b" data-swish-transition="swish-slide">
		<span>Slide Out</span>
	</div>
</div>
<div class="demo-section">
	<div class="x-demo-4-a hidden" data-swish-transition="swish-3d-rotate">
		<span>3D Rotate In</span>
	</div>
	<div class="x-demo-4-b" data-swish-transition="swish-3d-rotate">
		<span>3D Rotate Out</span>
	</div>
</div>

3. JAVASCRIPT

$(function() 
	$('.demo-section div').click(function() 
		var $tar = $(this);
		$tar.swish();
		$tar.siblings('div').swish();
	);
);

Native JS

var elem = document.querySelector('#selector');
elem.swish('swish-fade', 1000);

4. ADVANCED

Data Attributes

The easiest way to use Swish is to add data attributes to your markup. Set the transition class using data‑swish‑transition and the duration withdata‑swish‑duration. The duration attribute is optional and will default to the rules in your stylesheet.

HTML

<div
 id="selector"
 data-swish-transition="swish-fade"
 data-swish-duration="500"
></div>

NATIVE JS

var elem = document.querySelector('#selector');
elem.swish();

JQUERY

$('#selector').swish();

More Methods

You can also transition in a specific direction using swishIn and swishOut. These methods take the same arguments as swish.

NATIVE JS

elem.swishIn(transition, duration);
elem.swishOut(transition, duration);

JQUERY

$('#selector').swishIn(transition, duration);
$('#selector').swishOut(transition, duration);

Default State

If the default state of your element is hidden, you will need to adddisplay: none to that element. This lets Swish know that the element isn’t visible.

Custom Transitions

Swish wouldn’t be very useful if you couldn’t supply your own transitions, and it lets you do just that! You just need a main transition class and an in and outstate. The in state is applied when the element is visible, and the out state when hidden.

CSS

.example-transition 
 transition: all 1s ease-in-out;


.example-transition.out 
 background: blue;


.example-transition.in 
 background: red;

NATIVE JS

var elem = document.querySelector('#selector');
elem.swish('example-transition');

JQUERY

$('#selector').swish('example-transition');

Return Value

Swish returns the duration of the animation in ms when called. This can be useful if you need to queue animations. Because jQuery methods are all monads, the jQuery plugin does not have this behaviour by default and requires additional parameters to be supplied.

NATIVE JS

var duration = elem.swish();
// duration = 1000, the default as specified in CSS

var duration = elem.swish('example-transition');
// duration = 1000, the default as specified in CSS

var duration = elem.swish('example-transition', 5000);
// duration = 5000, the value provided to the method

JQUERY

var duration = $('#selector').swish(true);
// duration = 1000, the default as specified in CSS

var duration = $('#selector').swish('example-transition', true);
// duration = 1000, the default as specified in CSS

var duration = $('#selector').swish('example-transition', 5000, true);
// duration = 5000, the value provided to the method

Configuration

By default Swish uses the classes in and out to show and hide elements. If this doesn’t work with your project, you can configure Swish to use other classes.

NATIVE JS

Swish(
 hiddenClass: 'out',
 visibleClass: 'in'
);

JQUERY

$.Swish(
 hiddenClass: 'out',
 visibleClass: 'in'
);

SwishJS - Animating elements using pre-defined CSS transitions