LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
body {
  background-color:#000;
  overflow: hidden;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.container{
  position:absolute;
  max-width:100%;
  
}

svg{
  max-width:100%;
  visibility:hidden;
 
}

JS
var xmlns = "http://www.w3.org/2000/svg",
  xlinkns = "http://www.w3.org/1999/xlink",
  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
  container = select('.container'),
      mainSVG = select('.mainSVG'), 

 maskValueArr = ['#111', '#222', '#333', '#444', '#555', '#666', '#777', '#888', '#999', '#aaa', '#bbb', '#ccc', '#ddd', '#eee', '#FFF'].reverse(),
  num = 100,
  boxWidth = 10,
  boxHeight = boxWidth,   
  fillCount,
  fillStep = Math.round(num / maskValueArr.length) 

//center the container cos it's pretty an' that
TweenMax.set(container, {
  position: 'absolute',
  top: '50%',
  left: '50%',
  xPercent: -50,
  yPercent: -50
})
TweenMax.set('svg', {
  visibility: 'visible'
})

var tl = new TimelineMax();

function createAnimation(_num, _stroke, _path, _tl, _dur) {
  
  var path = getBezierPath(_path);//select(_path)
  
  //console.log(path)
  
  
  var stroke = select(_stroke);
  fillCount = 0;
  for (var i = 0; i < _num; i++) {

    var p = document.createElementNS(xmlns, 'rect');
    //if(isFirefox){
      mainSVG.appendChild(p);  
    //} else {
      stroke.appendChild(p);
    //}
    
    //this ensures that the tail fades off. Comment out fillCount++ for a full white loader (no fade)
    if (i > (fillCount * fillStep)) {
      fillCount++
    }

    p.setAttributeNS(null, 'fill', maskValueArr[fillCount]);
    p.setAttributeNS(null, 'width', boxWidth);
    p.setAttributeNS(null, 'rx', boxWidth);
    p.setAttributeNS(null, 'ry', boxWidth);
    p.setAttributeNS(null, 'height', boxHeight);
    TweenMax.set(p, {
        transformOrigin: '50% 50%',
        scaleY: 1 - (i / _num)
        //scale: 1 - (i / _num)
      })
    var t = new TimelineMax();
    t.to(p, _dur, {
        bezier: {
          type: "cubic",
          values: path,
          autoRotate: true
        },
      repeat:-1,
      //yoyo:true,
        ease: Linear.easeNone
      })

    _tl.add(t, i / (_num*2));
  _tl.timeScale(0.2);
    
    _tl.seek(20)
    
  }
  
 
}

function getBezierPath(p){
  //console.log(select(path))
  return MorphSVGPlugin.pathDataToBezier(select(p).getAttribute('d'), {
    offsetX: -(boxWidth / 2),
    offsetY: -(boxHeight / 2)
  })
}

var dur = 1.2;
createAnimation(num, '#rawPathMask', '#outline', new TimelineMax(), dur);
createAnimation(num, '#rawPathMask', '#mouth1', new TimelineMax(), dur);
createAnimation(num/2, '#rawPathMask', '#noseL', new TimelineMax(), dur);
createAnimation(num, '#rawPathMask', '#mouth2', new TimelineMax(), dur/2);
createAnimation(num, '#rawPathMask', '#mouth3', new TimelineMax(), dur);
createAnimation(num, '#rawPathMask', '#mouth4', new TimelineMax(), dur/2);
createAnimation(num, '#rawPathMask', '#eye1', new TimelineMax(), dur/2);
createAnimation(num, '#rawPathMask', '#eye2', new TimelineMax(), dur/2);
createAnimation(num, '#rawPathMask', '#brow', new TimelineMax(), dur);
createAnimation(num, '#rawPathMask', '#forehead', new TimelineMax(), dur);
Host Instantly Drag and Drop Website Builder

 

Description

May the Fork be with you.
Term
Mon, 11/27/2017 - 21:55

Related Codes

Pen ID
Pen ID
Pen ID