A view manager for MooTools that enables a "complex" yet beautiful and enjoyable user experience. Useful for things like slideshows or simple meta-page transitions. If you're looking for a full-site application of the "transition" functionality, try http://github.com/Xunnamius/Complex.Layout
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



A view manager for MooTools that enables a "complex" yet beautiful and enjoyable user experience. Useful for things like slideshows or simple meta-page transitions. If you're looking for an easy full-site application of the "transition" functionality, try Complex.Layout.


Note: if you're viewing this readme file from the (seemingly broken atm) MooTools forge, click here for a formatted version.

Setting up Your Page

Page setup is simple. First, make sure you include the Complex.Transitional script in your page, like so:

<script type="text/javascript" src="Complex.Transitional"></script>
<script type="text/javascript" src="myMainExternalScript.js"></script>

Next, make sure that you have a version of the following CSS included (be sure to change the ids, @WidthPX, etc.):

  /* Complex.Transitional styles */

  #outer_container, #inner_container, .view-state {
    width: @WidthPX;
    height: @HeightPX;
    position: relative;
    overflow: hidden;

  #inner_container {
    top: 0;
    left: 0;

  #state_container { display: none; }

  .view-state {
    width: 100%;
    height: 100%;
    float: left;

  /* End */

Finally, make sure your body follows the following general structure:

<div id="outer_container">

  <!-- Main container. Displays your first screen before JS loads! -->
  <div id="inner_container">
    <!-- Should only be one element in here -->
    <div id="state_splash" class="view-state">
      <!-- ... -->

  <!-- Contains your other states. Should be invisible (display: none). -->
  <div id="state_container">
    <div id="state_one" class="view-state">
      <!-- ... -->
    <div id="state_two" class="view-state">
      <!-- ... -->
    <div id="state_three" class="view-state">
      <!-- ... -->


Note that you may have multiple inner_container's, outer_containers's, or whatever, as long as there is a one-to-one correspondence between your inner container, state container, and an instance of the Complex.Transitional class.

How to Use

Once you have your xHTML set up correctly, the "hard part" is already over! Now all you have to do is initialize Fx.Transitional with an optional "options" argument, the default values of which look like this:

innerContainer: $('inner_container')
stateContainer: $('state_container')
tweenSettings: { duration: 375, transition: 'sine:out', link: 'cancel' } // Specially merged using Object.merge()

If you structured your page with the default id names, then you probably won't need to supply any options object.

Once you've done that, the following methods become available to you:

var viewManager = new Fx.Transitional();

// Shifts the view up/right/down/left, respectively
viewManager.shiftLeft($('state_one'));        // You can supply either a string or a DOM reference

viewManager.shift($('state_two'));            // Shifts the view in a random direction
viewManager.shiftOpposite($('state_three'));  // Shifts the view in the direction opposite of the previous shift operation

  chain(function(){ console.log('Yes, chaining works :)'); }).
  chain(function(){ /* more chaining */ }).

Note that this class's tween is not meant to be "canceled" (calls to the animator while it is running will be chained), as canceling it would leave the views in a dirty incomplete state. Bottom line: do not call cancel() on the tween.


var viewManager = new Fx.Transitional();


  1. Options (object, optional) See How To Use above

Coming Soon

  • Implement a "cancel" method to cancel the animation in a beautiful and logical way
  • Make sure the class works with variable-length containers (i.e. inner/outer containers w/ width/height defined as percents/em)


Released under MIT-like lisence (same as MooTools).