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

              
                <head>
	
<meta content="width=device-width, initial-scale=1" name="viewport"/>

</head>

<body class="flex">
	        
	<div id="wrapper" class="wrapper flex">
  
        <div class="stage flex">
    
            <svg id="anchor" viewBox="0 0 850 850" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                
      <circle id="sphere" cx="250" cy="250" r="130"/>

            </svg>
            
            <div class="cube-container">
                <div class="cubes ten1 saffron"></div>
                <div class="cubes ten1 mint"></div>
                <div class="cubes ten1 teal"></div>
                <div class="cubes ten1 brown"></div>
                <div class="cubes ten1 mint"></div>
                <div class="cubes ten1 saffron"></div>
                <div class="cubes ten1 mint"></div>
                <div class="cubes ten1 teal"></div>
                <div class="cubes ten1 brown"></div>
                <div class="cubes ten1 mint"></div><!--10-->
                <div class="cubes ten2 saffron"></div>
                <div class="cubes ten2 mint"></div>
                <div class="cubes ten2 teal"></div>
                <div class="cubes ten2 brown"></div>
                <div class="cubes ten2 mint"></div>
                <div class="cubes ten2 saffron"></div>
                <div class="cubes ten2 mint"></div>
                <div class="cubes ten2 teal"></div>
                <div class="cubes ten2 brown"></div>
                <div class="cubes ten2 mint"></div><!--20-->
                <div class="cubes ten3 saffron"></div>
                <div class="cubes ten3 mint"></div>
                <div class="cubes ten3 teal"></div>
                <div class="cubes ten3 brown"></div>
                <div class="cubes ten3 mint"></div>
                <div class="cubes ten3 saffron"></div>
                <div class="cubes ten3 mint"></div>
                <div class="cubes ten3 teal"></div>
                <div class="cubes ten3 brown"></div>
                <div class="cubes ten3 mint"></div><!--30-->
                <div class="cubes ten4 saffron"></div>
                <div class="cubes ten4 mint"></div>
                <div class="cubes ten4 teal"></div>
                <div class="cubes ten4 brown"></div>
                <div class="cubes ten4 mint"></div>
                <div class="cubes ten4 saffron"></div>
                <div class="cubes ten4 mint"></div>
                <div class="cubes ten4 teal"></div>
                <div class="cubes ten4 brown"></div>
                <div class="cubes ten4 mint"></div><!--40-->
                <div class="cubes ten5 saffron"></div>
                <div class="cubes ten5 mint"></div>
                <div class="cubes ten5 teal"></div>
                <div class="cubes ten5 brown"></div>
                <div class="cubes ten5 mint"></div>
                <div class="cubes ten5 saffron"></div>
                <div class="cubes ten5 mint"></div>
                <div class="cubes ten5 teal"></div>
                <div class="cubes ten5 brown"></div>
                <div class="cubes ten5 mint"></div><!--50-->
                <div class="cubes ten6 saffron"></div>
                <div class="cubes ten6 mint"></div>
                <div class="cubes ten6 teal"></div>
                <div class="cubes ten6 brown"></div>
                <div class="cubes ten6 mint"></div>
                <div class="cubes ten6 saffron"></div>
                <div class="cubes ten6 mint"></div>
                <div class="cubes ten6 teal"></div>
                <div class="cubes ten6 brown"></div>
                <div class="cubes ten6 mint"></div><!--60-->
                <div class="cubes ten7 saffron"></div>
                <div class="cubes ten7 mint"></div>
                <div class="cubes ten7 teal"></div>
                <div class="cubes ten7 brown"></div>
                <div class="cubes ten7 mint"></div>
                <div class="cubes ten7 saffron"></div>
                <div class="cubes ten7 mint"></div>
                <div class="cubes ten7 teal"></div>
                <div class="cubes ten7 brown"></div>
                <div class="cubes ten7 mint"></div><!--70-->
                <div class="cubes ten8 saffron"></div>
                <div class="cubes ten8 mint"></div>
                <div class="cubes ten8 teal"></div>
                <div class="cubes ten8 brown"></div>
                <div class="cubes ten8 mint"></div>
                <div class="cubes ten8 saffron"></div>
                <div class="cubes ten8 mint"></div>
                <div class="cubes ten8 teal"></div>
                <div class="cubes ten8 brown"></div>
                <div class="cubes ten8 mint"></div><!--80-->
                <div class="cubes ten9 saffron"></div>
                <div class="cubes ten9 mint"></div>
                <div class="cubes ten9 teal"></div>
                <div class="cubes ten9 brown"></div>
                <div class="cubes ten9 mint"></div>
                <div class="cubes ten9 saffron"></div>
                <div class="cubes ten9 mint"></div>
                <div class="cubes ten9 teal"></div>
                <div class="cubes ten9 brown"></div>
                <div class="cubes ten9 mint"></div><!--90-->          
            </div>
        </div>
    </div>                        
