What Does the 'clear' method on Gsap Context Instance Do ?

[Hashira]

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

[GreenSock]

7 hours ago, Hashira said:

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.

No, and you shouldn't generally use undocumented methods. That's more for internal use than anything. clear() in a Context makes it forget all of the animations/ScrollTriggers/Draggables/Observers that were associated with that Context instance. It's hard to imagine why you'd ever need or want to use that. 

 

7 hours ago, Hashira said:

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.

It's tough to troubleshoot without a minimal demo. Can you please provide one that clearly shows the issue so we can tinker? I suspect you've got something else going on in your code that's causing the problem. Here's a Stackblitz starter template with React that you can fork: https://stackblitz.com/edit/react-cxv92j

 

Once we see the demo, I'm sure we'll have some insight. 

[Hashira]

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

[Hashira]

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.

 

[GreenSock]

That's a weird Next.js issue - all you need to do is move this line inside your useIsomorphicLayoutEffect(): 

gsap.registerPlugin(ScrollTrigger);

Does that resolve things for you? 

https://stackblitz.com/edit/nextjs-hifvaj?file=components%2FGsapAnimatedSection.tsx

[Hashira]

Wow Yes it does, thank you so much