Accordion Menu that Triggers Animation Events

[hilarync]

Hi there! I'm a total newbie but already enjoying playing around with Greensock. 

 

I'm working on an accordion menu, and this is the behavior I'm going for:

1. User clicks on a menu item.

2. Menu item's panel is revealed.

3. A sequence of three animations is triggered within that one panel.

4. User clicks to collapse menu item and the whole thing is reset. 

 

Right now, the fader animation I have on animEvent is triggered on window load and subsequent user clicks change nothing. I'm thinking I need to use TimelineLite to start the animation when the specific menu item is clicked. But I'm very new to this and would appreciate someone pointing me in the right direction.

 

Thanks!

Hilary

See the Pen OgyMWr by hilstod (@hilstod) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

There many different ways to accomplish this but I think in general you should have 1 animation that opens and closes the panel and another one handles the sequence of things coming on screen. If they are all in one timeline it will get awkward when someone tries to close a panel and the sequence needs to reverse before the panel closes.

 

I have a demo for you that illustrates the concept of each button having its own openAnimation (for opening panels) and introAnimation (for introducing child elements in sequence). The trick here is that I'm using delayedCall() to trigger the introAnimation 0.5 seconds after a panel starts opening.

 

There are probably better ways of setting up the code and organizing things but I just slammed everything into one jQuery each() function that runs on each button. Perhaps the demo below will be of some help. Unfortunately we can't walk you through each step or spend a lot of time getting this to match your exact specs. Our support usually stays much more focused on the GreenSock API and not so much functionality like this.

 

See the Pen YQyQWq?editors=1010 by GreenSock (@GreenSock) on CodePen

 

If you search Google for GSAP accordion you will probably come across some other approaches.

[hilarync]

Wow, I am beyond grateful for your help on this! This is exactly the animation effect I was looking for. 

Thank you! 

[hilarync]

Okay, I have been playing around with the accordion code from your pen and trying to add timelines to it. I have a couple things that I just don't understand even after tons of searching the documentation and forums:

1. I want the clouds to always be drifting, so I made my looper function. But I have a feeling there is a better way to loop the clouds?
2. Ideally I want each panel to have its own unique animated art. As of now, if the first panel is open, and you click the second button, weird things are happening. It looks like the "Measurable Impact" section just goes away. I assume I need separate timelines for each panel. I tried to use ".append" to add another timeline to the introAnimation, but I can't figure out how to assign a different timeline to each panel. If this is just way beyond the scope of help here please excuse my ignorance and feel free to ignore this question .
3. With GSAP, do you have to use inline SVG code to target an element of an SVG for animation? 

Thanks again for all your help!

 

See the Pen BZzjEP by hilstod (@hilstod) on CodePen

 

[Carl]

First, great job on the progress you have made with the accordion.

 

To make your cloud animation repeat, you can use TimelineMax which supports repeats:

var cloudAnimation = new TimelineMax({repeat:-1})
      cloudAnimation.to(".panel0 path#cloud1", 1, {x:100}, 0)
      .to(".panel0 path#cloud2", 1, {x:-50}, 0)
      .to(".panel0 path#cloud1", 1, {x:0})
      .to(".panel0 path#cloud2", 1, {x:50}, '-=10');

 

It would take too much time to try to figure out how to work with the code so I decided to make a simpler demo that shows how you can "assign an animation to button (or panel)". Additionally it shows how you can keep track of the currentAnimation (in your case the open panel's animation) and reverse it when you press another button.

var currentAnimation;
var greenButton = document.getElementById("playGreen");
var orangeButton = document.getElementById("playOrange");
//create timelines for colored boxes
var greenAnimation = new TimelineMax({paused:true})
greenAnimation.to(".green", 1, {y:100});
var orangeAnimation = new TimelineMax({paused:true})
orangeAnimation.to(".orange", 1, {y:100, rotation:360});
//assign each button an animation property
orangeButton.animation = orangeAnimation;
greenButton.animation = greenAnimation;

$("button").click(function(){
  //if an animation is currently running reverse it.
  if(currentAnimation) {
    currentAnimation.reverse();
  }
  
  //set the currentAnimation to whatever this button's assigned animation is
  currentAnimation = this.animation;
  //play the animation
  this.animation.play(0)
})

 

See the Pen NgrEWP by GreenSock (@GreenSock) on CodePen

 

When I made the first demo for you I built everything with a loop just be quick, but hopefully this shows how each animation can be different.

 

--

 

Yes, svgs do need to be inline. Yes, that makes you html code ugly. You can load the svg via ajax / jquery and then place it in your html as an inline file. This keeps your source code neat. Follow Blake's suggestions here: 

 

 

 

 

 

 

 

[hilarync]

Carl,

 

I wanted to share my final draft of this project with you. Your replies have been such a huge help for me and I wouldn't have been able to do this without you.  I'm still working on tweaking animations and certain browser bug fixes, but I've come a long way with this and I'm extremely grateful for the knowledge you shared. 

 

See the Pen EXNXNm by hilstod (@hilstod) on CodePen

 

 

[Carl]

Thanks for sharing. Great to see you were able to run with my suggestions.