<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1728 1296">
  <defs />
  <g id="sea-otter">
    <path id="water" opacity="0" fill="#74C2C2" d="M-3.66 51.56h1728v1286.77h-1728z" />
    <g id="paws">
      <g id="left-top-lines">
        <path class="top-ripple" id="_x32_" fill="none" stroke="#FFF" stroke-miterlimit="10" stroke-width="4" d="M493.78 659.03c-9.29-10.6-6.3-29.4 5.81-36.6" />
        <path class="top-ripple" fill="none" stroke="#FFF" stroke-miterlimit="10" stroke-width="4" d="M473.71 691.21c-14-16.13-18.42-40.01-11.11-60.07 4.55-12.5 14.43-24.02 27.52-26.34" />
        <path id="left-paw" fill="#144F4F" d="M596.38 654.94c-4.11-9.29-8.51-18.95-16.45-25.3-9.17-7.33-21.81-9.03-33.45-7.48-4.03.54-8.11 1.46-11.57 3.6-2.95 1.83-5.32 4.46-7.51 7.16-6.16 7.61-11.25 16.08-16.71 26.47 29.98.36 59.98-.75 89.85-3.32-1.08.3-2.31-.69-4.16-1.13z" />
      </g>
      <g id="right-top-lines">
        <path id="_x32__1_" fill="none" stroke="#FFF" class="top-ripple" stroke-miterlimit="10" stroke-width="4" d="M1108.07 585.64c8.01 2.9 14.15 10.44 15.38 18.87" />
        <path id="_x31__1_" fill="none" stroke="#FFF" class="top-ripple" stroke-miterlimit="10" stroke-width="4" d="M1137.59 631.1c7.93-15.89 5.01-36.54-7.02-49.61" />
        <path id="right-paw" fill="#144F4F" d="M1115.42 656.84c2.65-16.51-7.01-33.51-21.27-42.25-14.26-8.73-32.19-10.01-48.52-6.42-4.99 1.1-9.91 2.63-14.49 4.9-20.04 9.95-30.69 32.49-37.87 56.46 17.91-1.35 35.82-2.69 53.73-4.04 22.49-1.69 45.05-3.39 68.42-8.65z" />
      </g>
    </g>
    <g id="feet">
      <g id="left-foot-group">
        <path d="M704.12 888.33c-20.92 28.4-36.66 60.21-52.28 91.83-10.69 21.63-21.68 45.37-16.67 68.98 1.07 5.04 3.06 10.21 7.15 13.35 2.43 1.86 5.4 2.86 8.37 3.58 20.54 5 42.66-2.14 59.55-14.84s29.29-30.45 39.99-48.68c18.78-32 33.42-67.07 37.32-103.97.59-5.6.61-12.1-3.6-15.84-5.21-4.64-13.29-2.21-19.93-.07-19.6 6.34-40.72 7.92-61.05 4.58l4.46-5.93-6.46 1.05c1.5 1.86 3 3.73 3.15 5.96z" opacity=".161" />
        <path fill="#144F4F" d="M704.21 900.02c-8.3-31.99-30.55-59.13-37.94-91.34-2.09-9.09-2.9-18.85.39-27.58 3.28-8.73 11.49-16.1 20.82-16.05 13.23.08 21.9 13.54 27.31 25.62-1.65-4.25-3.3-8.69-2.93-13.24.38-4.54 3.42-9.21 7.93-9.88 6.81-1.02 11.34 6.67 13.84 13.09-3.23-4.18-.64-11 4.22-13.07 4.86-2.07 10.74-.12 14.5 3.59s5.76 8.84 7.11 13.95c-.92-5.23-1.11-12 3.68-14.3 3.81-1.82 8.31.66 11.25 3.69 10.34 10.65 11.2 27.04 11.46 41.88l1.17 68.16c-8.04.04-15.37 4.22-22.78 7.33-17.06 7.15-36.36 8.82-54.4 4.73-3.66-.83-7.37-1.94-5.63 3.42z" />
        <g id="left-bottom-lines" fill="none" class="bottom-ripple" stroke="#FFF" stroke-miterlimit="10" stroke-width="4">
          <path id="_x32__3_" d="M633.55 734.22c-11.01 24.56-4.42 53.44 6.31 78.13 6.65 15.31 15.02 30.21 27.24 41.57" />
          <path id="_x31__3_" d="M643.69 870.01c-21.8-16.85-37.31-41.63-42.95-68.59" />
        </g>
        <g id="left-foot-padding" opacity=".8">

          <ellipse transform="matrix(0.9936 -0.1129 0.1129 0.9936 -84.0448 91.9986)" opacity="0.9" fill="#E8C089" cx="770.42" cy="788.2" rx="7.84" ry="6.94" />

          <ellipse transform="matrix(0.9936 -0.1129 0.1129 0.9936 -83.5524 89.3189)" opacity="0.9" fill="#E8C089" cx="747" cy="782.51" rx="8.72" ry="7.72" />

          <ellipse transform="matrix(0.9936 -0.1129 0.1129 0.9936 -83.5991 86.6277)" opacity="0.9" fill="#E8C089" cx="723.21" cy="781.58" rx="9.12" ry="8.08" />

          <ellipse transform="matrix(0.9936 -0.1129 0.1129 0.9936 -84.6096 82.7489)" opacity="0.9" fill="#E8C089" cx="688.45" cy="788.57" rx="17.82" ry="15.78" />
          <path opacity="0.9" fill="#E8C089" d="M689.89,820.42c1.49,6.85,19.88,64.68,33.32,71.55c7.69,3.93,16.5-1.18,23.79-2.85
					c20.97-4.8,19.93-46.37,20.76-63.29c0.33-6.72,2.85-16.84-2.34-19.39c-6.27-3.08-26.44-8.4-35.3-6.67
					C713.94,802.91,687.56,809.66,689.89,820.42z" />
        </g>
      </g>
      <g id="right-foot-group">
        <path d="M1072.93 821.3c-1.61 37.3 17.53 72.62 42.26 87 2.9 1.69 6.05 3.32 7.87 6.9 1.45 2.84 1.8 6.47 1.92 9.95.6 17.16-3.46 33.99-8.62 49.59-11.95 36.15-30.18 68.23-52.69 92.72-1.89 2.06-3.86 4.09-6.14 5.12-5.8 2.6-12.2-2.14-15.9-8.87-8.07-14.67-5.99-35.58-1.95-53.18s9.74-35.56 7.68-53.81c-1.1-9.7-4.34-18.66-7.81-27.2-4.04-9.93-8.49-19.6-13.85-28.23-6.47-10.41-14.69-20.51-15.58-34.23-.88-13.46 6.08-26 14.65-32.31 8.57-6.32 18.5-7.72 28.14-9 6.67-.9 13.33-1.78 20.02-4.45z" opacity=".141" />
        <path fill="#144F4F" d="M1008.89 859.42a258.94 258.94 0 01-9.68-74.22c.08-5.32.92-11.62 5.64-14.06 4.67-2.42 10.67.77 13.17 5.39 2.5 4.63 2.45 10.16 2.33 15.41-3.37-5.99-.45-14.94 6.15-16.86 6.6-1.93 14.19 5.38 11.73 11.8-.74-6.39 2.9-13.44 9.06-15.29s13.76 3.26 13.25 9.68c-.21-8.69 6.01-17.12 14.37-19.5 8.36-2.38 18.08 1.52 22.48 9.02 6.54 11.15 1 25.08-2.81 37.43-4.86 15.75-7.51 33.75-20.26 44.18" />
        <g id="right-bottom-lines" fill="none" stroke="#FFF" stroke-miterlimit="10" stroke-width="4" class="bottom-ripple">
          <path id="_x32__2_" d="M1107.68 828.78c18.24-10.8 25.02-34.07 25.4-55.26.28-15.68-3.36-33.47-16.72-41.68" />
          <path id="_x31__2_" d="M1135.85 720.72c16.5 19.23 22 47.29 13.99 71.33" />
        </g>
        <g id="right-foot-padding" opacity=".8">
          <circle opacity="0.9" fill="#E8C089" cx="1013.41" cy="794.47" r="6.94" />
          <circle opacity="0.9" fill="#E8C089" cx="1030.52" cy="790.24" r="7.72" />
          <circle opacity="0.9" fill="#E8C089" cx="1050.17" cy="789.05" r="8.91" />
          <circle opacity="0.9" fill="#E8C089" cx="1080.06" cy="785.58" r="15.78" />
          <path opacity="0.9" fill="#E8C089" d="M1081.98,817.39c-0.62,6.97-6.68,26.13-17.83,34.48c-6.37,4.77-17.31,1.23-22.51,1.91
						c-18.93,2.47-29.66-4.85-27.64-22.22c0.77-6.67-4.19-16.41,0.12-19.53c5.21-3.77,22.43-11.33,30.39-10.62
						C1059.07,802.71,1082.96,806.44,1081.98,817.39z" />
        </g>
      </g>
    </g>
    <g id="top">
      <path id="shadow" d="M678.17 511.89c-64.14 43.76-84.01 211.03 17.27 186.91 18.05-4.3 31.78 17.42 49.92 21.28 27.77 5.91 48.9-30.89 77.29-30.41 9.27.16 17.92 4.38 26.92 6.61 21.15 5.25 44.84-1.33 60.25-16.74 16.57-16.56 24.92-42.84 46.87-51.04 6.24-2.33 13.5-3.15 18.04-8.02 3.84-4.12 4.72-10.17 4.76-15.81.19-25.97-14.67-51.51-37.32-64.19-43.51-24.35-.3-62.57-58.55-72.09-20.11-3.29-40.73 5.07-56.52 17.95-5.02 4.09-9.7 8.66-15.26 11.98-22.86 13.63-51.72 2.52-78.31 1.41-26.25-1.09-51.71 9.67-55.36 12.16z" opacity=".161" />
      <g id="head">
        <g id="face">
          <path id="fluffy-face" fill="#B8840D" d="M622.31 469.17c35.97 36.58 78.94 66.56 126.03 87.91 10.34 4.69 21.33 9.05 32.72 8.47 9.42-.48 18.31-4.33 26.68-8.57 54.93-27.81 98.65-76.15 117.54-131.9-9.34-11.93-23.86-18.67-37.91-24.78-14.61-6.35-36.16-18.97-49.98-26.97-21.11-12.21-59.47-14.37-79.69-9.45-29.54 7.18-52.97 22.04-79.91 35.8s-56.58 69.34-55.48 69.49z" />
          <g id="snout">
            <path fill="#E8C089" d="M767.81 563.05c-5.54-3.15-10.94-6.69-15.33-11.3-4.39-4.62-7.74-10.43-8.51-16.76-.71-5.8.77-11.69 3.09-17.05 5.66-13.05 16.78-23.84 30.32-28.2s29.31-1.88 40.29 7.17c2.23 1.84 4.27 3.93 5.84 6.35 1.71 2.64 2.85 5.61 3.75 8.63 2.11 7.04 3.02 14.52 1.85 21.78-1.16 7.25-4.51 14.27-9.96 19.19-6.6 5.96-15.57 8.38-24.17 10.63l-10.71 2.79c-3.89.99-12.36-.9-16.46-3.23z" />
            <path d="M769.52 536c-1.5-2.13-2.97-4.62-2.49-7.17.36-1.9 1.74-3.43 3.26-4.63 3.98-3.14 9.14-4.54 14.21-4.65 5.07-.11 10.09 1 14.95 2.45 1.39.41 2.93 1 3.48 2.33.54 1.29-.07 2.75-.71 3.99a53.38 53.38 0 01-12.16 15.49c-1.91 1.68-4.16 3.29-6.71 3.25s-10.73-6.66-13.83-11.06z" />
            <path d="M781.61 547.82c-4 3.25-7.79 7.08-9.55 11.92 2.66.26 4.99-1.73 6.71-3.78 1.72-2.05 3.35-4.4 5.86-5.34.74-.28 1.55-.42 2.33-.25.95.2 1.75.84 2.59 1.32 3.36 1.9 7.99 1.19 10.63-1.64-2.31-2.59-6.33-2.36-9.68-3.28-2.26-.62-4.58-1.84-6.8-1.12-1.27.41-2.26 1.39-2.09 2.17z" />
          </g>
          <g id="eyes">
            <circle cx="752.87" cy="475.88" r="20.91" />
            <circle cx="825.53" cy="475.88" r="20.91" />
            <g id="eyes-sparkles">
              <circle id="sparkle-right" cx="759.93" cy="484.96" r="7.01" fill="#FFF" />
              <circle id="sparkle-left" cx="834.41" cy="482.88" r="7.01" fill="#FFF" />
            </g>
          </g>
          <path id="fluffy-side-2" fill="#B8840D" d="M630.89 452.18c1.83 2.93 3.17 6.14 4.5 9.32 2.55 6.1 5.1 12.21 7.66 18.31 1.35 3.22 2.71 6.52 2.79 10.19-6.97-1.95-14.73-3.83-21.19-.55 2.33-4.3 5.24-8.29 8.62-11.82-4.77 1.61-9.66 2.89-14.6 3.85 2.76-4.18 6.43-7.75 10.69-10.38a68.59 68.59 0 01-14.51 1.2c4.89-2.98 9.79-5.96 14.68-8.93-4.49.4-9.12-.91-12.73-3.61 3.55-1.2 7.1-2.4 10.64-3.6 2.09-.71 4.55-1.87 3.45-3.98z" />
          <path id="fluffy-side-1" fill="#B8840D" d="M905.74 461.35c.64-3.39 1.83-6.66 3.01-9.91 2.26-6.22 4.53-12.43 6.79-18.65 1.2-3.28 2.43-6.63 4.86-9.38 3.8 6.16 8.23 12.8 15.19 14.78a55.35 55.35 0 01-14.35 2.84c4.6 2.06 9.06 4.42 13.34 7.08-4.86 1.2-9.98 1.33-14.9.38 4.13 2.57 7.98 5.58 11.48 8.96l-16.84-3.39c3.57 2.75 6.08 6.85 6.91 11.29-3.42-1.53-6.84-3.05-10.26-4.58-2.01-.9-4.6-1.71-5.23.58z" />
        </g>
        <g id="ears">
          <path fill="#B8840D" d="M757.7 389.23c-6.06-7.49-88.9 40.89-94.96 33.4-8.35-10.32-16.94-21.09-20.14-33.98-5.14-20.67 5.07-42.78 20.66-57.29 9.83-9.14 22.77-16.21 36.12-14.83 11.32 1.17 21.35 8.32 28.46 17.21 7.12 8.89 11.75 19.46 16.29 29.9 3.58 8.21 7.15 16.41 10.73 24.62M914.8 427.68c1.33-9.54-90.59-37-89.26-46.53 1.83-13.15 3.83-26.78 11.06-37.92 11.59-17.87 34.71-25.52 55.96-24.04 13.39.93 27.39 5.55 35.51 16.25 6.88 9.07 8.5 21.28 6.88 32.54-1.63 11.27-6.19 21.87-10.7 32.32l-10.65 24.66" />
          <path d="M904.64 404.33c.25-.38.51-.76.76-1.14.15.08.23.11.31.15 1.76.63 2.86-1.51 3.1-3.11 1.32-8.6 2.64-17.21 3.95-25.81.9-5.88 1.8-11.83 1.25-17.75s-2.71-11.91-7.09-15.93c-3.03-2.79-6.93-4.47-10.91-5.52-11.8-3.11-24.94-.71-34.88 6.37-9.94 7.08-16.5 18.71-15.11 35.07l-2.07-1.47c16.05 7.48 34.33 11.18 47.66 22.83 1.31 1.14 2.56 2.36 3.97 3.36 3.02 2.14 6.74 3.27 10.46 3.96.15.28-.45.35-.6.07-.15-.28-.13-.67-.39-.84-.24-.18-.47.47-.41-.24z" opacity=".2" />
          <path d="M668.95 398.69c-8.62-4.7-12.42-15.61-11.27-25.37 1.15-9.76 6.34-18.55 12.01-26.57 1.66-2.35 3.42-4.7 5.77-6.36 2.97-2.1 6.63-2.92 10.22-3.53 7.14-1.21 15.05-1.58 21 2.54 3.2 2.22 5.48 5.51 7.68 8.72 4.9 7.16 9.8 14.32 14.41 22.11 0 .16 0 .32.56 3.62-21.45 6.49-42.29 14.99-62 25.66 0 .17 0 .33 1.62-.82z" opacity=".212" />
        </g>
      </g>
    </g>

  </g>

  <g id="clouds">
    <path id="cloud-2" d="M904.43,206.57c0-24.19-26-43.8-58-43.8a72.78,72.78,0,0,0-28,5.43c-20.29-18.19-57.92-30.4-101-30.4-40.24,0-75.74,10.66-96.77,26.9a67.55,67.55,0,1,0-15.53,114.55c9.9,23.25,34.7,39.75,63.75,39.75,24,0,45.06-11.25,57.26-28.25,15.37,7.87,36.13,12.71,59,12.71,47.34,0,85.72-20.69,85.72-46.22A26.44,26.44,0,0,0,868.78,247C889.72,240.39,904.43,224.78,904.43,206.57Z" transform="translate(1037.17 -51.56)" fill="#020f0f" opacity="0.1" />
    <path id="cloud-1" d="M1301,255.92c2.89,10.56,29.85,12.38,60.23,4.07a148.3,148.3,0,0,0,25.87-9.63c21.41,2.67,58.55-1.77,99.39-12.94C1524.62,227,1557,213.1,1575,200.56c12.12,1.08,26.79-.29,42-4.47,35.39-9.68,60.46-30.73,56-47s-36.76-21.63-72.15-11.95a135.67,135.67,0,0,0-24.84,9.42c-12.17-7.58-37.66-8.34-65.2-.8-22.74,6.22-41.39,16.6-50.93,27.19-15.51.55-35.78,3.83-57.47,9.76-44.9,12.29-78.82,31.28-75.77,42.42a7,7,0,0,0,3.25,3.92C1310.88,237.34,1298.78,248,1301,255.92Z" transform="translate(1037.17 -51.56)" fill="#020f0f" opacity="0.1" />
    <path id="cloud-3" d="M1802.6,873.51c9.78,43.37-45.59,92.81-123.68,110.43a240.24,240.24,0,0,1-70.4,5.66c-42.1,43.76-128.89,86.36-233.9,110.06-98.12,22.14-189,22.54-246.82,5-24.49,23.19-58.2,41.4-97.4,50.24-91,20.53-177-17.06-192.06-84s46.41-137.78,137.39-158.31a221.25,221.25,0,0,1,67.85-4.79c14.74-47.15,68.52-90.37,139.34-106.35,58.47-13.19,114.42-4.62,151,19.16,34.29-22.58,83-42.68,138.72-55.26,115.42-26,217.36-10.06,227.69,35.71a37.69,37.69,0,0,1-1.08,19.54C1753,821,1795.23,840.86,1802.6,873.51Z" transform="translate(1037.17 -4.61)" fill="#020f0f" opacity="0.1" />
  </g>
