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 version="1.1" id="jellyFishScene" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600">
  <defs>
    <linearGradient id="tentacleGradient" gradientUnits="userSpaceOnUse" x1="442.1205" y1="435.084" x2="442.1205" y2="279.652">
      <stop  offset="0" style="stop-color:#FFFFFF"/>
      <stop  offset="0.7296" style="stop-color:#FDFDFD;stop-opacity:0.9232"/>
      <stop  offset="0.7849" style="stop-color:#FCFCFC;stop-opacity:0.9174"/>
      <stop  offset="1" style="stop-color:#E7E7E7;stop-opacity:0"/>
    </linearGradient>
    <radialGradient id="bodyGradient" cx="400" cy="252.5641" r="40.9642" gradientUnits="userSpaceOnUse">
      <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.8"/>
      <stop  offset="0.4219" style="stop-color:#FCFCFC;stop-opacity:0.70"/>
      <stop  offset="0.7887" style="stop-color:#F1F1F1;stop-opacity:0.45"/>
      <stop  offset="1" style="stop-color:#E7E7E7;stop-opacity:0.35"/>
    </radialGradient>
    <radialGradient id="lightBG" cx="736.1973" cy="-188.7704" r="720.2057" gradientTransform="matrix(1.0001 0 0 0.9353 -148.1663 278.3503)" gradientUnits="userSpaceOnUse">
      <stop  offset="0" style="stop-color:#1678BA"/>
      <stop  id="offset-1" offset="0.223" style="stop-color:#1676B7;stop-opacity:0.777"/>
      <stop  id="offset-2" offset="0.3732" style="stop-color:#1570AE;stop-opacity:0.6268"/>
      <stop  id="offset-3" offset="0.5021" style="stop-color:#13679F;stop-opacity:0.4979"/>
      <stop  offset="0.6188" style="stop-color:#10598A;stop-opacity:0.3812"/>
      <stop  offset="0.7275" style="stop-color:#0D476E;stop-opacity:0.2725"/>
      <stop  offset="0.8301" style="stop-color:#09314C;stop-opacity:0.1699"/>
      <stop  offset="0.9262" style="stop-color:#041724;stop-opacity:0.0738"/>
      <stop  offset="1" style="stop-color:#000000;stop-opacity:0"/>
    </radialGradient>
    <linearGradient id="windowGradient" gradientUnits="userSpaceOnUse" x1="285.4766" y1="53.5404" x2="89.5039" y2="392.9749" gradientTransform="matrix(0.9063 0.4226 -0.4226 0.9063 383.8784 38.6854)">
      <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.15"/>
      <stop  offset="0.2843" style="stop-color:#EAF0F6;stop-opacity:0.1358"/>
      <stop  offset="1" style="stop-color:#B7CBE2;stop-opacity:0.1"/>
    </linearGradient>
    <clipPath id="windowClip">
      <circle  cx="409" cy="300" r="193"/>
    </clipPath>
  </defs>
  <path class="bubblePath" fill="none" stroke="none" d="M392.626,160.289 C392.66392,164.34932 392.825,269.506 393.319,269.594 390.869,302.707 
                                                        416.85,322.778 417.223,333.632 417.692,347.384 394.601,377.393 394.629,379.948 394.829,379.937 
                                                        404.265,394.279 405.69,412.343 406.484,422.411 395.711,436.024 395.201,454.221 394.286,486.499 395.258,512.015 396.137,512.005"/>
  <ellipse id="light" fill="url(#lightBG)" cx="588.138" cy="101.796" rx="720.31" ry="673.598"/>
  <ellipse id="lightAnimate" fill="url(#lightBG)" cx="588.138" cy="101.796" rx="720.31" ry="673.598"/>
  <g id="dustGroup"></g>
  <g id="randomBubbleGroup"></g>  
  <g id="jellyContainer"></g>
  <g id="lightRayGroup" opacity="0.5">
    <polyline class="ray" opacity="0.05" fill="#00C3FF" points="632.843,-0.203 457.908,599.47 740.876,600.203 864.959,0.391"/>
    <polyline class="ray" opacity="0.05" fill="#00C3FF" points="379.12,0 137.85,600 424.452,600 621.308,0"/>
    <polyline class="ray" opacity="0.05" fill="#00C3FF" points="0,0 0,600.997 103.471,600.108 366.443,0"/>
  </g>
  <g id="submarine">
    <path fill="#EB675E" d="M0,0v600h800V0H0z M400,496c-108.25,0-196-87.75-196-196s87.75-196,196-196s196,87.75,196,196
                            S508.25,496,400,496z"/>
    <g id="window">
      <line fill="none" stroke="#CD5D55" stroke-width="10" stroke-miterlimit="10" x1="0" y1="296.771" x2="209" y2="296.771"/>
      <line fill="none" stroke="#CD5D55" stroke-width="10" stroke-miterlimit="10" x1="619" y1="297" x2="800" y2="297"/>
      <circle fill="none" stroke="#CD5D55" stroke-width="16" stroke-miterlimit="10" cx="409" cy="300" r="203"/>
      <circle fill="none" stroke="#F38A78" stroke-width="19" stroke-miterlimit="10" cx="409" cy="300" r="196"/>
      <circle opacity="0.15" fill="#2D80F9" cx="409" cy="300" r="193"/>
    </g>
    <g id="windowReflection">
      <g clip-path="url(#windowClip)" opacity="0.5">
        <polygon fill="url(#windowGradient)" points="311.48,471.591 238.739,437.671 407.52,75.72 
                                                     480.261,109.639"/>
        <polygon  fill="url(#windowGradient)" points="410.689,521.25 336.827,486.807 508.21,119.275 
                                                      582.072,153.718"/>
      </g>
    </g>
    <g>
      <circle opacity="0.15" fill="#232323" cx="174" cy="321.523" r="10"/>
      <circle opacity="0.15" fill="#232323" cx="174" cy="272" r="10"/>
      <circle opacity="0.15" fill="#232323" cx="83" cy="321.523" r="10"/>
      <circle opacity="0.15" fill="#232323" cx="83" cy="272" r="10"/>
      <circle opacity="0.15" fill="#232323" cx="1" cy="321.981" r="10"/>
      <circle opacity="0.15" fill="#232323" cx="1" cy="272" r="10"/>
      <circle opacity="0.15" fill="#232323" cx="801" cy="321.996" r="10"/>
      <circle opacity="0.15" fill="#232323" cx="801" cy="272" r="10"/>
      <circle opacity="0.15" fill="#232323" cx="729" cy="321.996" r="10"/>
      <circle opacity="0.15" fill="#232323" cx="729" cy="272" r="10"/>
      <circle opacity="0.15" fill="#232323" cx="647" cy="321.996" r="10"/>
      <circle opacity="0.15" fill="#232323" cx="647" cy="272" r="10"/>
    </g>
  </g>