</body>

              
            
!

CSS

              
                
* {
	
  box-sizing: border-box;
   -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  position: relative;
  
}

.flex { 
	
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
    justify-content: center;
    align-items: center;
	
}

body { 
	
	padding: 0;
	margin: 0;
	
}

.wrapper {
    
    display: block;
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 100vw;
    background: white;
    max-height: 750px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
}

.stage {
   
    position: absolute;
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
  
  
  visibility: hidden;
  opacity: 0;
}

/* RESPONSIVE ANCHOR */

#anchor {
	
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  
}

#sphere {
	
  fill: transparent;
  stroke: transparent;
  
}

/* SPHERE */

.cube-container {
	
  position: absolute;
  top: 50%;
  left: 50%; 
  
}

.cubes {
  
  position:absolute;
  border-radius: 50% 0 50% 0;
          transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);

}

/* CUBE COLOURS */


.mint { 
	
	background-color: #5ED8BE;
}

.teal { 
	
	background-color: #02C39A; 
}

.darkteal { 
	
	background-color: #00A896;
}

.saffron { 
	
	background-color:#028090; 
}

.brown { 
	
	background-color: #05668D;

}

.purple { 
	
	background-color: #7566A0; /* T_SF Purple */
}


/* -------- MOBILE ---------*/

@media screen and (max-width: 420px) {
	
	/* Container */
	
	.wrapper { 
		
		height: 100vh;
		max-height: 100vh;
		
	}
	
	.cube-container { 
		
		transform: scale(0.7) !important;
	}
}

              
            
!

JS

              
                console.clear();
var log = console.log;

//Vars
 
var greyHand = document.querySelector("#grey-hand");
var greenHand = document.querySelector("#green-hand");
var cubes = document.querySelectorAll(".cubes");
var container = document.querySelector(".cube-container");
var stage = document.querySelector(".stage");
var svg = document.querySelector("#anchor");
var sphere = document.querySelector("#sphere");

var duration = 30;
var cubeSize = 32;
var translateZ = 150;
var perspective = 800;
var transformOrigin = "50% 50% " + (-translateZ) + "%";
var ease1 = SlowMo.ease.config(0.6, 0.1, true);
var ease2 = SlowMo.ease.config(0.1, 0.1, true);

var wrapper = document.getElementById('wrapper');

// Set Sphere

sphere.setAttribute("r", translateZ);

// Set Container

TweenMax.set(stage, {
  perspective: perspective, 
  transformStyle:"preserve-3d"
});

// Sphere Scaling

var data = [[0.20],[0.20],[0.20],[0.20],[0.20],[0.20],[0.20],[0.20],[0.20],[0.20],[0.40],[0.40],[0.40],[0.40],[0.40],[0.40],[0.40],[0.40],[0.40],[0.40],[0.60],[0.60],[0.60],[0.60],[0.60],[0.60],[0.60],[0.60],[0.60],[0.60],[0.80],[0.80],[0.80],[0.80],[0.80],[0.80],[0.80],[0.80],[0.80],[0.80],[1.00],[1.00],
[1.00],[1.00],[1.00],[1.00],[1.00],[1.00],[1.00],[1.00],[0.80],[0.80],[0.80],[0.80],[0.80],[0.80],[0.80],[0.80],[0.80],[0.80],[0.60],[0.60],[0.60],[0.60],[0.60],[0.60],[0.60],[0.60],[0.60],[0.60],[0.40],[0.40],[0.40],[0.40],[0.40],[0.40],[0.40],[0.40],[0.40],[0.40],[0.20],[0.20],[0.20],[0.20],[0.20],[0.20],
[0.35],[0.25],[0.35],
[0.20],[0.20],[0.20],[0.20]], i;

//Tweens//

// FadeIn

// better to set this in CSS to prevent flash when page first loads
// TweenMax.set(stage, {	
// 	autoAlpha:0
// });


