BBC - 13 Minutes to the Moon

bbc-13-minutes-to-the-moon.markdown

BBC - 13 Minutes to the Moon

From the BBC's series: https://www.bbc.co.uk/programmes/w13xttx2

I initially tried it with html/css masking/clipping but it was very poor cross browser with the things I needed to do with background-clip: text; So just went all out SVG which is far easier.

A Pen by Pete Barr on CodePen.

License.

index.html

<div class="container">
    
    <div class="moon">
        <svg class="moon__svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 611 611">
            <defs>
                <clipPath id="clip-path" class="moon__svg-rects" >
                    <rect id="top" width="611" height="72" />
                    <rect y="77" width="611" height="72" />
                    <rect y="154" width="611" height="72" />
                    <rect y="231" width="611" height="72" />
                    <rect y="308" width="611" height="72" />
                    <rect y="385" width="611" height="72" />
                    <rect y="462" width="611" height="72" />
                    <rect y="539" width="611" height="72" />
                </clipPath>
            </defs>
            <g clip-path="url(#clip-path)">
                <image class="moon__img" width="1024" height="1024" transform="translate(-271 -188) scale(0.98)" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/moon-01-adjusted-02.jpg"  />
            </g>
            <g class="moon__txt-bg" fill="#D5CEC6" transform="translate(-1 0)">
                <rect y="229" width="612" height="76" />
                <rect y="306" width="612" height="76" />
                <rect y="383" width="612" height="76" />
                <rect y="460" width="612" height="76" />
                <rect y="537" width="612" height="76" />
            </g>
            <clipPath id="moon_txt-mask" class="moon__txt" transform="translate(-2 0)">
                <text x="0" y="303">
                    <tspan>13</tspan>
                </text>
                <text x="0" y="380">
                    <tspan>MINUTES</tspan>
                </text>
                <text x="1" y="457">
                    <tspan>TO</tspan>
                </text>
                <text x="1" y="534">
                    <tspan>THE</tspan>
                </text>
                <text x="0" y="611">
                    <tspan>MOON</tspan>
                </text>
            </clipPath>
            <g clip-path="url(#moon_txt-mask)">
                <image class="moon__img" width="1024" height="1024" transform="translate(-271 -188) scale(0.98)" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/moon-01-adjusted-02.jpg"  />
                <rect class="moon__txt-overlay" width="611" height="611"></rect>
            </g>
        </svg>
    </div>
    <div class="container__base"></div>
</div>

script.js

console.clear();

select = e => document.querySelector(e);
selectAll = e => document.querySelectorAll(e);

const container = select('.container');
let wArray = [161, 614, 189, 278, 404],
    tl;

function animate() {
    tl = gsap.timeline( { 
        delay: 0.5,
        repeat: -1, 
        defaults: {
            ease: "expo.inOut",
            duration: 2
        }
    });
    
    tl.from('.container__base', {
        scaleX: 0,
        duration: 2,
        transformOrigin: "top right",
        // ease: "expo"
    })
    
    .from('.moon__svg-rects rect', {
        scaleX: 0,
        stagger: 0.07,
        duration: 3,
        ease: "expo"
    }, "-=1.0")
    
    .to('.moon__txt-bg rect', {
        stagger: 0.14,
        scaleX: 1
    }, "-=2.5")
    
    .from('text', {
        x: function(i) {
            return -wArray[i]
        },
        ease: 'power4',
        stagger: 0.14
    }, "-=1.6")
    
    .from('.moon__img', {
        x: "+=200",
        ease: 'power4',
        duration: 15
    }, 0);
}

function init() {
    gsap.set(container, { autoAlpha: 1 });
    
    gsap.set('.moon__txt-bg rect', { 
         width: function(i) {
            return wArray[i]
        },
        scaleX: 0
    })
    
    animate();
    
    container.onclick = () => {
        tl.restart();
    }

}

function resize() {
	let vw = window.innerWidth;
    let vh = window.innerHeight;
	let wh = container.offsetWidth;
	let scaleFactor = 1;
    
    if(vw/vh >= 1) {
        scaleFactor = vh/wh
    }
    else {
        scaleFactor = vw/wh
    }
    
	if(scaleFactor<1) {
		gsap.set(container, { scale: scaleFactor });
	}
	else {
        gsap.set(container, { scale: 1 });
    }
}

window.onresize = resize;

window.onload = () => {
	init();
    resize();
    // GSDevTools.create();
};

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>

style.scss

@font-face {
    font-family: "MonumentExtended-Ultrabold";
    src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/MonumentExtended-Ultrabold.woff") format("woff"),
        url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/MonumentExtended-Ultrabold.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

html, body {
	width: 100%;
	height: 100%;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

.container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
	position: relative;
    max-width: 679px;
    max-height: 679px;
	min-width: 679px;
	min-height: 679px;
    background: black;
    cursor: pointer;
	visibility: hidden;
}

.container__base {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: #D5CEC6;
}

.moon {
    position: relative;
    z-index: 2;
    width: 611px;
	height: 611px;
}

.moon__svg {
    width: 611px;
    height: 611px;
}

.moon__txt {
    font-family: "MonumentExtended-Ultrabold", sans-serif;
    font-size: 103px;
    line-height: 1;
    fill: black;
    letter-spacing: 2.1px;
}

.moon__txt-overlay {
    fill: rgba(0, 0, 0, 0.6);
}

styles

<link href="https://codepen.io/GreenSock/pen/JGaKdQ" rel="stylesheet" />