<div id="wrapper">
<div class="demo oneThing">
	<img class="emoji" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32887/emoji.svg" width="200" height="200">
	
</div>


<div class="demo multipleThings">
	<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/32887/fred-blue.svg'>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/32887/fred-pink.svg'>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/32887/fred-orange.svg'>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/32887/fred-red.svg'>
  
</div>

<div class="demo staggered">
	<div class="content">this is pretty cool</div>
</div>
	
<div class="demo scramble">
	<div class="content">YOUR SECRET CODE IS:&nbsp; <span>9LCTGHHR@J4Q</span></div>
</div>
	
<div class="demo motionpath">
	<svg id="motionpath" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" viewBox="0 0 850 420">
<defs>
<g id="ground_0_Layer0_0_FILL">
<path fill="#99792f" stroke="none" d="
M 50.9 -47.3
Q 34.65 -36.25 15.2 -32.25 -4.4 -28 -24.4 -31.3 -42.3 -34.4 -57.85 -43.7 -66.1 -48.6 -73.15 -54.95 -87.8 -68.3 -105.2 -77.35 -121.65 -85.85 -139.9 -88.65 -157.85 -91.6 -175.7 -88.85 -195 -85.75 -211.75 -75.2 -219.75 -70.2 -226.45 -63.55 -237.25 -52.95 -249.5 -44.1 -265.55 -32.6 -285.2 -29.7 -299.4 -27.45 -313.9 -26.05 -332.4 -24.15 -351.15 -23.35 -369.7064453125 -22.4072265625 -414.05 -22.6
L -413.95 -21.95 -414.05 -22.6
Q -414.355859375 -22.5984375 -414.7 -22.6
L -426.5 131.4 467.2 126.3 468.5 -11.8
Q 468.402734375 -11.8017578125 468.3 -11.8
L 468 -9.95 468.3 -11.8
Q 381.0927734375 -13.4501953125 374.55 -13.55 356.1 -13.85 338.15 -15.6 319.95 -17.4 302.55 -23.75 285.45 -29.8 270.5 -39.95 255.25 -50.4 241.2 -62.65 227.35 -74.7 211.65 -84.5 195.9 -94.4 177.8 -97.75 160.35 -101.1 143.05 -96.9 126.15 -92.85 110.9 -84.7 94.65 -75.95 79.1 -65.95 64.85 -56.8 50.9 -47.3 Z"/>

<path fill="#3698DB" stroke="none" d="
M 15.2 -32.25
Q 34.65 -36.25 50.9 -47.3 64.85 -56.8 79.1 -65.95 94.65 -75.95 110.9 -84.7 126.15 -92.85 143.05 -96.9 160.35 -101.1 177.8 -97.75 195.9 -94.4 211.65 -84.5 227.35 -74.7 241.2 -62.65 255.25 -50.4 270.5 -39.95 285.45 -29.8 302.55 -23.75 319.95 -17.4 338.15 -15.6 356.1 -13.85 374.55 -13.55 381.0927734375 -13.4501953125 468.3 -11.8
L 519.65 -323.85 -442.45 -314.5 -414.05 -22.6
Q -369.7064453125 -22.4072265625 -351.15 -23.35 -332.4 -24.15 -313.9 -26.05 -299.4 -27.45 -285.2 -29.7 -265.55 -32.6 -249.5 -44.1 -237.25 -52.95 -226.45 -63.55 -219.75 -70.2 -211.75 -75.2 -195 -85.75 -175.7 -88.85 -157.85 -91.6 -139.9 -88.65 -121.65 -85.85 -105.2 -77.35 -87.8 -68.3 -73.15 -54.95 -66.1 -48.6 -57.85 -43.7 -42.3 -34.4 -24.4 -31.3 -4.4 -28 15.2 -32.25 Z"/>
</g>

<g id="car_0_Layer1_0_FILL">
<path fill="#AE002B" stroke="none" d="
M 34.5 14.1
Q 38.25 12.3 39.9 10.1 0.4 14.15 -35.55 9.55 -33.75 10.9 -31.35 12.1 -21.4 17.15 -7.35 17.15 0 17.15 6.2 15.8 11.55 17.4 18.25 17.4 27.8 17.4 34.5 14.1 Z"/>

<path fill="#CC0033" stroke="none" d="
M 25.6 -4.35
Q 23.45 -8.85 16.6 -12.3 6.7 -17.35 -7.35 -17.35 -21.4 -17.35 -31.35 -12.3 -41.25 -7.25 -41.25 -0.1 -41.25 5.35 -35.55 9.55 0.4 14.15 39.9 10.1 41.25 8.3 41.25 6.25 41.25 1.65 34.5 -1.65 30.55 -3.55 25.6 -4.35
M 37.3 1.45
Q 38.9 2.5 39.65 4.25 40.4 6 38.4 5.85 36.4 5.65 35.1 5.4 33.8 5.15 33.15 4.45 32.5 3.75 32.5 2.75 32.5 1.75 33.15 1.05 33.8 0.35 34.75 0.35 35.7 0.35 37.3 1.45
M 20.8 -5.85
Q 21.017578125 -5.5037109375 21.15 -5.2 22.43828125 -1.96015625 13.65 -2.95 4.86875 -3.896484375 -5.35 -4.6 -15.566796875 -5.300390625 -23.9 -4.25 -32.24453125 -3.2 -32.25 -6.6 -32.25 -7.003125 -32.15 -7.4 -31.39609375 -10.290625 -25.05 -12.45 -17.8 -14.85 -7.6 -14.85 2.6 -14.85 10.5 -12.3 18.4 -9.75 20.8 -5.85 Z"/>