</svg>

<a href="https://greensock.com/"><img class="gsap-3-logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-3-logo.svg" width="150"/></a>
            
          
!
            
              body,html {
  height:100%;
  width:100%;
}
body {
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content: center;
  margin:0;
  background:#062352;
}
svg {
  width:100%;
  visibility: hidden;
}
#jellyContainer {
  visibility:hidden;
}
.gsap-3-logo { 
  width: 20vw; 
  max-width: 150px; 
  position: fixed; 
  bottom: 15px; 
  right: 15px; 
}
            
          
!
            
              gsap.registerPlugin(MotionPathPlugin);
gsap.set('svg',{visibility:"visible"})

const jellyContainer = document.querySelector('#jellyContainer');
let totalJellyFish = 6
const createJellyFish = (number) => {
    // CREATE GROUPS
    let xmlns = "http://www.w3.org/2000/svg"
    jellyGroup = document.createElementNS(xmlns,'g');
    gsap.set(jellyGroup,{attr:{'class':`jellyGroup${number}`}})
    // APPEND GROUPS TO JELLY CONTAINER
    jellyContainer.appendChild(jellyGroup)
    // SET CONTENT OF THOSE GROUPS
    jellyGroup.innerHTML = `
    <g id="jelly${number}">
    <g id="bubbleGroup${number}">
        <circle fill="none" stroke="#FFFFFF" stroke-miterlimit="10" cx="385.975" cy="222.865" r="8.052"/>
        <circle fill="none" stroke="#FFFFFF" stroke-miterlimit="10" cx="375.23" cy="242.69" r="8.271"/>
        <circle fill="none" stroke="#FFFFFF" stroke-miterlimit="10" cx="407.1" cy="224.51" r="7.778"/>
        <circle fill="none" stroke="#FFFFFF" stroke-miterlimit="10" cx="395.016" cy="243.817" r="6.309"/>
        <circle fill="none" stroke="#FFFFFF" stroke-miterlimit="10" cx="421.612" cy="281.182" r="6.309"/>
    </g>
    <g class="tentacleGroupLeft">
        <g class="outer">
            <path id="lo1_${number}" fill="none" stroke="url(#tentacleGradient)" stroke-width="2" stroke-linecap="butt" stroke-miterlimit="10" d="M364,267
            c-1,12-4.304,23.467-6,38c-2.197,18.831-2,37-2,37s-0.023,20.475-0.035,41.649c-0.011,18.831,6.201,33.783,6.201,33.783"/>
            <path id="lo2_${number}" fill="none" stroke="url(#lo5_1_)" stroke-width="4" stroke-linejoin="bevel" stroke-miterlimit="25" d="
            M374.17,412c-4.827,3.095-11.671,1.389-18.172-2.407c-9.612-5.613-16.63-14.779-20.158-25.336
            c-3.773-11.289-4.577-20.13-4.356-27.333c-0.169-11.586,3.438-24.552,8.117-36.392c8.28-20.954,24.917-38.38,24.917-38.38"/>
            <path id="lo3_${number}" display="none" fill="none" stroke="none" stroke-width="2" stroke-linecap="butt" stroke-miterlimit="10" d="
            M364,267c-11.888,9.81-16.496,23.848-18.192,38.382c-2.197,18.831,8.188,36.391,8.188,36.391s10.005,20.271,9.992,41.445
            C363.976,402.048,335.656,417,335.656,417"/>
            <path id="lo4_${number}" display="none" fill="none" stroke="none" stroke-width="2" stroke-linecap="butt" stroke-miterlimit="10" d="
            M362.437,267.432c0,11.097-1.538,24.296-2.464,38.568c-1.559,18.896-2,36-2,36s-2.022,22.927-2.035,44.101
            c-0.011,18.831-4.05,32.746-4.05,32.746"/>
        </g>
        <g class="inner">
            <path id="li1_${number}" fill="none" stroke="url(#tentacleGradient)" stroke-width="2" stroke-linecap="butt" stroke-miterlimit="10" d="
            M385.165,267.432C385,279,383.769,291.388,383,306c-1,19-2,36-2,36s-2.023,20.475-2.035,41.649
            c-0.011,18.831,6.201,33.783,6.201,33.783"/>
            <path id="li2_${number}" fill="none" stroke="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" d="
            M383.692,282.584c0,0-20.017,15.101-28.297,36.055c-4.679,11.84-7.103,25.049-6.934,36.635
            c-0.17,5.562,1.817,12.173,4.513,18.341c5.772,13.207,14.014,25.238,24.579,35.041c4.717,4.377,9.582,8.013,13.455,8.929"/>
            <path id="li3_${number}" display="none" fill="none" stroke="none" stroke-width="2" stroke-linecap="butt" stroke-miterlimit="10" d="
            M385.464,267.432c-11.888,9.81-16.496,23.848-18.192,38.382c-2.197,18.831,8.188,36.391,8.188,36.391s10.005,20.271,9.992,41.445
            c-0.011,18.831-28.331,33.783-28.331,33.783"/>
            <path id="li4_${number}" display="none"fill="none" stroke="none" stroke-width="2" stroke-linecap="butt" stroke-miterlimit="10" d="
            M385.464,267.432c0,11.097-1.538,24.296-2.464,38.568c-1.559,18.896-2,36-2,36s-2.022,22.927-2.035,44.101
            c-0.011,18.831-4.05,32.746-4.05,32.746"/>
        </g>
    </g>
    <g class="tentacleGroupRight">
        <g class="inner">
            <path id="ri1_${number}" fill="none" stroke="url(#tentacleGradient)" stroke-width="2" stroke-linecap="butt" stroke-miterlimit="10" d="
            M417.411,267.432c0.165,11.568,1.396,23.956,2.165,38.568c1,19,2,36,2,36s2.023,20.475,2.035,41.649
            c0.011,18.831-6.201,33.783-6.201,33.783"/>
            <path id="ri2_${number}" fill="none" stroke="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" d="
            M408.45,417.585c3.873-0.916,8.738-4.551,13.455-8.929c10.565-9.804,18.807-21.834,24.579-35.041
            c2.696-6.168,4.683-12.779,4.513-18.341c0.169-11.586-2.255-24.795-6.934-36.635c-8.28-20.954-28.297-36.055-28.297-36.055"/>
            <path id="ri3_${number}" display="none" fill="none" stroke="none" stroke-width="2" stroke-linecap="butt" stroke-miterlimit="10" d="
            M416.847,267c11.888,9.81,16.496,23.848,18.192,38.382c2.197,18.831-8.188,36.391-8.188,36.391s-10.005,20.271-9.992,41.445
            C416.871,402.048,445.191,417,445.191,417"/>
            <path  id="ri4_${number}" display="none" display="none" fill="none" stroke="none" stroke-width="2" stroke-linecap="butt" stroke-miterlimit="10" d="
            M417.411,267.432c0,11.097,1.538,24.296,2.464,38.568c1.559,18.896,2,36,2,36s2.022,22.927,2.035,44.101
            c0.011,18.831,4.05,32.746,4.05,32.746"/>
        </g>
        <g class="outer">
            <path id="ro1_${number}" fill="none" stroke="url(#tentacleGradient)" stroke-width="2" stroke-linecap="butt" stroke-miterlimit="10" d="
            M439.576,267c1,12,4.304,23.467,6,38c2.197,18.831,2,37,2,37s0.023,20.475,0.035,41.649c0.011,18.831-6.201,33.783-6.201,33.783"/>
            <path id="ro2_${number}" fill="none" stroke="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="25" d="
            M438.102,282.152c0,0,16.637,17.426,24.917,38.38c4.679,11.84,8.286,24.806,8.117,36.392c0.221,7.203-0.583,16.044-4.356,27.333
            c-3.528,10.557-10.546,19.723-20.158,25.336c-6.501,3.796-13.345,5.502-18.172,2.407"/>
            <path id="ro3_${number}" display="none" fill="none" stroke="none" stroke-width="2" stroke-linecap="butt" stroke-miterlimit="10" d="
            M439.576,267c11.888,9.81,16.496,23.848,18.192,38.382c2.197,18.831-8.188,36.391-8.188,36.391s-10.005,20.271-9.992,41.445
            C439.6,402.048,467.92,417,467.92,417"/>
            <path id="ro4_${number}" display="none" fill="none" stroke="none" stroke-width="2" stroke-linecap="butt" stroke-miterlimit="10" d="
            M440.438,267.432c0,11.097,1.538,24.296,2.464,38.568c1.559,18.896,2,36,2,36s2.022,22.927,2.035,44.101
            c0.011,18.831,4.05,32.746,4.05,32.746"/>
            <path id="ro5_${number}" display="none" stroke-width="2" stroke-miterlimit="25" d="
            M438.102,282.152c0,0,16.637,17.426,24.917,38.38c4.679,11.84,8.286,24.806,8.117,36.392c0.285,9.279-6.305,24.997-13.578,41.444
            c-4.795,10.844-19.455,18.055-29.108,11.865"/>
            <path id="ro6_${number}" display="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="25" d="
            M438.102,282.152c0,0,16.637,17.426,24.917,38.38c4.679,11.84,8.286,24.806,8.117,36.392c0.221,7.203-0.583,16.044-4.356,27.333
            c-3.528,10.557-10.546,19.723-20.158,25.336c-6.501,3.796-13.345,5.502-18.172,2.407"/>
        </g>
    </g>
    <g opacity="1">
        <path id="one_${number}" fill="url(#bodyGradient)" stroke="none"d="M400,205.044c-65.493,0-73.116,38.536-72.636,57.589c0.196,7.786,9.752,20.328,9.823,20.389
        c7.17,6.1,62.812,6.527,62.812,6.527s55.642-0.427,62.812-6.527c0.072-0.061,9.627-12.603,9.823-20.389
        C473.116,243.581,465.493,205.044,400,205.044z"/>
        <path id="two_${number}" display="none" fill="#none" d="M400.242,206.292c-49.163,0-93.634,36.39-93.019,54.381
        c0.251,7.352-11.556,19.218-11.464,19.276c9.182,5.76,104.483,8.784,104.483,8.784s94.816-3.367,103.998-9.127
        c0.092-0.058-11.231-11.58-10.979-18.933C493.877,242.682,454.011,206.292,400.242,206.292z"/>
        <path id="three_${number}" display="none" fill="#none" d="M398.87,193.109c-25.896,0-48.917,41.948-48.592,62.689c0.132,8.476-8.918,30.097-8.87,30.163
        c4.837,6.641,58.592,3.589,58.592,3.589s53.756,2.83,58.592-3.81c0.048-0.066-10.455-21.465-10.323-29.941
        C448.594,235.057,427.191,193.109,398.87,193.109z"/>
    </g>
    <g id="jellyClip">
        <defs>
            <clipPath id="oneClip_${number}">
                <path d="M400,204.949c-65.492,0-73.115,38.536-72.635,57.588c0.196,7.786,9.751,20.328,9.823,20.389
                c7.17,6.1,62.811,6.527,62.811,6.527s55.641-0.427,62.811-6.527c0.072-0.061,9.627-12.603,9.823-20.389
                C473.115,243.485,465.492,204.949,400,204.949z"/>
            </clipPath>
            <clipPath id="twoClip_${number}">
                <path display="none" d="M400.242,206.292
                c-49.163,0-93.634,36.39-93.019,54.381c0.251,7.352-11.556,19.218-11.464,19.276c9.182,5.76,104.483,8.784,104.483,8.784
                s94.816-3.367,103.998-9.127c0.092-0.058-11.231-11.58-10.979-18.933C493.877,242.682,454.011,206.292,400.242,206.292z"/>
            </clipPath>
            <clipPath id="threeClip_${number}">
                <path display="none" d="M398.87,193.109
                c-25.896,0-48.917,41.948-48.592,62.689c0.132,8.476-8.918,30.097-8.87,30.163c4.837,6.641,58.592,3.589,58.592,3.589
                s53.756,2.83,58.592-3.81c0.048-0.066-10.455-21.465-10.323-29.941C448.594,235.057,427.191,193.109,398.87,193.109z"/>
            </clipPath>
        </defs>
        <g clip-path="url(#oneClip_${number})">
            <path class="lineClip${number}" fill="none" opacity="0.5" stroke="#1678BA" stroke-width="4" stroke-miterlimit="10" d="M142.287,270.513
            l0.48-0.48l0.48-0.48c6.193-6.193,16.233-6.193,22.426,0l0.48,0.48l0.48,0.48c6.193,6.193,16.233,6.193,22.426,0l0.48-0.48
            l0.48-0.48c6.193-6.193,16.233-6.193,22.426,0c0,0,0.48,0.48,0.48,0.48l0.48,0.48c6.193,6.193,16.233,6.193,22.426,0l0.48-0.48
            l0.48-0.48c6.193-6.193,16.233-6.193,22.426,0l0.48,0.48l0.48,0.48c6.193,6.193,16.233,6.193,22.426,0l0.48-0.48l0.48-0.48
            c6.193-6.193,16.233-6.193,22.426,0l0.48,0.48l0.48,0.48c6.193,6.193,16.233,6.193,22.426,0l0.48-0.48l0.48-0.48
            c6.193-6.193,16.233-6.193,22.426,0l0.48,0.48l0.48,0.48c6.193,6.193,16.233,6.193,22.426,0l0.48-0.48l0.48-0.48
            c6.193-6.193,16.233-6.193,22.426,0l0.48,0.48l0.48,0.48c6.193,6.193,16.233,6.193,22.426,0l0.48-0.48l0.48-0.48
            c6.193-6.193,16.233-6.193,22.426,0l0.48,0.48l0.48,0.48c6.193,6.193,16.233,6.193,22.426,0l0.48-0.48l0.48-0.48
            c6.193-6.193,16.233-6.193,22.426,0l0.48,0.48l0.48,0.48c6.193,6.193,16.233,6.193,22.426,0l0.48-0.48l0.48-0.48
            c6.193-6.193,16.233-6.193,22.426,0l0.48,0.48l0.48,0.48c6.193,6.193,16.233,6.193,22.426,0l0.48-0.48l0.48-0.48
            c6.193-6.193,16.233-6.193,22.426,0l0.48,0.48c0,0,0.48,0.48,0.48,0.48c6.193,6.193,16.233,6.193,22.426,0l0.48-0.48l0.48-0.48
            c6.193-6.193,16.233-6.193,22.426,0l0.48,0.48l0.48,0.48c6.193,6.193,16.233,6.193,22.426,0l0.48-0.48l0.48-0.48"/>
            <g id="glowCircles${number}" opacity="0">
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="359.989" cy="255.062" rx="2.157" ry="2.117"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="400.339" cy="253.833" rx="2.157" ry="2.117"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="410.583" cy="227.614" rx="2.157" ry="2.117"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="380.358" cy="237.18" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="354.027" cy="207.595" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="467.226" cy="216.968" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="449.762" cy="236.614" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="428.648" cy="245.984" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="442.055" cy="210.241" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="354.853" cy="229.731" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="388.793" cy="213.837" rx="2.157" ry="2.117"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="377.662" cy="197.614" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="408.426" cy="197.085" rx="2.157" ry="2.117"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="320.196" cy="233.968" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="321.772" cy="253.833" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="194.989" cy="255.062" rx="2.157" ry="2.117"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="235.339" cy="253.833" rx="2.157" ry="2.117"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="245.583" cy="227.614" rx="2.157" ry="2.117"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="215.358" cy="237.18" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="189.027" cy="207.595" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="302.226" cy="216.968" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="284.762" cy="236.614" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="263.648" cy="245.984" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="277.055" cy="210.241" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="189.852" cy="229.731" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="223.793" cy="213.837" rx="2.157" ry="2.117"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="212.662" cy="197.614" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="243.426" cy="197.085" rx="2.157" ry="2.117"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="155.196" cy="233.968" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="156.772" cy="253.833" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="524.989" cy="255.062" rx="2.157" ry="2.117"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="565.339" cy="253.833" rx="2.157" ry="2.117"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="575.583" cy="227.614" rx="2.157" ry="2.117"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="545.358" cy="237.18" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="519.027" cy="207.595" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="632.226" cy="216.968" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="614.762" cy="236.614" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="593.648" cy="245.984" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="607.055" cy="210.241" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="519.852" cy="229.731" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="553.793" cy="213.837" rx="2.157" ry="2.117"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="542.662" cy="197.614" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="573.426" cy="197.085" rx="2.157" ry="2.117"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="644.804" cy="253.833" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="485.196" cy="233.968" rx="2.696" ry="2.646"/>
                <ellipse opacity="1" fill="none" stroke="#3A83CC" stroke-miterlimit="10"  cx="486.772" cy="253.833" rx="2.696" ry="2.646"/>
	        </g>
        </g>
    </g>
    </g>`
    // Position the jellyfish
    setTimeout(() => {
        gsap.set(`.jellyGroup${number}`,{y:350})
        number <= 4 ? gsap.set(`#jelly${number}`,{scale: gsap.utils.random(0.3,0.35)}) : gsap.set(`#jelly${number}`,{scale: gsap.utils.random(0.5,0.55)})
        setJellyPosition()
    },1000)
}

