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{:height => "163", :viewBox => "0 0 162 163", :width => "162", :xmlns => "http://www.w3.org/2000/svg"}
  %g#numbers{:fill => "none", :stroke => "#4285F4", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "4"}
    %path#zero{:d => "M81.5986 147.9943c36.4492 0 65.997-29.548 65.997-65.9972 0-36.449-29.5478-66.0027-65.997-66.0027-36.4493 0-65.9972 29.5536-65.9972 66.0028 0 36.4494 29.548 65.9973 65.9972 65.9973z"}/
            
          
!
            
              @import "bourbon";
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700);

body {
  background: #fff;
}

svg {
  display: block;
  @include position(absolute, 50% x x 50%);
  @include transform(scale(1.3));
  margin-top: -81px;
  margin-left: -81.5px;
}
            
          
!
            
              // path array
var number = ["M107.5144 63.4542c-5.581 17.1004-39.5935 63.7575-39.5935 63.7575L85.848 147s26.638-38.6912 32.196-48.3396c5.558-9.6485 19.5007-36.5856-2.8363-55.233-22.337-18.6476-57.0615-7.9562-60.8616 25.1915-1.51 13.1722 1.309 20.8264 13.575 30.0414 12.2658 9.215 31.62 4.716 31.62 4.716l-16.586-18.662s-22.614 5.6723-37.3992-8.617c-14.7852-14.2895-11.755-40.1275 4.5527-53.4013 16.3076-13.2736 37.1746-6.7416 45.259 0 11.6576 9.7217 17.728 23.6578 12.147 40.7582z", "M39.0554 112.106c-1.3017-24.227 20.7648-33.7905 20.7648-33.7905S38.9664 66.4595 44.5814 44.195C50.1964 21.9304 67.779 16 81.9214 16c9.4916 0 33.1662 6.174 37.695 28.195 4.5287 22.021-15.767 34.1205-15.767 34.1205s21.3857 10.39 20.6 33.7906c-.3947 11.7505-6.2507 22.1058-14.6324 28.155-8.3102 5.9975-19.1102 7.739-27.8957 7.739-18.33 0-41.5642-11.6667-42.866-35.894z", "M55.8726 35.5165L37 16h71.362v15.7012L54.658 128.669 72.9913 148l53.2952-97.2732V35.5165h-70.414z", "M56.9507 98.5458c5.581-17.1004 39.5935-63.7575 39.5935-63.7575L78.6172 15S51.979 53.6912 46.421 63.3396c-5.558 9.6485-19.5006 36.5856 2.8364 55.233 22.337 18.6476 57.0615 7.9562 60.8616-25.1915 1.51-13.1722-1.309-20.8264-13.5748-30.0414-12.266-9.215-31.62-4.716-31.62-4.716l16.586 18.662s22.614-5.6723 37.399 8.617c14.7853 14.2895 11.755 40.1275-4.5526 53.4013-16.3076 13.2736-37.1746 6.7416-45.259 0-11.6576-9.7217-17.728-23.6578-12.147-40.7582z", "M122.0935 35.4792L103.417 16H45.8173l-6.808 55.2633s26.0693-24.6445 49.2223-13.573c23.153 11.0718 28.5735 42.5957 13.2497 58.089-6.7267 6.801-13.994 13.0975-36.192 11.9657C43.0912 126.613 35 99.295 35 99.295l18.0092 18.1s6.735 17.1982 16.5437 24.0898c9.8085 6.8915 24.3125 9.1998 37.091 2.559 29.5167-15.34 28.0665-52.1296 1.9665-65.7712-26.1-13.6415-51.1888 12.0888-51.1888 12.0888l6.7675-54.8822h57.9043z", "M31 93.3907L81.918 16h16.7775v110.7913l19.5336 20.9775V34.9362h-15.3084l-53.121 77.2553v11.894h83.0365l-20.2774-20.2774H31V93.3908z", "M37.0342 37.6817S51.2687 7.707 79.7088 16.6743c8.6725 2.7344 24.575 14.6587 22.4358 30.4855-2.1393 15.8267-13.1684 20.775-13.1684 20.775s26.571 18.2613 13.1684 42.0846C95.8768 121.1607 86.112 127.486 66.027 127.486 45.9415 127.486 35 101.8853 35 101.8853l15.7454 15s10.134 34.134 45.0686 29.7208c16.13-2.0377 32.3926-20.6168 28.0143-39.2557-4.3782-18.639-19.1437-19.709-19.1437-19.709s16.129-7.1298 14.7655-25.8934C118.0864 42.9846 98.3537 32.681 84.7502 34.554c-25.4133 3.499-29.4394 21.685-29.4394 21.685l-18.2766-18.557z", "M37 37.8676s10.1055-24.2898 37.181-22.802c27.0756 1.488 40.7335 28.0095 25.676 51.2668-15.0577 23.2573-61.5956 61.2517-61.5956 61.2517h69.7332L126.0424 147H53.9352s56.578-43.9928 66.574-66.5963c2.1922-4.9576 7.7702-18.274 0-31.545-7.7704-13.2714-23.272-16.2114-33.5493-15.1312-25.4584 2.6758-31.1116 23.9758-31.1116 23.9758L37 37.8676z", "M66 16.9944C66 15.893 66.8998 15 68.0023 15h28.9954C98.1035 15 99 15.8955 99 16.9944v128.0112C99 146.107 98.1002 147 96.9977 147H68.0023C66.8965 147 66 146.1045 66 145.0056V16.9944z", "M81.5986 147.9943c36.4492 0 65.997-29.548 65.997-65.9972 0-36.449-29.5478-66.0027-65.997-66.0027-36.4493 0-65.9972 29.5536-65.9972 66.0028 0 36.4494 29.548 65.9973 65.9972 65.9973z"];

// color array
var color = ["#EA4335", "#FBBC05", "#34A853", "#4285F4", "#EA4335", "#FBBC05", "#34A853", "#EA4335", "#FBBC05", "#34A853"];

// audio
var audio = new Audio("https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/tick.mp3");

var tl = new TimelineMax({
  yoyo: true,
  repeat: -1,
  repeatDelay: 1
});

tl.timeScale(1.05);

tl.set("#zero", {
  transformOrigin: "center center",
})

for(var i = -1; i < number.length; i++) {
  
  tl
    .to("#zero", .2, {
      delay: .45,
      scale: 1.02
    })
    .to("#zero", .1, {
      scale: .98
    })
    .to("#zero", .2, {
      morphSVG: {
        shape: number[i],
        shapeIndex: 1
      },
      stroke: color[i],
      scale: 1,
      onComplete: function(){
        // audio.play();
      },
      onReverseComplete: function(){
        // audio.play();
      }
    })
}

// findShapeIndex("#zero", number[6]);

// copyright
balapaCop("Countdown Animation", "#999");
            
          
!
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