GSAP — как передать параметр при клике?

Question

[Дмитрий Христоев]

Всем привет, прошу помощи. Есть страница, на ней 1 блок-имитация инпута, есть модальное окно, в нем рабочий инпут. В модальном окне при появлении инпут появляется и перемещается на опередленную высоту, я ее анимирую.

Сначала .set(modalContent, {top: mainWrapper.offset().top}) потом .to(modalContent, {top: modalHeader.outerHeight(), duration: 0.5}, 'start')

Как при клике передать mainWrapper.offset().top ? Я уже голову себе сломал, переписывал, так и не получилось. Заранее спасибо

function recipeAnimate() {
  var btnShow = $('#recipe_show'),
      btnClose = $('#recipe_close'),
      blackout = $('.blackout'),
      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 = gsap.timeline({
        paused: true,
        onStart: function(){
          modalInput.focus();
          console.log('Recipe oncomplete');
        }
      })
  ;
  
  tl
    .set(blackout, {backgroundColor: 'transparent'})
    .set(modalContent, {top: mainWrapper.offset().top})
    .set(modalHeader, {autoAlpha: 0})
    .set(mainWrapper, {autoAlpha: 0})
    .set(modalPreloader, {autoAlpha: 0})
    .set(modalResult, {autoAlpha: 0})
    .set(modalClose, {autoAlpha: 0})
    .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')
    .to(modalClose, {autoAlpha: 1, duration: 1}, 'start')
    .to(modalHeader, {autoAlpha: 1, duration: 0.5}, 'start')
    .to(modalContent, {top: modalHeader.outerHeight(), duration: 0.5}, 'start')
  ;

  btnShow.on('click', function() {
    geo.removeClass('is-show');
    console.log(['Recipe show', mainWrapper.offset().top, modalHeader.outerHeight()]);
    tl.play();
  });

  btnClose.on('click', function() {
    console.log('Recipe hide');
    tl.reverse();
  });
}

Comments

[Kovalsky]

Так это же таймлайн, там исходное состояние должно сохраняться, то есть при откате анимации состояние элемента должно становиться таким каким было в начале. Этого не происходит?

[Дмитрий Христоев]

Kovalsky, происходит, при откате функция проигрывается, но в обратном состоянии. Я просто хочу 2 параметра, конечную и начальную точки, обновлять при клике, ведь я могу отресайзить страницу, соответственно изменятся точки, ведь тот же текст, от высоты которого зависит отступ может быть разный. С другой стороны можно четко зафиксировать размер блока текста, но это крайний вариант, либо написать 2 таймлайна, на каждую кнопку и вызывать при клике.

Answer 1

[Дмитрий Христоев]

переписал функцию

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()
  });
}