Accordion Flip with Timeline on open

[intex]

I want to add a timeline animation to an accordion open click and am relatively happy this Pen works fine.  However I can't help but feel how I determine the accordion is opening or closing is hacky.  Also I feel I should using this:
var accordion_tl = gsap.timeline({paused:true});

 

And then this where my current timeline is:
gsap.timeline().add(accordion_tl.play());

 

But anything I try doesn't work as I want.  The current code does exactly what I want but curious to know if there is a better implementation.

See the Pen bGMWJPy by paulc123 (@paulc123) on CodePen

[Rodrigo]

Hi,

 

This seems to be more concise and perhaps closer to what you're trying to do:

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

 

Also I added this particular part to prevent a click event while the content Flip animation is happening:

if (Flip.isFlipping(el.querySelector(".accordion-content"))) {
  return;
}

Normally is a good idea to store animations that can be toggled several  times in a constant or variable so you can play/reverse them without any issues. This is a more particular case though since Flip has to do a few other things, so it's a good idea to use fromTo instances to prevent odd ending values when the toggle action is triggered too many times.

 

Happy Tweening!!!

[intex]

Wow thanks Rodrigo, that is so much neater than before.  I have used fromTo before so should have thought of that.  But isFlipping I haven't seen, and can see how useful it is.  I did wonder whether storing the animation was correct and tried gsap.timeline().add(textTL.reverse(0));  But obviously I don't want to reverse it, just close the accordion.  Anyway you've made everything clear.

 

Much appreciated!!!