Jump to content
Search Community

TextPlugin and SplitText with PIXI?

mmontoya test
Moderator Tag

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

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

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

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

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

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.
×
×
  • Create New...