JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.snorkl.tv/dev/libs/greensock/TweenMax.min.js"></script>
<p id='target'>Highlight the following text between 1 and 2 seconds:<span id='highlight'> some text.</span></p>

<p>The 'fade out' occassionally jumps to the end for a frame and there is a flicker on the shadow. It's not consistent though so it may take a few 'runs' before it shows.</p>

CSS

body {
    padding: 10px;
}
p {
    font: normal 12px Helvetica, Arial, sans-serif;
    margin-bottom: 10px;
}
#highlight {
    border-radius: 30px;
    background-color: rgba(195, 13, 13, 0);
    box-shadow: 0px 0px 6px 6px rgba(195, 13, 13, 0);
    
    -webkit-transition: background-color 2s ease, color .4s ease, box-shadow .4s ease;
    -moz-transition: background-color 2s ease, color .4s ease, box-shadow .4s ease;
    -o-transition: background-color 2s ease, color .4s ease, box-shadow .4s ease;
    transition: background-color 2s ease, color .4s ease, box-shadow .4s ease;
}
#highlight.on {
    color: #ffffff;
    background-color: rgba(195, 13, 13, 1);
    box-shadow: 0px 0px 6px 6px rgba(195, 13, 13, 1);
    
    -webkit-transition: background-color 2.4s ease, color .4s ease, box-shadow .4s ease;
    -moz-transition: background-color 2.4s ease, color .4s ease, box-shadow .4s ease;
    -o-transition: background-color 2.4s ease, color .4s ease, box-shadow .4s ease;
    transition: background-color 2.4s ease, color .4s ease, box-shadow .4s ease;
}

JavaScript

var target = $('#target');
var highlight = $('#highlight');
var timeline = new TimelineMax({paused:true});

timeline.append(turnOn, 1);
timeline.append(turnOff, 2);


timeline.play();

function turnOn(){
    console.log('on');
    highlight.addClass('on');
    }

function turnOff(){
    console.log('off');
    highlight.removeClass('on');
    }