JavaScript Library For CSS3 Based Page Transitions – Animate Transition

Preview:

Description:

Animate Transition allows you to easily make transition between any two (or more, it all depends on you ) HTML elements. It can be used in different variety of situations, whatever you want to enhance appearance of your web site or navigate between pages in hybrid mobile application.

Animate Transition provides great performance due to using hardware accelerated CSS transitions. You can choose from 12 preset animation types for blocks, 8 animation types for popups or create your own CSS animation.

Basic Usage:

Load the required stylesheet and Animate Transition JS library in your project.

<link rel="stylesheet" href="transitions.css">
<script src="animateTransition.min.js"></script>

Animate blocks:

AnimateTransition({
  // container where the animation will take place.
  container: container,
  // block, to which the transition is carried out.
  // If it is not defined, by blockOut the block with the selected animation will disappear from the screen.
  blockIn: blockIn,
  // block, from which the transition is carried out. 
  // If it is not defined, by blockIn the block with the selected animation will appear. 
  // At least one parameter ( blockIn or blockOut ) must be specified. 
  // container, blockIn, blockOut can be both css selectors or already existing DOM Elements.
  blockOut: blockOut,
  // slide-in, slide-out, fade-in, fade-out, cover-in, cover-out, cover-double-in, 
  // cover-double-out, revolution-in, revolution-out, bounce-in, bounce-out
  animation: 'slide-in',
  // callbacks
  onTransitionStart: function (blockIn, blockOut, container, event) {
  },
  
  onTransitionEnd: function (blockIn, blockOut, container, event) {
  }
});

Animate popups.

AnimateTransition({
  container: container,
  blockIn: popup,
  // popup-scale-in, popup-drop-in, popup-revolution-in, popup-fade-in, 
  // cover-in, cover-left-in, cover-right-in, bounce-in
  animation: 'slide-in',
  onTransitionStart: function (blockIn, blockOut, container, event) {
  },
  onTransitionEnd: function (blockIn, blockOut, container, event) {
  }
});