css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!--SVG source: http://colouringbook.org/links/colouringbook.org/colouringbook.org/klsgfx_helicopter.svg -->
<div class="ground"></div>
<div class="runway">
  <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
  <svg class="chopper" width="200" height="80" viewBox="0 0 890 518" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <title>chopper</title>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
      <g id="chopper" sketch:type="MSLayerGroup" transform="translate(445.500000, 259.000000) scale(-1, 1) translate(-445.500000, -259.000000) translate(9.000000, 7.000000)">
        <path d="M474.32,6.458 C430.28,9.986 381.084,15.19 329.296,22.002 C145.154,46.22 -2.228,81.659 0.329,101.095 C2.725,119.314 136.032,117.055 304.385,96.751 C305.157,101.876 305.984,106.479 306.846,110.347 C212.38,123.985 142.732,193.9 148.617,270.828 C151.7,311.136 174.109,346.181 208.08,370.645 L145.242,380.243 C129.406,382.663 118.61,397.35 121.029,413.188 C123.447,429.024 138.136,439.819 153.972,437.401 L210.457,428.784 L227.383,436.729 L218.371,438.098 C200.427,440.84 188.199,457.485 190.938,475.43 C193.679,493.375 210.327,505.633 228.271,502.893 L582.574,448.778 C600.517,446.038 612.746,429.393 610.006,411.45 C607.266,393.505 590.619,381.247 572.674,383.985 L501.436,394.874 L477.815,385.464 C487.182,379.507 492.641,368.431 490.85,356.714 C489.942,350.759 487.321,345.515 483.532,341.417 C500.233,322.427 511.786,300.378 516.604,276.801 C569.274,233.646 625.858,200.086 690.624,179.735 C708.895,210.985 743.919,230.825 782.419,227.88 C836.151,223.771 876.423,176.827 872.312,123.095 C868.203,69.362 821.261,29.091 767.527,33.201 C728.211,36.209 696.089,62.157 683.3,96.912 C601.077,99.204 490.487,116.594 418.467,122.3 C402.237,115.999 384.649,111.603 366.181,109.457 C366.377,104.827 365.939,97.426 364.975,88.842 C536.572,64.823 669.945,31.842 667.513,13.346 C665.674,-0.625 586.867,-2.558 474.32,6.458 L474.32,6.458 Z"
        id="rect4057" stroke="#000000" stroke-width="15" sketch:type="MSShapeGroup"></path>
        <path d="M145.24,380.243 L457.912,332.489 C473.699,330.079 488.453,340.923 490.863,356.708 L490.863,356.708 C493.273,372.497 482.431,387.249 466.642,389.661 L153.97,437.413 C138.183,439.825 123.43,428.981 121.02,413.192 L121.02,413.192 C118.609,397.407 129.452,382.653 145.24,380.243 L145.24,380.243 Z"
        id="rect4008" stroke="#000000" stroke-width="4" fill="#FFCC00" sketch:type="MSShapeGroup"></path>
        <path d="M192.041,391.635 L432.806,367.539 L554.157,415.865 L288.56,465.392 L195.564,421.792 C200.216,412.448 198.297,402.305 192.041,391.635 L192.041,391.635 Z" id="rect4010" stroke="#000000" stroke-width="4" fill="#FF0000" sketch:type="MSShapeGroup"></path>
        <path d="M775.203,188.683 C803.578,186.513 823.164,162.686 820.98,134.145 C818.796,105.604 795.695,83.447 767.32,85.618 C740.718,87.653 721.256,113.065 723.439,141.607 C725.623,170.146 748.602,190.717 775.203,188.683 L775.203,188.683 Z" id="path3938"
        stroke="#000000" stroke-width="4" fill="#FF0000" sketch:type="MSShapeGroup"></path>
        <path d="M414.378,122.653 C539.277,113.343 789.068,65.804 792.195,128.7 C793.334,151.81 773.722,160.223 768.57,162.39 C645.129,179.142 550.896,239.279 463.871,324.159 C429.06,298.35 388.434,160.139 414.378,122.653 L414.378,122.653 Z" id="path3940" stroke="#000000"
        stroke-width="4" fill="#FF0000" sketch:type="MSShapeGroup"></path>
        <path d="M345.135,406.502 C447.365,398.68 525.08,325.369 518.744,242.527 C512.543,161.449 424.578,100.809 322.35,108.629 C220.121,116.449 142.404,189.763 148.606,270.841 C154.943,353.68 242.906,414.321 345.135,406.502 L345.135,406.502 Z" id="path3942"
        stroke="#000000" stroke-width="4" fill="#FF0000" sketch:type="MSShapeGroup"></path>
        <path d="M302.039,52.922 L355.89,45.84 C357.787,45.59 361.115,58.982 363.32,75.75 L364.375,83.771 C366.581,100.54 366.83,114.335 364.931,114.585 L311.08,121.668 C309.182,121.918 305.855,108.526 303.65,91.757 L302.595,83.736 C300.389,66.969 300.14,53.172 302.039,52.922 L302.039,52.922 Z"
        id="rect4038" stroke="#000000" stroke-width="4" fill="#FF0000" sketch:type="MSShapeGroup"></path>
        <path d="M360.734,153.853 C394.952,193.734 380.367,262.348 329.886,306.206 C279.595,352.55 208.981,355.452 174.763,315.573 C137.728,275.906 152.313,207.295 202.603,160.949 C253.084,117.089 323.509,111.702 360.734,153.853 L360.734,153.853 Z" id="path3944"
        stroke="#000000" stroke-width="4" fill="#99FFFF" sketch:type="MSShapeGroup"></path>
        <path d="M218.381,438.108 L572.677,383.999 C590.566,381.267 607.282,393.554 610.015,411.442 L610.015,411.442 C612.745,429.333 600.46,446.047 582.572,448.778 L228.275,502.887 C210.385,505.621 193.67,493.334 190.937,475.444 L190.937,475.444 C188.206,457.557 200.493,440.84 218.381,438.108 L218.381,438.108 Z"
        id="rect4006" stroke="#000000" stroke-width="4" fill="#FFCC00" sketch:type="MSShapeGroup"></path>
        <path d="M268.655,148.786 C290.806,153.036 294.621,177.363 277.843,202.448 C261.538,228.247 229.018,245.491 206.866,241.241 C183.432,237.709 179.618,213.382 195.922,187.582 C212.701,162.498 244.748,144.54 268.655,148.786 L268.655,148.786 Z" id="path4013"
        fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
        <path d="M872.311,123.095 C876.442,176.854 836.213,223.784 782.454,227.918 C728.694,232.05 681.765,191.819 677.632,138.06 C677.63,138.036 677.628,138.011 677.628,137.987 C673.495,84.228 713.724,37.298 767.483,33.165 C821.243,29.033 868.172,69.262 872.303,123.022 C872.307,123.046 872.309,123.071 872.311,123.095 L872.311,123.095 Z"
        id="path4019" stroke="#000000" stroke-width="17.3452" fill-opacity="0.8824" fill="#CCCCCC" sketch:type="MSShapeGroup"></path>
        <path d="M797.939,128.784 C798.914,141.47 789.421,152.546 776.734,153.521 C764.047,154.496 752.972,145.002 751.998,132.315 C751.996,132.309 751.996,132.304 751.996,132.298 C751.019,119.611 760.514,108.536 773.201,107.561 C785.887,106.585 796.963,116.08 797.939,128.767 C797.939,128.772 797.939,128.778 797.939,128.784 L797.939,128.784 Z"
        id="path4021" stroke="#000000" stroke-width="73.4992" fill="#FF0000" sketch:type="MSShapeGroup"></path>
        <path d="M667.514,13.348 C670.141,32.784 522.918,68.19 338.684,92.429 C154.451,116.668 2.969,120.561 0.342,101.124 C0.341,101.115 0.34,101.106 0.338,101.098 C-2.288,81.661 144.933,46.255 329.168,22.016 C513.402,-2.223 664.883,-6.115 667.51,13.322 C667.512,13.33 667.512,13.339 667.514,13.348 L667.514,13.348 Z"
        id="path4023" stroke="#000000" stroke-width="15.4912" fill-opacity="0.8824" fill="#CCCCCC" sketch:type="MSShapeGroup"></path>
        <path d="M330.861,40.555 C302.264,44.317 276.982,55.08 257.986,69.969 L408.863,50.125 C386.664,40.653 359.458,36.793 330.861,40.555 L330.861,40.555 Z" id="path4030" stroke="#000000" stroke-width="4" fill="#FF0000" sketch:type="MSShapeGroup"></path>
      </g>
    </g>
  </svg>
</div>
            
          
!
            
              body {
	background: #00CEFF;
}

.ground {
	position: absolute;
	width: 100%;
	height: 10%;
	bottom: 0;
	background: #7E4614;
	z-index: 2;
}

.runway {
	position: absolute;
	width: 100%;
	bottom: 10%;
	border-bottom: solid 6px darken(#7E4614, 10);
}
            
          
!
            
              var chopper = $('.chopper'),
				chopperWidth = chopper.width(),
				screenWidth = $(window).width(),
				flight = new TimelineMax({repeat: -1});

flight
  .set(chopper, {rotation: -8, x:5, y: 0})
	.to(chopper, 5, { y: -200, ease: Power3.easeInOut })
  .to(chopper, 1, {rotation: 10}, "-=2.3")
  .to(chopper, 4, {x: (screenWidth - chopperWidth), ease:Power2.easeInOut}, "-=2")
  .to(chopper, 2.5, {rotation: -8}, "-=2.2")
  .to(chopper, 5, {y:5, ease: Power3.easeInOut}, "-=2");
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console