var sphereAnimations = Sphere();
var flutterAnimations = Flutter();

installMediaQueryWatcher("(max-width: 420px)", mediaChanged);

window.addEventListener("resize", resize);
resize();

TweenMax.to(stage, 2, {	
	autoAlpha:1,
	ease: Power4.easeIn
});

// Sphere Rotate

function mediaChanged(matches) {
  
  log("MATCHES", matches);
  
  for (var i = 0; i < sphereAnimations.length; i++) {
    
    var sphereAnimation = sphereAnimations[i];
    var flutterAnimation = flutterAnimations[i];
    
    var time = sphereAnimation.time();
        
    if (!matches) {      
      flutterAnimation.play(time);      
    } else {      
      flutterAnimation.pause(0);
    }
  }  
}

function Sphere(){

  var timelines = [];
  
  for (var i = 0; i < cubes.length; i++) {

    var tl = new TimelineMax()

    // Set

     tl.set(cubes[i], {
      rotationX:180,
      scale: 0,
      width: cubeSize,
      height: cubeSize,
      transformOrigin: transformOrigin,
      rotationX: -i * 2 + 90,
      scale: data[i][0]*0.7

    });

    // Spin

    tl.to(cubes[i], duration, {

      rotationY: "+=360",
      repeat: 10000,
      ease: Linear.easeNone
    });

    // Floyd

    tl.to(cubes[i], duration * 0.5, {
       autoAlpha:0, 
       repeat:10000, 
       repeatDelay: duration * 0.5, 
       ease: ease1
    }, duration * 0.25);

    tl.progress(i/180);
    
    timelines.push(tl);

   }

   return timelines; 
}

//Flutter

function Flutter() {

  var timelines = [];
  
  for (var i = 0; i < cubes.length; i++) {

     var tl2 = new TimelineMax();

     tl2.to(cubes[i], duration * 0.5, {
        xPercent:"500", 
        yPercent:"-50",
        skewX:"-50",
        scale: 0.2,
        rotationZ:-30,
        background:"#5ED8BE",
        repeat:10000, 
        repeatDelay: duration * 0.5, 
        ease: ease2
     }, duration * 0.075); 

    tl2.progress(i/180);
    
    timelines.push(tl2);

  }

  return timelines;
}

function resize() {
  
  var matrix = svg.getScreenCTM();
  
  TweenMax.set(container, {
    xPercent: -50,
    yPercent: -50,
    scaleX: matrix.a,
    scaleY: matrix.d,
    x: -cubeSize / 2 * matrix.a,
    y: -cubeSize / 2 * matrix.d,
  })
}

function installMediaQueryWatcher(mediaQuery, layoutChangedCallback) {
  var mql = window.matchMedia(mediaQuery);
  mql.addListener(function(e) {
    layoutChangedCallback(e.matches)
  });
  layoutChangedCallback(mql.matches);
}

// Returned (Function)Timelines as vars 

 // var SphereRT = Sphere();
 // var FlutterRT = Flutter();

// Master Timeline  
  
 // var master = new TimelineMax({paused:true});
  
// Add sub timelines

  // master.add(SphereRT);
  // master.add(FlutterRT);
  // master.add(Sphere());
  // master.add(Flutter());
    
// Sphere Responsive Function



// Add/Remove resize() at mobile breakpoint || Add/Remove Sphere() & Flutter() 

// if (matchMedia) {
// const mq = window.matchMedia("(max-width: 420px)");
// mq.addListener(WidthChange);
// WidthChange(mq);
// }

// function WidthChange(mq) {
  
// // var master = new TimelineMax();

// if (mq.matches) {
  
//  // master.add(Sphere());
//  // master.restart();
  
// window.removeEventListener("resize", resize);
// resize();

// } else {

//   // master.add(Sphere());
//   // master.add(Flutter());
//   // master.restart();
  
//   window.addEventListener("resize", resize);
//   resize();
  
//  }
// }

// // Restart Master Timeline on Resize

// window.addEventListener('resize', function(event){
  
//       master.restart();
//    // master.pause(0);
//    // master.play;
//    // master.remove();
//    // tl.restart();
//    // tl2.restart();
  
// });

// // Pause on Click

// document.getElementById("wrapper").onclick = function() {ClickPause()};

//  function ClickPause() {
       
//       // master.pause();
   
//     }

              
            
!
999px

Console