Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
majofski

Declaring a variable outside a function

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

:)

  • Like 1
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×