Tangerine Development

The National Museum of Nuclear Science and History is celebrating their 50th anniversary this year with an exhibit on the iconic B-52 bomber. They asked me to create a slideshow type program to showcase the different models of the B-52 from A through H. The program follows a standard format of an attract screen, menu, and content pages. The above picture shows one content page. The top menu bar is animated and tweens to the active model.

I used Vue.js for the interface. The artwork was based on the design specifications from the Nuclear Museum and matches the rest of the exhibit. I like using Vue for these kinds of programs because it's a fun and efficient way to make professional applications with slick state change animations.

It was particularly fun to build the attract screen for this program because I used Vue to plot things out and CSS to take care of the rest. This Vue template loops over an array of images that I made that were based on the different planes in the pre-B-52 models.

    <div id="animation">
        <img v-for="(plane, index) in planes" class="plane" :src="imgSrc(plane, 'plane')" :style="planeLoc(index)" :key="'plane-'+plane.name">
        <img v-for="(plane, index) in planes" v-show="index == onPlane" class="icon animated flipInY" :src="imgSrc(plane, 'icon')" :key="'icon-'+plane.name" :style="locateAtPoint(iconPt)">
        <img v-for="(plane, index) in planes" class="label animated fadeInRight" v-show="index == onPlane" :src="imgSrc(plane, 'mod')" :key="'label-'+plane.name" :style="locateAtPoint(labelPt)">
    </div>

And then I use the CSS (Stylus) to bring in and out the images!

    img.plane
        position: absolute
        transition: 3s top, 3s left

    img.icon
        position: absolute
        animation-delay: 3s

    img.label
        position: absolute
        animation-delay: 4s
        transition: 0.5s opacity 

Easy and nice. Here's a short gif of it in action. To see the rest, visit the Nuclear Museum this summer!