<path fill="#FFFFFF" stroke="none" d="
M 21.15 -5.2
Q 21.017578125 -5.5037109375 20.8 -5.85 18.4 -9.75 10.5 -12.3 2.6 -14.85 -7.6 -14.85 -17.8 -14.85 -25.05 -12.45 -31.39609375 -10.290625 -32.15 -7.4 -32.25 -7.003125 -32.25 -6.6 -32.24453125 -3.2 -23.9 -4.25 -15.566796875 -5.300390625 -5.35 -4.6 4.86875 -3.896484375 13.65 -2.95 22.43828125 -1.96015625 21.15 -5.2
M 39.65 4.25
Q 38.9 2.5 37.3 1.45 35.7 0.35 34.75 0.35 33.8 0.35 33.15 1.05 32.5 1.75 32.5 2.75 32.5 3.75 33.15 4.45 33.8 5.15 35.1 5.4 36.4 5.65 38.4 5.85 40.4 6 39.65 4.25 Z"/>
</g>

<g id="car_0_Layer0_0_FILL">
<path fill="#333333" stroke="none" d="
M -25.55 25.35
Q -20.35 25.35 -16.7 21.7 -13.05 18.05 -13.05 12.85 -13.05 7.65 -16.7 4 -20.35 0.35 -25.55 0.35 -30.75 0.35 -34.4 4 -38.05 7.65 -38.05 12.85 -38.05 18.05 -34.4 21.7 -30.75 25.35 -25.55 25.35
M 22.3 21.7
Q 25.95 18.05 25.95 12.85 25.95 7.65 22.3 4 18.65 0.35 13.45 0.35 8.25 0.35 4.6 4 0.95 7.65 0.95 12.85 0.95 18.05 4.6 21.7 8.25 25.35 13.45 25.35 18.65 25.35 22.3 21.7 Z"/>
</g>

<path id="Layer3_0_1_STROKES" stroke="#000066" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M -10.925 438.05
L -8.9 438.05"/>

<path id="ground_0_Layer0_0_1_STROKES" stroke="#99792f" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M -414.025 -22.6
Q -369.7064453125 -22.4072265625 -351.15 -23.35 -332.4 -24.15 -313.9 -26.05 -299.4 -27.45 -285.2 -29.7 -265.55 -32.6 -249.5 -44.1 -237.25 -52.95 -226.45 -63.55 -219.75 -70.2 -211.75 -75.2 -195 -85.75 -175.7 -88.85 -157.85 -91.6 -139.9 -88.65 -121.65 -85.85 -105.2 -77.35 -87.8 -68.3 -73.15 -54.95 -66.1 -48.6 -57.85 -43.7 -42.3 -34.4 -24.4 -31.3 -4.4 -28 15.2 -32.25 34.65 -36.25 50.9 -47.3 64.85 -56.8 79.1 -65.95 94.65 -75.95 110.9 -84.7 126.15 -92.85 143.05 -96.9 160.35 -101.1 177.8 -97.75 195.9 -94.4 211.65 -84.5 227.35 -74.7 241.2 -62.65 255.25 -50.4 270.5 -39.95 285.45 -29.8 302.55 -23.75 319.95 -17.4 338.15 -15.6 356.1 -13.85 374.55 -13.55 381.0927734375 -13.4501953125 468.3 -11.8
L 519.675 -323.85 -442.45 -314.475 -414.025 -22.6 -413.95 -21.95
M 522 -337.95
L 519.675 -323.85 531 -323.95
M 468 -9.95
L 468.3 -11.8
Q 468.402734375 -11.8017578125 468.5 -11.8
L 467.2 126.3 -426.5 131.4 -414.7 -22.6
Q -414.355859375 -22.5984375 -414.025 -22.6
M -496.95 -313.95
L -442.45 -314.475 -443.95 -329.95"/>


</defs>


  
  
  
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#Layer3_0_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, 406.6,310.65) ">
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#ground_0_Layer0_0_FILL"/>

<use xlink:href="#ground_0_Layer0_0_1_STROKES"/>
</g>
</g>

<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#Layer2_0_1_STROKES"/>
</g>

<g id="car" transform="matrix( 1, 0, 0, 1, 46.5,262.1) ">
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#car_0_Layer1_0_FILL"/>
</g>

