Moving Text with TimeKitJS

As discussed in the fade example, TimeKit automatically animates changes between values of properties like opacity, margin and positioning. This example uses absolute positioning, but similar movements can also be achieved by adjusting padding or margin, depending on which is most appropriate to your content structure.

The first text block in this example is a simple marquee effect that follows the fish across the screen, beginning as soon as the video is played. This is achieved by using the single TimeKit declaration at 8 seconds, data-tk-8s="left: -600px;", to mark the end of the CSS animation and final placement off screen. TimeKit measures this pixel difference against the initial left: 705px; property set in the stylesheet to create the element's linear transition for the duration of 8 seconds.

The subsequent text nodes in this example reiterate the values used in the stylesheet. As the first values of the TimeKit syntax within each element are the same as the baseline CSS, no transition takes place until the interval between the timecode specified in the next value change takes place.

So, in the example of the second fact, data-tk-8s="left: -600px;" affirms no animation is needed on this element between 0 and 8 seconds. data-tk-11s="left: 50px;" then triggers the animation change from -600px to 50px for the duration of 3 seconds. data-tk-14s="left: 50px;" holds the positioning for the next 3 seconds before data-tk-17s="left: -600px;" moves the text back off screen in the subsequent 3 seconds.

Remember that TimeKit is designed to run animation between specified times, so all of the above is completed and the element entirely off screen by the 17-second mark. TimeKit is able to animate the change of any numeric value regardless of unit, provided those units are the same across the initial style and any style changes listed in the TimeKit syntax — px to px, em to em, % to %, etc. TimeKit will treat a unit change in a single CSS property as a non-animatable value change and simply toggle to the new value at the moment it is declared in the tk-data tag, as it does with other non-animatable properties.

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 id="firstfact" class="goldfish" 
            data-tk-0s="left: 705px;" 
            data-tk-8s="left: -600px;"
        >
            Goldfish do not have eyelids, <br /> meaning they sleep with their eyes open.
        </h3>
        <h3 id="secondfact" class="goldfish" 
            data-tk-8s="left: -600px;" 
            data-tk-11s="left: 50px;" 
            data-tk-14s="left: 50px;" 
            data-tk-17s="left: -600px;"
        >
            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="right: -5%; top: -5%;" 
             data-tk-17s="right: -5%; top: -5%;" 
             data-tk-19s="right: 45%; top: 45%;"
        >
            Learn more!
        </a>
    

.tk-canvas {
        overflow: hidden;
        position: relative;
    }
    .goldfish {
        bottom: 100px;
        position: absolute;
        text-align: center;
        width: 600px;
        z-index: 2;        
    }
    #firstfact {
        left: 705px;
    }
    #secondfact {
        left: -600px;
    }
    .learnmore {
        position: absolute;
        right: -5%;
        top: -5%;
    }