Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
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 post
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 post
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 post
Share on other sites

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

  • Like 1
Link to post
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 post
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 post
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 post
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 post
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 post
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 post
Share on other sites

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

  • Like 1
Link to post
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 post
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 post
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 post
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 post
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.

√ó