<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#car_0_Layer0_0_FILL"/>
</g>
</g>
<path id="path" stroke="none" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 18.05 288.05
Q 36.75 288.25 55.45 287.3 74.2 286.5 92.7 284.6 107.2 283.2 121.4 280.95 141.05 278.05 157.1 266.55 169.35 257.7 180.15 247.1 186.85 240.45 194.85 235.45 211.6 224.9 230.9 221.8 248.75 219.05 266.7 222 284.95 224.8 301.4 233.3 318.8 242.35 333.45 255.7 340.5 262.05 348.75 266.95 364.3 276.25 382.2 279.35 402.2 282.65 421.8 278.4 441.25 274.4 457.5 263.35 471.45 253.85 485.7 244.7 501.25 234.7 517.5 225.95 532.75 217.8 549.65 213.75 566.95 209.55 584.4 212.9 602.5 216.25 618.25 226.15 633.95 235.95 647.8 248 661.85 260.25 677.1 270.7 692.05 280.85 709.15 286.9 726.55 293.25 744.75 295.05 762.7 296.8 781.15 297.1 792.05 297.25 803 296.95"/> 
</svg>
</div>

<div class="demo lines">
	 <svg id="plane" width="600" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:ns1="http://sozi.baierouge.fr" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 534.7 170.67" version="1.1"><g transform="translate(-122.23 -385.97)"><path style="stroke:#000000;stroke-width:1px;fill:none" d="m283.1 540.72c-55.474 0.0842-160.04 1.4392-160.36-14.142-0.0917-4.4092 20.119-18.73 33.588-25.633 20.94-26.138 73.352-25.538 121.03-27.89 49.136-2.4237 100.2 2.6666 110.3 3.646 14.31 1.389 112.46-1.2627 149-12.501l30.142-21.839 28.75-37.143c10.08-13.05 12.04-18.47 29.45-18.57l31.429-0.17858-39.821 104.64 27.321 1.7857c5.2827 1.369 1.6885 5.4044 0.17857 5.7143-61.07 12.53-138.93 43.57-219.11 42.32-48.28 9.2-86.305 11.009-141.9-0.21369z"/><rect style="stroke:#000000;fill:none" ry="5.24" height="42.5" width="18.571" y="487.28" x="213.28"/><rect style="stroke:#000000;fill:none" ry="1.389" height="2.778" width="8.018" y="521.53" x="218.26"/><path style="stroke:#000000;fill:none" d="m255.06 503.47c0 2.9987-1.7242 5.4296-3.8512 5.4296s-3.8512-2.4309-3.8512-5.4296 1.7242-5.4296 3.8512-5.4296 3.8512 2.4309 3.8512 5.4296z"/><path style="stroke:#000000;fill:none" d="m255.06 503.47c0 2.9987-1.7242 5.4296-3.8512 5.4296s-3.8512-2.4309-3.8512-5.4296 1.7242-5.4296 3.8512-5.4296 3.8512 2.4309 3.8512 5.4296z" transform="translate(114.97)"/><path style="stroke:#000000;fill:none" d="m255.06 503.47c0 2.9987-1.7242 5.4296-3.8512 5.4296s-3.8512-2.4309-3.8512-5.4296 1.7242-5.4296 3.8512-5.4296 3.8512 2.4309 3.8512 5.4296z" transform="translate(132.9)"/><rect style="stroke:#000000;stroke-width:.98070;fill:none" rx="4.551" ry="3.154" height="24.137" width="15.424" y="494.5" x="376.52"/><path style="stroke:#000000;fill:none" d="m255.06 503.47c0 2.9987-1.7242 5.4296-3.8512 5.4296s-3.8512-2.4309-3.8512-5.4296 1.7242-5.4296 3.8512-5.4296 3.8512 2.4309 3.8512 5.4296z" transform="translate(155.5)"/><path style="stroke:#000000;fill:none" d="m255.06 503.47c0 2.9987-1.7242 5.4296-3.8512 5.4296s-3.8512-2.4309-3.8512-5.4296 1.7242-5.4296 3.8512-5.4296 3.8512 2.4309 3.8512 5.4296z" transform="translate(183.53)"/><path style="stroke:#000000;fill:none" d="m255.06 503.47c0 2.9987-1.7242 5.4296-3.8512 5.4296s-3.8512-2.4309-3.8512-5.4296 1.7242-5.4296 3.8512-5.4296 3.8512 2.4309 3.8512 5.4296z" transform="translate(202.35)"/><rect style="stroke:#000000;fill:none" rx="4.551" ry="3.154" height="36.997" width="24.622" y="491.35" x="467.83"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m628.95 386.61 2.9042 7.2605 4.7351-0.0631-48.342 95.417 22.583 1.5574 33.588-84.474h4.3805"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m607.23 397.18c-3.7715 0.12365-8.6706 5.0241 0.0118 4.9576l15.792-0.12091 22.232-2.0689-21.633-2.9248-16.402 0.15696z"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m623.25 397.09c-6.4955 0.78869-4.2009 4.4597-0.11609 4.9359"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m585.71 512.81 2.5893 6.5179-31.786 6.6964c-7.7586 1.6345-18.214-0.2381-23.705-1.9643l52.902-11.25z"/><rect style="fill-rule:evenodd;stroke:#000000;fill:none" rx="1.025" ry="2.366" height="2.366" width="9.196" y="521.47" x="475.71"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m604.78 508.17 0.0446-6.4286-14.464 1.7857v8.4375"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m542.89 521.97-5.177-36.113 79.069 5.2562"/><path style="stroke:#000000;fill:none" d="m322.43 537c0 1.9875-3.9856 3.5987-8.902 3.5987s-8.902-1.6112-8.902-3.5987 3.9856-3.5987 8.902-3.5987 8.902 1.6112 8.902 3.5987z" transform="matrix(.93318 0 0 .79962 21.613 107.57)"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m156.76 501.01c1.3258 0 15.405-0.25254 15.405-0.25254l6.8855-9.2961-12.441 0.26786"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m193 502.52c0-1.3258-0.63134-11.427-0.63134-11.427l-10.67 0.31568-7.2605 9.7227c4.6509 0.82075 11.575 1.389 18.562 1.389z"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m153.31 502.55 19.359-0.0237c3.9108 1.2202 14.689 2.2009 22.728 2.2097l-1.1319-15.685-25.265 1.0708"/><path style="stroke:#000000;fill:none" d="m255.06 503.47c0 2.9987-1.7242 5.4296-3.8512 5.4296s-3.8512-2.4309-3.8512-5.4296 1.7242-5.4296 3.8512-5.4296 3.8512 2.4309 3.8512 5.4296z" transform="translate(93.376 .25253)"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m336 470.77c25.54 0.8022 39.775 8.46 39.775 8.46l-53.286-0.37881c-18.622-0.13239-14.412-8.9583 13.511-8.0812z"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m136.37 513.26v21.213"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m282.68 540.84c-0.26785-0.71428 0-13.571 0-13.571 50.119-2.5595 93.095-2.9762 146.07 0.89285v12.5"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m333.12 525.67v8.125h23.036v-8.4821"/><path style="stroke:#000000;stroke-width:.99457px;fill:none" d="m333.12 533.83v11.88h5.0319c5.2363-5.5357 12.437-5 16.111 0h1.8538v-11.925"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m182.05 484.33c0.35714 0 60.982 2.3214 60.982 2.3214 16.548 2.5595 154.17 18.512 203.39-4.6429l-49.643-4.9107"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m343.52 492.55v14.9c-32.157 9.3018-66.838 11.911-80.37 4.3563v-21.845c13.469-7.1763 67.28-1.2206 80.37 2.5885z"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m265.73 488.95v23.739"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m446.34 540.49v-58.393l91.339 3.75"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m242.95 540.76v-54.196"/><path style="stroke:#000000;fill:none" d="m166.34 550.17c0 1.4547-1.1792 2.6339-2.6339 2.6339s-2.6339-1.1792-2.6339-2.6339 1.1792-2.6339 2.6339-2.6339 2.6339 1.1792 2.6339 2.6339z" transform="matrix(1.8903 0 0 1.8903 -145.73 -489.63)"/><path style="stroke:#000000;fill:none" d="m166.34 550.17c0 1.4547-1.1792 2.6339-2.6339 2.6339s-2.6339-1.1792-2.6339-2.6339 1.1792-2.6339 2.6339-2.6339 2.6339 1.1792 2.6339 2.6339z" transform="matrix(.87179 0 0 .87179 21.01 70.736)"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m155.71 537.85-0.26786 7.4107 18.304 1.0714 0.17857-7.1875-18.214-1.2946z"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m274.11 487.09c0.50595-6.7857 33.378-12.366 38.973-13.527"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m343.48 492.72c13.601-1.5476 31.131-7.4702 31.964-13.482"/><path style="stroke:#000000;fill:none" d="m166.34 550.17c0 1.4547-1.1792 2.6339-2.6339 2.6339s-2.6339-1.1792-2.6339-2.6339 1.1792-2.6339 2.6339-2.6339 2.6339 1.1792 2.6339 2.6339z" transform="matrix(2.2108 0 0 2.2108 -15.429 -666.63)"/><path style="stroke:#000000;fill:none" d="m166.34 550.17c0 1.4547-1.1792 2.6339-2.6339 2.6339s-2.6339-1.1792-2.6339-2.6339 1.1792-2.6339 2.6339-2.6339 2.6339 1.1792 2.6339 2.6339z" transform="matrix(1.0196 0 0 1.0196 179.58 -11.259)"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m352.54 479.19c0 0.17857 5.5804 6.6071 5.5804 6.6071h6.0268l3.75-6.5179"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m362.5 485.84-3.6161-6.5625"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m550.89 486.83 58.125-81.875h21.786"/><path style="stroke:#000000;stroke-width:1px;fill:none" d="m557.67 477.65-20.71-13.58"/></g></svg>
