Headlander Title Animation

Developer
Chris Johnson
Size
11,702 Kb
Views
20,240
  1. Headlander Title Animation Previews
  2. Headlander Title Animation HTML Codes
  3. Headlander Title Animation CSS Codes
  4. Headlander Title Animation JS Codes

How do I make an headlander title animation?

I really liked the title animation for Headlander by Double Fine, so I decided to try and recreate it with all SVG. See http://www.headlander.com/ for more info about the game. (Disclaimer: I have no connection to the game or game studio. I just thought it looked neat.). What is a headlander title animation? How do you make a headlander title animation? This script and codes were developed by Chris Johnson on 01 October 2022, Saturday.

Headlander Title Animation Previews
IQ Test

Headlander Title Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Headlander Title Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Logo and animation belong to Cartoon Network (Adult Swim), made by Double Fine game studio -- all I did was replicate it -->
<svg class="starfield" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice"> <defs> <radialGradient id="starGradient" fx="50%" fy="50%" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="#de393e" stop-opacity="1" /> <stop offset="30%" stop-color="#de393e" stop-opacity="0.9" /> <stop offset="50%" stop-color="#de393e" stop-opacity="0.6" /> <stop offset="100%" stop-color="#000" stop-opacity="0" /> </radialGradient> <circle id="star" cx="200" cy="120" r="4" fill="url(#starGradient)" /> </defs>
</svg>
<div class="title-container"> <svg class="effects"> <defs> <filter id="headBlur" x="0" y="0"> <feGaussianBlur id="headGaussianBlur" in="SourceGraphic" stdDeviation="0" /> </filter> <filter id="headGlow" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="0" /> </filter> <filter id="stripeBlur" x="-20%" y="5%" width="140%" height="150%"> <feGaussianBlur in="SourceGraphic" stdDeviation="60,6" /> </filter> <filter id="writerEffect" x="-200%" y="-200%" width="500%" height="500%"> <feGaussianBlur in="SourceGraphic" stdDeviation="8" /> <feComponentTransfer result="MainGlow"> <feFuncA type="linear" slope="2.5" /> </feComponentTransfer> <feGaussianBlur in="SourceGraphic" stdDeviation="45,4" /> <feOffset dx="50" /> <feComponentTransfer result="SmearRightRed"> <feFuncR type="linear" slope="1.0" /> <feFuncG type="linear" slope="0" /> <feFuncB type="linear" slope="0" /> </feComponentTransfer> <feGaussianBlur in="SourceGraphic" stdDeviation="45,4" /> <feOffset dx="-50" /> <feComponentTransfer result="SmearLeftGreen"> <feFuncR type="linear" slope="0" /> <feFuncG type="linear" slope="1.0" /> <feFuncB type="linear" slope="0" /> </feComponentTransfer> <feGaussianBlur in="SourceGraphic" stdDeviation="8" /> <feOffset dx="-12" dy="17" /> <feComponentTransfer result="SmearDownLeftRed"> <feFuncR type="linear" slope="0.8" /> <feFuncG type="linear" slope="0" /> <feFuncB type="linear" slope="0" /> </feComponentTransfer> <feGaussianBlur in="SourceGraphic" stdDeviation="6" /> <feOffset dx="12" dy="-17" /> <feComponentTransfer result="SmearUpRightGreen"> <feFuncR type="linear" slope="0" /> <feFuncG type="linear" slope="0.5" /> <feFuncB type="linear" slope="0" /> </feComponentTransfer> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> <feOffset dx="-15" dy="-15" /> <feComponentTransfer result="SmearUpLeftBlue"> <feFuncR type="linear" slope="0" /> <feFuncG type="linear" slope="0" /> <feFuncB type="linear" slope="0.5" /> </feComponentTransfer> <feGaussianBlur in="SourceGraphic" stdDeviation="7" /> <feOffset dx="15" dy="10" /> <feComponentTransfer result="SmearDownRightBlue"> <feFuncR type="linear" slope="0" /> <feFuncG type="linear" slope="0" /> <feFuncB type="linear" slope="0.5" /> </feComponentTransfer> <feBlend in="SmearUpLeftBlue" in2="SmearDownRightBlue" mode="lighten" color-interpolation-filters="sRGB" /> <feBlend in2="SmearDownLeftRed" mode="lighten" color-interpolation-filters="sRGB" /> <feBlend in2="SmearUpRightGreen" mode="lighten" color-interpolation-filters="sRGB" /> <feBlend in2="SmearRightRed" mode="lighten" color-interpolation-filters="sRGB" /> <feBlend in2="SmearLeftGreen" mode="lighten" color-interpolation-filters="sRGB" result="Smears" /> <feComposite in="MainGlow" in2="Smears" operator="over" color-interpolation-filters="sRGB" /> </filter> <path id="shimmerPath" fill="#ffffff" d="m 0,39.7 C 3.2,2.3 3.2,2.3 35,0 3.2,-2.3 3.2,-2.3 0,-39.7 -3.2,-2.3 -3.2,-2.3 -35,0 -3.2,2.3 -3.2,2.3 0 39.7 Z" filter="url(#shimmerGlow)" /> <filter id="shimmerGlow" x="0" y="0"> <feGaussianBlur in="SourceGraphic" out="glow" stdDeviation="12" /> <feComposite in="glow" in2="SourceGraphic" operator="over" /> </filter> </defs> </svg> <svg class="title-top head" xmlns="http://www.w3.org/2000/svg" version="1.1" width="490" height="153" viewBox="-10 -10 490 153"> <g filter="url('#headBlur')"> <path d="m 79.001,3.001 c 2,1.083 3.833,4.667 3.667,10.083 -0.18,5.84 -2.13,38.25 -2.13,38.25 l -21.537,0 c 0,0 1.667,-32.5 2,-36.167 C 61.334,11.5 62.834,5.5 67.168,3 62.668,3 11.501,3 11.501,3 15.084,5.667 16.04,9.476 15.584,14.333 14.912,21.5 6.757,113.567 5.917,120.916 5.412,125.334 3.834,130.833 0,132.999 c 0,0 47.333,0 57.5,0 -1.833,-1.167 -4.396,-3.989 -4,-8.333 0.42,-4.617 2.75,-42.25 2.75,-42.25 l 22.084,0 c 0,0 -1.833,36.5 -2.5,40.667 -0.667,4.167 -2.083,7.583 -5.5,9.917 0,0 52.333,0 57.333,0 -1.5,-1.167 -4.667,-5.667 -4.333,-9.5 0.334,-3.833 4.917,-105.333 5.083,-108.833 0.166,-3.5 1.417,-8.833 5.417,-11.666 0,0 -42.333,0 -54.833,0 z" /> <path d="m 442.418,18.609 c -17,-14.667 -34.499,-18.146 -48.083,-18.146 -13.584,0 -27.834,4.053 -33.75,4.146 -5.334,0.083 -10.918,-1.917 -13.084,-4.146 0,5.146 4.416,94.396 4.416,94.396 L 310.119,3.098 c 0,0 -52.118,0 -54.368,0 3.5,1.177 4.166,4.761 4.166,5.927 0,1.166 -0.166,3.583 -0.833,5.25 -0.667,1.667 -34.25,82 -34.25,82 l -40.667,0 0,-15.583 c 0,0 13.046,0 16.167,0 3.121,0 9.211,1.792 10.75,2.917 0,-2.667 0,-35.083 0,-35.083 -1.167,2 -8.287,2.417 -10.417,2.417 -2.13,0 -15.583,0 -15.583,0 l 0,-13.251 c 0,0 15.25,0 23.333,0 5.654,0 17.083,1.583 18.167,3.75 0,-2.833 0.083,-38.417 0.083,-38.417 l -89.083,0 c 3.167,1.75 4.833,5.667 4.667,9.25 -0.093,2 -4.083,106.25 -4.417,110.083 -0.334,3.833 -1.916,8.75 -4.833,10.583 7.37,0 161,0 161,0 -2.417,-1.083 -5.083,-7.166 -5.083,-10.917 0,-2.418 -0.084,-25.667 -0.084,-25.667 l -16.666,0 15.166,-53.915 c 0,0 24.75,76.5 25.5,78.917 0.75,2.417 1.583,9.833 -0.333,11.583 3.287,0 87.084,0 94.917,0 7.833,0 24.417,-2.083 38.333,-13.333 13.916,-11.25 23.334,-25.25 23.334,-48.583 0,-20.501 -9.667,-37.751 -26.667,-52.417 z m -25.751,67.25 c -5.369,5.167 -12.583,6.083 -20,6.083 -0.084,-1.833 -3.166,-53.083 -3.166,-53.083 2.667,0 15.25,0.083 21.833,6.667 6.583,6.584 9.333,14.25 9.333,22.167 0,7.917 -2.631,12.999 -8,18.166 z" /> </g> </svg> <svg class="title-bottom ander" style="overflow:visible" xmlns="http://www.w3.org/2000/svg" version="1.1" width="935" height="306" viewBox="0 0 935 306"> <defs> <clipPath id="ander-reveal"> <rect id="ander-reveal-shape" x="147" y="-5" width="700" height="160" /> </clipPath> <mask id="ander-writer-mask"> <!-- JS will copy path as mask here --> </mask> </defs> <g id="ander-text-shape" clip-path="url(#ander-reveal)"> <path d="m 779.764,151.005 c 0,0 58.417,0 62.167,0 -3.865,-1.734 -7.438,-10.423 -8.059,-15.391 C 832.19,122.145 826.228,110.609 819.44,102.02 813.315,94.27 799.86,83.553 795.487,82.759 799.815,79.145 805.575,68.645 805.69,55.27 805.815,40.77 800.065,28.895 786.898,16.187 774.475,4.197 754.19,1.354 739.44,1.354 c -21.875,0 -25.124,4.333 -35.708,4.333 -6.917,0 -12.084,-1.917 -14.167,-4.333 0,0.667 11.56,136.083 11.625,138.583 0.125,4.75 -1.833,9.792 -4.438,11.083 0,0 58.6,0 62.042,0 -2.104,-0.834 -5.771,-6.124 -6.229,-9.749 -0.325,-2.574 -3.75,-28.876 -3.917,-34.459 3.5,0.667 9.565,1.346 21.334,9.584 10,7 13.911,18.625 13.911,22.666 10e-4,4.335 -1.796,11.276 -4.129,11.943 z M 757.649,64.688 c -3.916,3.417 -8.959,3.292 -13.125,3.292 l -2.791,-26.375 c 5.259,0.03 11.739,1.007 15.375,4.333 3.916,3.583 4.792,7.667 4.792,10.25 0,2.583 -0.335,5.083 -4.251,8.5 z" /> <path d="m 664.566,108.855 c -3.5,0 -25.917,0 -25.917,0 l -1,-17.334 c 0,0 10.833,0 15.5,0 4.667,0 12.083,1.583 12.667,3 -0.166,-2.167 -2.583,-37.667 -2.75,-39.167 -1.25,2.042 -9.625,2.667 -13.583,2.667 -2.75,0 -13.834,0 -13.834,0 l -1.166,-15.333 c 0,0 14.082,0 21.416,0 7.334,0 20.834,2.167 22.667,4.333 -0.25,-4.25 -3.333,-43.083 -3.333,-43.083 l -95.479,0 c 3.313,1.458 6.25,6.208 6.562,11.211 0.213,3.412 1.438,30.497 1.438,32.247 -5.5,-10.583 -9.771,-19.292 -25.604,-31.625 -3.996,-3.112 -9.829,-6.982 -18.25,-10.167 -7.13,-2.696 -16.493,-4.992 -24.249,-4.992 -13.896,0 -30.27,5.069 -37.148,5.069 -4.561,0 -10.811,-1.224 -14.061,-4.599 l 0.063,107.563 -15.063,0 c 0,0 -0.125,-86.25 0,-92.188 0.125,-5.938 3.375,-11.5 5.875,-12.375 -4,0 -55.999,0 -57.062,0 2.063,0.75 5.312,7.063 5.25,10.938 -0.062,3.875 -1.5,60.25 -1.5,60.25 l -41.813,-71.188 -49.958,0 c 2.625,1.063 5.542,6.396 5.417,10.396 -0.125,4 -5.771,96.167 -5.771,96.167 L 279.13,4.082 c 0,0 -57.125,0 -57.563,0 2.688,0.938 4.75,5.938 3.063,9.688 -1.687,3.75 -68,137.188 -68,137.188 0,0 89.813,0 90.875,0 -2.5,-1 -4.563,-6.25 -4.375,-10.625 0.188,-4.375 2.188,-30.313 2.313,-31.5 -3.313,0 -16.875,0 -16.875,0 l 21.917,-61.479 c 0,0 16.354,83.229 17.417,88.167 1.063,4.938 0.75,13 -2.646,15.5 3.875,0 100.875,0 100.875,0 -2.813,-2 -5.146,-8 -5,-12.125 0.201,-5.686 2.604,-66.625 2.604,-66.625 l 42.785,78.75 c 0,0 90.796,0.017 114.296,0 21.919,-0.016 36.708,-8.209 45.875,-15.125 9.167,-6.916 17.291,-15.624 23.958,-34.208 0.25,14.166 1.084,32.833 1.334,37 0.25,4.167 -2,10.833 -4.5,12.25 4.952,0 99.708,0.067 99.708,0.067 l -4,-45.984 c -1.5,2.25 -12.75,3.834 -18.625,3.834 z M 547.15,75.688 c -0.416,10.917 -4,16.833 -10.25,22.083 -6.25,5.25 -12.25,6.75 -20.584,6.75 l -1.083,-60.833 c 8.5,0 17.167,3.083 22,7.833 4.833,4.75 10.333,13.25 9.917,24.167 z" /> </g> <g filter="url(#writerEffect)"> <rect id="ander-writer-rect" fill="#ffffff" x="345" y="0" height="155" width="70" mask="url(#ander-writer-mask)" /> </g> </svg> <svg class="title-bottom letter-l" xmlns="http://www.w3.org/2000/svg" version="1.1" width="935" height="306" viewBox="0 0 935 306"> <defs> <clipPath id="letter-l-reveal"> <polygon id="letter-l-reveal-shape" x="-990" y="-9" points="30,-9 1020,-9 885,221 30,221" /> </clipPath> <mask id="letter-l-writer-mask"> <!-- JS will copy path as mask here --> </mask> </defs> <g id="letter-l-shape" clip-path="url(#letter-l-reveal)"> <path d="m 50.406,209.974 834.316,0 C 872.04,185.587 861.925,166.146 861.925,166.146 l -733.026,0 c 0,0 73.917,-146.292 76.083,-150.875 2.166,-4.583 6.166,-9.459 9.812,-11.25 0,0 -65.12,0 -65.729,0 3.844,1.016 5.292,5.793 4,9.418 -0.792,2.227 -58.361,112.098 -102.659,196.535 z" /> </g> <g filter="url(#writerEffect)"> <path id="letter-l-writer-rect" fill="#ffffff" d="m 161,-45 78,0 -20,47 -71,0 z" mask="url(#letter-l-writer-mask)" /> </g> </svg> <svg class="title-stripes stripe-1" style="overflow:visible" xmlns="http://www.w3.org/2000/svg" version="1.1" width="935" height="306" viewBox="0 0 935 306"> <defs> <clipPath id="stripe-1-reveal"> <rect id="stripe-1-reveal-shape" x="33" y="204" width="869" height="34" /> </clipPath> </defs> <path clip-path="url(#stripe-1-reveal)" d="m 896.748,233.099 c -4.104,-7.895 -8.183,-15.736 -12.025,-23.125 l -834.317,0 c -4.182,7.972 -8.247,15.719 -12.134,23.125 l 858.476,0 z" /> </svg> <svg class="title-stripes stripe-2" style="overflow:visible" xmlns="http://www.w3.org/2000/svg" version="1.1" width="935" height="306" viewBox="0 0 935 306"> <defs> <clipPath id="stripe-2-reveal"> <rect id="stripe-2-reveal-shape" x="21" y="227" width="892" height="34" /> </clipPath> </defs> <path clip-path="url(#stripe-2-reveal)" d="m 908.736,256.162 c -3.899,-7.503 -7.972,-15.337 -12.021,-23.125 l -858.41,0 c -4.288,8.172 -8.359,15.928 -12.137,23.125 l 882.568,0 z" /> </svg> <svg class="title-stripes stripe-3" style="overflow:visible" xmlns="http://www.w3.org/2000/svg" version="1.1" width="935" height="306" viewBox="0 0 935 306"> <defs> <clipPath id="stripe-3-reveal"> <rect id="stripe-3-reveal-shape" x="9" y="250" width="917" height="34" /> </clipPath> </defs> <path clip-path="url(#stripe-3-reveal)" d="m 920.751,279.287 c -3.609,-6.95 -7.703,-14.828 -12.015,-23.125 l -882.568,0 c -4.511,8.594 -8.604,16.39 -12.14,23.125 l 906.723,0 z" /> </svg> <svg class="title-stripes stripe-4" style="overflow:visible" xmlns="http://www.w3.org/2000/svg" version="1.1" width="935" height="306" viewBox="0 0 935 306"> <defs> <clipPath id="stripe-4-reveal"> <rect id="stripe-4-reveal-shape" x="-5" y="274" width="945" height="37" /> </clipPath> </defs> <path clip-path="url(#stripe-4-reveal)" d="m 0,306 c 3.771,-1.417 28.223,-3.604 40.223,-3.604 12,0 835.92,0 850.712,0 12.001,0 42.091,1.501 43.653,3.604 -0.38,-0.783 -5.945,-11.519 -13.837,-26.714 l -906.723,0 C 5.341,295.832 0,306 0,306 Z" /> </svg> <svg class="title-shimmers" style="overflow:visible" xmlns="http://www.w3.org/2000/svg" version="1.1" width="935" height="306" viewBox="0 0 935 306"> <use class="stationary-shimmer-1" x="257" y="22" xlink:href="#shimmerPath" /> <use class="stationary-shimmer-2" x="696" y="57" xlink:href="#shimmerPath" /> <use class="stationary-shimmer-3" x="759" y="158" xlink:href="#shimmerPath" /> <use class="moving-shimmer" x="147" y="183" xlink:href="#shimmerPath" /> <!-- <use class="moving-shimmer-point-1" x="147" y="183" xlink:href="#shimmerPath" /> --> <!-- <use class="moving-shimmer-point-2" x="43" y="363" xlink:href="#shimmerPath" /> --> <!-- <use class="moving-shimmer-point-3" x="884" y="363" xlink:href="#shimmerPath" /> --> </svg> <div class="credits"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/168886/logo-double-fine.png" alt="Double Fine" /> <p>&</p> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/168886/logo-adult-swim-games.png" alt="Adult Swim Games" /> </div> <div class="shameless-plug"> <p>Animation inadequately reproduced by </p> <h2>Chris Johnson</h2> <h3 class="twitter-contact"> <svg class="twitter-logo" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 300.00006 244.18703" width="40" height="30"> <path fill="#1da1f2" d="m 94.7,243.2 c 112.5,0 174,-93.2 174,-174 0,-2.6 -0,-5.3 -0.2,-7.9 11.9,-8.6 22.3,-19.4 30.5,-31.7 -11,4.9 -22.7,8.1 -35.1,9.6 12.6,-7.6 22.3,-19.5 26.9,-33.8 -11.8,7 -24.9,12.1 -38.8,14.8 -11.2,-11.9 -27.0,-19.3 -44.6,-19.3 -33.8,0 -61.1,27.4 -61.1,61.1 0,4.8 0.5,9.5 1.6,13.9 -50.8,-2.6 -95.9,-26.9 -126,-63.9 -5.3,9 -8.3,19.5 -8.3,30.7 0,21.2 10.8,39.9 27.2,50.9 -10,-0.3 -19.5,-3.1 -27.7,-7.6 0,0.3 0,0.5 0,0.8 0,29.6 21.1,54.3 49.1,59.9 -5.1,1.4 -10.5,2.2 -16.1,2.2 -3.9,0 -7.8,-0.4 -11.5,-1.1 7.8,24.3 30.4,42 57.1,42.5 -20.9,16.4 -47.3,26.2 -75.9,26.2 -4.9,0 -9.8,-0.3 -14.6,-0.8 27.1,17.3 59.2,27.5 93.7,27.5" /> </svg> jhnsnc </h3> </div>
</div>
<div class="scrubber"> <div class="scrubber-progress"></div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.12.0/lodash.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Headlander Title Animation - Script Codes CSS Codes

