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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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="spin">
							
<svg class="first" width="305px" height="308px" viewBox="0 0 305 308" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="01-hp-big-final" transform="translate(-102.000000, -1783.000000)" stroke="#353F44">
            <g id="intro" transform="translate(40.000000, 1722.000000)">
                <g id="bio">
                    <g id="chapter">
                        <g id="graphics">
                            <path d="M293.464009,346.530584 C287.379025,348.169668 280.026461,347.074783 272.24186,345.914538 C264.384948,344.74554 256.259574,343.534168 249.420495,345.376378 C242.583048,347.218149 236.147223,352.351802 229.922814,357.313818 C223.758305,362.231469 217.93544,366.875356 211.850455,368.514439 C210.068051,368.994557 208.388823,369.185746 206.714907,369.094959 C198.373759,368.649248 191.115927,361.445075 184.097989,354.478003 C178.600478,349.021084 172.915219,343.378305 166.667553,340.948312 C160.319214,338.481917 152.277961,338.819997 144.50343,339.147986 C134.744826,339.560485 124.653962,339.986613 118.263301,334.775571 C111.957922,329.635073 110.267488,319.657316 108.632803,310.006842 C107.313691,302.222828 105.949291,294.170468 102.186693,288.330918 C98.6163213,282.792475 92.048465,278.41963 85.6947347,274.193782 C77.4070788,268.678557 68.8369522,262.976518 66.6156868,254.643282 C64.3944213,246.310046 68.9796978,237.062635 73.4137083,228.120634 C76.8137962,221.265682 80.3270833,214.179092 80.6647288,207.58973 C81.0181976,200.639689 78.1950158,192.982039 75.465211,185.576253 C72.0807664,176.397103 68.5822508,166.908145 71.4859608,159.287038 C74.4300711,151.561533 83.3804626,146.856844 92.036772,142.309005 C98.932801,138.685256 106.063643,134.938265 110.334647,129.611389 C114.538643,124.367846 116.653852,116.623891 118.700108,109.13318 C121.314008,99.5716244 124.014463,89.6850359 131.016357,85.1064419 C132.421281,84.1880871 133.971814,83.5075267 135.754219,83.0274089 C141.839204,81.3883254 149.191767,82.4832099 156.976369,83.643455 C164.833719,84.8140993 172.960287,86.0233855 179.797734,84.181615 C186.63518,82.3398445 193.069812,77.2082773 199.293782,72.2446145 C205.45873,67.3286103 211.281595,62.6847234 217.36658,61.0456399 C219.150616,60.5650825 220.829844,60.3738931 222.50376,60.4646797 C230.84654,60.909952 238.102301,68.1129176 245.121872,75.0795506 C250.619822,80.5381151 256.30508,86.1808948 262.552307,88.6092416 C268.900647,91.0756362 276.939829,90.7363497 284.714798,90.4100067 C294.473403,89.9975076 304.564266,89.5713802 310.955366,94.7840678 C317.261939,99.9224802 318.950741,109.900677 320.586619,119.549065 C321.904538,127.335165 323.270569,135.387085 327.033167,141.226636 C330.601907,146.765518 337.170957,151.136277 343.523494,155.364211 C351.811149,160.879436 360.381276,166.581475 362.602542,174.914711 C364.823807,183.247947 360.238531,192.495358 355.802888,201.437799 C352.405626,208.290225 348.891145,215.378901 348.555132,221.967824 C348.201224,228.916218 351.023651,236.5776 353.755088,243.982947 C357.137462,253.16089 360.636416,262.651495 357.732706,270.272601 C354.788596,277.998106 345.837327,282.699503 337.181456,287.248988 C330.285427,290.872737 323.154147,294.618082 318.883581,299.946604 C314.681657,305.191354 312.564377,312.934102 310.518121,320.424813 C307.90422,329.986369 305.203765,339.872957 298.200239,344.451991 C296.795754,345.371992 295.246414,346.050466 293.464009,346.530584 Z" id="Stroke-1-Copy-6" transform="translate(214.609109, 214.779821) rotate(-45.000000) translate(-214.609109, -214.779821) "></path>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>
  
