jordank

OK, basic idea is accordion drawers are display: none; unless the component is open, opening or closing. Then it is display: block;. https://codesandbox.io/s/accessible-gsap-accordion-m4yjj2

Haha, yes I meant display: none. Too much tailwind is messing with my head. Yeah good point about everything having issues going from display: none; and height: 0; to display: block; and height: auto;. I may revisit this with that in mind, thanks!

It seems like toggling between display: block; and display: hidden; won't work. From what I can tell GSAP is unable to figure out an elements height if its display is set to hidden and it or its children contain vertical padding. If anyone has any thoughts on whether the above is true or not I'd be curious to hear. Toggling between display between block and hidden is, from what I can tell, the best and recommended way to hide something fully and cleanly that shouldn't be seen by screen readers or tabbed to using tab navigation. The best work around I've found so far involves setting inert and aria-hidden on the accordion drawer when collapsed. In any case, it seems like the accordion posted in this message is meant to be the "official gsap demo" of how to build an accordion. If so I might recommend updating it so it's more accessible since right now it: Can't be interacted with using tab navigation. This can be fixed by changing the accordion trigger to a button. Links in the accordion drawer can be focused when the drawer is collapsed which breaks tab navigation. This could potentially be fixed by setting inert and aria-hidden on the drawer as appropriate whether its open or closed. Haven't fully vetted this yet but seems like an option. As always, continuing to enjoy the library and the extremely helpful and kind forums members!

Interesting! So one thing I mean by accessibility is like in your example if there is a link in one of the accordion drawers it can receive focus via tab navigation as it is now. I created a demo from your example. I replaced the accordion triggers with button elements and added a link in the first accordion drawer. To recreate try this. Focus the first button with tab navigation. Hit tab. You are focusing the link inside the first accordion drawer. This would be the accessibility issue I think. So that is why I'm switching the display between block and hidden in my example but maybe there is a better way? It doesn't seem like aria-hidden: true; would work here since the children could be links. Maybe adjusting tab index combined with aria-hidden would work. https://codepen.io/jordank/pen/ZEmRWZX

I've created a simplified demo of the accordion in question. As you can see when you collapse or expand the animation jumps a bit. This seems to be related to the padding: 20px 0; and display: none; on .accordion-drawer. I'd like to keep these properties as display: none; is used for accessibly hiding the drawer. Padding is just for, well, padding. Any thoughts? If there's another pattern for GSAP accordions that sidesteps these issues would love to see it! https://codesandbox.io/s/gsap-accordion-9c92sf

@Shaun Gorneau Wonderful! Hah, yes I was implementing this in my actual code and hit the exact roadblock you solve for above; great forethought! Thanks so much!!

Bingo, thanks a ton!!!

In the attached codepen I've got a child timeline that I'd like to loop X amount of times by using a function call. Then I'd like to continue playing through the rest of the timelines in the master timeline. I know this would be easy using Timeline Max but I'm trying to figure it out using just Timeline Lite. In the function call I'm trying to replay the calling timeline by using this.restart but I'm not having any luck. I've been poking at this for a while, trying different things with the .call scope, but without any luck. Anyone have any ideas? Thanks!

Thanks for taking a look! Yoyo seems ideal but delayedCall will work for what I need!

The functionality I'd like is (using TimelineLite) to play a timeline, wait, then reverse that timeline. The codepen attached is the exact functionality I'm looking for but using a setTimeout. Is there a way to accomplish this without using a setTimeout? I was thinking something like the following but that is not working. tl.play.delay(2).reverse() Thanks!

Kurrent Kurt thanks that solved my issue working on some old HTML ads that needed to be re-run through DoubleClick Campaign Manager.