const setJellyPosition = () => {
    gsap.set('#jellyContainer',{visibility:'visible',delay:1})
    gsap.set('.jellyGroup1',{x:150})
    gsap.set('.jellyGroup2',{x:250})
    gsap.set('.jellyGroup3',{x:345})
    gsap.set('.jellyGroup4',{x:0})
    gsap.set('.jellyGroup5',{x:100})
    gsap.set('.jellyGroup6',{x:230})
}

// ANIMATE JELLY LINE PATTERN 
const animatePattern = (target) => {
 const tl = gsap.timeline({repeat:-1,defaults:{ease:"linear",duration:1.28}})
    tl.to(target,{x:95},'rotate');
 return tl;
}

const path = document.querySelector('.bubblePath')

// STATIC BUBBLES 
const animateBubbleTl = (target,path) => {
const bubbleTl = gsap.timeline()
bubbleTl.to(target,{
    duration:0.72,
    stagger:0.024,
    motionPath:{
        path:path,
        autoRotate:true,
        align:"relative"
    }},'bubble')
    .fromTo(target,{opacity:0},{opacity:1,duration:0.16},'bubble')
    .fromTo(target,{opacity:1},{opacity:0,duration:0.32},'bubble+=0.32')  
return bubbleTl;
}
    
// JELLY 
const animateJelly = (target,startShape,morphShape,morphShape2,clipStart,clipMorph,clipMorph2,bubbleTarget,path) => {
    const tl = gsap.timeline({repeat:-1,defaults:{ease: "linear"}});
    tl
    .to(target,{y:15,duration:0.64,ease:"sine.inOut"},'open')
    .to(target,{y:-35,duration:0.32,ease:"sine.inOut"},'swim+=0.32')
    .to(startShape,{morphSVG:morphShape,duration:0.52},'open')
    .to(startShape,{transformOrigin:"center bottom",scaleX:1.02,duration:0.32,ease:"power1.out"},'open+=0.2')
    .to(startShape,{morphSVG:morphShape2,duration:0.48,ease:"power2.in",scaleY:1.3 ,scaleX:1,transformOrigin:"center bottom"},'swim')
    .to(startShape,{morphSVG:startShape,duration:0.48,scaleX:1.10,scaleY:1},'swim+=0.48')
    .to(startShape,{duration:0.48,ease:"power1.out",scaleX:1},'close')
    .to(clipStart,{morphSVG:clipMorph,duration:0.52},'open')
    .to(clipStart,{transformOrigin:"center bottom",scaleX:1.02,duration:0.32,ease:"power1.out"},'open+=0.2')
    .to(clipStart,{morphSVG:clipMorph2,duration:0.48,ease:"power2.in",scaleY:1.3 ,scaleX:1,transformOrigin:"center bottom"},'swim')
    .to(clipStart,{morphSVG:clipStart,duration:0.48,scaleX:1.10,scaleY:1},'swim+=0.48')
    .to(clipStart,{duration:0.48,ease:"power1.out",scaleX:1},'close')
    .to(target,{y:0,duration:0.96,ease:"sine.inOut"},'swim+=0.8')  
    .add(animateBubbleTl(bubbleTarget,path),'swim+=0.24')
    return tl;
}

