Morphing Elements Using MooTools and CSS

By  on  

Morphing an element between CSS classes is another great trick the MooTools JavaScript library enables you to do. Morphing isn't the most practical use of MooTools, but it's still a trick at your disposal.

Step 1: The XHTML

<a href="javascript:;" class="switch-view" rel="view1">View 1</a> |
<a href="javascript:;" class="switch-view" rel="view2">View 2</a> |
<a href="javascript:;" class="switch-view" rel="view3">View 3</a>
<br /><br />

<div class="view1" id="content-block">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam hendrerit
	egestas nunc. Nam scelerisque neque a nibh. Proin tincidunt. Suspendisse
	facilisis, lorem et venenatis consectetuer, augue justo molestie lacus, id
	consectetuer ligula nibh a tellus.
</div>

The block of content that will change is the content-block DIV. Each link above the DIV will control which morph the DIV will undergo. Notice that each link is given the switch-view class so that they can be selected as an array by MooTools. Each link also has a rel attribute that contains the CSS class that the content-block DIV should morph into.

Step 2: The CSS

.view1		{ border:2px solid #ffcc00; color:#000000; background:#fffea1; padding:5px; letter-spacing:3px; line-height:19px; font-family:tahoma; font-size:10px; }
.view2		{ border:9px dashed #0000ff; color:#009900; background:#fcfa56; padding:12px; letter-spacing:1px; line-height:22px; font-family:verdana; font-size:14px; }
.view3		{ border:5px solid #000000; color:#ffffff; background:#ff0000; padding:10px; letter-spacing:8px; line-height:25px; font-family:times; font-size:12px; }

I've defined three CSS classes with the same properties defined. If you fail to define the same properties in each class, you risk allowing the previous class' properties to stay during the morphing process.

Step 3: The MooTools JavaScript

//window on dom ready
window.addEvent('domready', function() {
	//for every switch-view link
	$$('.switch-view').each(function(el) {
		//add click event
		el.addEvent('click', function(e) {
			//nowhere
			e.stop();
			//morph baby!
			myFx = new Fx.Morph('content-block', {duration: 500, transition: Fx.Transitions.Sine.easeOut}).start('.' + el.get('rel'));
		});
	});
});

Once the DOM is ready, we use grab every link with the switch-view class. When any of these links are clicked on, the link's rel attribute is morphed into.

Recent Features

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    CSS Counters

    Counters.  They were a staple of the Geocities / early web scene that many of us "older" developers grew up with;  a feature then, the butt of web jokes now.  CSS has implemented its own type of counter, one more sane and straight-forward than the ole...

  • By
    Introducing MooTools ElementSpy

    One part of MooTools I love is the ease of implementing events within classes. Just add Events to your Implements array and you can fire events anywhere you want -- these events are extremely helpful. ScrollSpy and many other popular MooTools plugins would...

Discussion

  1. Just found this out which had me stumped for a while. When you tell it to morph to a class, you have to point it to the entire rule. So if you have have in your css ".a .b {rule}"

    you have to do el.morph(...,).start('.a .b'); instead of just .start('.b'), even if your element already matches the CSS selector.

  2. Kyle

    This shit doesn’t work

  3. Keiran Lusk

    Hi David. I am a complete newbie to MooTools. Thanks for the excellent tutorials regarding the wonderful world of MooTools. I have been studying the ‘morphing’ example above and was successful in implementing a practice run of your example on my WordPress site.

    I am currently working with a conditional logic form (Gravity Form on a WP site) and would like to morph a CSS element upon loading of a conditional html block (instead of initiating the morph through clicking, as shown in your demo).

    The scenario is:

    A wordpress post contains a thumbnail image, information and a conditional logic form. Site visitors select a picture frame style (in the conditional logic form) and the CSS image border elements are morphed to reflect their selection (a HTML block in the form initiates the script upon conditional selection of options).

    Instead of ‘clicking’ on View 1, View 2 or View 3, I need the various options to initiate automatically upon load. Is that possible? What would I need to alter in the:

    1. XHTML – I have tried many variations of ‘body onload’ but cannot trigger the morph.
    2. MooTools Javascript – would I remove the ‘click’ and replace with ‘load’?

    Any tips or advice would be greatly appreciated!

    Cheers,

    Keiran

  4. boske

    nice job :) but i wounder how to make link from other page direct to View 1,View 2 or View 3??

  5. Hi David nice tutorial, but i have a question! Hov to mahe link from other page to open view2 direct.
    Thanks!

  6. cec

    but the letters don’t actually morph.
    they change appearance but the font is always the same (arial i guess).
    how can i solve this problem?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!