Stream SSE + SplitText. How?

[zadamg]

Hey All,

 

I'd like to combine SplitText with the openai streaming response.  I'm having trouble figuring this out... I've gotten close I feel, and think it's possible and even relatively simple perhaps. I essentially want the tokens to stream in as they do normally, just ideally with a gsap.from(split.words, {}... etc) right on the streaming response and get a 1:1 animation replacement from a typing effect, to a GSAP split text effect.

Has anyone done this?  Particularly in svelte.... 

 

Thanks!

[GSAP Helper]

Hm, I've never done something like that, but if you need help just make sure you provide a minimal demo (like a CodePen) that clearly illustrates the challenge and we'd be happy to take a peek.

 

Or maybe someone else has experience with that and they'll chime in here. 🤔

 

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

[zadamg]

28 minutes ago, GSAP Helper said:

Hm, I've never done something like that, but if you need help just make sure you provide a minimal demo (like a CodePen) that clearly illustrates the challenge and we'd be happy to take a peek.

 

Or maybe someone else has experience with that and they'll chime in here. 🤔

 

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

 

 

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

thanks for the starters.. helpful!

i'll see if i can.. it's not a "minimal" sort of setup.. SSE using the specific streaming response from OpenAI into a parent and a component 😪

[mvaneijgen]

We just want to see your setup in the bare minimum state, so that we can take a look at your setup. Please don't include your whole setup, you could (I think) easily swap out the whole Open AI responses with a few setTimeout in Javascript or any other method. 

 

This is not only the help us, but creating a minimal demo has a big chance of you solving your own issue!

[zadamg]

On 1/4/2024 at 1:57 AM, mvaneijgen said:

We just want to see your setup in the bare minimum state, so that we can take a look at your setup. Please don't include your whole setup, you could (I think) easily swap out the whole Open AI responses with a few setTimeout in Javascript or any other method. 

 

This is not only the help us, but creating a minimal demo has a big chance of you solving your own issue!

for sure.  these starters.. are they easily made typescript friendly?...

[GreenSock]

What starters? The minimal demo ones? You should be able to use TypeScript, sure. I don't see why not, but obviously you'd need to set that up. We try to keep things as vanilla as possible, especially for minimal demos.

 

That error doesn't look like it has anything to do with GSAP. We really try to keep these forums focused on GSAP-specific questions - are there any of those we can help with?