<svg class="second" width="305px" height="308px" viewBox="0 0 305 308" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="01-hp-big-final" transform="translate(-102.000000, -1783.000000)" stroke="#353F44">
            <g id="intro" transform="translate(40.000000, 1722.000000)">
                <g id="bio">
                    <g id="chapter">
                        <g id="graphics">
                            <path d="M293.464009,346.530584 C287.379025,348.169668 280.026461,347.074783 272.24186,345.914538 C264.384948,344.74554 256.259574,343.534168 249.420495,345.376378 C242.583048,347.218149 236.147223,352.351802 229.922814,357.313818 C223.758305,362.231469 217.93544,366.875356 211.850455,368.514439 C210.068051,368.994557 208.388823,369.185746 206.714907,369.094959 C198.373759,368.649248 191.115927,361.445075 184.097989,354.478003 C178.600478,349.021084 172.915219,343.378305 166.667553,340.948312 C160.319214,338.481917 152.277961,338.819997 144.50343,339.147986 C134.744826,339.560485 124.653962,339.986613 118.263301,334.775571 C111.957922,329.635073 110.267488,319.657316 108.632803,310.006842 C107.313691,302.222828 105.949291,294.170468 102.186693,288.330918 C98.6163213,282.792475 92.048465,278.41963 85.6947347,274.193782 C77.4070788,268.678557 68.8369522,262.976518 66.6156868,254.643282 C64.3944213,246.310046 68.9796978,237.062635 73.4137083,228.120634 C76.8137962,221.265682 80.3270833,214.179092 80.6647288,207.58973 C81.0181976,200.639689 78.1950158,192.982039 75.465211,185.576253 C72.0807664,176.397103 68.5822508,166.908145 71.4859608,159.287038 C74.4300711,151.561533 83.3804626,146.856844 92.036772,142.309005 C98.932801,138.685256 106.063643,134.938265 110.334647,129.611389 C114.538643,124.367846 116.653852,116.623891 118.700108,109.13318 C121.314008,99.5716244 124.014463,89.6850359 131.016357,85.1064419 C132.421281,84.1880871 133.971814,83.5075267 135.754219,83.0274089 C141.839204,81.3883254 149.191767,82.4832099 156.976369,83.643455 C164.833719,84.8140993 172.960287,86.0233855 179.797734,84.181615 C186.63518,82.3398445 193.069812,77.2082773 199.293782,72.2446145 C205.45873,67.3286103 211.281595,62.6847234 217.36658,61.0456399 C219.150616,60.5650825 220.829844,60.3738931 222.50376,60.4646797 C230.84654,60.909952 238.102301,68.1129176 245.121872,75.0795506 C250.619822,80.5381151 256.30508,86.1808948 262.552307,88.6092416 C268.900647,91.0756362 276.939829,90.7363497 284.714798,90.4100067 C294.473403,89.9975076 304.564266,89.5713802 310.955366,94.7840678 C317.261939,99.9224802 318.950741,109.900677 320.586619,119.549065 C321.904538,127.335165 323.270569,135.387085 327.033167,141.226636 C330.601907,146.765518 337.170957,151.136277 343.523494,155.364211 C351.811149,160.879436 360.381276,166.581475 362.602542,174.914711 C364.823807,183.247947 360.238531,192.495358 355.802888,201.437799 C352.405626,208.290225 348.891145,215.378901 348.555132,221.967824 C348.201224,228.916218 351.023651,236.5776 353.755088,243.982947 C357.137462,253.16089 360.636416,262.651495 357.732706,270.272601 C354.788596,277.998106 345.837327,282.699503 337.181456,287.248988 C330.285427,290.872737 323.154147,294.618082 318.883581,299.946604 C314.681657,305.191354 312.564377,312.934102 310.518121,320.424813 C307.90422,329.986369 305.203765,339.872957 298.200239,344.451991 C296.795754,345.371992 295.246414,346.050466 293.464009,346.530584 Z" id="Stroke-1-Copy-6" transform="translate(214.609109, 214.779821) rotate(-45.000000) translate(-214.609109, -214.779821) "></path>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>
							<div class="hy-p-30">E-RYT/RPYT<br />CERTIFIED</div>
</div>
              
            
!

CSS

              
                body {
  position: relative;
  height: 500vh;
}
div.spin {
  position: absolute;
  top: 50%;
  display: block;
  left: 20%;
}
svg {
  display: inline-block;
  opacity: .25;
  position: absolute;
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
		
              
            
!

JS

              
                // HERO WAVES SPIN CIRCLE
  const spinCircles = document.querySelectorAll(".spin")
  
  function MySpin() {
    spinCircles.forEach(spin => {
        const circleA = document.querySelector(".spin svg.first")
        const circleB = document.querySelector(".spin svg.second")

      if(
        spin.getBoundingClientRect().top < window.innerHeight &&
        spin.getBoundingClientRect().top + spin.clientHeight > 0
      ){
        TweenMax.to(circleA, 15, {rotation:360, repeat:-1, ease:Linear.easeNone, paused: false})
        TweenMax.to(circleB, 15, {rotation:-360, repeat:-1, ease:Linear.easeNone, paused: false})
        console.log("in")
      } else if(
        spin.getBoundingClientRect().top > window.innerHeight ||
        spin.getBoundingClientRect().top + spin.clientHeight < 0
      ){
        console.log("out")
      }
    
    })
    requestAnimationFrame(MySpin)
  }
MySpin()
  

              
            
!
999px

Console