Hello everybody! Can't understand why GSAP animate only first transition (rotate). Second transition it's made, but witout animation, as if duration changes to 0. Thanks for any help! link for project:
http://htmlfabric.ru/test/club.2/
UPD: js code:
var
tl = new TimelineMax({ onComplete: changePhotos }),
photoContainer = $('#container'),
footContainer = $('#foot__container'),
needDelay = 1,
fadeTime = 1.5,
piBlock = $('.pi__block'),
allItems = $('.pi__img'),
logoItems = $('.pii--logo');
//fade in & out
function logo() {
tl//.staggerTo(logoItems, fadeTime, { autoAlpha: 1, delay: needDelay }, 0.2)
//.to(allItems, fadeTime*1.5, { autoAlpha: 1, delay: needDelay })
//.staggerTo(logoItems, fadeTime, { autoAlpha: .35, delay: needDelay }, 0.2)
//.to(allItems, fadeTime*1.5, { autoAlpha: .35, delay: needDelay });
.to(allItems, 1, { delay: needDelay })
}
logo();
//change photos
var
sideA,
sideB,
sideAnumber = 0,
sideBnumber = 1;
function changePhotos() {
sideAnumber += 1;
sideBnumber += 1;
sideA = $('.side'+sideAnumber);
sideB = $('.side'+sideBnumber);
tl.to(sideB, fadeTime*0.5, { autoAlpha: 1, delay: needDelay, rotationY: '+=180deg', transformOrigin: '50% 50% 50px' }, 'together')
.to(sideA, fadeTime*0.5, { autoAlpha: 0, delay: needDelay, rotationY: '-=180deg', transformOrigin: '50% 50% 50px' }, 'together');
logo();
}