</div>

<div class="demo morph">
	<svg width="400" version="1.1" id="Layer_1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 536 459.8" style="enable-background:new 0 0 536 459.8" xml:space="preserve"><path id="bat" fill="#fc3" d="M271,333.6l-9.4-6.9l-9.6-8.2l-3.5-10.9l-3.4-10.2l-0.6-0.7l-18.5,1.9l-19.3,1.9l2.6-4.2l5.1-7.4l1.6-3.2l-0.7-0.4l-5.8-2.1	l-5.1-1.7l-17.8,8.5l-18.2,8.2l1.1-7.8l2.1-9.8l0.6-2.4l-10.3,0.7l-10.3,0.7l-25.5,10l-26.8,10.6l-1.3,0.5l3.1-6.1l3.1-6.1l1.5-9.3	l1.5-9.3l-0.7-0.7l-9.2-4.3l-8.5-3.6l-23.7,9.1l-23.7,9.1l-10.7,2.9l-11,2.6l6.4-9.2l6.7-8.9l24.7-25.5l24.7-25.5l28.3-17.6	l40.4-24.7l12.1-7.1h3.1h3.1l1.1,6.8l1.7,9.3l0.5,2.5l8.3,6.2l8.3,6.2l7.3,3.7l7.3,3.7l14.5,4.3l14.7,4.1l-2.3-13.6l-2.4-13.5	l1.5-15.5l1.5-15.5l4.1-9.7l4.1-9.7l5.2-3l5.2-3l0.7,5.7l1.3,12.4l0.6,6.7l4.9-2.5l4.9-2.5l13.4-1.5l13.4-1.5l11.6,4.4l11.6,4.4	l0.7-11.4l0.7-11.4h3.9h3.9l0,0.8l1.5,9.8l1.5,9l4,11.1l4,11.1l-1.6,12.4l-2.1,16.2l-0.6,3.8h5.3h5.3l21.8-12.2l21.8-12.2l0-4	l1.1-7.8l1-3.8l3.9-2l3.9-2l4.3,0l4.3,0l20.3,19.2l20.3,19.2l31.5,35l31.5,35l6.6,11.3l6.1,11.8l-20.4-12l-26.1-15.6l-6.1-3.1h-7.6	h-7.6l-2,4.6l-2,4.6l2.7,9.6l2.7,9.6l5.9,11.9l5.4,12.3l-10-6.1l-9.5-6.6l-27.7-13.5l-27.7-13.5l-1.7,1l-2.9,1.8l-1.2,0.8l2.5,12.9	l2.2,13.2l-6.7-4.2l-6.4-4.5l-15.3-6.9l-15.3-6.9l-1,1.9l-1,1.9l4.6,9.1l4.1,9.6l-4.8-2l-4.3-2.5l-15.4-1.6l-15.6-1.3l-5.8,8.3	l-5.6,8l-8.3,8.2l-8.3,8.2l-4.5,1L271,333.6z"/><path id="butterfly" d="M487.7,65.1c-1.2-5.4-3.1-10-5.8-13.6c-2.8-3.8-6.7-6.7-11.2-8.3c-3.5-1.2-7.4-1.9-11.8-1.9	c-1.4,0-2.9,0.1-4.4,0.2c-5.9,0.5-12,1.9-18.8,4.1c-12.5,4.2-24.3,10.5-35.7,16.5l-0.1,0.1c-3.3,1.8-6.7,3.6-10,5.3	c-3.1,1.7-6.4,3.4-9.5,5.1c-10.2,5.6-22,12.2-31.7,21.2c-3.9,3.7-7.8,7.8-11.6,12.1c-3.5,4.1-7,8.5-10.4,13.1	c-5.6,7.8-11.1,16.4-16.8,26.4c-5.4,9.5-10.5,19.3-14.7,27.7c-2.4,4.5-5.2,9.5-9.3,13.6c0.2-1.1,0.4-2.2,0.7-3.3	c0.7-3.3,1.4-6.7,1.1-10.2c-0.2-2.1-0.8-4.2-2-6.4c4.7-9.3,8.9-19.1,12.9-28.6c1.6-3.9,3.3-7.8,5.1-11.7c0.4-0.8,0.7-1.6,1.1-2.4	c1.2-2.8,2.5-5.7,4.2-8.4c0.1-0.1,0.1-0.2,0.2-0.4c1.3-2.2,2.7-4.5,3.1-7.1c0.2-1.8-0.5-3.7-2-5.1l0,0l0,0c-0.4,0.9-0.8,1.9-1.1,2.8	c-0.2,0.6-0.5,1.3-0.7,1.9c-3.6,9.4-7.9,18.7-12.1,27.7c-2.5,5.4-5.1,11-7.5,16.5c-0.8,1.7-1.3,3.6-1.7,5.3	c-0.6,2.3-1.2,4.6-2.4,6.7c-1.1,1.9-2.8,3.1-4.5,3.4c-2,0-4-1.2-5.2-3c-1.4-2.1-2.2-4.4-3-6.8c-0.5-1.4-1-2.9-1.6-4.3	c-1.7-3.7-3.4-7.4-5.1-10.9c-2.2-4.7-4.2-9.7-6.2-15.3c-0.2-0.6-0.4-1.1-0.6-1.7c-2.7-7.6-5.5-15.5-10.6-22l0,0l-0.8,0.4l0,0	c2,8.1,5.1,15.7,8.2,22.8c2.1,4.7,4.3,9.5,6.4,14.1c4.1,8.7,8.3,17.8,11.7,27c-0.2,0.4-0.4,0.7-0.6,1c-0.3,0.4-0.6,0.9-0.7,1.4	c-1.2,2.7-0.8,5.7-0.1,8.5c0.1,0.5,0.2,1.1,0.3,1.6c0.5,2.2,1,4.4,0.4,6.6c-7.8-15.3-16.4-31.7-26.3-47.1c-4.4-6.9-9-13.5-13.6-19.6	c-5-6.5-10.1-12.6-15.4-18.2c-6.6-7.1-13.1-12.9-19.6-17.8c-8.1-6.1-17.3-11.8-29.8-18.6c-7.3-3.9-16.9-9-26.8-13.4	c-5.1-2.2-9.7-4-13.9-5.5c-5.1-1.8-9.8-3.1-14.4-4c-5-1-10.4-1.5-15.9-1.6c-0.1,0-0.1,0-0.2,0c-6.6,0-11.7,1.4-15.3,4.2	C77.5,48.6,75.5,53,74,57c-2.4,6.5-3.8,13.8-4.1,21.7c-0.3,6.1,0.1,11.5,1.2,16.5c1,4.2,3.4,7.8,5.7,11.2c1.2,1.7,2.4,3.5,3.4,5.4	c1.5,2.6,2.8,5.6,3.9,9.6c2.8,10,4.3,20.4,5.8,30.5c1.1,7.7,2.3,15.6,4,23.4c0.9,4,1.8,7,2.8,9.8c1.3,3.5,2.7,6.5,4.5,9.1	c2.2,3.4,5.4,6.3,9.3,8.4c2.4,1.3,4.9,2.4,7.9,3.3c2.5,0.7,5.2,1.3,8.3,1.9c5.2,0.8,10.3,1.2,14.6,1.5c2.4,0.2,4.9,0.3,7.3,0.4	c8.5,0.5,17.4,1,25.9,2.5c0.3,0.1,0.7,0.2,1,0.3c-3.4,2.2-7,4.4-10.4,6.6c-6,3.7-12.1,7.6-18,11.7c-11.5,7.9-19.8,15.3-26.3,23.2	c-2.1,2.6-4.3,5.4-6,8.5l0,0c-0.1,5.9,0.2,12.2,1.1,20.3c1.9,16.9,5.7,33.3,10.2,51.3l0,0.1c3.2,12.8,6.5,26.1,11.3,38.7	c3.1,8,6.2,14.2,9.8,19.6c2.3,3.6,5.3,6.8,9,9.7c3.9,3,7.5,5,11,6c1.6,0.5,3.3,0.7,5.2,0.7c0.8,0,1.6,0,2.6-0.1	c5-0.5,10.3-2.3,15.6-5.3c5.7-3.1,11.1-7.4,15.9-12.7c6.5-7.1,12.4-15.6,18.6-26.8c4.8-8.6,9.1-17.8,13.3-28.2	c3.4-8.3,6.5-17.5,9.2-27.1c1.2-4.2,2.3-8.4,3.4-12.5c1.8-6.9,3.7-13.9,5.9-20.8c2.7-8.3,6.1-18,11.5-26.8c1.2,5,1.2,10.2,1.1,15.2	c0,0.6,0,1.3,0,1.9c0,1.4-0.1,2.8-0.1,4.2c-0.1,4.5-0.2,9.2,0.1,13.7c0.2,2.8,0.6,6.1,1.9,9.2c0.9,2.2,2.4,3.8,4.2,4.6	c1.1,0.5,2.3,0.7,3.6,0.7c1.3,0,2.7-0.3,3.9-0.8c2.9-1.3,4.2-4.1,4.7-5.7c1.2-3.5,1.3-7.3,1.4-10.6c0-3.1-0.1-6.3-0.2-9.4	c-0.1-3.4-0.2-7-0.2-10.5c0.2-4.3,0.5-8.8,2.3-12.8c5.1,12.1,9.2,24.8,13.2,37.1l0.2,0.5c0.6,2,1.3,4.1,1.9,6	c3.8,11.7,7.6,23.7,11.9,35.4c4.1,11.3,9.8,26.2,17.6,40.3c3.1,5.5,6.1,10.3,9.3,14.7c3.7,5,7.4,9.2,11.5,13	c3.9,3.6,8.7,6.8,14.2,9.3c4.9,2.2,9.3,3.5,13.6,3.9c0.9,0.1,1.8,0.1,2.7,0.1c2.8,0,5.4-0.5,7.8-1.5c4.4-1.8,8.4-5,12.4-9.8	c2.9-3.6,5.5-7.8,8.3-13.2c4.8-9.6,8.2-19.6,10.9-28.1c3.7-12.1,6.3-21.5,8.5-30.4c4.9-20.6,7.8-42,8.5-63.5l0,0l0,0	c-2.6-4.2-5.6-8.3-9.1-12.3c-3.2-3.7-6.9-7.3-10.9-10.7c-5.2-4.4-10-8-14.6-10.8c-2.4-1.5-4.9-2.9-7.3-4.3	c-6.5-3.8-13.3-7.7-19-12.9c4.2-0.3,8.5-0.5,12.7-0.7c2.9-0.1,6-0.3,9-0.4c11.5-0.6,21.8-1.3,31.9-3.6c5.1-1.2,11-3,15.8-6.5	c3.3-2.5,5.8-6.1,8.1-11.5c2.4-5.7,3.8-11.7,5.2-17.8c0.2-1.1,0.5-2.3,0.7-3.4c0.7-3.3,1.4-6.6,2.1-10c0.8-4.2,1.3-8.4,1.9-12.5	c0.3-2.3,0.6-4.6,1-7c1.5-9.7,3.2-19,7.4-27.5c0.9-1.7,1.8-3.5,2.7-5.2c1.7-3.3,3.6-6.6,4.9-10.2c1.8-4.5,2.7-9,2.8-13.4	C489.3,75.5,488.8,70,487.7,65.1z"/></svg>
