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 class="animations-box">
      <div class="container-wavyBkg">
        <div class="wavyBkg"></div>
      </div>

      <div class="chickAnim-container">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 645">
          <defs>
            <clipPath id="clip-path">
              <path d="M462.47 142.51s17.15-.65 30.84 1.09c17 2.18 27.74 4.82 42.1 6.9 18.42 2.67 39.09 2.14 39.09 2.14L563.12 247 451.5 233.53z" fill="none"/>
            </clipPath>
            <clipPath id="clip-path-2">
              <path d="M79.5,635.8s83,1.47,93.29,0,20.08,0,32.42,0,30.69,5.13,53.44,4.4S411.5,645,411.5,645V380H79.5Z" fill="none"/>
            </clipPath>
          </defs>
          <title>Easter Island animation</title>
          <rect width="900" height="645" fill="none" id="bkg-transparent"/>
          <path d="M558.41 626.19c-14.16 1.15-33.36 1.72-52.55 1.44S461 625.12 446.64 626s-44.5 3.27-55.47 3.27c-9.33 0-21.64-4-34.67-3.91.63-3.49 1.13-6.36 1.32-7.63 3-20.79 5.28-19.93 6.05-23.07 1.83-7.46 12.8-69.95 16.48-83.15s9.09-35.2 19.32-46.5 35.14-24 61.87-28.74c11.9-2.12 39.46 1.9 52.24 6.16 9 3 10.78 12.93 14.7 14.46 5.18 2 25 55.39 26.27 65 .5 3.67 9.3 13.94 26.53 70.69 3.45 11.37 6.49 24.7 8.72 35.54-8.56-1.12-22.39-2.68-31.59-1.93z" fill="#586c91" id="island"/>
          <g id="leg-back" fill="#f67b4d">
            <path id="leg-bck-foot" d="M470.71 445.33c.76.42 11.37 1.77 13.47 2.27s1.81 1.69 1.25 2.19-6.78-.66-7.76-.66-.73.56.53 1.06 7.89 1.37 8.73 2.21.21 2.13-1.33 2-5.72-.23-8.66-1.06-1.54.55-1.54.55 8.21 2 8.83 2.36c2.2 1.13.37 2 .37 2a34.61 34.61 0 0 1-7-.44c-3.9-.71-10.49-.92-12.17-1.92-1.37-.82-2.24-3.46-2.56-8.59-.07-1.14 1.21-4.38 3.81-4.38.84-.05.32 1.37 4.03 2.41z"/>
            <path id="leg-bck-bottom" d="M470.68 445.32c-.77-.81-1.07-1.24-1.24-13.24s1.33-21.79 1.45-26.68c.06-2.46-2.92-3.61-5.09-2.94a3.66 3.66 0 0 0-2.82 3.76c0 7-.56 35-.14 42.64.32 6 2.88 7.18 4.24 6.85 3.25-.79 3.6-10.39 3.6-10.39z"/>
            <path id="leg-bck-top" d="M470.91 405.17c.22-4.89 0-10.78.06-20.66 0-7.54.68-12.61.47-19.41-.15-4.65-.42-8.07-3.48-9.52-3.33-1.58-5.6 1.5-5.61 3.83s.5 4.31.46 20.64c0 12.63.2 17 .19 24 0 2.33.31 4.3 1.94 4.91a4.28 4.28 0 0 0 5.97-3.79z"/>
          </g>
          <g id="chick-body">
            <g id="cutNeck">
              <path d="M534.11 229c2.32-.79 1.14-3.86-.43-5.26s-3.4-2-6.38-3.13a49.72 49.72 0 0 0-10.3-2.14c-3.41-.44-7.54-1.34-11.24-1.56s-11.38-.68-17.21-.45-9.24 1.73-10.64 4.14c-1.24 2.14 3.65 5.15 7.66 6.72s10.38 2.54 17.45 3.24a163.1 163.1 0 0 0 20.66.5c7.08-.33 8.19-1.3 10.43-2.06z" fill="#7098b6"/>
              <path d="M539.49 224.44c-.83-2.33-5.5-4.66-7.5-5.66a77.77 77.77 0 0 0-8.89-3 189.17 189.17 0 0 0-18.86-3c-2.54-.16-11.62-.59-16.91 0-4.64.53-14.09 3.3-14.92 8.29-.51 3 .58 5 5.33 8.33 5.19 3.69 19.12 6.93 33.12 7.1s25.69-1.93 28-3.22c1.43-.8 1.68-1 1.76-3.34s-.29-3.16-1.13-5.5zm-36.44 6.12c-7.07-.7-13.44-1.68-17.45-3.24s-8.9-4.58-7.66-6.72c1.4-2.41 4.8-3.92 10.64-4.14s13.52.22 17.21.45 7.83 1.12 11.24 1.56a49.72 49.72 0 0 1 10.27 2.13c3 1.12 4.9 1.81 6.38 3.13s2.75 4.47.43 5.26-3.35 1.74-10.4 2.07a163.1 163.1 0 0 1-20.66-.5z" fill="#a6e1f1"/>
            </g>
            <g id="chickHead-inside-model">
              <path id="main-body" d="M516 270.63c4-.63 5.56-1.22 5.63-2.27.21-3.2.43-7.64.43-11.07 0-11.73-2-13.77-2.56-17.34s-4.49-8.57-12.05-9.7c-8.29-1.24-12.6-1.44-16.88 2-2.72 2.21-5 8.29-6.33 16.81-.57 3.49-1.42 8.32-2 13.45-.28 2.64 2.44 4.52 5.76 5.94s10.79 2.67 16.94 2.77a61.17 61.17 0 0 0 11.06-.59z" fill="#65d5e8"/>
              <g id="beak">
                <path d="M516.35 247.29a36.5 36.5 0 0 1 4-3.46s9.62 5.38 11.36 6.86-10.77.52-13.08.35c-4.19-.3-4.56-.7-4.56-1 .02-.69 1.25-1.66 2.28-2.75z" fill="#f67b4d"/>
                <path d="M514.09 250.08a20.86 20.86 0 0 0 1.48 4.49c.38.49 7.08-.91 9.61-1.34 1.28-.22 5.48-1.45 5.74-1.58s.9-.28.9-.54a6.94 6.94 0 0 0-2.36-.09c-1.52 0-6.23-.12-7.43-.19-4.32-.27-7.94-.83-7.94-.75z" fill="#f69f8c"/>
              </g>
              <circle id="eye" cx="503.01" cy="243.7" r="2.81" fill="#444d5f"/>
              <path id="crete" d="M511.46 233.14c.2-2.83 0-7.9-1.65-9.64s-3.72-1.09-4.08 0a5.77 5.77 0 0 0 0 2.61s-.68-5-3-3.69a4.58 4.58 0 0 0-2.16 4.13s-1.26-6-2.62-5.45c-2.45 1.05-1.81 5.72-1.81 5.72s.2-2.67-1.81-2.89-2.05 3.43-2.07 4.16a21.09 21.09 0 0 0 .29 2.84 12 12 0 0 1 2.78-.35c.81.11 4.54 0 6.76.24s2.51-.14 5.17.64a23.26 23.26 0 0 1 4.2 1.68z" fill="#f67b4d"/>
            </g>

            <g id="chickHead-inside">
              <path id="main-body-2" data-name="main-body" d="M530.83 235.61c6.86-1.08 9.64-2.1 9.76-3.92.36-5.56.74-13.25.74-19.21 0-20.35-3.54-23.89-4.43-30.09s-7.78-14.85-20.91-16.81c-14.38-2.15-21.84-2.49-29.27 3.54-4.72 3.84-8.6 14.38-11 29.15-1 6-2.46 14.44-3.41 23.34-.48 4.58 4.22 7.83 10 10.31 5.53 2.37 18.72 4.63 29.38 4.8a106 106 0 0 0 19.14-1.11z" fill="#65d5e8"/>
              <g id="beak-2" data-name="beak">
                <path d="M531.48 195.13a63 63 0 0 1 7-6s16.69 9.33 19.7 11.89-18.68.9-22.68.61c-7.28-.51-7.92-1.21-7.92-1.66-.02-1.27 2.11-2.97 3.9-4.84z" fill="#f67b4d"/>
                <path d="M527.56 200c0 .72 1.9 6.93 2.57 7.78s12.28-1.57 16.66-2.32c2.22-.38 9.51-2.51 10-2.75s1.57-.48 1.57-.94c0-.2-1.46-.2-4.1-.15s-10.8-.2-12.89-.33c-7.53-.48-13.81-1.51-13.81-1.29z" fill="#f69f8c"/>
              </g>
              <circle id="eye-2" data-name="eye" cx="508.35" cy="188.9" r="4.87" fill="#444d5f"/>
              <path id="crete-2" data-name="crete" d="M523 170.6c.34-4.92-.08-13.71-2.88-16.74s-6.44-1.89-7.06 0a10.14 10.14 0 0 0 0 4.54s-1.18-8.65-5.27-6.4-3.74 7.15-3.74 7.15-2.18-10.45-4.54-9.45c-4.26 1.82-3.14 9.92-3.14 9.92s.34-4.62-3.15-5-3.54 5.95-3.59 7.2a37.81 37.81 0 0 0 .51 4.94 21.25 21.25 0 0 1 4.83-.62c1.4.19 7.86.05 11.72.43s4.35-.24 9 1.11a40.77 40.77 0 0 1 7.31 2.92z" fill="#f67b4d"/>
            </g>
            <g id="body-mainPart">
              <path id="body-mainPart-2" data-name="body-mainPart" d="M538.25 267.93c.19-12.08 1.54-24.08 2.38-36.92-.13 1.8-1.49 2.73-9.64 4a102.73 102.73 0 0 1-18.83 1.08c-9.25-.25-22.42-2.25-27.79-4.5-5.78-2.42-12.68-6-12-10.54-.94 5.89-2 12.44-2.94 19.69a20 20 0 0 1-11.27 15.42s-6.35 1.89-13.42 4.55-19.08 1.69-42.07 1.33c-22.27-.35-22.23 2.24-26.65.47s-32.79-16.06-40.75-20.51-9.73-1.77-11.5 0 .88 5.31.88 5.31a12.53 12.53 0 0 0-3.54 1.77c-.88.88-1.47 3.37 0 6.19a5.33 5.33 0 0 1 .72 3s-2.55-2.15-5.08 2.35c-1.74 3.1 2.93 15.48 5.58 21.68s7.79 18.67 13 26.51c6.1 9.2 22.12 24.15 33.18 32.11 8.65 6.23 23.92 17.84 39.84 21.53 18.82 4.36 31 8.53 53.4 7.67 19.3-.74 45.19-9.07 58-19.69 10.46-8.66 16.54-18.84 19.24-34 3.1-17.38-.99-29.76-.74-48.5z" fill="#65d5e8"/>
              <path d="M352 265.43s-8.84-5.79-15.26-10.75-8.74-5.81-8.74-5.81-1.32-.2.18.85.69.95 3.57 2.81 1.64 1.35 4.16 3.1 2.11 2.11 4.52 3.43 6.72 5.13 9.38 6.15 2.77.8 2.66.58-.13-.19-.47-.36z" fill="#49c6e0"/>
              <path d="M323 258.64a27.89 27.89 0 0 1 2.9 1.86c2 1.37 3.26 2 4.57 3.13 2.29 1.94 3.73 2.74 5.26 4.11a27.69 27.69 0 0 0 2.95 2.37 3.73 3.73 0 0 1 1.12 1.36s-.19.56-.7.12-4.28-3-5.44-4.06-2-1.42-3.33-2.57-2-1.42-3.41-2.51-2-1.32-2.66-1.86a10.44 10.44 0 0 1-1.84-1.53c-.3-.61.58-.42.58-.42z" fill="#49c6e0"/>
            </g>
            <path id="cutNeck-mask" d="M535.3 226.4a1.94 1.94 0 0 1-1.19 2.59c-2.24.77-3.35 1.74-10.4 2.07a163.1 163.1 0 0 1-20.66-.5c-7.07-.7-13.44-1.68-17.45-3.24s-8.9-4.58-7.66-6.72a5.29 5.29 0 0 1 .53-.74l-5.33-.61a4.84 4.84 0 0 0-.73 1.82c-.51 3 .58 5 5.33 8.33 5.19 3.69 19.12 6.93 33.12 7.1s25.69-1.93 28-3.22c1.43-.8 1.68-1 1.76-3.34a9.26 9.26 0 0 0-.28-3z" fill="#a6e1f1"/>

            <g clip-path="url(#clip-path)" id="chickHead-group">
              <g id="chickHead-first">
                <path id="main-body-3" data-name="main-body" d="M530.83 235.61c6.86-1.08 9.64-2.1 9.76-3.92.36-5.56.74-13.25.74-19.21 0-20.35-3.54-23.89-4.43-30.09s-7.78-14.85-20.91-16.81c-14.38-2.15-21.84-2.49-29.27 3.54-4.72 3.84-8.6 14.38-11 29.15-1 6-2.46 14.44-3.41 23.34-.48 4.58 4.22 7.83 10 10.31 5.53 2.37 18.72 4.63 29.38 4.8a106 106 0 0 0 19.14-1.11z" fill="#65d5e8"/>
                <g id="beak-3" data-name="beak">
                  <path d="M531.48 195.13a63 63 0 0 1 7-6s16.69 9.33 19.7 11.89-18.68.9-22.68.61c-7.28-.51-7.92-1.21-7.92-1.66-.02-1.27 2.11-2.97 3.9-4.84z" fill="#f67b4d"/>
                  <path d="M527.56 200c0 .72 1.9 6.93 2.57 7.78s12.28-1.57 16.66-2.32c2.22-.38 9.51-2.51 10-2.75s1.57-.48 1.57-.94c0-.2-1.46-.2-4.1-.15s-10.8-.2-12.89-.33c-7.53-.48-13.81-1.51-13.81-1.29z" fill="#f69f8c"/>
                </g>
                <circle id="eye-3" data-name="eye" cx="508.35" cy="188.9" r="4.87" fill="#444d5f"/>
                <path id="crete-3" data-name="crete" d="M523 170.6c.34-4.92-.08-13.71-2.88-16.74s-6.44-1.89-7.06 0a10.14 10.14 0 0 0 0 4.54s-1.18-8.65-5.27-6.4-3.74 7.15-3.74 7.15-2.18-10.45-4.54-9.45c-4.26 1.82-3.14 9.92-3.14 9.92s.34-4.62-3.15-5-3.54 5.95-3.59 7.2a37.81 37.81 0 0 0 .51 4.94 21.25 21.25 0 0 1 4.83-.62c1.4.19 7.86.05 11.72.43s4.35-.24 9 1.11a40.77 40.77 0 0 1 7.31 2.92z" fill="#f67b4d"/>
              </g>
            </g>
          </g>

          <g id="egg-group">
            <path id="egg" d="M405.28 315.43c8.94-9.41 11.06-20.3 6.58-25.27-1.67-1.85-5.43-3.3-8.58-3.43a30.82 30.82 0 0 0-21.2 7.93c-6.17 5.56-7.39 12.19-6.41 16a21.82 21.82 0 0 0 4.39 7.67c5.73 6.32 17.14 5.61 25.22-2.9z" fill="#faae4f"/>
            <path id="egg-mask" d="M386.41 340.18s1.17-10.37-4.46-19.55a21.52 21.52 0 0 0-9-8.19 44.67 44.67 0 0 0-10-2.81s-3.47-11.75-1.91-23.28 14.33-13 14.33-13l54.3 11.34s-9.76 35.39-16.93 42.52a46.43 46.43 0 0 1-26.33 12.97z" fill="#65d5e8"/>
          </g>
          <path d="M477.08 284.88c3.79 13.05 1.37 36.37-10.32 47.68s-24.41 13.52-36.9 12.39c-22.51-2-56.39-26-64-33s-13.79-12.49-11.49-14.21c3.33-2.5 8.61.88 15.15 4.14s5.74.86 5.74.86-18.53-10.21-21.1-12.84-1.68-4 0-5.37c2.8-2.4 14.82 3 18.89 4.48 12.19 4.52 12.65 3.86 12.65 3.86s1.59-.73-1.68-2.36-25.8-9.45-28.73-11.58c-2.66-1.94-5.2-3.81-2.09-6.62 2.8-2.51 6.71-.49 13.9 1.18 4.2 1 9.21 2.57 15.53 3.14a271.24 271.24 0 0 0 40.31.57c7.81-.61 24.07-3.78 30.32-4.27s13 .45 15.07 1.66c3.88 2.3 7.67 6.6 8.75 10.29z" fill="#d6f3f6" id="wing"/>
          <g id="leg-front" fill="#f67b4d">
            <path id="leg-frt-foot" d="M438.62 448.62c1.1-.54 2.86-.8 3.36.05a3.93 3.93 0 0 0 2.49 1.86c1.25.41 11.76 1.15 13.86 1.65s1.82 1.69 1.26 2.19-7.79-.89-8.77-.89.28 1.17 1.54 1.67 7.42 2.67 8.26 3.5.2 2.13-1.34 2-5.24-1.52-8.18-2.35-1.54.56-1.54.56 4.2 1.66 7.84 3.33 1.22 2.62 1.22 2.62a27.57 27.57 0 0 1-6.67-1.06c-3.67-1.09-10.7-1.23-12.38-2.23s-2.18-5.4-2.32-7.17c-.16-2.04-.56-4.76 1.37-5.73z"/>
            <path id="leg-frt-top" d="M442.56 409.55c.07-1.2 1.05-9.33 1-18s.5-20.22.25-27c-.17-4.65-.73-8.23-3.8-9.66-3.47-1.63-5.31 1.67-5.31 4s.59 10.39.61 26.73-.48 20.24-.53 22.63c0 1.85.54 4.68 3.56 4.44 2.21-.17 4.13-1.63 4.22-3.14z"/>
            <path id="leg-frt-bottom" d="M444 449.74c-.18-1.91-.86-9.17-.87-12.6 0-12-.33-22.72-.59-27.6-.16-3.09-1.39-3.87-3.16-4.41-2.27-.7-4.58.63-4.57 3s.05 3.24.06 4.7c0 7 1.83 28.69 2 36.36s1 11.91 3.1 12.46c2.5.68 4.58-9.21 4.71-10.94a1.29 1.29 0 0 1-.68-.97z"/>
          </g>
          <g clip-path="url(#clip-path-2)" id="fish-group">
            <g id="fish">
              <g id="fish-body-part">
                <path d="M232.26 667.12l-12.91 8.22a14.45 14.45 0 0 1-5.55 2.66c-3.21.53-4.09-4.3-6.06-8.26-2.21-4.42-9.83-16.38-10.17-17.2-.21-.51-5.57-15.71-5.94-15.76-.43.23-1.36.45-5.35 2.37a90.58 90.58 0 0 0-19.95 13.39 1.58 1.58 0 0 0-.15.12 115.34 115.34 0 0 0-23.31 34.09 191.92 191.92 0 0 0-12.48 38.83l-.39 1.8a168.07 168.07 0 0 0 .5 69.92c9.06 41 23 51.35 29.9 53.42 7.78 2.33 24.32-12.88 33.31-24.79A249.06 249.06 0 0 0 232 753.81l5-16.57a187.74 187.74 0 0 0 6.7-47.43c0-1-.67-8.68-1.25-10.11-1.66-3.87-10.19-12.58-10.19-12.58z" fill="#f14a49" id="fish-body-only"/>
                <path id="nage-tail" d="M158.83 863.83c-1.38-.36-13.54 33.5-14.73 32.92-2.23-1.07-26-13.22-30.92-15.46-4-1.79-5.59-3.25-4.51-5.28 2.64-5 36.68-32.93 50.84-39.9 2.33-1.15 8.22.08 10 3.12 6.8 11.43 26.28 56 26.34 61.74 0 2.35-2.07 2.74-6.33 2.19-5.3-.69-32.32-2.68-33.9-3.1-1.97.4 4.59-35.86 3.21-36.23z" fill="#8ed5e8" opacity=".71"/>
                <path id="nage-arm" d="M224.53 709.68c.45-3 1.41-6.54 5.31-5 4.24 1.69 38.08 14.86 40.65 16.18 1.21.63 2.06 1.65 1.41 3.18a178.53 178.53 0 0 1-12.9 23.65s-1 1.38-3-.44c-3.81-3.36-31.77-35.55-31.47-37.57z" fill="#8ed5e8" opacity=".71"/>
                <circle id="eye" data-name="eye" cx="182.58" cy="680.15" r="6.49" fill="#97edee"/>
              </g>

              <path id="fish-mouth-down" d="M234.69 706.34c11.94-19.68 12.84-50 11-55.45-.12 0-.22-.19-.45-.25-.62-.15-2.14 2-24.33 22.51 0 0-3.39 3.16-4.95 4.55-.94.77.37 2.26 1.35 3.88 3.15 5.25 17.38 24.76 17.38 24.76z" fill="#f14a49"/>
              <path id="fish-mouth-up" d="M182.61 665.92c-7.93-6.36-13.55-9-9.65-13.55 10.11-11.79 19.49-16.12 20.68-16.5a1.22 1.22 0 0 1 1.24.26c.65.61 4.3 9.76 6.06 14.38 7.87 20.65 8.37 23 10 27.25l-13.85-6.43z" fill="#f14a49" />

            </g>
          </g>
        </svg>

      </div>   
    </div> 
              
            
