Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>

              
            
!

CSS

              
                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;
}
              
            
!

JS

              
                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})
              
            
!
999px

Console