Hashira

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