!

CSS

              
                body {
  background-color: #22a0e0;
}
html, body {
  margin: 0;
  height: 100%;
}
.chickAnim-container {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
  /*text-align: center;*/
  margin: 0 auto;
}
.animations-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
svg {
  position: absolute;
  z-index: 2;
  max-height: 80%;
  max-width: 100%;
}

.container-wavyBkg {
  position:absolute;
  width:100%;
  height: 100%;
  bottom:0;
  left: 0;
  overflow: hidden;
  z-index: 1;
}
.wavyBkg {
  position: absolute;
  background-image: url(http://sarahbutez.com/easter-island/img/bkg-waves.svg);
  background-repeat: repeat-x;
  position: absolute;
  width: 6000px;
  height: 1000px;
  background-size: 1600px, 1000px;
  background-position: bottom left;
  
}
#chickHead-inside-model {
  visibility: hidden;
}

              
            
!

JS

              
                var $wing = $('#wing');
var $chickBody = $('#chick-body');
var $fish = $('#fish');
var $egg = $('#egg');
var $fish = $('#fish');
var $mouthDown = $("#fish-mouth-down");
var $mouthUp = $("#fish-mouth-up");
var $chickHeadGroup =  $('#chickHead-group');
var $chickHeadFirst = $('#chickHead-first');
var $chickHeadInside = $('#chickHead-inside');
var $cutNeckMask = $('#cutNeck-mask');

