[GSAP, ScrollTrigger and accessibility via tabindex]

Thank you so much, @Cassie

[GSAP, ScrollTrigger and accessibility via tabindex]

26 minutes ago, OSUblake said:

 

That would be helpful to see the issue at hand, especially if you are scroll jacking, which would mean the browser isn't in control of setting the scroll position.

 

Great, added. Hopefully it clarifies.

[GSAP, ScrollTrigger and accessibility via tabindex]

Hi all,

 

Question about best practices with a11y and gsap:

 

I'm using ScrollTrigger to 'scroll-jack' a section of my page. The problem is, when I am testing tabbing through my page, the viewport 'hangs' at this section (which I've set to tabindex of -1, FWIW), even as my tabbing goes further and further down and off the viewport.

 

Is there a silver-bullet, catch-all solution to this sort of issue?

 

Thank you in advance.

See the Pen WNOBqXB by scallemang (@scallemang) on CodePen

[Conflict(?) between ScrollTrigger pinned section & MenuSpy]

@GreenSock That helps a tremendous amount, thank you. I hadn't heard of this library previously either, but Google led me to it before to ScrollTrigger... Thank you for illuminating that I don't need it at all and can just use gsap. Very best wishes.

[Conflict(?) between ScrollTrigger pinned section & MenuSpy]

Thank you for your patience, @Cassie. I've stripped it down, hopefully enough to be usable. Updated link above, or below as well – you might ask why the negative margin on the neighbouring div. Before I did that I was getting a big white space because of my transforms, seen at the very end of this screen capture (though for all I know there's a better way to solve that too): .

[Conflict(?) between ScrollTrigger pinned section & MenuSpy]

Of course, I'll do just that and reply ASAP

[Conflict(?) between ScrollTrigger pinned section & MenuSpy]

Hi there GreenSock community,

First time working with GSAP so I hope you'll forgive any sloppiness on my part.

 

The issue is that, as I scroll, the menu is updating sooner than it should. Again, I'm assuming that this is because I have moved things -315px during my animation, but am not sure how to correct this. Any advice would be so appreciated.

 

A stripped down/clunky version of this is at the CodePen link. And/or you can see the 'actual' staging front-end at http://endera.ctclients.ca/.

 

Thank you.

See the Pen zYzEGZj by scallemang (@scallemang) on CodePen