GSAP conditional logic tween

[Daniel Hult]

Hey guys,

I have an accordion where I want to have one of the accordion items open and the rest closed. In the codepen link, as you can see the one accordion item that is open doesn't have the smooth animation as the others. Could I somehow tell gsap "if the item is open, reverse the animation" in a way? Or just any guidance would be really appreciated  

See the Pen WNbPMzB by daniel-hult (@daniel-hult) on CodePen

[ZachSaucier]

Hey Daniel,

 

A few notes:

• I'm not really sure why you're using a timeline there.
• I'd also consider using GSAP's ability to animate to a height of "auto" if possible. But browsers don't report the height of the container including the margin on the paragraph being appended because of margin collapsing, so I modified the CSS to use a little CSS hack to make it include them.
• I updated the ease to use GSAP 3's correct string form of eases.
• I'm not sure exactly why you're using keyframes. I used a fromTo (maybe that's pretty much what you were wanting to accomplish?).
• I changed your logic regarding ones shown on page load to work with the animation better. 

In summary, the approach I am using just uses a set tween for each element and controls it based on the attribute and click event. Simple, straightforward  

See the Pen bGNzKZP?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Other ways to work around the margin collapsing: https://stackoverflow.com/a/19719427/2065702