@import "https://fonts.googleapis.com/css?family=Oswald:300,400";
html, body { width: 100%; height: 100%; overflow: hidden; background: #070101;
}
.title-container { position: absolute; left: 50%; top: 40%; width: 1935px; height: 1150px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.title-top { position: absolute; left: 723px; top: 340px;
}
.title-bottom { position: absolute; left: 500px; top: 494px;
}
.title-stripes { position: absolute; left: 500px; top: 494px;
}
.title-shimmers { position: absolute; left: 500px; top: 340px;
}
.head, .ander, .letter-l { fill: #f8d7b8;
}
.stripe-1 { fill: #ffb129;
}
.stripe-2 { fill: #ff7b00;
}
.stripe-3 { fill: #fb1c1f;
}
.stripe-4 { fill: #66000b;
}
.starfield { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
}
.credits { position: absolute; left: 150px; bottom: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: nowrap; flex-wrap: nowrap; color: #ffffff; font-family: 'Oswald', sans-serif; font-weight: 300; opacity: 0.0;
}
.credits img { margin: 0 20px;
}
.credits p { margin: 0 20px; font-size: 30px;
}
.shameless-plug { position: absolute; right: 150px; bottom: 30px; opacity: 0.10; text-align: right; color: #ffffff; font-family: 'Oswald', sans-serif; letter-spacing: 1px; opacity: 0.0;
}
.shameless-plug p { margin: 0 0 10px; font-size: 26px; font-weight: 300;
}
.shameless-plug h2 { margin: 0; font-size: 32px; font-weight: 400; line-height: 1.2;
}
.shameless-plug .twitter-contact { margin: 0; font-size: 32px; font-weight: 300; line-height: 1.2;
}
.shameless-plug .twitter-logo { display: inline-block; vertical-align: middle;
}
.scrubber { position: fixed; left: 0; bottom: 0; width: 100%; height: 20px; background: #f8d7b8;
}
.scrubber-progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: #fb1c1f; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%;
}