TweenMax.set(["#leg-frt-bottom", "#leg-bck-bottom", $chickBody], {transformOrigin:"50% 100%"});
TweenMax.set(["#leg-frt-top", "#leg-bck-top"], {transformOrigin:"100% 50%"});
TweenMax.set("#egg", {transformOrigin:"50% 50%"});
TweenMax.set($wing, {transformOrigin:"100% 30%"});
TweenMax.set($fish, {transformOrigin:"50% 50%", y:10});
TweenMax.set($mouthUp, {transformOrigin:"100% 100%"});
TweenMax.set($mouthDown, {transformOrigin:"0% 50%"});
TweenMax.set("#nage-arm", {transformOrigin:"0% 20%"});
TweenMax.set($chickHeadGroup, {transformOrigin:"100% 100%"});
TweenMax.set($chickHeadInside, {transformOrigin:"50% 50%"});

//start
function startScene() {
var tlStart = new TimelineMax();
tlStart.add("timeStart");
tlStart.to(["#leg-frt-bottom", "#leg-bck-bottom"], 0.6, {
  rotation:-10, repeat:1, yoyo:true, repeatDelay:0.2, yoyoEase:Power3.easeIn
}, "timeStart");
tlStart.to(["#leg-frt-top", "#leg-bck-top"], 0.6, {
  rotation:10, yPercent:"8%", xPercent:"-50%", repeat:1, yoyo:true, repeatDelay:0.2, yoyoEase:Power3.easeIn
}, "timeStart");
tlStart.to($chickBody, 0.6, {rotation:10, yPercent:"3%", repeat:1, yoyo:true, repeatDelay:0.2, yoyoEase:Power3.easeIn}, "timeStart");
tlStart.to($wing, 0.6,{rotation:5, xPercent:"10%", yPercent:"15%"}, "timeStart+=0.05");
tlStart.add("eggComing");
tlStart.to($wing, 0.08, {rotation:10, repeat:5, yoyo:true, yoyoEase: Linear.easeNone  }, "eggComing-=0.8")
.to($wing, 0.6, {rotation:0, xPercent:"0%", yPercent:"0%", ease: Power1.easeOut}, "-=0.2");

return tlStart; 
}

