LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
pls , just Don't Throw Me... Leave Me Alone...
CSS
body{  
  -webkit-user-select: none;  
     -moz-user-select: none;  
      -ms-user-select: none;  
          user-select: none;
  overflow:hidden;
}

#container{
  width:500px; height:420px;
  position:absolute;
  -webkit-transform:translate(-50%,0%);
          transform:translate(-50%,0%);
  left:50%; top:20px;
}

#svg{
  position:absolute;
  left:0px; top:0px;
  border:10px solid #444;
  border-radius:20px;
}


#HB{
  position:absolute;
  right:-75px; bottom:-30px;
  -webkit-transform: rotate(25deg);
          transform: rotate(25deg);
  overflow:visible;
  cursor: pointer;
}


#links{position:absolute;bottom:0px;left:0px;width:100%;height:50px;font-size:13px;font-family:tahoma;color:#000;}
#links a{text-decoration:none;font-size:2.3em;color:#000;}
#twitter{position:absolute;bottom:15px;right:20px;}
#pens{position:absolute;bottom:15px;left:20px;}

JS
/*
a Pen by DIACO : twitter.com/Diaco_ml || codepen.io/MAW
powered by GSAP : https://www.greensock.com/
*/

var CY=270,Doc=document,B=Doc.getElementById('B'),W=Doc.getElementById('W'),
    Es=Elastic.easeOut.config(1.4,0.1),TwL=TweenLite,TwM=TweenMax,ee=Doc.querySelectorAll('.eye'),RT=TwL.to({},0,{}),pls=1,
    owlS=Doc.createElement('audio'),hornS=Doc.createElement('audio'),huh1=Doc.createElement('audio'),huh2=Doc.createElement('audio');
var Asrc = 'http://www.freesound.org/data/previews/';
owlS.src=Asrc+'251/251937_2289882-lq.mp3'; owlS.volume=.5; 
hornS.src=Asrc+'27/27880_208079-lq.mp3'; hornS.volume=.2;  
huh1.src=Asrc+'241/241514_950925-lq.mp3'; huh1.volume=.1; 
huh2.src=Asrc+'242/242606_950925-lq.mp3'; huh2.volume=.1;
TwM.staggerTo(ee,0,{cycle:{rotation:[5,-5]},transformOrigin:'center'},0);
TwL.to(B,1,{transformOrigin:'bottom',opacity:1,onComplete:SF});
TwL.fromTo('#pls',0.8,{transformOrigin:'right bottom',scale:0.9},{opacity:1,scale:1,delay:2,ease:Back.easeOut});

Draggable.create(B,{throwProps:true,bounds:"#svg",onDrag:UF,onRelease:RF,onPress:PF});
function PF(){ 
  hidePls(); owlS.pause(); owlS.currentTime=0; huh2.play();
  tl.pause();
  TwL.fromTo(ee,0.2,{scaleY:0},{scaleY:1.3,ease:Back.easeOut});
  TwM.to(B,1,{scaleY:1,ease:Es});
  TwM.staggerTo('#wing-l,#wing-r',1,{cycle:{rotation:[R(0,10),R(-10,0)]},ease:Es},0);
};
function RF(){
  RT=TwL.to(B,11,{y:0,ease:Es,onUpdate:UF,onComplete:SF});
  TwL.to('#wing-l,#wing-r',11,{rotation:0,ease:Es});
  TwL.to(ee,0.5,{scaleY:1});
};
function UF(){
var bt=B._gsTransform,Y;
if(bt.y>=-1){Y=bt.y+CY}else{Y=CY};
  TwL.set('#foot',{y:bt.y*-0.06});
  TwL.set(W,{attr:{d:"M0,270 L"+(bt.x-17+CY)+","+Y+" 500,270"},strokeWidth:((CY)/Y)*6});
};
function SF(){ tl.play(0); };
var tl=new TimelineLite({paused:true})
  .to(B,0.5,{scaleY:1.05})
  .to(ee,0.15,{scaleY:0.5},0).to(ee,0.2,{scaleY:1},0.15)
  .add(function(){owlS.play()})
  .to(B,4,{scaleY:1,ease:Elastic.easeOut})
  .staggerTo(ee,1,{cycle:{scaleY:[0.25,0.1]},ease:Es},0,1.5)
  .to(B,2,{scaleY:1.07,yoyo:true,repeat:-1,ease:Sine.easeInOut});
TwM.staggerTo('#sun circle',1,{scale:0.92,repeat:-1,yoyo:true,ease:Sine.easeInOut,transformOrigin:'center'},0.5);
var hornTl = new TimelineLite({paused:true})
  .fromTo('#HL path',0.15,{drawSVG:'50% 100%',opacity:1},{opacity:0,drawSVG:'100% 100%'},'H')
  .fromTo('#HL',0.15,{stroke:"#555",transformOrigin:'center',scale:0.8},{x:-10,opacity:1,scale:1,},'H')
  .staggerTo(['#H1','#H2','#H3','#H4'],0.15,{cycle:{morphSVG:['#H1T','#H2T','#H3T','#H4T']},repeat:1,yoyo:true},0,'H');
TwL.delayedCall(1,function(){
Doc.getElementById('HB').addEventListener('click',function(){
  hidePls(); hornTl.restart(); hornS.currentTime=0; hornS.play(); owlS.pause(); owlS.currentTime=0;
  if(!RT.isActive()){ PF(); TwL.killDelayedCallsTo(RF); TwL.delayedCall(0.3,RF);}else{ huh1.play(); }
    TwL.fromTo(B,1,{scaleY:1.05},{scaleY:1,ease:Es});
    TwL.fromTo(ee,0.5,{scaleY:0},{scaleY:R(0.95,1.2),ease:Back.easeOut});
    TwM.staggerFromTo('#wing-l,#wing-r',1,{cycle:{rotation:[R(0,20),R(-20,0)]}},{rotation:0,ease:Es},0);
});
});
function hidePls(){if(pls){TwL.to('#pls',0.2,{opacity:0})}};
function R(min,max) {return min+Math.random()*(max-min)};

/*  a Pen by DIACO : twitter.com/Diaco_ml || codepen.io/MAW  */
Host Instantly Drag and Drop Website Builder

 

Description

just a simple , fun and interactive SVG scene with GSAP
Term
Mon, 11/27/2017 - 21:59

Related Codes

Pen ID
Pen ID
Pen ID