Goutte/SpellShow Demo

It is faster when not in jsfiddle :p

HTML

<script src="https://raw.github.com/Goutte/SpellShow/master/Source/SmoothSequentialMorph.js"></script>
<script src="https://raw.github.com/Goutte/SpellShow/master/Source/SpellShow.js"></script>
<p id="text">
    IN GIRUM IMUS <strong>NOCTE</strong> ET CONSUMIMUR IGNI
</p>

<p id="lorem">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultricies placerat lectus sit amet adipiscing. Maecenas laoreet, tellus nec mollis suscipit, nulla arcu tempor felis, et sollicitudin sapien mi a nulla. Integer venenatis lacinia sodales. In hac habitasse platea dictumst. Curabitur a metus sem, vitae porta orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin gravida augue at felis ullamcorper condimentum. Fusce dictum varius tellus, eget volutpat tortor posuere non. Quisque sollicitudin commodo mi vel porta. Fusce rhoncus dui sit amet elit luctus at vulputate dui pulvinar. Etiam nec turpis ut ante rutrum fringilla. Vestibulum non ligula nisi, vel pretium ipsum.
</p>

CSS

strong {
    font-weight: bold;
}

JavaScript

//// TITLE

document.id('text').spellShow({
    onComplete: function (){
        // WHEN TITLE HAS APPEARED, TURN IT BLUE
        document.id('text').setStyle('color','#39f');
    },
    smoothSequentialMorphOptions: {
        concurrentialMorphs: 6, // Higher number "smoothens" the apparition animation
        morphDuration: 1100 // For each character, the duration of the opacity morph
    }
});

//// LOREM IPSUM



document.id('lorem').spellShow({
    smoothSequentialMorphOptions: {
        concurrentialMorphs: 1, // Low number makes a typewriter effect
        morphDuration: 3 // For each character, the duration of the opacity morph
    }
}).chain(function(){ // Chaining is somewhat the same as defining an onComplete option
    
    // WHEN APPARITION IS COMPLETE, MAKE TEXT DISAPPEAR
    
    document.id('lorem').spellShow({
        smoothSequentialMorphProperties: {
          opacity: [1,0],
          'font-size': '0', // Makes the text being "eaten" by the top left
          'color': '#00f'   // Almost unnoticeable, but the eated part turns blue before disappearing
        },
        smoothSequentialMorphOptions: {
            initialCss: {opacity: 1},
            concurrentialMorphs: 15, // Higher number "smoothens" the apparition animation
            morphDuration: 150 // For each character, the duration of the opacity morph
        },
        onComplete: function(){
            
            // WHEN TEXT HAS DISAPPEARED, CHANGE TITLE COLOR AND UNDERLINE
        
            document.id('text').spellShow({
                smoothSequentialMorphProperties: {
                  opacity: [1,1],
                  'color': '#f39',
                  'text-decoration': 'underline'
                },
                smoothSequentialMorphOptions: {
                    initialCss: {opacity: 1},
                    concurrentialMorphs: 7, // Higher number "smoothens" the apparition animation
                    morphDuration: 777 // For each character, the duration of...