Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Everything posted by mmontoya

  1. This is great! Thanks for sharing. I think the bottleneck in my example was due to having to calculate the positions of all those particles in 3D space on the CPU and then doing a projection into screen space. Time to roll up my sleeves and learn about vertex/fragment shaders!
  2. In fact, in the end, I animated the explosion in Houdini and rendered it as a sprite sheet which I can vary with hue shift and scale. This gave me the most artistic control and best performance. (I attached a frame from the sequence, below). Great resource, BTW! I was not aware of shadertoy - lots of great examples to pick apart!
  3. In the end, the requirements for this changed - it longer needs to be scrubbable, just interactive, which simplifies things a bit, as I no longer need to tie the animation's progress to a playhead. Nevertheless, it seems plausible to drive the "update" function, which receives a heartbeat from GSAP's ticker, with a progress event instead, and then scale that by whatever the total length of the desired animation might be. I could then set the rockets to fire at predetermined moments in time and call that function from within a GSAP timeline. Here's a Codepen of what I worked out:
  4. Nice! (Great minds think alike! ) As mentioned above, I will use PIXI particles and will likely calculate my own physics, as all I really need is to scale acceleration as a function of time (no need for bouncing or collisions). My thought was to calculate the coordinates in 3D space and then do the math to project onto a 2D plane in order to have that nice Sideshow Bob, volumetric look:
  5. My thought was to use parametric equations so that the motion of the particles was a function of t. For example, if I wanted to do some simple ballistics, I could move a particle on the screen in a parabolic trajectory defined by: If I use the scrubber as the input to t, I could then scale t (total length) by whatever amount I find most reasonable. The only precondition, as you suggest, is that the duration be known at the start, but this is fine, as I can tweak the total length until the timing seems appropriate. So for example, using a sin or modulus function, with an inp
  6. I am looking to have the best of both worlds: I would like to procedurally create an animation of exploding fireworks, but I would also like that animation to be scrubbable via GSAP. I'm not quite sure how to tackle this. My intuition tells me that I need to parameterize the procedural animation as a function of time, so that I can then use GPSAPs "progress" to drive the whole thing. Does anyone know of any examples I might examine that uses such an approach?
  7. @OSUblake Thanks! That is very useful! I confess I wasn't aware that the index of the currently iterated element was available within the tween! @ZachSaucier Another excellent tip! I had no idea the relative syntax was also available on properties! Thanks! That makes for very compact code! Thank you both for making learning GSAP such an enjoyable experience - It's been a real pleasure learning GSAP! (In no small part due to the excellent community on here). Now that I have discovered it, I don't know what I'd do without it!
  8. Nevermind... I basically answered my own question even as I wrote it. For others coming across this edge case, everything works as you might expect because, in the end, we are using plain javascript, so the solution was quite simple: I simply created my own custom stagger using the map function for an array of Sprites, setting up each tween by taking on the "<0.3" syntax at the end of each one! You gotta love GSAP because it just works! I know I do! Here's a code snippet with my solution, in case anyone encounters this: shipSprites.map((ship, index) => { scene.timeline
  9. Hello Folks, I have a specific case which I am not sure how to handle: I have an array of PIXI Sprites that I would like to stagger to another set of X, Y coordinates. While they each have specific start coordinates assigned to them, their destination coordinates are defined by an offset from a target destination point. The effect that I want is for the sprites to tween in formation - think of a squadron of planes, or a vee of geese, flying together in formation. What I need to accomplish this, then, would be not unlike the map function where I can iterate through an array of objects,
  10. 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
  11. 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. ๐Ÿ™‚
  12. 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,
  13. 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.
  14. 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?
  15. My pleasure! Looking forward to the release! ๐Ÿ™‚
  16. I am working on a Typescript PIXI project, using GreenSock as my animation engine, and in setting up a function to jump to a specific label in a Timeline, my IDE complained that the play() function only accepts numbers... A check of the Typescript definitions shows that Timeline inherits from Animation, and sure enough, in the interface for the Animation class, play() is defined as: play(from?: number | null, supressEvents?: boolean): this; I'm assuming, that if I update the definition to: play(from?: number | string | null, supressEvents?: boolean): this;
  17. Hahaha! Glad to see my instincts were right about extending the Sprite Class... ๐Ÿ™‚ I suppose I'm always a bit wary of hacking someone else's code because experience has shown me that, unless you really understand its internals quite well, you're likely going to code yourself into a mess when things start to break (which they always do, as per Murphy's Law) and this can suck untold hours of your time in order to solve, which can be quite nerve-wracking when you've got a deadline! I am using Typescript , so it's not as easy as adding the extra properties to the prototype object as you mi
  18. Thank you so much, Zach! That was totally it! (I didn't realize the values needed to be wrapped in a pixi object ๐Ÿ™„). You're my green-caped hero! ๐Ÿ™‚ Thank you, also, for taking the time to provide a CodePen - I have learned so much from them! Really loving this community! ๐Ÿ˜
  19. Thank you, Zach! A console.log does indeed show it is of type PIXI.Sprite (so the scale: {x: number, y: number}) property does exists on it. Sprite {_events: Events, _eventsCount: 0, tempDisplayObjectParent: null, transform: Transform, alpha: 1, โ€ฆ} If I am unable to get to the bottom of this, is there an alternative way to Tween the properties of an array of Sprites? This currently works, but I would also like to animate the scale.x and scale.y properties together with the alpha: // this.navigationDots is an array of PIXI.Sprites gsap.to(this.navigat
  20. Hi Blake, I'm new to GSAP and really enjoying the power that comes with it! I am working on a PIXI typescript/webpack project as well and in tweening the scaleX and scaleY properties, I am getting the same error as @spassvogel, despite having imported the packages in the manner you suggested above: import * as PIXI from 'pixi.js'; import { gsap } from 'gsap'; import { PixiPlugin } from 'gsap/PixiPlugin'; gsap.registerPlugin(PixiPlugin); PixiPlugin.registerPIXI(PIXI); The error I am getting is: Invalid property scaleX set to 0 Missing plugin? gsap.registerPlugin() I am