Hashira

Thank you @Rodrigo I have been able to solve the issue, but your explanation nudged me in the right direction on solving the issue. Since I had to wait for GSAP instance to complete running. I was able to solve this by putting the test assertion in a waitFor function. So by doing this await waitFor(() => { const element = screen.getByText("String") expect(element).toHaveAttribute("aria-current", "page") }) All test passed

Hi there, So I am using gsap for animation in a NextJs project and there are some component that has little animations that I am trying to test. To be direct I stimulate a user click interaction in the test and check to see if the "aria-*" attribute or "data-*" attribute has been updated to the correct state when the animation is done but all test fails. I am using the gsap `.then` callback to trigger this update when the animation is done. It works fine in the dev and prod env but the `.then` callback function fails to run in a test env. I have created a minimal demo of my issue, please find the link below https://stackblitz.com/edit/stackblitz-starters-mvcff3?file=app%2Fpage.test.tsx Thank you.

Wow Yes it does, thank you so much

Hi, i'm so sorry for the late reponse this was due to work, i have created the minimal demo you requested for. The URL: https://stackblitz.com/edit/nextjs-9trqb6?file=app%2Fpage.tsx Also i will like to bring to your notice that i think i found what might be the issue. I keep getting this error in the console when ever i register gsap ScrollTrigger: Open the stackblitz project in a port and check the browser console, you should see the error there Also i realized that in component where i didn't use scrollTrigger trigger or register it, i dont get this error and the returned function in gsap context gets called. I suspect this might be an issue with the new NextJs 13 App Router with gsap.

Ohh thanks for the response, i will create the minimal demo and revert once i get home

Hi there, i just need clarification on this as i can't find anything explaining it in the documentation. Firstly The instance object returned after calling gsap.context has a "clear" method, please i would like to know if what it does is clear all the functions that was added into the context with the "add" method. Secondly, the docs says "You can return a clean up function in any .add() function too; They'll all get called when the Context's revert() is invoked." i'm doing this and my clean up in the add functions isn't getting called. Yes i'm calling the ctx.revert in the useLayoutEffect cleanup. This some snippet of my code. useLayoutEffect(() => { animationsEffect.current = new UiAnimations(ctx, styles); animationsEffect.current.init() return () => { // clean up ctx.revert(); if (animationsEffect.current) animationsEffect.current.dispose() }; }, [ctx]); export default class UiAnimations { gsapCtx: gsap.Context; styles: any; scrollTriggerRefs!: globalThis.ScrollTrigger constructor(gsapCtx: gsap.Context, styles: any) { this.gsapCtx = gsapCtx; this.styles = styles; // Bind all method to this context this.cardsAndContentAnim = this.cardsAndContentAnim.bind(this); this.onResize = createDebounceFunc(this.onResize.bind(this), 250); window.addEventListener("resize", this.onResize); } init() { this.gsapCtx.add(this.cardsAndContentAnim); } cardsAndContentAnim() { const WrapperEl = document.querySelector(`.${this.styles.wrapper}`) as HTMLElement; const cardsWrapperEl = document.querySelector(`.${this.styles.cards}`) as HTMLElement; const contentWrapperEl = document.querySelector(`.${this.styles.content}`) as HTMLElement; const tl = gsap.timeline({}) // Animate tl.to( contentWrapperEl.children, { translateY: 0, ease: "power3.out", duration: 1, clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", stagger: 0.3 }, ).to( cardsWrapperEl.children, { translateY: 0, translateX: 0, autoAlpha: 1, duration: 2, stagger: 0.3 }, "<+=0.5" ) // Create gsap scrolltrigger with timeline this.scrollTriggerRefs = ScrollTrigger.create({ trigger: WrapperEl, animation: tl, start: "top 80%", end: "bottom bottom", markers: true }) // Not getting called return () => { do some clean up } } onResize() { // refresh all markers positions this.scrollTriggerRefs.refresh() } dispose() { // Kill all scrollTrigger Animations if (this.scrollTriggerRefs) { this.scrollTriggerRefs.kill() } // clear event listners window.removeEventListener("resize", this.onResize) } } Please i'm lost to what i'm doing wrong