</div>
	
	<h1 class="headers">
	<div class="static">with one line of code:&nbsp;</div>
		<div class="messages">
			<span class="message">animate one thing</span>
			<span class="message">animate multiple things</span>
			<span class="message">stagger multiple things</span>
			<span class="message">scramble text</span>
			<span class="message">animate along a path</span>
			<span class="message">reveal multiple svg strokes</span>
			<span class="message">morph a bat into a butterfly</span>
		</div>	
</h1>
	
<div class="code">
<pre class="prettyprint" data-codetype="JS">
.from(".emoji", {duration:1, y:"-=450", ease:"bounce"})
</pre>
<pre class="prettyprint" data-codetype="JS">
.from(".multipleThings img", {repeat:2, yoyo:true, scale:0, opacity:0, rotation:360, ease:"back", duration:1})
</pre>
<pre class="prettyprint" data-codetype="JS">
.from(mySplit.chars, { opacity:0, y:100, scale:2, ease:"back(6)", duration:2, stagger:0.1})
</pre>
	
<pre class="prettyprint" data-codetype="JS">
.to(".scramble .content span", {duration:3, scrambleText:"PANKAK3*K1NG", ease:"power1.in"})
</pre>	
	
<pre class="prettyprint" data-codetype="JS">
.to("#car", {duration:3, ease:"none", motionPath: {path: "#path", autoRotate:true}})
</pre>	
	<pre class="prettyprint" data-codetype="JS">
