Upgrade GSAP 2 -> 3 SplitText

[BrightStar]

Hello.

 

I am working on a project where we are upgrading from Vue2 (JavaScript) -> Vue3 (TypeScript) as well as GSAP 2.1.2 -> GSAP 3.12.2. We have purchased the license to be able to use SplitText (as the old project did). The project uses several GSAP animations and has a preview. I have been attempting to recreate an animation called "Random Light Bar" (see the video attached from the old project LightBar.mp4) - this uses the function listed in RLB.txt. I have not been able to accurately recreate it. The closest I have gotten is the last video (TestLightBar.mp4). What I cannot reproduce is having the letters "reset" (from new color to white) in a stagger following (see the LightBar.mp4 video). Please help.

RLB.txt TestLightBar.zip

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

The function looked a little odd, by the way. You were referencing a "split" variable that didn't exist. Like let letters = mySplitText[split]

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[lisalynch]

6 hours ago, BrightStar said:

Hello.

 

I am working on a project where we are upgrading from Vue2 (JavaScript) -> Vue3 (TypeScript) as well as GSAP 2.1.2 -> GSAP 3.12.2. We have purchased the license to be able to use SplitText (as the old project did). The project uses several GSAP animations and has a preview. I have been attempting to recreate an animation called "Random Light Bar" (see the video attached from the old project LightBar.mp4) - this uses the function listed in RLB.txt.  I have not been able to accurately recreate it. The closest I have gotten is the last video (TestLightBar.mp4). What I cannot reproduce is having the letters "reset" (from new color to white) in a stagger following (see the LightBar.mp4 video). Please help. geometry dash unblocked

RLB.txt 872 B · 1 download TestLightBar.zip 2.82 MB · 0 downloads

I've never had this problem before, I don't know if you have a solution

[BrightStar]

Here is the URL to the StackBlitz I created:

 

https://vue-c3fvzr.stackblitz.io

 

I added "Fade Out" to demonstrate that the code works for SplitText (we use 10 different split text animations, they all work except the Light Bar).

 

Please let me know if you can help -> I really need to figure out why the code does not work the same way as the previous version OR how to implement something else that works the same.

 

Thanks.

[GreenSock]

I assume you meant to do this: 

gsap.to(getSplitTextTargetByType(splitTextElement, split), {
  duration: effect,
  color: color,
  immediateRender: false,
  stagger: {
    each: stagger,
    repeat: 1,
    yoyo: true,
  },
  onComplete: function () {
    splitTextElement.revert();
  },
});

Right?

 

https://stackblitz.com/edit/vue-2uetg4?file=src%2FApp.vue

[BrightStar]

Thanks.

 

That was 100% the solution I was looking for.