переписал функцию
function recipeAnimate() {
var btnShow = $('#recipe_show'),
btnClose = $('#recipe_close'),
blackout = $('.blackout'),
body = $('.body-index'),
base = $('.body-index .base'),
modal = $('#recipe'),
modalContent = modal.find('.modal-recipe__content'),
modalHeader = modal.find('.modal-recipe__header'),
modalInput = $('.modal-recipe__input'),
modalPreloader = $('.modal-recipe__preloader'),
modalResult = $('.modal-recipe__result'),
modalClose = $('.modal-recipe__close'),
geo = $('.modal-geolocation'),
mainWrapper = $('.main-recipe__wrapper'),
carousel = $('.how-works__block'),
tl;
;
btnShow.on('click', function() {
geo.removeClass('is-show');
body.addClass('lockpage');
blackout.css("background-color", "transparent");
modalContent.attr('style', 'top: ' + mainWrapper.offset().top + 'px');
tl = gsap.timeline({
paused: true,
onStart: function(){
modalInput.focus()
},
onReverseComplete: function(){
blackout.css("background-color", "rgba(0,0,0,.5)");
body.removeClass('lockpage');
}
});
tl
.to(modalContent, {top: modalHeader.outerHeight(), duration: 0.5}, 'start')
.to(carousel, {y: 200, autoAlpha: 0, duration: 1}, 'start')
.to(blackout, {display: 'block', autoAlpha: 1, duration: 0.5}, 'start', '-=1')
.to(modal, {display:'block', autoAlpha: 1, duration: 0.5}, 'start')
.to(base, {autoAlpha: 0, duration: 0.5}, 'start')
.fromTo(modalClose, {autoAlpha: 0}, {autoAlpha: 1, duration: 1}, 'start')
.fromTo(modalHeader, {autoAlpha: 0}, {autoAlpha: 1, duration: 0.5}, 'start')
;
tl.play();
});
btnClose.on('click', function() {
tl.reverse()
});
$(window).resize(function(){
if (tl === undefined) return;
tl.reverse()
});
}