Jump to content
GreenSock

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

Convoluted code

Recommended Posts

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

});

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

Link to post
Share on other sites

Thanks for the demo.

 

I think if you take a look at my answer and demo here: http://greensock.com/forums/topic/14317-interaction-by-reversing-and-playing-timeline/?p=60834

You'll find that you can do these "open and close" type animations with a lot less code.

 

When you view the demo just rollover each heading and it will play an animation and reverse the currently "open" one. This is accomplished by giving each element its own animation (timeline) and keeping track of the currentAnimation.

 

The concept of giving each element its own animation is discussed here as well:

http://greensock.com/forums/topic/14441-calling-timelines-nested-within-a-function/?p=61485

 

 

Link to post
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.

×