Well recently i had to design a list rotator and use mootools to create the effect. Did some thinking and got a simple logic to do so . Remove the first element, get the list and append the data of the first element to the list. Well so it rotates and the effect looks cool. Here is a working demo of the script and yeah the HTML, CSS and JavaScript has been written below.

Demo Here

The HTML 

    <ul id="rotate">
        <li>"Courage is the discovery that you may not win, and trying when you know you can lose."</li>
        <li>If you only do what you know you can do- you never do very much.</li>
        <li>There are no failures - just experiences and your reactions to them.</li>
        <li>Being deeply loved by someone gives you strength, while loving someone deeply gives you courage.</li>
        <li>Time goes by so fast, people go in and out of your life. You must never miss the opportunity to tell these people how much they mean to you.</li>
        <li>It's kind of fun to do the impossible.</li>
        <li>Live as if you were to die tomorrow. Learn as if you were to live forever.</li>
        <li>Design is not the narrow application of formal skills, it is a way of thinking</li>
        <li>Good design goes to heaven; bad design goes everywhere</li>
        <li>Designers are meant to be loved, not to be understood</li>
    </ul>

The Css 

        #rotate{width:400px; height:320px; overflow:hidden;}
        #rotate li{display:block; padding:10px 20px; margin:5px; border-bottom:1px dotted #ccc; list-style-type:none; height:50px; overflow:hidden; font-size:14px;}

The Javasccript 

    window.addEvent('domready', function() {
        function rotateList(){
            first=document.getElement("ul#rotate > li");
            text = first.get('html');
            first.set('morph', {duration:1000 , transition: 'linear'});
            first.morph({opacity:0,height:0,marginTop:0,marginBottom:0,paddingTop:0,paddingBottom:0,"background-color":"#FFD"});
            (function(){first.dispose()}).delay(1000);
            var newli=document.createElement("li");
            newli.innerHTML=text;
            document.getElementById("rotate").appendChild(newli);
        }
        interval = setInterval(rotateList, 5000);
    });

Well and if we want the list to rotate the other way round, remove the last element and add it to the top . We can take a look at the js snippet below.

JavaScript for the list to rotate other ways 

        function rotateList(){
            first=$$("#rotate li");
            lastli=first[first.length-1];
            text=lastli.innerHTML;
            lastli.dispose();
            var newli=document.createElement("li");
            newli.innerHTML=text;
            newli.set('styles',{
                opacity:0,
                height:0,
                marginTop:0,
                marginBottom:0,
                paddingTop:0,
                paddingBottom:0
                });

            var inserted = document.getElementById("rotate").insertBefore(newli, first[0]);
            inserted.morph({height:30,marginTop:5,marginBottom:5,paddingTop:0,paddingBottom:10});
            (function(){inserted.fade('in')}).delay(500);
        }

         interval = setInterval(rotateList, 2000);

Click here to check the Demo

Well and if u are interested in some more javascript awesomeness check out the following posts:

Right Click menu, Awesomeness

Nifty navigation effect using jQuery and CSS

Any issues use the comment box below