I have a function shutterOff, which contains another one with TweenMax animation function. I need to loop the whole TweenMax animation function, like it plays again after all timelines are played. It should work like a callback function onComplete(whole animation with all timelines), which starts play animation again. I really hope on you! Thanks!
function shutterOff () {
var shutterWrapper = $('.shutter__wrapper');
var ww = $(window).width();
shutterWrapper.addClass('shutter__wrapper--off');
function animation() {
let tl = new TimelineMax();
let $imgOne = $('.small_img img')[0];
let $imgTwo = $('.small_img img')[1];
let $imgThree = $('.small_img img')[2];
let $imgFour = $('.small_img img')[3];
let $rowOne = $('.row-1');
let $rowTwo = $('.row-2');
let $rowThree = $('.row-3');
let $textLinesOne = $('.small_text_1 > span');
let $textLinesTwo = $('.small_text_2 > span');
let $textLinesThree = $('.small_text_3 > span');
let $textLinesFour = $('.small_text_4 > span');
let $colOne = $('.big .col-text-1')[0];
let $colTwo = $('.big .col-text-2')[0];
let $colThree = $('.big .col-text-3')[0];
tl
.addLabel('appearance')
// 0 — 1
.to($imgOne,1.1,
{
x: '0',
ease: Circ.easeOut
},'appearance')
.staggerTo($textLinesOne,1.1,{
x: '0',
ease: Circ.easeOut
},.1,'appearance')
.to($colOne,1.1,{
top: '-100%',
ease: Power1.easeOut
},'appearance')
.to($colTwo,1.3,{
top: '-303%',
ease: Power1.easeOut
},'appearance')
.to($colThree,1.65,{
top: '-303%',
ease: Power1.easeOut
},'appearance')
// 1 — 0(reverse)
.addLabel('disappearance', '+=2')
.to($imgOne,1.3,
{
x: '120%',
ease: Expo.easeIn
},'disappearance')
.staggerTo($textLinesOne,1.3,{
x: '-100%',
ease: Expo.easeIn
},.1,'disappearance')
// 1 — 0(reverse)
/// 1 — 2
.addLabel('appearance1to2', '+=0')
.to($imgTwo,1.1,{
x: '0',
ease: Circ.easeOut
},'appearance1to2')
.staggerTo($textLinesTwo,1.1,{
x: '0',
ease: Circ.easeOut
},.28,'appearance1to2')
.to($colOne,1.1,{
top: '-302%',
ease: Power1.easeOut
},'appearance1to2')
.to($colTwo,1.3,{
top: '-711%',
ease: Power1.easeOut
},'appearance1to2')
.to($colThree,1.5,{
top: '-712%',
ease: Power1.easeOut
},'appearance1to2')
/// 1 — 2
// 2 — 0(reverse)
.addLabel('disappearance2', '+=2')
.to($imgTwo,1.3,
{
x: '120%',
ease: Expo.easeIn
},'disappearance2')
.staggerTo($textLinesTwo,1.3,{
x: '-100%',
ease: Expo.easeIn
},.1,'disappearance2')
// 2 — 0(reverse)
// 2 — 3
.addLabel('appearance2to3', '+=0')
.to($imgThree,1.1,{
x: '0',
ease: Circ.easeOut
},'appearance2to3')
.staggerTo($textLinesThree,1.1,{
x: '0',
ease: Circ.easeOut
},.28,'appearance2to3')
.to($colOne,1.1,{
top: '-507%',
ease: Power1.easeOut
},'appearance2to3')
.to($colTwo,1.3,{
top: '-916%',
ease: Power1.easeOut
},'appearance2to3')
.to($colThree,1.65,{
top: '-1120%',
ease: Power1.easeOut
},'appearance2to3')
// 2 — 3
// 3 — 0(reverse)
.addLabel('disappearance3', '+=2')
.to($imgThree,1.3,
{
x: '120%',
ease: Expo.easeIn
},'disappearance3')
.staggerTo($textLinesThree,1.3,{
x: '-100%',
ease: Expo.easeIn
},.1,'disappearance3')
// 3 — 0(reverse)
// 3 — 4
.addLabel('appearance3to4', '+=0')
.to($imgFour,1.1,{
x: '0',
ease: Circ.easeOut
},'appearance3to4')
.staggerTo($textLinesFour,1.1,{
x: '0',
ease: Circ.easeOut
},.28,'appearance3to4')
.to($colOne,1.1,{
top: '-712%',
ease: Power1.easeOut
},'appearance3to4')
.to($colTwo,1.3,{
top: '-1528%',
ease: Power1.easeOut
},'appearance3to4')
.to($colThree,1.65,{
top: '-1528%',
ease: Power1.easeOut
},'appearance3to4')
// 4 — 0(reverse)
.addLabel('disappearance4', '+=2')
.to($imgFour,1.3,
{
x: '120%',
ease: Expo.easeIn
},'disappearance4')
.staggerTo($textLinesFour,1.3,{
x: '-100%',
ease: Expo.easeIn
},.1,'disappearance4')
// 4 — 0(reverse)
// 4 — 4.5
.addLabel('appearance4to45', '-=.7')
.to($colOne,.5,{
top: '-810%',
ease: Power3.easeIn
},'appearance4to45')
.to($colTwo,.5,{
top: '-1625%',
ease: Power3.easeIn
},'appearance4to45')
.to($colThree,.5,{
top: '-1636%',
ease: Power3.easeIn
},'appearance4to45')
// 4 — 4.5
}
videoPlay();
setTimeout(animation,800);
}
Aucun commentaire:
Enregistrer un commentaire