Focus not visible on click of tab(not animating to the focusable element)

[ElephasHyd]

Hi all,

 

I'm experiencing an accessibility issue where, upon pressing the tab key, the focus shifts to a link element, but the animation pauses, and the focus is not immediately visible on the page. The focus becomes visible only after the animation completes. I attempted to seek a solution but was unable to find one anywhere.

 

You can observe this behavior in the provided CodePen demo, which serves as an example of my animation implementation. Is it possible to ensure that the animation continues until the focused element is visible? Alternatively, could there be an issue with my code? I would appreciate any suggestions for better approaches to address this accessibility issue. And why I am writing code this way(fromTo) is when I remove gsap code, design is in end state already and I will use the same design to handle animation reduced motion with animation on/off button in site.

Font resize solution (codepen.io)

Thanks for your help again.

See the Pen RwdqVQL by ElephasHyd (@ElephasHyd) on CodePen

[GreenSock]

That's beyond the scope of help we can generally provide in these free forums, but if you want to force it to scroll to the end of the ScrollTrigger, you could use the ScrollTrigger's "end" value and plug that into a window.scrollTo(), like this: 

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

[ElephasHyd]

Thank you once more, Jack, for your assistance; it has been incredibly helpful and the solution is running seamlessly. While the current solution which you have provided is very effective for shorter animations(and exactly what I needed right now) with clearly defined end points, I guess its not suitable for longer and more complex animations.

 

Much gratitude 🙏

[GreenSock]

13 hours ago, ElephasHyd said:

I guess its not suitable for longer and more complex animations.

I'm not sure why it wouldn't be. Pretty much anything is possible with enough elbow grease. We do offer paid consulting services if you need that - just contact us for scheduling/pricing.