JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<link rel="stylesheet" href="http://www.drewgreenwell.com/content/metrojs.css">
<script src="http://www.drewgreenwell.com/scripts/metrojs.js"></script>
<h1>playOnHover with initial play</h1>
<div class="tiles red">
    <div class="live-tile" id="tile1" data-mode="flip">        
        <div>
            <a class="full" href="#">front</a>
            <span class="tile-title">front title</span>
        </div>
        <div>
            <p></p>
            <span class="tile-title">back title</span>
        </div>
    </div>
    <div class="live-tile green" id="tile2" data-mode="slide">
        <div>
            <a class="full" href="#">front</a>
            <span class="tile-title">front title</span>
        </div>
        <div>
            <p></p>
            <span class="tile-title">back title</span>
        </div>
    </div>
    
    <div class="live-tile blue" id="tile3" data-mode="slide" data-stops="50%" data-stack="true">  
        <div>
            <p></p>   
            <span class="tile-title">front title</span>
        </div>
        <div style="background-color:navy;">
            <p style="padding-top:55%;">Using data-mode stack adds a nice effect</p>            
        </div>
    </div>
</div>

JavaScript

var $tiles = $("#tile1, #tile2, #tile3").liveTile({ 
    repeatCount: 0,
    delay: 0,
    initDelay: 0,
    startNow: false
})

//a delay of 1 second between animations
var timer = new $.fn.metrojs.TileTimer(1000, function(){
    $tiles.liveTile("play");
    // repeat 3 times
}, 3);
// start in 3 seconds
timer.start(3000);