Здравствуйте. Подскажите, пожалуйста, ответ на следующий вопрос. Использую бибиотеку GSAP. Алгоритм следующий: есть два блока, один анимационно sсale, затем уходит влево, в это время выезжает блок справа, затем их стили сбрасываются и при повторном click все происходит заново. Но проблема в чем, при повторном click skale отрабатывает лишь дважды и всё.
Стили простые: первый блок position: absolute; left: 0
второй блок position: absolute; left: 100%
'src/js/jquery/jquery.js',
'src/js/gsap/TweenMax.min.js',
'src/js/jquery-ui/jquery-ui.min.js'
<!doctype html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="./styles/index-build.css" rel="stylesheet">
</head>
<body>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link" href="#">Ссылка 1</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Ссылка 2</a>
</li>
</ul>
</nav>
<div class="container">
<div class="initContent initSlide">
<!-- <div class="initContent"> -->
<div class="content">
<h2>init</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum id in laboriosam laudantium magnam nesciunt numquam obcaecati odio ut voluptatibus! Eum hic iste magni nesciunt non officiis, quae ratione recusandae?
</p>
</div>
</div>
<div class="nextContent nextSlide">
<!-- <div class="nextContent"> -->
<div class="content">
<h2>next</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum id in laboriosam laudantium magnam nesciunt numquam obcaecati odio ut voluptatibus! Eum hic iste magni nesciunt non officiis, quae ratione recusandae?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum id in laboriosam laudantium magnam nesciunt numquam obcaecati odio ut voluptatibus! Eum hic iste magni nesciunt non officiis, quae ratione recusandae?
</p>
</div>
</div>
</div>
<script src="./js/main-scripts.min.js"></script>
<script src="./js/scripts.min.js"></script>
</body>
</html>
var gsapInit = (function() {
// private
var init = function() {
};
// public
return {
init: function() {
var _this = this;
_this.initProject();
},
initProject: function () {
var
link = $('.nav__link').eq(0);
var
container = $('.container');
link.on('click', function (e) {
e.preventDefault();
var
d1 = $.Deferred(),
d2 = $.Deferred(),
d3 = $.Deferred();
var toolTimeline = new TimelineMax();
var duration = .5;
var
first = $('.initSlide'),
second = $('.nextSlide');
// first = $('.initContent'),
// second = $('.nextContent');
toolTimeline.to(first, duration, {
scale : '.8',
// opacity : 0,
ease: Linear.easeInOut,
onComplete : function () {
d1.resolve();
}
});
d1.done(function () {
// alert('done');
toolTimeline.to(first, duration, {
left : -100 + '%',
// ease: Linear.easeInOut
});
toolTimeline.to(second, duration, {
left : 0,
// ease: Linear.easeInOut
onComplete : function () {
d2.resolve();
// alert('done');
}
});
});
d2.done(function () {
// alert('done');
first.toggleClass('initContent nextContent');
second.toggleClass('nextContent initContent', function () {
d3.resolve();
});
first.toggleClass('initSlide nextSlide');
second.toggleClass('nextSlide initSlide', function () {
// d3.resolve();
});
});
d3.done(function () {
// alert('done');
first.attr('style', '');
second.attr('style', '');
});
});
}
};
})();
$(document).ready(function() {
gsapInit.init();
});
