Jump to content
GreenSock

mmontoya

TextPlugin and SplitText with PIXI?

Recommended Posts

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?

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

 

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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!

 

Link to comment
Share on other sites

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)
  }
});

 

 

  • Like 6
Link to comment
Share on other sites

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[]

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.¬†ūüôā

 


 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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




 

  • Like 5
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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.¬†ūüĎć

  • Like 1
  • Haha 1
Link to comment
Share on other sites

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. ūüíĮ

 

 

  • Like 3
Link to comment
Share on other sites

  • 4 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
√ó