// TENTACLES
const animateTentacles = (startShape,shape1,shape2,shape3,tVal) => {
    const tl = gsap.timeline({repeat:-1,repeatDelay:0,defaults:{ease:"linear"}})
    // USING GSAP 3 KEYFRAMES
    tl.to(startShape, {keyframes: [
        {morphSVG:shape1,duration:0.56,x:tVal,y:-12},
        {morphSVG:shape2,duration:0.48,ease:"power2.in",x:0,y:0},
        {morphSVG:shape3,duration:0.32},
        {morphSVG:startShape,duration:0.32},
        {morphSVG:shape3,duration:0.32},
        {morphSVG:startShape,duration:0.40}
    ]});
    return tl;
}

let xmlns = "http://www.w3.org/2000/svg";
// CREATE RANDOM BUBBLES
const createBubbles = () => {
    let totalBubbles = 15;
    for ( let i = 0; i < totalBubbles; i++) {
        bubble = document.createElementNS(xmlns,'ellipse')
        bubbleGroup = document.querySelector('#randomBubbleGroup');
        gsap.set(bubble,{attr:{"rx":'5',"ry":'5',"fill":'none','stroke':"#FFF",'stroke-width':"1","class":"randomBubble"}});
        bubbleGroup.appendChild(bubble);
    }
}
createBubbles();

