Jump to content
GreenSock

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

majofski

Members
  • Content Count

    11
  • Joined

  • Last visited

Community Reputation

0 Newbie

About majofski

  • Rank
    Member
  1. 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
  2. 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!!!
  3. 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;
  4. 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 $re
  5. 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.
  6. 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.
  7. 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"
  8. 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 Trigg
  9. majofski

    Convoluted code

    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-targe
  10. 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.
  11. 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").cl
×