Headlander Title Animation - Script Codes JS Codes

var titleContainer, titleContainerDimensions;
var scrubber, scrubberProgress;
var fullAnimation;
var fitContainer = _.debounce(function(e, setImmediately) { var bodyDimensions = document.body.getBoundingClientRect(); var ratioW = bodyDimensions.width / titleContainerDimensions.width; var ratioH = bodyDimensions.height / titleContainerDimensions.height; var scale = Math.min(ratioW, ratioH); if (setImmediately) { TweenMax.set(titleContainer, {scale: scale}); } else { TweenMax.to(titleContainer, 0.4, {scale: scale}); }
}, 50);
var setupStarfield = function() { var i, star; var starfield = document.querySelector('.starfield'); var originalStar = document.createElementNS('http://www.w3.org/2000/svg', 'use'); originalStar.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#star'); var stars = []; for (i = 0; i < 350; i += 1) { star = originalStar.cloneNode(true); TweenMax.set(star, {transformOrigin: '200 120'}); starfield.appendChild(star); stars.push(star); } var tweenStar = function(star, startingProgress) { var t = startingProgress ? startingProgress * 9.0 : 0.0; //randomize scale, starting radius, and angle var s = (Math.random() * 0.5) + 0.25; // 0.25 - 0.75 var r = (Math.random() * 200) + 10; // 10 - 110 var a = Math.random(); a = (Math.cos(a * 4 * Math.PI) + 1) * (a >= 0.25 && a < 0.75 ? -0.5 : 0.5) * Math.PI; // -pi to pi (weighted towards -pi,0,pi) if (startingProgress) { r += startingProgress * (100 + (25 * (1 / s))); //calc partial progress radius } TweenMax.set(star, {scale: s, x: Math.cos(a) * r, y: Math.sin(a) * r, opacity: (t >= 1.5) ? 1.0 : 0.0}); r += 100 + (25 * (1 / s)); //calc ending radius TweenMax.to(star, (9.0 - t), {x: Math.cos(a) * r, y: Math.sin(a) * r, ease: Sine.easeIn, onComplete: tweenStar, onCompleteParams: [star], overwrite: 'none'}); if (t < 1.5) { TweenMax.to(star, (1.5 - t), {opacity: Math.random() * 0.4 + 0.4, ease: Sine.easeOut, overwrite: 'none'}); } TweenMax.to(star, (t >= 7.5) ? 1.5 - (t - 7.5) : 1.5, {opacity: 0.0, delay: (t < 7.5) ? 7.5 - t : 0.0, ease: Sine.easeIn, overwrite: 'none'}); }; //start animating each star stars.forEach(function(star) { tweenStar(star, Math.random()); });
};
var makeAnimation = function() { var i, t; // CONTAINER //////////////////////////////////////// var containerAnim = new TimelineMax(); containerAnim.fromTo(titleContainer, 3.0, {y: '+=30'}, {ease: Sine.easeInOut, y: '-=30'}, 0.0); // HEAD //////////////////////////////////////// //cache elements / make copies var headOriginal = document.querySelector('.head'); var headCopies = [headOriginal]; for (i = 1; i < 7; i += 1) { //intentionally starting at 1 t = headOriginal.cloneNode(true); headCopies.push(t); headOriginal.parentNode.insertBefore(t, headCopies[i-1]); //TODO: clone blur filter and adjust per instance (need to change IDs and filter refs too) } //settings var colorStops = [ '#cc2154', //red '#e0e322', //yellow '#22e322', //green '#16e6e6', //cyan '#ffffff', //white getComputedStyle(headCopies[0]).fill //original head color ]; var headAnimDuration = 1.0; //setup anim var headAnim = new TimelineMax(); for (i = 0; i < headCopies.length; i += 1) { headAnim.set(headCopies[i], {fill: colorStops[0], opacity: 0.0, y: '+=600'}, 0.0); var stagger = 0.14 * headAnimDuration * Math.pow(i, 0.85); var duration = (1.0 - (0.02 * Math.pow(i,1.05))) * headAnimDuration; //move headAnim.to(headCopies[i], duration, {ease: Power2.easeOut, opacity: 1.0, y: '-=600'}, stagger); //color shifts headAnim.to(headCopies[i], 0.30 * duration, {fill: colorStops[1]}, 0.15 * headAnimDuration + stagger) .to(headCopies[i], 0.30 * duration, {fill: colorStops[2]}, 0.45 * headAnimDuration + stagger) .to(headCopies[i], 0.20 * duration, {fill: colorStops[3]}, 0.75 * headAnimDuration + stagger) .to(headCopies[i], 0.25 * duration, {fill: colorStops[4]}, 0.95 * headAnimDuration + stagger) .to(headCopies[i], 0.80 * duration, {fill: colorStops[5]}, 1.80 * headAnimDuration + stagger); if (i > 0) { //fade out copies headAnim.to(headCopies[i], 0.2 * duration, {opacity: 0.0}, stagger + duration) } } //shifting blur // TODO: per instance headAnim.fromTo( document.getElementById('headGaussianBlur'), 3.0, { attr: { 'stdDeviation': 6 } }, { attr: { 'stdDeviation': 0 } }, 0.0); // MAIN L SHAPE //////////////////////////////////////// //cache elements var lShape = document.getElementById('letter-l-shape') var lReveal = document.getElementById('letter-l-reveal-shape'); var lWriterMask = document.getElementById('letter-l-writer-mask'); var lWriterReveal = document.getElementById('letter-l-writer-rect') //copy shape for mask var lWriterMaskShape = lShape.cloneNode(true); lWriterMaskShape.id = ''; lWriterMaskShape.style.clipPath = 'none'; lWriterMask.appendChild(lWriterMaskShape); //animation var lAnim = new TimelineMax(); lAnim.fromTo(lReveal, 0.45, {x: '-=657', y: '-=223'}, {x: '-=132', y: '+=223', ease: Sine.easeIn}, 0.0) .to(lReveal, 0.50, {x: '+=789', ease: Power0.easeNone}, 0.45); lAnim.to(lWriterMaskShape, 0.45, {x: '+=110', y: '-=211', ease: Sine.easeIn}, 0.0) .to(lWriterMaskShape, 0.537, {x: '-=848', y: '+=2', ease: Power0.easeNone}, 0.45); lAnim.to(lWriterReveal, 0.45, {x: '-=110', y: '+=211', ease: Sine.easeIn}, 0.0) .to(lWriterReveal, 0.537, {x: '+=848', y: '-=2', ease: Power0.easeNone}, 0.45); // ANDER //////////////////////////////////////// //cache elements var anderShape = document.getElementById('ander-text-shape'); var anderReveal = document.getElementById('ander-reveal-shape'); var anderWriterMask = document.getElementById('ander-writer-mask'); var anderWriterReveal = document.getElementById('ander-writer-rect'); //copy shape for mask t = anderShape.cloneNode(true); t.id = ''; t.style.clipPath = 'none'; anderWriterMask.appendChild(t); //animation var anderAnim = new TimelineMax(); anderAnim.fromTo(anderReveal, 0.50, {x: '+=695', width: 5}, {x: '-=695', width: 700, ease: Power0.easeNone}, 0.45); anderAnim.fromTo(anderWriterReveal, 0.558, {attr: {x: 845}}, {attr: {x: 70}, ease: Power0.easeNone}, 0.45); // STRIPES //////////////////////////////////////// //cache elements / make copies var stripePaths = [ document.querySelector('.stripe-1 path'), document.querySelector('.stripe-2 path'), document.querySelector('.stripe-3 path'), document.querySelector('.stripe-4 path') ]; var stripeMasks = [ document.querySelector('#stripe-1-reveal-shape'), document.querySelector('#stripe-2-reveal-shape'), document.querySelector('#stripe-3-reveal-shape'), document.querySelector('#stripe-4-reveal-shape') ]; var stripeCopies = []; for (i = 0; i < stripeMasks.length; i += 1) { //copy path (without mask, with blur/glow added) t = stripePaths[i].cloneNode(true); t.style.clipPath = 'none'; t.style.filter = 'url(#stripeBlur)'; stripeCopies.push(t); stripePaths[i].parentNode.insertBefore(t, stripePaths[i]); } //animation var stripesAnim = new TimelineMax(); //mask reveal stripesAnim.fromTo(stripeMasks[0], 0.25, {x: '-=869'}, {x: '+=869', ease: Power0.easeNone}, 0.0); stripesAnim.fromTo(stripeMasks[1], 0.25, {x: '+=892'}, {x: '-=892', ease: Power0.easeNone}, 0.2); stripesAnim.fromTo(stripeMasks[2], 0.25, {x: '-=917'}, {x: '+=917', ease: Power0.easeNone}, 0.4); stripesAnim.fromTo(stripeMasks[3], 0.25, {x: '+=945'}, {x: '-=945', ease: Power0.easeNone}, 0.6); //glow fade in/out stripesAnim.fromTo(stripeCopies[0], 0.1, {opacity: 0}, {opacity: 1}, 0.0) .to(stripeCopies[0], 0.1, {opacity: 0}, 0.4); stripesAnim.fromTo(stripeCopies[1], 0.1, {opacity: 0}, {opacity: 1}, 0.2) .to(stripeCopies[1], 0.1, {opacity: 0}, 0.6); stripesAnim.fromTo(stripeCopies[2], 0.1, {opacity: 0}, {opacity: 1}, 0.4) .to(stripeCopies[2], 0.1, {opacity: 0}, 0.8); stripesAnim.fromTo(stripeCopies[3], 0.1, {opacity: 0}, {opacity: 1}, 0.6) .to(stripeCopies[3], 0.1, {opacity: 0}, 1.0); //glow positioning stripesAnim.fromTo(stripeCopies[0], 0.5, {x: '-=869', opacity: 0}, {x: '+=2607', ease: Power0.easeNone}, 0.0); stripesAnim.fromTo(stripeCopies[1], 0.5, {x: '+=892', opacity: 0}, {x: '-=2676', ease: Power0.easeNone}, 0.2); stripesAnim.fromTo(stripeCopies[2], 0.5, {x: '-=917', opacity: 0}, {x: '+=2751', ease: Power0.easeNone}, 0.4); stripesAnim.fromTo(stripeCopies[3], 0.5, {x: '+=945', opacity: 0}, {x: '-=2835', ease: Power0.easeNone}, 0.6); // SHIMMER EFFECTS //////////////////////////////////////// //cache elements var stationaryShimmers = [ document.querySelector('.stationary-shimmer-1'), document.querySelector('.stationary-shimmer-2'), document.querySelector('.stationary-shimmer-3') ]; var movingShimmer = document.querySelector('.moving-shimmer'); //animation var shimmerAnim = new TimelineMax(); for (i = 0; i < stationaryShimmers.length; i += 1) { shimmerAnim.set(stationaryShimmers[i], {transformOrigin: '50% 50%'}, 0.0); } shimmerAnim.set(movingShimmer, {transformOrigin: '50% 50%'}, 0.0); shimmerAnim.fromTo(stationaryShimmers[0], 0.5, {rotation:-100}, {rotation:80, ease: Power0.easeNone}, 0.35) .fromTo(stationaryShimmers[0], 0.25, {scale:0.0}, {scale:1.0}, 0.35) .to(stationaryShimmers[0], 0.25, {scale:0.0}, 0.35 + 0.25); shimmerAnim.fromTo(stationaryShimmers[1], 0.5, {rotation:-100}, {rotation:80, ease: Power0.easeNone}, 0.00) .fromTo(stationaryShimmers[1], 0.25, {scale:0.0}, {scale:1.0}, 0.00) .to(stationaryShimmers[1], 0.25, {scale:0.0}, 0.00 + 0.25); shimmerAnim.fromTo(stationaryShimmers[2], 0.7, {rotation:-100}, {rotation:80, ease: Power0.easeNone}, 0.95) .fromTo(stationaryShimmers[2], 0.3, {scale:0.0}, {scale:1.2}, 0.95) .to(stationaryShimmers[2], 0.3, {scale:0.0}, 0.95 + 0.3); shimmerAnim.fromTo(movingShimmer, 1.05, {rotation:-180}, {rotation:360, ease: Sine.easeOut}, 1.40) .fromTo(movingShimmer, 0.2, {scale: 0.0}, {scale: 1.0}, 1.40) .fromTo(movingShimmer, 0.25, {x:0, y:0}, {x:-104, y:180}, 1.40 + 0.1) .to(movingShimmer, 0.4, {x:737, y:180}, 1.40 + 0.35) .to(movingShimmer, 0.38, {scale: 2.0, ease: Sine.easeIn}, 1.40 + 0.42) .to(movingShimmer, 0.25, {scale: 0.0, ease: Sine.easeIn}, 1.40 + 0.8); // CREDITS //////////////////////////////////////// //cache elements var credits = document.querySelector('.credits'); var shamelessPlug = document.querySelector('.shameless-plug'); //animation var creditsAnim = new TimelineMax(); creditsAnim.fromTo(credits, 2.5, {opacity:0.0}, {opacity:1.0}, 0.0); creditsAnim.fromTo(shamelessPlug, 2.5, {opacity:0.0}, {opacity:1.0}, 0.0); // TIMELINE COMPOSITION //////////////////////////////////////// fullAnimation = new TimelineMax({ paused: true, onStart: updateScrubber, onUpdate: _.throttle(updateScrubber, 100) }); fullAnimation.add(containerAnim, 0.0); fullAnimation.add(headAnim, 0.0); fullAnimation.add(lAnim, 1.0); fullAnimation.add(anderAnim, 1.0); fullAnimation.add(stripesAnim, 2.0); fullAnimation.add(shimmerAnim, 1.5); fullAnimation.add(creditsAnim, 5.0); // // JITTER EFFECT // //////////////////////////////////////// // jitterAnimation = new TimelineMax({ // paused: true, // delay: 1.5, // yoyo: true, // repeat: -1 // }); // jitterAnimation.set(titleContainer, {x:'-=1.05', y:'-=1.05'}) // .to(titleContainer, 0.20, {x:'+=2.1', y:'+=2.1', ease:Sine.easeInOut}) // .to(titleContainer, 0.20, {x:'+=0.25', y:'-=2.15', ease:Sine.easeInOut}) // .to(titleContainer, 0.20, {x:'-=2.45', y:'+=2.0', ease:Sine.easeInOut}) // .to(titleContainer, 0.20, {x:'+=2.15', y:'+=0.6', ease:Sine.easeInOut}) // .to(titleContainer, 0.20, {x:'+=0.1', y:'-=2.95', ease:Sine.easeInOut}) // .to(titleContainer, 0.20, {x:'+=0.15', y:'+=0.35', ease:Sine.easeInOut}) // .to(titleContainer, 0.20, {x:'-=1.65', y:'+=0.85', ease:Sine.easeInOut}) // .to(titleContainer, 0.20, {x:'+=2.15', y:'+=1.45', ease:Sine.easeInOut}) // .to(titleContainer, 0.20, {x:'-=1.8', y:'-=2.25', ease:Sine.easeInOut});
};
var playAnimation = function() { if (fullAnimation) { if (fullAnimation.paused()) { if (scrubber.classList.contains('dragging')) { scrubber.classList.remove('dragging'); } else { fullAnimation.play(); } } else { fullAnimation.restart(); } }
};
var updateScrubber = function() { var percentProgress = fullAnimation.progress(); if (percentProgress < 0.01) { TweenMax.set(scrubberProgress, {scaleX: fullAnimation.progress(), ease: Power0.easeNone}); } else { TweenMax.to(scrubberProgress, 0.1, {scaleX: fullAnimation.progress(), ease: Power0.easeNone}); }
};
var handleScrubberClick = function(evt) { evt.stopImmediatePropagation(); var percentProgress = evt.x / scrubber.clientWidth; TweenMax.set(scrubberProgress, {scaleX: percentProgress}); fullAnimation.progress(percentProgress); fullAnimation.pause(); scrubber.classList.add('dragging'); //listen for drag move/end document.body.addEventListener('mouseup', handleScrubberUnclick); document.body.addEventListener('mousemove', handleScrubberScrub);
};
var handleScrubberUnclick = function(evt) { //remove listeners document.body.removeEventListener('mouseup', handleScrubberUnclick); document.body.removeEventListener('mousemove', handleScrubberScrub);
};
var handleScrubberScrub = function(evt) { var percentProgress = evt.x / scrubber.clientWidth; TweenMax.set(scrubberProgress, {scaleX: percentProgress}); fullAnimation.progress(percentProgress); fullAnimation.pause();
};
(function init() { //stats var stats = new Stats(); document.body.appendChild(stats.domElement); requestAnimationFrame(function updateStats(){ stats.update(); requestAnimationFrame(updateStats); }); //cache container for resizing and scrubber for timeline control titleContainer = document.querySelector('.title-container'); titleContainerDimensions = titleContainer.getBoundingClientRect(); scrubber = document.querySelector('.scrubber'); scrubberProgress = document.querySelector('.scrubber-progress'); //generate animation setTimeout(makeAnimation, 100); setTimeout(setupStarfield, 100); //events window.addEventListener('resize', fitContainer); document.addEventListener('click', playAnimation); scrubber.addEventListener('mousedown', handleScrubberClick); //start it fitContainer(undefined, true); setTimeout(playAnimation, 200);
})();
Headlander Title Animation - Script Codes
Headlander Title Animation - Script Codes
Home Page Home
Developer Chris Johnson
Username jhnsnc
Uploaded October 01, 2022
Rating 3.5
Size 11,702 Kb
Views 20,240
Do you need developer help for Headlander Title Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Johnson (jhnsnc) Script Codes
Name
Text Effect - Radius
Text Effect - Optimist
Shader Template
Colorized Perlin Noise Generator
Vector Star Eye
Tesselation Transition
Web Animation Test
Text Effect - Mystique
Incremental Delaunay Triangulation Demo
Wobbly Star
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!