// ANIMATE THE RANDOM BUBBLES
const animateBubbles = (bubble) => {
    gsap.set(bubble,{y:100,x:gsap.utils.random(210,600),scale: gsap.utils.random(0.2,0.65)})
    gsap.fromTo(bubble,{opacity:1},{
        duration:gsap.utils.random(2,4),
        y:'+=500',
        opacity:0,
        delay: gsap.utils.random(0,3),
        onComplete:animateBubbles,
        onCompleteParams:[bubble]
    })
}

const randomBubbles = document.querySelectorAll('.randomBubble');

for (let i = 0; i < randomBubbles.length; i++) {
    animateBubbles(randomBubbles[i])
}

//CREATE RANDOM DUST PARTICLES 
const createDust = () => {
    let dustAmount = 15;
    for ( let i = 0; i < dustAmount; i++) {
        dust = document.createElementNS(xmlns,'ellipse')
        dustGroup = document.querySelector('#dustGroup');
        gsap.set(dust,{attr:{"rx":'3',"ry":"3","fill":"#FFF","class":"dust"}});
        dustGroup.appendChild(dust);
    }
}

createDust();

// ANIMATE THE DUST PARTICLES
const animateDust = (dust) => {
    gsap.set(dust,{x:gsap.utils.random(210,600),y:gsap.utils.random(125,450),scale: gsap.utils.random(0.25,0.5),opacity: 0.25})
    const tl = gsap.timeline({repeat:-1,defaults:{ease:"linear"}})
    tl.to(dust,{
        duration:gsap.utils.random(1,2),
        y:"+=5",
        x:"+=2",
        opacity:0.75
      })
    .to(dust,{
        duration:gsap.utils.random(1,2),
        y:"-=5",
        x:"-=2",
        opacity:0.25
    })  
    return tl;   
} 