.from("#plane path, #plane rect", {drawSVG:0, duration:0.5, ease:"none", stagger:0.05})
</pre>	
	<pre class="prettyprint" data-codetype="JS">
.to("#bat", {morphSVG:"#butterfly", duration:1.5, ease:"back.in"}, "+=0.2")
</pre>	
	<pre class="prettyprint" data-codetype="JS">
.from(".emoji", {duration:1, y:"-=450", ease:"bounce"})
</pre>	
	<pre class="prettyprint" data-codetype="JS">
.from(".emoji", {duration:1, y:"-=450", ease:"bounce"})
</pre>	
	
</div>	
	
</div>
html {
	box-sizing: border-box;
}

svg {
	overflow:visible;
}

body, html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow:hidden;
	
}


#wrapper {
height:100%;
}

body {
	background: #3698DB;
	font-family: 'Kanit';
	color: white;
	opacity:0;
}

.demo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	position:absolute;
	width:100%;
	font-size:80px;
}

.content {
	display: flex;
}

.blue {
	background-color:#3698DB;
}

.green {
	background-color:#80CBC4;
}

.purple {
	background-color: #8F44AD;
}

.red {
	background-color: #E84C3D;
}

.dark {
	background-color: #2D3E50;
	fill:#2D3E50;
}

