GSAP - how to pass a parameter on click?

Question

JavaScript

Hello everyone, I ask for help. There is a page, it has 1 block-imitation of the input, there is a modal window, it has a working input. In the modal window, when the input appears and moves to a certain height, I animate it.

First .set(modalContent, {top: mainWrapper.offset().top}) then .to(modalContent, {top: modalHeader.outerHeight(), duration: 0.5}, 'start')

How to pass mainWrapper.offset( on click) ).top ? I already broke my head, rewrote it, but it didn’t work out. Thanks in advance

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

Answer 1

rewrote the function

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