mmontoya Posted May 28, 2020 Share Posted May 28, 2020 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 More sharing options...
ZachSaucier Posted May 29, 2020 Share Posted May 29, 2020 Which aspects of the plugins are you needing? I think a minimal demo would help us help you. 1 Link to comment Share on other sites More sharing options...
mmontoya Posted May 29, 2020 Author Share Posted May 29, 2020 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. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 29, 2020 Share Posted May 29, 2020 Sounds interesting. I'd like to see the result when you're done. 1 Link to comment Share on other sites More sharing options...
mmontoya Posted May 29, 2020 Author Share Posted May 29, 2020 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 More sharing options...
OSUblake Posted May 29, 2020 Share Posted May 29, 2020 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) } }); 6 Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 29, 2020 Share Posted May 29, 2020 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 More sharing options...
OSUblake Posted May 29, 2020 Share Posted May 29, 2020 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. 1 Link to comment Share on other sites More sharing options...
mmontoya Posted May 29, 2020 Author Share Posted May 29, 2020 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 More sharing options...
ZachSaucier Posted May 29, 2020 Share Posted May 29, 2020 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 More sharing options...
OSUblake Posted May 29, 2020 Share Posted May 29, 2020 It is a "core" plugin, so with the other plugins. 1 Link to comment Share on other sites More sharing options...
mmontoya Posted May 29, 2020 Author Share Posted May 29, 2020 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 5 Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 29, 2020 Share Posted May 29, 2020 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! 1 Link to comment Share on other sites More sharing options...
PointC Posted May 29, 2020 Share Posted May 29, 2020 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. 👍 1 1 Link to comment Share on other sites More sharing options...
OSUblake Posted May 30, 2020 Share Posted May 30, 2020 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. 💯 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 23, 2020 Share Posted June 23, 2020 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now