.offwhite {
	background-color: #ECF0F1;
}


#butterfly {
	opacity:0;
}

.headers{
	font-size:22px;
	line-height:120px;
	
	font-weight:normal;
margin:0;
	background:black;
	padding-left:50px;
	position:fixed;
	display:block;
	width:100%;
	overflow:hidden;
}

.static {
	color:#6699FC;
	display: inline-block;
}

.messages {
	color:#ccc;
	display: inline-block; 
	position:absolute;
	width:100%;
}
.message {
	position:absolute;
	top: 0; left: 0;
}


.scramble .content {
	font-family:Courier;
	color:#dae5cc;
	font-size:36px;
}

.scramble .content span{
	font-weight:400;
	color:#90E62A;
}

#motionpath {
width: 100%;

 overflow:hidden;
}


.code {
	position:fixed;
	bottom:180px;
	width:100vw;
	visibility:hidden;
}

/* pretty print stuff */

pre {
	opacity:0;
	font-size:22px;
	//font-weight:bold;
	
	position:absolute;
	
}

pre.prettyprint {
left:1%;
}

pre .lit {
	color:#f60;
}

pre .pln {
	color:#ccc;
}
let mySplit = new SplitText(".staggered .content")
let master = gsap.timeline({id:"master"})
let messages = gsap.timeline({paused:true})