//Egg falling
function eggComing() {
var timeEgg = new TimelineMax();
timeEgg.to($egg, 1.8, {bezier: {curviness:1, values:[{x:0, y:0}, {x:-75, y:95}, {x:-85, y:280}], autoRotate:["x","y","rotation",-125,false]}, ease:Power1.easeOut} );

timeEgg.to($egg, 0.3, {opacity:0}, "-=0.3");
timeEgg.add("eggEaten"); 
//fish eats the egg
timeEgg.to($fish, 0.6, {bezier: {curviness:3, values:[{x:0, y:10}, {x:30, y:-60}, {x:62, y:-140}], autoRotate:["x","y","rotation",15,true]}, ease: Expo.easeOut}, "eggEaten-=1.4");
timeEgg.from($mouthDown, 0.4, {rotation:-30, xPercent:"-5%", repeat:1, yoyo:true}, "eggEaten-=1.3");
timeEgg.from($mouthUp, 0.4, {rotation:25, xPercent:"-1%", yPercent:"1.5%", repeat:1, yoyo:true}, "eggEaten-=1.3");
timeEgg.to("#nage-arm", 0.6,{rotation:25, repeat:1, repeatDelay:0.1, yoyo:true, yoyoEase:Back.easeOut}, "eggEaten-=1.3");
timeEgg.to($fish, 0.8 ,{bezier: {curviness:2, values:[{x:70, y:-100}, {x:75, y:-60}, {x:80, y:5}]}, ease: Power1.easeIn}, "-=0.6");  

timeEgg.timeScale(1.2);
return timeEgg;
}

function chickHeadMove() {
var timeHead = new TimelineMax();
timeHead.add("headHead");
timeHead.to($chickHeadGroup, 0.4, {rotation:110, yPercent:"-1%", xPercent:"1%", ease:Power1.easeIn});
timeHead.to($chickHeadGroup, 0.8, {bezier: {curviness:2, values:[{x:2, y:5}, {x:40, y:55}, {x:80, y:280}] /*autoRotate:["x","y","rotation",0,true]*/}, rotation:175, ease: Linear.easeNone});
timeHead.to($chickHeadFirst, 0.4, {y:-120, ease:Power0.easeOut});
//new head from inside
timeHead.from($chickHeadInside, 1, {scale:0.5, x:-10}, "headHead+=0.3");
timeHead.from($chickHeadInside, 1.2, {y:45, ease:Elastic.easeOut.config(1, 1)}, "headHead+=0.2");
timeHead.to($cutNeckMask, 0.3, {opacity:0}, "-=0.7");

return timeHead;
}


//master timeline
var master = new TimelineMax({repeat:-1});
master.add( startScene() );
master.add( eggComing(), "-=1.3" );
master.add( chickHeadMove(), "-=0.5");
              
            
!
999px

Console