Vue/Nuxt3 Split Text Cleanup practice when using gsap.register Effect

[Windpixel]

Just had a quick logic question about where to start storing tweens so we can revert them later when using gsap.registerEffect.

 

I'm familiar with the cleanup process of split text objects which from reading this forum, which as of ~Nov 22 aren't supported directly in via gsap.context for cleanup, so currently we need to store them as tweens then cleanup:

Eg.
Cleanup = []
cleanup.forEach((obj) => obj.revert());
cleanup.length = 0;

cleanup.push(split1, split2);

Do I need to storing tweens in an array inside of my gsap.registerEffect code? then return those tweens into the 'child code' or can I just leave the entire

gsap.registerEffect untouched (preferrered as I access this a lot) and just modify the code that calls the register effect?


Eg. "splitReveal" is a registered effect, in some child code.

    entrytl.splitReveal(".hero_text1", { rotation: 5 }, 0)
      .splitReveal(".hero_title", { rotation: 5 }, 0.2)
      .splitReveal(".hero_text2", { rotation: 5 }, 0.5);


/** Below

 

export const gsapEffectSplitReveal = () => {
  // Define the splitReveal effect
  gsap.registerEffect({
    name: "splitReveal",
    extendTimeline: true,
    defaults: {
      rotation: 5,
      stagger: 0.2,
      duration: 2,
      ease: "power4.out",
    },
    effect: (targets, config) => {

      let splitLines = new SplitText(targets, {
        type: "lines",
        linesClass: "split-child-lines"
      });
      let splitMask = new SplitText(targets, {
        type: "lines",
        linesClass: "split-child-lines-mask"
      });
      gsap.set(splitLines.lines, {
        transformOrigin: "bottom 0%" // Corrected syntax here
      });

      return gsap.from(splitLines.lines, {
        opacity: 0,
        duration: config.duration,
        ease: config.ease,
        yPercent: 100,
        rotation: config.rotation,
        stagger: config.stagger
      });
    }
  });
};

 

export const pageEntryAnimationFirst = () => {
  // Declare variables to store the timeline and cleanup function

    entrytl = gsap.timeline();

    gsap.set('.hero_text', {
      transformOrigin: 'center center',
    });

    entrytl.to('.hero', {
      yPercent: 0,
      clipPath: "polygon(0 0%, 100% 0%, 100% 100%, 0% 100%)",
      duration: 1,
      rotation: 0,
      ease: ease2,
    });

    entrytl.set(".hero_text, .hero_title", { opacity: 1 });

    entrytl.splitReveal(".hero_text1", { rotation: 5 }, 0)
      .splitReveal(".hero_title", { rotation: 5 }, 0.2)
      .splitReveal(".hero_text2", { rotation: 5 }, 0.5);

    entrytl.play();


  };

No minimal demo on this one sorry, just hoping for a quick point in the right direction and I can build the code myself  Thanks in advance.

[GreenSock]

42 minutes ago, Windpixel said:

which from reading this forum, which as of ~Nov 22 aren't supported directly in via gsap.context for cleanup

That statement confused me. SplitText is supported directly in gsap.context(). I don't see a reason for you needing to store references to all the instances.

 

If you're running into a challenge or unexpected behavior, please do provide a minimal demo - that'll be a huge help in us wrapping our heads around what you're trying to do

[Windpixel]

1 minute ago, GreenSock said:

That statement confused me. SplitText is supported directly in gsap.context(). I don't see a reason for you needing to store references to all the instances.

Ahh ok, sorry, maybe i'm reading outdated forum context.

So I should be able to just wrap everything in and it should be able to revert? I'll get working on a min dem.
 

ctx = gsap.context(() => {
 

// All splitText stuff
 

}, ref.value);

 

// Later do the cleanup

ctx.revert();

[GreenSock]

Yep, exactly. Perhaps there's some kind of complex scenario or edge case that you've got that'd need some extra elbow grease. When gsap.context() first came out, SplitText wasn't context-aware, but we resolved that relatively quickly. So just make sure you're using recent versions of GSAP/SplitText hopefully you should be golden. 👍

[Windpixel]

1 minute ago, GreenSock said:

Yep, exactly. Perhaps there's some kind of complex scenario or edge case that you've got that'd need some extra elbow grease. When gsap.context() first came out, SplitText wasn't context-aware, but we resolved that relatively quickly. So just make sure you're using recent versions of GSAP/SplitText hopefully you should be golden. 👍

Thanks Jack

[Windpixel]

Ok. I went away and played around and this works flawlessly.

Ok, went away. All working fine.

So to answer my questions, yep, you can gsap register effects elsewhere tap into them, use gsap.context for the clean up.

I have window resize helper (Not shown which) will run the cleanup function and re-fire the setup.

Its magic Thanks Jack
 

export const pageEntryAnimationRevisit = () => {
  // Declare variables to store the timeline and cleanup function
  let entrytl;
  let playedAnimation = false;
  let firstVisit = false
  let ctxSplits;

  const playRevisitAnimation = () => {

    ctxSplits = gsap.context(() => {

    entrytl = gsap.timeline();

    gsap.set('.hero_text', {
      transformOrigin: 'center center',
    });

    entrytl.set(".hero_text, .hero_title", { opacity: 1 });

    entrytl.splitReveal(".hero_text1", { rotation: 5 }, 0)
      .splitReveal(".hero_title", { rotation: 5 }, 0.2)
      .splitReveal(".hero_text2", { rotation: 5 }, 0.5);

    entrytl.play();

    playedAnimation = true;
    firstVisit = false;

  }, content.value);

  };

  const heroRevisitCleanup = () => {
    ctxSplits && ctxSplits.revert();
  };


  return { playRevisitAnimation, heroRevisitCleanup };
};