Gallery

The Gallery is deprecated. No new Gallery components may be submitted, and modifying existing components is disabled. For more information please read the Gallery Deprecation blog post. This is a static snapshot of the Gallery for archive purposes.

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Anim Morph (gallery-anim-morph) on cdn

Last Updated: 11/20/12

+ 0 -

Richard Harding

YUI Contributor

Created: 06/26/12
Last CDN Push: 07/18/12
Build Tag: gallery-2012.07.18-13-22
Project: YUI 3
License: YUI BSD
YUI Version: 3.8.0pr2
Free for use.

Simple tool for morphing between two nodes with an animation. We use this to transition from a list view to an edit view by 'morphing' the show/hide of the list into the form for edit.

See the example for a demo with html, css, and JS setup to morph back and forth between two views.

Download
Docs
Homepage
Bugs
Source
Example
Forum
History

See the api docs in the module.

Code Sample

<script src="http://yui.yahooapis.com/3.8.0pr2/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.07.18-13-22'
}).use('gallery-anim-morph', function(Y) {
 
    var morpher = new Y.gallery.anim.morph.Morph({
        srcNode: Y.one('#target1'),
        targetNode: Y.one('#target2')
    });
 
    morpher.morph();
 
    // and back again
    morpher.reverse();
 
});

All code on this site is licensed under the BSD License unless stated otherwise.