jsFiddle

• Run again
• Edit this fiddle

• JavaScript
• HTML
• CSS
• Result

window.addEvent('domready', function(){
    
    // morph instance
    var morph = new Fx.Morph('morph',{
        transition: 'quart:out',
        duration: 500,
        link: 'chain',
        onStart: function(){
            message.set('html','Starting Morph').highlight();
        },
        onComplete: function(){
            message.set('html','Morph complete').highlight();
        }
    });
    
    // scroll instance
    var scroll = new Fx.Scroll('scroll',{
        transition: 'elastic:out',
        duration: 2000,
        link: 'cancel',
        onStart: function(){
            message.set('html','Scroll start').highlight();
        },
        onComplete: function(){
            message.set('html','Scroll complete').highlight();
        }
    });
    
    // demos
    
    var message = $('message');
    
    var morphUp = function(){
        morph.start({
            'background-color': '#000',
            'border-color': '#ccc',
            'line-height': 40
        });
    };
    
    var morphDown = function(){
        morph.start({
            'background-color': '#e00',
            'border-color': '#000',
            'line-height': 120
        });
    };
    
    $('morph_up').addEvent('click', morphUp);
    $('morph_down').addEvent('click', morphDown);
        
    var scrollDown = function(){
        scroll.start(0, 300);
    };
    
    var scrollUp = function(){
        scroll.start(0, 100);
    };
    
    $('scroll_down').addEvent('click', scrollDown);
    $('scroll_up').addEvent('click', scrollUp);
    
});

<button id="morph_down">morphDown</button>
<button id="morph_up">morphUp</button>
<button id="scroll_down">scrollDown</button>
<button id="scroll_up">scrollUp</button>
<div id="message">Waiting</div>
<hr/>
<div id="morph">Fx.Morph</div>
<div id="scroll">
    <div id="scroll_inner">
        <div style="background-color: #fff;">Fx.Scroll</div>
        <div style="background-color: #eee;">Fx.Scroll</div>
        <div style="background-color: #ddd;">Fx.Scroll</div>
        <div style="background-color: #ccc;">Fx.Scroll</div>
        <div style="background-color: #bbb;">Fx.Scroll</div>
        <div style="background-color: #aaa;">Fx.Scroll</div>
        <div style="background-color: #999;">Fx.Scroll</div>
        <div style="background-color: #888;">Fx.Scroll</div>
        <div style="background-color: #777;">Fx.Scroll</div>
        <div style="background-color: #666;">Fx.Scroll</div>
    </div>
</div>

div#morph {
    height: 100px;
    background: #000;
    font-size: 20px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    border: solid 4px #ccc;
    margin-bottom: 20px;
}

div#scroll {
    border: solid 1px;
    height: 150px;
    overflow: auto;
}

div#scroll_inner {
    text-align: center;
}

div#scroll_inner div {
    height: 60px;
    line-height: 70px;
    margin: 0;
    padding: 0;
}

// irrelevant

body {
    font-family: helvetica, arial;
}