gsap.registerEffect({
    name: "enter",
    effect: (targets, config) => {
		  let tl = gsap.timeline()
		  tl.to("body", {duration:0.3, backgroundColor:config.bg})
		  	 .from(targets, {autoAlpha:0, duration:0.1});
        return tl
    },
    defaults: {duration: 0.2}, //defaults get applied to any "config" object passed to the effect
    extendTimeline: true
});

gsap.registerEffect({
    name: "leave",
    effect: (targets, config) => {
        return gsap.to(targets, {duration: config.duration, autoAlpha:0, scale:1.5, ease:"power1.inOut"});
    },
    defaults: {duration: 0.2}, //defaults get applied to any "config" object passed to the effect
    extendTimeline: true
});

function init() {
	gsap.set("#car", {transformOrigin:"50% 50%", yPercent:-55})
	gsap.set(".message", {yPercent:100, opacity:0})
	gsap.set("#plane path, #plane rect", {stroke:"#fc3"})
	gsap.set("body", {autoAlpha:1});
	
	messages.to(".message", {yPercent:0, opacity:1, stagger:0.5})
	messages.to(".message", {yPercent:-100, opacity:0, stagger:0.5}, 0.5).pause()
	
	messages.to("pre", {opacity:1, duration:0.5, stagger:0.5, immediateRender:false}, 0)
	messages.to("pre", {opacity:0, duration:0.5, stagger:0.5, immediateRender:false}, 0.5)
	
	master
	.enter(".oneThing", {bg:"#3698DB"})
   .to(messages, {time:"+=0.5", duration:0.7})
	.from(".emoji", {duration:1, y:"-=450", ease:"bounce"})
   .add("oneThing")
	.leave(".oneThing")
   
	.enter(".multipleThings", {bg:"#8F44AD"})
 	.to(messages, {time:"+=0.5", duration:0.7})
	.from(".multipleThings img", {repeat:2, yoyo:true, scale:0, opacity:0, rotation:360, ease:"back", duration:1})
   .add("multipeThings")
   .leave(".multipleThings")
   
	.enter(".staggered", {bg:"#E84C3D"})
	.to(messages, {time:"+=0.5", duration:0.7})
	.from(mySplit.chars, { opacity:0, y:100, scale:2, ease:"back(6)", duration:1.3, stagger:0.1})
	.add("staggered")
   .leave(".staggered")  

	.enter(".scramble", {bg:"#1f261f"})
	.to(messages, {time:"+=0.5", duration:0.7})
	.to(".scramble .content span", {duration:3, scrambleText:"PANKAK3*K1NG", ease:"power1.in"})
	.add("scramble")
   .leave(".scramble")

	.enter(".motionpath", {bg:"#1f261f"})
	.to(messages, {time:"+=0.5", duration:0.7})
	.to("#car", {duration:3, ease:"none", motionPath: {path: "#path", autoRotate:true}})
	.add("motionpath")
   .leave(".motionpath")  
   
	.enter(".lines", {bg:"#2D3E50"})
	.to(messages, {time:"+=0.5", duration:0.5})
   .from("#plane path, #plane rect", {drawSVG:0, duration:0.5, ease:"none", stagger:0.05})
	.add("lines")
	.leave(".lines")
   
	.enter(".morph", {bg:"#154465"})
 	.to(messages, {time:"+=0.5", duration:0.7})
   .to("#bat", {morphSVG:"#butterfly", duration:1.5, ease:"back.in"}, "+=0.2")
	
	master.progress(1).progress(0).pause();
	GSDevTools.create({animation:master});	
}
   
document.getElementById("wrapper").addEventListener("click", function(){
	master.tweenTo(master.nextLabel())
})

document.querySelector(".headers").addEventListener("click", function(){
 gsap.set(".code", {visibility:"visible"})
})

init()
gsap.set(".code", {visibility:"visible"})
gsap.set(".multipleThings", {scale:0.8})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomBounce3.min.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js
  5. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js
  6. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js
  7. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin3.min.js
  8. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.1/MotionPathPlugin.min.js
  9. https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;