Complex.Transitional 1.4.3

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.


Tre Giles
Current version
GitHub Issues



  • _self_/_current_:
    • core/1.4.5: [core, Types, Fx.Tween]
    • more/ [Element.Measure]

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:

javascript 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: ```javascript var viewManager = new Fx.Transitional();

// Shifts the view up/right/down/left, respectively viewManager.shiftUp('state_one'); viewManager.shiftRight('state_two'); viewManager.shiftDown('state_three'); 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

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

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.

Setting Up Your Page

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

html <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.):

```css /* 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:



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.


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).


A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus