title: How to play greensock timeline max based on a data attribute
body: <p>Currently I am not getting an answer at the greensock forum. I have a searchbar, which should expand by clicking on an icon and close again, when clicking anywhere at the body, but only, when the searchbar is expanded.</p>
  
  <p>When I open the searchbar I am facing two problems for the closing animation:</p>
  
  <p>(1) The closing animation is being resetted when I click on the body element while the closing animation is running.</p>
  
  <p>(2) The closing animation runs, even if the searchbar is not expanded.</p>
  
  <p>I tried to solve this issues by adding a data attribute to the container for the different states (open, true/false) but somehow it does not work as intended. Is there any logic error in my code?</p>
  
  <pre><code>(function($) {
  
  var $irpsearch = $('#irp-newssearch-container'),
      $irpsearchinput = $('#irp-searchform-input'),
      $search_icon = $('.irp-news-search-icon'),
      $btn_container = $('.irp-filter-buttons'),
      $filter_btn = $('.filter-btn'),
      $search_seperator = $('.irp-search-seperator')
      $body = $('body');
  
      var openSearchAnimation = new TimelineMax({
              paused: true
          })
          openSearchAnimation
              .staggerTo($filter_btn, .5, {scale: 0.7 ,opacity: 0,ease: Back.easeInOut},-0.1)
              .set($btn_container,{'display': 'none'})
              .to($search_seperator, .3, {opacity: 0, ease: Expo.easeOut}, '-=0.6')
              .to($search_icon, .5, {backgroundColor:"#ffffff", ease: Power0.easeNone}, '-=1.0')
              .to($irpsearch, 1.0, {width: '100%', ease: Power3.easeOut}, '-=0.1');
  
      openSearch = function () {
          $irpsearch.data('open', true);
          openSearchAnimation.play();
          $irpsearchinput.focus();
          return false;
      },
      closeSearch = function() {
          $irpsearch.data('open', false);
          openSearchAnimation.reverse(0);
      }
  
  /*$irpsearchinput.on('click', function(e) {
      e.stopPropagation();
      });*/
  
  $irpsearch.on('click', function(e) {
      e.stopPropagation();
      if (!$irpsearch.data('open')) {
  
          openSearch();
  
          /* HTML Click */
          $body.off('click').on('click', function(e) {
              closeSearch();
          });
  
          /* Escape Hide */
          $( document ).on( 'keydown', function ( e ) {
              if ( e.keyCode === 27 ) { // ESC
                  closeSearch();
              }
          });
  
  
      } else {
          if ($irpsearchinput.val() === '') {
              closeSearch();
              return false;
          }
      }
  });
  
  })(jQuery)
  </code></pre>
  
  <p>Codepen to illustrate the issues:
  <a href="https://codepen.io/anon/pen/YQqQWm" rel="nofollow noreferrer">https://codepen.io/anon/pen/YQqQWm</a></p>