this.init = function() {
TweenLite.set([outline, heart], {
// transformOrigin: '50% 50%',
svgOrigin: "300 300"
})
allPopTl = new TimelineMax().timeScale(1);
redPop2Tl = new TimelineMax({}).timeScale(1);
redPop3Tl = new TimelineMax({}).timeScale(1);
bluePopTl = new TimelineMax({}).timeScale(1);
yellowPopTl = new TimelineMax({}).timeScale(1);
greenPopTl = new TimelineMax({}).timeScale(1);
purplePopTl = new TimelineMax({}).timeScale(1);
redPopTl = new TimelineMax({}).timeScale(1);
heartTl = new TimelineMax({}).timeScale(1);
mainTl = new TimelineMax({ paused: true }).timeScale(1.6);
mainTl.addLabel('clickFave')
.to(outline, 0.2, {
scale: 0.9,
ease: Linear.easeNone
})
.to(outline, 0.2, {
scale: 1,
ease: Linear.easeNone
})
.set(outline, {
autoAlpha: 0,
scale: 0.7
}, '-=0')
.from(heart, 1, {
scale: 0,
fill: '#f638a8',
ease: Elastic.easeOut.config(1.5, 0.7)
}, '-=0.34')
.addLabel('setFave')
.addPause()
.addLabel('clickUnfave')
.set(outline, {
autoAlpha: 1
})
.to(heart, 0.4, {
scale: 0
})
.to(heart, 0.1, {
fill: '#b4b4b4',
stroke: '#b4b4b4'
}, '-=0.4')
.to(outline, 1, {
scale: 1,
ease: Elastic.easeOut.config(1.5, 0.7)
}, '-=0.3')
.addLabel('setUnfave')
//POPS
purplePopTl.fromTo(purplePop, 0.4, {
attr: {
r: 0
}
}, {
attr: {
r: 100
},
ease: Power1.easeOut
})
.from(purplePop, 0.6, {
strokeWidth: 23,
ease: Power3.easeInOut
}, '-=0.4')
.to(purplePop, 0.2, {
attr: {
r: 110
},
ease: Power3.easeOut
}, '-=0.2 ')
redPopTl.fromTo(redPop, 0.4, {
attr: {
r: 0
}
}, {
attr: {
r: 100
},
ease: Power1.easeOut
})
.from(redPop, 0.6, {
strokeWidth: 23,
ease: Power3.easeInOut
}, '-=0.4')
.to(redPop, 0.2, {
attr: {
r: 110
},
ease: Power3.easeOut
}, '-=0.2 ')
greenPopTl.fromTo(greenPop, 0.4, {
attr: {
r: 0
}
}, {
attr: {
r: 100
},
ease: Power1.easeOut
})
.from(greenPop, 0.6, {
strokeWidth: 23,
ease: Power3.easeInOut
}, '-=0.4')
.to(greenPop, 0.2, {
attr: {
r: 110
},
ease: Power3.easeOut
}, '-=0.2 ')
yellowPopTl.fromTo(yellowPop, 0.4, {
attr: {
r: 0
}
}, {
attr: {
r: 100
},
ease: Power1.easeOut
})
.from(yellowPop, 0.6, {
strokeWidth: 23,
ease: Power3.easeInOut
}, '-=0.4')
.to(yellowPop, 0.2, {
attr: {
r: 110
},
ease: Power3.easeOut
}, '-=0.2 ')
bluePopTl.fromTo(bluePop, 0.4, {
attr: {
r: 0
}
}, {
attr: {
r: 100
},
ease: Power1.easeOut
})
.from(bluePop, 0.6, {
strokeWidth: 23,
ease: Power3.easeInOut
}, '-=0.4')
.to(bluePop, 0.2, {
attr: {
r: 110
},
ease: Power3.easeOut
}, '-=0.2 ')
redPop2Tl.fromTo(redPop2, 0.4, {
attr: {
r: 0
}
}, {
attr: {
r: 100
},
ease: Power1.easeOut
})
.from(redPop2, 0.6, {
strokeWidth: 23,
ease: Power3.easeInOut
}, '-=0.4')
.to(redPop2, 0.2, {
attr: {
r: 110
},
ease: Power3.easeOut
}, '-=0.2 ')
redPop3Tl.fromTo(redPop3, 0.4, {
attr: {
r: 0
}
}, {
attr: {
r: 100
},
ease: Power1.easeOut
})
.from(redPop3, 0.6, {
strokeWidth: 23,
ease: Power3.easeInOut
}, '-=0.4')
.to(redPop3, 0.2, {
attr: {
r: 110
},
ease: Power3.easeOut
}, '-=0.2 ');
allPopTl.add(redPopTl)
.add(purplePopTl, '-=0.56')
.add(yellowPopTl, '-=0.5')
.add(bluePopTl, '-=0.55')
.add(greenPopTl, '-=0.55')
.add(redPop2Tl, '-=0.7')
.add(redPop3Tl, '-=0.55')
mainTl.add(allPopTl, 0.16);
}
this.init = function () {
pauseGroup = select('.pauseGroup');
spinballGroup = select('.spinballGroup');
outline = select('.outline');
dotty = selectAll('.dotty');
icon = select('.icon');
outlinePath = 'M300,545C164.69,545,55,435.31,55,300S164.69,55,300,55,545,164.69,545,300,435.31,545,300,545Z';
TweenLite.set(mainSVG, {
visibility: 'visible'
})
TweenLite.set(dotty, {
transformOrigin: '50% 50%',
scale: 1.3,
})
TweenLite.set(spinballGroup, {
transformOrigin: '50% 50%',
scale: 0,
})
TweenLite.set(pauseGroup, {
transformOrigin: '50% 50%',
scaleY: 0,
})
spinballTl = new TimelineMax({}).timeScale(1);
mainTl = new TimelineMax({ paused: true }).timeScale(2.2);
dottyRotationTl = new TimelineMax({}).timeScale(1);
dottyRotationTl.to(dotty, 4, {
rotation: '-=360',
repeat: -1,
ease: Linear.easeNone,
})
mainTl.addLabel('setPlay')
.addLabel('showLoading')
.to(icon, 1, {
morphSVG: { shape: outlinePath, shapeIndex: 'auto' },
ease: Power1.easeInOut,
})
.to(dotty, 1, {
scale: 1,
ease: Power2.easeOut,
}, '-=1')
.to(outline, 0.5, {
strokeWidth: 16,
ease: Linear.easeNone,
}, '-=0.5')
.to(spinballGroup, 1, {
scale: 1,
ease: Power1.easeInOut,
}, '-=1')
.addPause()
.addLabel('showPause')
.to(spinballGroup, 1, {
scale: 0,
ease: Elastic.easeOut.config(0.3, 0.9),
})
.to(spinballGroup, 0.2, {
// autoAlpha:0
}, '-=1')
.to(pauseGroup, 2, {
scaleY: 0.7,
ease: Elastic.easeOut.config(1, 0.5),
}, '-=1')
.to(dotty, 1, {
scale: 1.3,
ease: Elastic.easeOut.config(0.3, 0.9),
}, '-=2')
.addLabel('setPause')
spinballTl.to(spinballGroup, 2, {
rotation: '+=360',
ease: Linear.easeNone,
repeat: -1,
})
}