jordank
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by jordank
-
-
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;
andheight: 0;
todisplay: block;
andheight: auto;
.I may revisit this with that in mind, thanks!
-
It seems like toggling between
display: block;
anddisplay: 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
andhidden
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
andaria-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
andhidden
in my example but maybe there is a better way?It doesn't seem likeMaybe adjusting tab index combined with aria-hidden would work.aria-hidden: true;
would work here since the children could be links. -
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;
anddisplay: none;
on.accordion-drawer
. I'd like to keep these properties asdisplay: 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!
-
@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!!
- 1
-
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!
See the Pen OoMPXp?editors=0010 by jordank (@jordank) on CodePen
-
Thanks for taking a look! Yoyo seems ideal but delayedCall will work for what I need!
- 1
-
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.
What am I messing up in this accordion? Stutter related to child padding?
in GSAP
Posted
OK, basic idea is accordion drawers are
display: none;
unless the component is open, opening or closing. Then it isdisplay: block;
.https://codesandbox.io/s/accessible-gsap-accordion-m4yjj2