</svg>
body {
  background-color: #74c2c2;
}

#clouds {
  filter: blur(3px);
  -webkit-filter: blur(3px);
}
#shadow {
  filter: blur(1px);
  -webkit-filter: blur(1px);
}
// 1) ripples animate in (opacity 0% -> 100%)
// 2) ripples grow (scale 1.2) and rotate as paws rotate!
// 3) otter eye sparkle moves around
// 4) throughout steps 1 -> 3 the background color is changing slightly between aqua blue and a deeper greenish blue

gsap.to("#clouds", {
  ease: Sine.easeOut,
  transformOrigin: "50% 50%",
  x: -3000,
  y: 600,
  duration: 12,
  repeat: -1
});

const tl = gsap.timeline({
  defaults: { ease: Sine.easeOut, duration: 2 },
  repeat: -1,
  yoyo: true
});

tl.to("body", {
  duration: 3,
  backgroundColor: "#4da0a0"
})
  .to("#left-top-lines", { y: -20 }, "<")
  .to(
    "#right-top-lines",
    {
      y: 20
    },
    "<"
  )
  .to(
    ".top-ripple",
    {
      scale: 1.5
    },
    "<"
  )
  .to(
    "#left-foot-group",
    {
      y: -50
    },
    "<"
  )
  .to(
    "#right-foot-group",
    {
      y: 50
    },
    "<"
  )
  .to(
    ".bottom-ripple",
    {
      duration: 1.2,
      scale: 1.25
    },
    "<"
  )
  .to(
    "#eyes-sparkles",
    {
      transformOrigin: "50% 50%",
      x: -10,
      duration: 3
    },
    "<"
  );

// timeline debugger script to debug animation on scrub
// <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/ScrubGSAPTimeline_3_0.js" />

// ScrubGSAPTimeline(tl);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.co/gsap@3/dist/gsap.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/ScrubGSAPTimeline_3_0.js