majofski

Also, for anyone looking for the finished code, here it is: What's nice about it is it's a menu, and each trigger item has it's own custom animation. The code isn't perfect (i'm still learning Javascript), but it does what I need it to

Yes! Solved it with that information. Basically what was happening was that every time I went to get the animation: function calculatorAnimation($trigger,$recipient,$recipientContainer) { var currentAnimation = new TimelineMax(); I was resetting the global currentAnimation because I was declaring var. Removing it was the fix. Thanks, Jack!!!

Hey there. Thanks for the response. The thing is, currentAnimation.data = 1 is trying to affect the global variable. currentAnimation as you can see below, was declared globally, not inside the function. var currentAnimation = null;

I have a set of triggers. These triggers should open and close it's coresponding menu. So I have a problem where a variable isn't being altered when changed inside a function. The variable indicates whether the animation has been run or not. Without the variable changing globally, there to indicate whether the animation needs to be played or reversed. Here I have a global variable: var currentAnimation = null; And a basic `mouseup` function: $('.trigger').mouseup(function() { var $trigger = $(this).attr('id'); $trigger = '#' + $trigger; //#calculator-trigger var $recipient = $trigger.replace('-trigger', '-reveal-recipient'); var $recipientContainer = $($recipient).parent('.reveal-recipient-container').attr('id'); $recipientContainer = '#' + $recipientContainer; runAnimation($trigger,$recipient,$recipientContainer); }); Then a basic check to ascertain which trigger it is, as each trigger has a different animation: function runAnimation($trigger,$recipient,$recipientContainer){ if (currentAnimation === null) { // Which animation needs to be run (based on the trigger clicked) whichAnimationIsIt($trigger,$recipient,$recipientContainer); currentAnimation.play(); /////////////////////// // Problem lies here // // Why won't the currentAnimation.data get set to 1? currentAnimation.data = 1 /////////////////////// /////////////////////// } // If the recipient is currently open if (currentAnimation.data === 0) { currentAnimation.play(); currentAnimation.data = 1; } // Close if not else { currentAnimation.reverse(); currentAnimation.data = 0; } } function whichAnimationIsIt($trigger,$recipient,$recipientContainer){ if($trigger === '#search-trigger'){ searchAnimation($recipient,$recipientContainer); } if($trigger === '#calculator-trigger'){ calculatorAnimation($trigger,$recipient,$recipientContainer); } } Basically, I need the currentAnimation.data to be set to 1 (and thus alter the global variable) after the animation has run. Running the debugger tells me that up until the /////Problem lies here//////// line, everything works as planned. What could I be doing wrong?

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.

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.

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

So, I know this is going to be a huge wall of code (so maybe just go through to the codepen) but I'm having a very minor issue. For the most part, everything that I've coded works (albeit, likely very bloated and ugly code)... except: the very first animation when "Trigger 2" is pressed doesn't work. Every subsequent one does. The first, doesn't. My html is as follows: <ul> <li> <span class="reveal-trigger" data-target-id="reveal-recipient-1">Trigger 1</span> <div id="reveal-recipient-1" class="reveal-recipient">Target to reveal when I press Trigger 1</div> </li> <li> <span class="reveal-trigger" data-target-id="reveal-recipient-search" id="search-trigger">Trigger 2</span> <div class="reveal-recipient-container" > <div id="reveal-recipient-search" class="reveal-recipient">Target to reveal when I press Trigger 2 <input id="boom" type="text"> </div> </div> </li> <li> <span class="reveal-trigger" data-target-id="reveal-recipient-3" id="nav-trigger">Trigger 3</span> </li> </ul> <div id="reveal-recipient-3" class="reveal-recipient">This recipient is intentionally outside the ul containing the triggers</div> CSS: .open { background-color:green; } li { float:left; list-style-type:none; } .reveal-recipient-container { //border:solid 1px red; height:120px; display:none; overflow:hidden; position:relative; } .reveal-trigger { padding:1em 2em; display:block; background-color:hsla(110,60%,50%,1); border-radius:3px; margin:5px; cursor:pointer; &:hover { background-color:hsla(110,60%,70%,1); } &.active { background-color:hsla(130,60%,40%,1); color:white; } } .reveal-recipient { position:absolute; width:100px; transform:translateY(-100%); display:none; background-color:white; padding:1em; box-shadow:0 2px 0 rgba(0,0,0,0.05); border:solid 1px rgba(0,0,0,.1) } And then, my loyal javascript: $(document).on('click', function(event) { if (!$(event.target).closest('.reveal-recipient').length){ if (!$(event.target).closest('.reveal-trigger').length){ TweenMax.to($('.reveal-recipient'), .3, {display:'none', y:'-100%', autoAlpha:0}); //remove open class from any open $('.reveal-recipient').removeClass('open'); $('.reveal-trigger').removeClass('active'); $('.reveal-recipient-container').hide(); } } }); $('.reveal-trigger').click(function(e) { //remove active class from other triggers $('.reveal-trigger').not(this).removeClass('active'); //toggle active class on this trigger $(this).toggleClass('active'); //get target element var triggerId = $('#' + $(this).attr('id')); var target = $('#' + $(this).attr('data-target-id')); var targetContainer = $($(target).parent().closest('.reveal-recipient-container')); // Animations if($(this).is('#search-trigger')) { var animation = TweenMax.to(target, .3, {display:'block', yPercent:'0%', x:'0%', autoAlpha:1, onComplete:function() { //once animation is complete, if the target has an input, focus on that input if(target.find('input').size() > 0) { target.find('input').focus(); } }}); } if($(this).is('#nav-trigger')){ var animation = TweenMax.to(target, .3, {display:'block', y:'0%', x:'100%', autoAlpha:1}); } //hide all elements of "target" class, except the current target if($('.reveal-recipient.open').not(target).size() > 0) { //TweenMax.to($('.target.open').not(target), .1, {display:'none', y:'0%', autoAlpha:0}); TweenMax.to($('.reveal-recipient.open').not(target), .3, {display:'none', yPercent:'-100%',x:'0%', autoAlpha:0}); //remove open class from target elements that are now hidden $('.reveal-recipient.open').not(target).removeClass('open'); $(targetContainer).delay(300).hide(0); } //if this element is now active if($(this).hasClass('active')) { //show current target element animation.play(); //indicate that this target class element is now open target.addClass('open'); $(targetContainer).show(0); } //if the element is no longer active else { //hide the target TweenMax.to(target, .3, {display:'none', yPercent:'-100%', x:'0%', autoAlpha:0}); //remove open class from newly hidden target element target.removeClass('open'); $(targetContainer).delay(300).hide(0); } });

Right now I have some code that I've hacked together that for the most part, does exactly what I want it to do. The problem is that the code itself seems convoluted. I'm talking more about the GSAP part my code, which has a lot of repetitious markup, but I'm at an odd's end on how to make it more concise. I've tried using the reverse(). function, but I can't seem to make it work... Any ideas? var trigger = ".trigger"; var recipient = ".target"; var not_trigger = $(".trigger").not(this); $(trigger).click(function(e) { e.stopPropagation(); recipient = '#' + $(this).attr('data-target-id'); var not_recipient = $(".target").not(recipient); if($(trigger).hasClass("active")){ $(trigger).not(this).removeClass("active"); } $(this).toggleClass("active") ; if($(".target").hasClass("open")){ $(not_recipient).removeClass("open"); TweenMax.to($(".target"), .3, {display:'none', y:'0%', autoAlpha:0}); if($(recipient).hasClass("open")){ $(recipient).removeClass("open"); TweenMax.to(recipient, .3, {display:'none', y:'0%', autoAlpha:0}); }else{ $(recipient).addClass("open"); TweenMax.to(recipient, .3, {display:'block', y:'100%', autoAlpha:1}); } }else { $(recipient).addClass("open"); TweenMax.to(recipient, .3, {display:'block', y:'100%', autoAlpha:1}); } });

Ah! Thanks for the quick response! Sorry it took me so long to get back to this. Thank you for going into detail with how it all works. I'm still new to Javascript, so the learning curve is steep right now. That actually works perfectly. Exactly what I wanted.

It seems that when I attempt to run an animation on a class that is added via jQuery, the animation doesn't run. It seems to me that this is because animations run when : a) the document loads you use a an onclick() to run an animation both of which are out of the option for me. Here is a link to the codepen. You'll notice that when you hit the 'Play' trigger, a class ('open) is toggled on the #search element. When that class is added, I expect the animation to run. It doesn't. Any ideas what I'm doing wrong here? var $search = $("#search") var $open = $(".open") $("#play").click(function(){ $(search).toggleClass("open"); }); TweenLite.to($open, .4, {y:'100%', display:'block'})