Declaring a variable outside a function

[majofski 0 Likes (Newbie)]

The basic functionality: when a button is clicked, that button's corresponding target div animates in. Each button has it's own unique animation. Animations are declared outside of the click function, and the targeted animation elements should populated the animation when the click function is run. Problem is, it's not quite working for me...

<ul>
  <!-- Search Trigger -->
  <li>
    <span class="trigger" id="search-trigger" >Search Trigger</span>
    
    <div class="reveal-recipient-container" id="search-container">
      <div class="reveal-recipient" id="reveal-recipient-search">Target to reveal when I press Search Trigger </div>
    </div>
  </li>
  
  <!-- Nav Trigger - Target element sits outside ul -->
  <li>
    <span class="trigger" id="nav-trigger">Other Trigger</span>
  </li>
</ul>

<div class="reveal-recipient" id="reveal-recipient-nav" >This recipient is intentionally outside the ul containing the triggers</div>

Here is my GSAP code.

/// I want to store my animations OUTSIDE of the click function to keep the code clean 

var searchAnimation = new TimelineLite({paused:true, reversed:true});
var navAnimation = new TimelineLite({paused:true, reversed:true});
var duration = .3
            
searchAnimation.set(recipientContainer, {
                  display:'block', 
                  autoAlpha:1})        
               .fromTo(recipient, duration, { 
                  display:'none', 
                  yPercent:'-100%', 
                  autoAlpha:0, 
                  ease: Back.easeOut.config(1.7)},{
                  display:'block', 
                  yPercent:'0%', 
                  autoAlpha:1, 
                  ease: Back.easeOut.config(1.7)
                  });

navAnimation.fromTo(recipient, duration, { 
                  display:'none', 
                  yPercent:'100%', 
                  autoAlpha:0, 
                  ease: Back.easeOut.config(1)},{
                  display:'block', 
                  yPercent:'0%', 
                  autoAlpha:1, 
                  ease: Back.easeOut.config(1)
                  });



  
$('#search-trigger').click(function() {
  recipientContainer = $('#search-container')
  recipient = $('#reveal-recipient-search')
  
  searchAnimation.reversed() ? searchAnimation.play() : searchAnimation.reverse();
});


$('#nav-trigger').click(function() {
  recipient = $('#reveal-recipient-nav')
  
  navAnimation.reversed() ? navAnimation.play() : navAnimation.reverse();
});

See the Pen BLvbNy?editors=0010 by modermo (@modermo) on CodePen

[Gardemarin 3 Likes (Newbie)]

Your animations are pretty messy and I think that I don't understand everything what you want to achieve, but any way .. you will have pretty good example Here I use only one animation for both buttons:

https://jsfiddle.net/Gardemarin/2L30f1s8/

[majofski 0 Likes (Newbie)]

Hey! Thanks for the response and the effort that went into coding a new solution.

 

The hope was that I could use a unique animation for each trigger, which is why I tried to slip them each into their own variables, and when the respective trigger was clicked, it would call that trigger's animation.

[Jonathan 5,176 Likes (Superhero)]

Hello, majofski

 

Is there any reason why your dont have the below variables that are inside your click event handler, defined outside the click event?

recipientContainer = $('#search-container')
recipient = $('#reveal-recipient-search')

recipient = $('#reveal-recipient-nav')

Since they are just simple selectors so they can be defiend outside your click event handlers . Also they are missing the var so you can define them as variables.

 

[majofski 0 Likes (Newbie)]

Woah, that actually fixed things! Thanks @jonathan. 

 

Declaring the variable outside the click event now means that I can have unique animation for each, and keep the animation outside of the click event.