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 ibegyourpardon on CodePen.
| <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> |
| 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(); | |
| }; |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script> |
| @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); | |
| } | |
| <link href="https://codepen.io/GreenSock/pen/JGaKdQ" rel="stylesheet" /> |