$(document).ready(function(){
var $coverAboutTeam = $('#coverAboutTeam'),
$coverAboutAttribution = $('#coverAboutAttribution'),
$coverAbout = $('#coverAbout');
$coverAboutAttribution.lettering();
$coverAboutTeam.lettering(); // wrap around each character within header
var $coverAboutTeamSpans = $coverAboutTeam.find('span'),
$coverAboutAttributionSpans = $coverAboutAttribution.find('span'),
tlCoverAbout = new TimelineMax({
paused: true,
onStart: aboutArrowsAppear
}),
$svgAbout = $('svg').drawsvg(),
$aboutTab = document.getElementById("coverAboutTab"),
p = 0;
arrowSel = 0;
tlCoverAbout
.staggerFrom($coverAboutTeamSpans, 0.1,
{left:"+=10px", autoAlpha:0.2}, 0.05, 0.8)
.staggerFrom($coverAboutAttributionSpans, 0.1,
{left:"+=10px", opacity:0.2}, 0.05, 0.8);
$("#coverAbout").click(function(){console.log(1);});
$coverAbout.hover(
function() {
console.log("its on");
$aboutTab.style.background = "url(singleStrand_focus.png) 0 0";
tlCoverAbout.play();
},
function() {
console.log("its off");
tlCoverAbout.reverse();
$aboutTab.style.background = "url(singleStrand.png) 0 0";
setTimeout(aboutArrowsDisappear, 500);
}
);
var myArrow = setInterval(function(){
if (arrowSel == 1) {
if (p == 100) {}
else {
p+=1;
$svgAbout.drawsvg('progress', p/100);
console.log(p);
}
}
else if (arrowSel ==2){
if (p == 0){}
else {
p-=1;
$svgAbout.drawsvg('progress', p/100);
console.log(p);
}
}
}, 1);
function aboutArrowsAppear(){
arrowSel = 1;
}
function aboutArrowsDisappear(){
arrowSel = 2;
}
});