const dustParticles = document.querySelectorAll('.dust')

for (let i = 0; i < dustParticles.length; i++) {
    animateDust(dustParticles[i])
}

const rayTl = gsap.timeline({paused:false,repeat:-1,defaults:{duration:1.32,ease:"linear"}})
rayTl.fromTo('.ray',{rotation:0},{rotation:1,transformOrigin:"right top"},'one')
.to('.ray',{rotation:0},'two')

const animateJellyCircles = (circleGroup) => {
    const tl = gsap.timeline({repeat:-1,defaults:{ease:"sine",duration:0.64}});
    tl.to(circleGroup,{opacity:1},'in')
        .to(circleGroup,{opacity:0},'out')
    return tl;
}
const animateCirclePattern = (circleGroup) => {
    const tl = gsap.timeline({repeat:-1,defaults:{ease:"linear",duration:2.24}})
    tl.to(circleGroup,{x:165},'rotate');
    return tl;
}

const animateJellyFish = (number) => {
    // align static bubbles
    gsap.set(`#bubbleGroup${number} circle`,{xPercent:-50,yPercent:-50,transformOrigin:"50% 50%",scale:0.5})
    const tl = gsap.timeline();
    tl 
 .add(animateJelly(`#jelly${number}`,`#one_${number}`,`#two_${number}`,`#three_${number}`,`#oneClip_${number} path`,`#twoClip_${number} path`,`#threeClip_${number} path`
    ,`#bubbleGroup${number} circle`,path),0)
    .add(animateTentacles(`#lo1_${number}`,`#lo2_${number}`,`#lo3_${number}`,`#lo4_${number}`,-10),0)
    .add(animateTentacles(`#ro1_${number}`,`#ro2_${number}`,`#ro3_${number}`,`#ro4_${number}`,10),0)
    .add(animateTentacles(`#li1_${number}`,`#li2_${number}`,`#li3_${number}`,`#li4_${number}`,3),0)
    .add(animateTentacles(`#ri1_${number}`,`#ri2_${number}`,`#ri3_${number}`,`#ri4_${number}`,-3),0)
    .add(animatePattern(`.lineClip${number}`),0)
    .add(animateJellyCircles(`#glowCircles${number}`),0.64)
    .add(animateCirclePattern(`#glowCircles${number}`),0)
    return tl;
}

const jellyMasterTl = gsap.timeline();

for (let i = 1; i <= totalJellyFish; i++) {    
  // Create jellyfish
  createJellyFish(i);
  // animate the jellyfishes
  jellyMasterTl
    .add(animateJellyFish(i),i*0.64)
  i <= 4 ? jellyMasterTl.add(gsap.to(`.jellyGroup${i}`,{y:-250,duration:20,repeat:-1,ease:'linear'}),i*2.56)
  : jellyMasterTl.add(gsap.to(`.jellyGroup${i}`,{y:-350,duration:15,repeat:-1,repeatDelay:5,ease:'linear'}),i*2.56)
  // set timescale
  jellyMasterTl.timeScale(0.78)
}
            
          
!
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.

Console