Fade Text In/Out in TimeKitJS

While toggling the display property is a simple means of introducing new content as your video progresses, it isn't exactly elegant by itself. This example will introduce TimeKit's ability to animate transition effects. Unlike the display property, TimeKit can tween between values of numeric properties like opacity, margin and positioning. This example will combine the display toggle in the previous example will a 0 to 1 opacity change to create a simple fade in and out effect.

Because opacity by itself does not affect the ability to select an element, display: none; should be used in conjunction with opacity: 0; unless the element is moved outside the visible area of a parent container. In this example, no movement is involved, so the TimeKit tags will account for display changes immediately before opacity changes begin and immediately after they end.

The stylesheet in this example takes care of initializing the text elements with display: none; and opacity: 0;. The first fade transition should begin 2 seconds into the video and last for 1 second, so in data-tk pralance, data-tk-2s="opacity:0;", data-tk-3s="opacity:1".

Wait a minute. Why declare opacity: 0; again? Isn't that redundant?

Not if you want TimeKit to wait before beginning your transition. If you were to only include data-tk-3s="opacity:1", the entire interval between 0 seconds and 3 seconds would represent the time that TimeKit thinks you are affording for a transition. Because the fade in this example isn't needed until the 2 second mark, data-tk-2s="opacity:0" is declared again to mark off the time opacity should remain at 0.

For this same reason data-tk-6s="opacity:1;" is written to signal the end of the time spent at opacity: 1;. TimeKit looks for any change in numeric values and spends the entire time between those changes animating the different. To set aside an unmoving state, you need to declare the value again, setting a no-change boundary. Thus, we need, data-tk-2s="opacity:0;" and data-tk-3s="opacity:1;" to create the fade in lasting 1 second, data-tk-3s="opacity:1;" and data-tk-6s="opacity:1;" to hold the opacity at 1 for 3 seconds, and data-tk-6s="opacity:1;" and data-tk-7s="opacity:0;" to fade out across the last 1 second.

So what about the display toggle?

Remember that animated values change between two times, while a non-animatable state change occurs at a given time. In this case, the first second of the fade animation is the last instance of the element's opacity: 0; — which means it is also the first instance that the display needs to be toggled to block. Thus, they can be written together as data-tk-2s="display:block;opacity:0;" .

Because display is a non-animated property, you do not need to call it again until it needs to change. Animated properties must anticipate a change so that their animation can be completed, but pure state changes happen in an instant. Thus, you are able to call data-tk-7s="display:none;opacity:0;" because the 7 second mark is the moment opacity is returned to 0; accordingly, the moment display: block; is no longer needed.

var tk = new TimeKit('#video');

<div class="tk-canvas">
    <video id="video" controls>
        <source src="goldfish.mp4" type="video/mp4">
        <source src="goldfish.webm" type="video/webm">
        Sorry, your browser doesn't support HTML5 video.
    </video>
    <h3 class="goldfish" 
        data-tk-2s="display:block;opacity:0;" 
        data-tk-3s="opacity:1;" 
        data-tk-6s="opacity:1;" 
        data-tk-7s="display:none;opacity:0;"
    >
        Goldfish do not have eyelids, <br /> meaning they sleep with their eyes open.
    </h3>
    <h3 class="goldfish" 
        data-tk-9s="display:block;opacity:0;" 
        data-tk-10s="opacity:1;" 
        data-tk-15s="opacity:1;" 
        data-tk-16s="display:none;opacity:0;"
    >
        Goldfish also lack stomachs. Instead, their intestines break down food and absorb nutrients.
    </h3>
    <a class="learnmore" href="http://channel.nationalgeographic.com/wild/fish-bowl/articles/fun-fish-facts/" target="_blank"
         data-tk-0s="display:none;opacity:0;"
         data-tk-16s="display:block;opacity:0;"
         data-tk-17s="opacity:1;"
    >
        Learn more!
    </a>

.tk-canvas {
    position: relative;
}
.goldfish {
    bottom: 100px;
    display: none;
    left: 50px;
    opacity: 0;
    position: absolute;
    text-align: center;
    width: 600px;
    z-index: 2;        
}
.learnmore {
    display: none;
    position: absolute;
    opacity: 0;
    right: 50px;
    top: 25px;
}