TextPlugin and SplitText with PIXI?

[mmontoya 16 Likes (Newbie)]

Given the TextPlugin (or it's sister plugin, SplitText) is meant to work on the DOM, I'm assuming it  won't work inside a PIXI project since all its output lives entirely within a <canvas> tag.  😪

That being said, I'm wondering if anyone knows of a work-around?

[ZachSaucier 6,798 Likes (Superhero)]

Which aspects of the plugins are you needing? I think a minimal demo would help us help you.

[mmontoya 16 Likes (Newbie)]

Thanks Zack!

Diving a little deeper, I discovered it's really no big deal to simply iterate through an array of text, turn it into a PIXI Text Graphics object, then convert that into a Sprite.

This then opens up the possibility of using an animated mask in addition to blur filters and blending modes, which will be useful to achieve the look I am going for: an ink bleeding into paper effect, applied to text loaded at runtime, from a JSON file.

 

[ZachSaucier 6,798 Likes (Superhero)]

Sounds interesting. I'd like to see the result when you're done.

[mmontoya 16 Likes (Newbie)]

In order to achieve the above effect, I need to tween the values of a colorMatrix filter, which are defined as an array of 20 numbers.

 

This post would suggest that it is possible to tween an array: 

But, given it's from 2013, I am unable to find a GSAP 3 example. How might I go about this?

The obvious, doesn't seem to be working for me:
 

let tl = gsap.timeline()
.to(colorMatrix, { duration: 3, ease: 'none', matrix: identMatrix })

/**
 * Where identMatrix is defined as:
 * const identMatrix =
			[
				1, 0, 0, 0, 0,
				0, 1, 0, 0, 0,
				0, 0, 1, 0, 0,
				0, 0, 0, 1, 0,
			];
*/

Many thanks!

 

[OSUblake 14,156 Likes (Superhero)]

There's a built-in plugin for that, endArray.

 

var arr = [1, 2, 3];

gsap.to(arr, {
  endArray: [5, 6, 7],
  onUpdate() {
    console.log(arr)
  }
});

 

 

[ZachSaucier 6,798 Likes (Superhero)]

23 minutes ago, OSUblake said:

endArray

That should be added to the TweenVars object in the TS declarations, correct?

This? endArray?: Array<any>;. Er, I guess any[]

[OSUblake 14,156 Likes (Superhero)]

1 hour ago, ZachSaucier said:

That should be added to the TweenVars object in the TS declarations, correct?

This? endArray?: Array<any>;. Er, I guess any[]

 

Yeah.

[mmontoya 16 Likes (Newbie)]

6 hours ago, OSUblake said:

There's a built-in plugin for that, endArray.

 

var arr = [1, 2, 3];

gsap.to(arr, {
  endArray: [5, 6, 7],
  onUpdate() {
    console.log(arr)
  }
});

 

Thanks so much Blake! That works beautifully, and is exactly what I was looking for!

Where is that documented? I scoured the GSAP 3 docs and was unable to find anything regarding this built-in plugin. My temporary solution was to tween the individual cells in the matrix that needed to change as they converged to identity, but this is obviously a much more elegant solution!  

BTW - if you need help providing examples in order to expand the documentation, I'm happy to provide a Codepen. 🙂

 

 

[ZachSaucier 6,798 Likes (Superhero)]

7 minutes ago, mmontoya said:

Where is that documented?

It's not. Where in the docs would it go? We're open to suggestions.

 

It's mentioned here in the forums a few of times. 

[OSUblake 14,156 Likes (Superhero)]

It is a "core" plugin, so with the other plugins. 

[mmontoya 16 Likes (Newbie)]

2 hours ago, ZachSaucier said:

It's not. Where in the docs would it go? We're open to suggestions.

 

It's mentioned here in the forums a few of times. 

Hmmm, digging through the forums is not ideal - one has to sift through many comments (many of them outdated) to piece together a viable solution.
 

Given it's a special attribute of a Tween, I would expect to find it mentioned there, in the Docs. Perhaps it can be a added to the list of "properties"  under .vars ?

I see it as an extremely powerful property, particularly useful to tween transformation matrices for 3D (but also 2D), giving low-level access to the coordinate space - much too important to have it tucked away in relative obscurity!

Here is a Codepen, showing how I am using the endArray property to create the beginnings of an ink-bleeding effect by Tweening PIXI's ColorMatrix filter:

See the Pen pojMjdL?editors=0010 by montoyland (@montoyland) on CodePen

 

[ZachSaucier 6,798 Likes (Superhero)]

6 minutes ago, mmontoya said:

Here is a Codepen, showing how I am using the endArray property to create the beginnings of an ink-bleeding effect by Tweening PIXI's ColorMatrix filter:

Neat!

[PointC 11,959 Likes (Superhero)]

1 hour ago, mmontoya said:

Here is a Codepen, showing how I am using the endArray property to create the beginnings of an ink-bleeding effect by Tweening PIXI's ColorMatrix filter:

 

I kept waiting for the Harry Potter music. Cool stuff. 👍

[OSUblake 14,156 Likes (Superhero)]

12 hours ago, mmontoya said:

Here is a Codepen, showing how I am using the endArray property to create the beginnings of an ink-bleeding effect by Tweening PIXI's ColorMatrix filter:
 

 

 

This demo needs to be referenced somewhere on this site. 💯

 

 

[ZachSaucier 6,798 Likes (Superhero)]

On 5/29/2020 at 2:49 PM, OSUblake said:

It is a "core" plugin, so with the other plugins. 

Added to the docs https://greensock.com/docs/v3/GSAP/CorePlugins/EndArrayPlugin.