Jump to content

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


  • Content Count

  • Joined

  • Last visited

Posts posted by processprocess

  1. Thanks Jack!


    I implemented your plugin and it appears to be running a little faster. 


    It's also helpful to see how you're re-factoring the pixi plugin. 


    the pixelation is still an issue but this was a big help for other things.


    Thank you!

    • Like 1
  2. I'm getting pixelation when using pixi.js sprites with gsap.


    I doubt this is a gsap or pixi problem, I'm sure it has to do with how I'm combining them.


    in the codepen example:

    pixiBug on left is pixi.js & gsap and we're getting pixelation on scale down

    domBug on right is DOM & gsap and edges are smooth no matter the scale.


    What am I missing here? 






    See the Pen EmKqrG by philipbell (@philipbell) on CodePen

  3. What I'm going for:

    When an element reaches the edge of it's boundary box,

    it re-positions itself at the other edge of it's boundary box.

    If thrown, it will maintain velocity.


    I'm using .set and it's removing velocity.

    I saw on another thread that there's a way to access velocity but I'm not sure how to keep it when re-positioning the element, or even if I'm thinking about it in the most performant way.




    See the Pen zZgmYa by philipbell (@philipbell) on CodePen

  4. Thanks PointC!


    I'm working on transferring my project to pixi. I have my elements animating position and it's INSANELY fast and smooth. Even with 30x the elements.


    position and scale properties seem to be working great with gsap tweening. I'm running into problems with color though, the colorPropsPlugin works for tints on the background shape, but I have black pngs with transparent backgrounds that I need to tween the color of also.


    The only way I've found to modify the color of the black pngs is to edit their colorMatrix.

    I wonder if there's a way to tween the color matrix. Or maybe there's a better way?

    • Like 2
  5. Blake - 


    Anything that responds to user movement I'm into. Ultimately I want to do motion tracking. I'm trying to nail down the basics first.


    This is the latest thing I'm working on



    I think I need convert this to pixi.js. I'm sick of running into performance issues using DOM nodes.

    Do you think that the canvas tutorials you posted would be a good foundation before jumping into pixi.js?

    Or, do you have some good pixi.js tutorials? 


    Thanks man

  6. Thanks guys! 


    Jack -  

    It's likely that something else is at play. 

    I agree with you and PointC, a better rendering engine is the way to go. 


    PointC -

    that's awesome to hear. I've seen amazing stuff done with PIXI.js 

    Blake's answering service is about to make a lot of money lol.

    Do you feel like you need a solid foundation with canvas to get running with pixi.js?


    Jonathan - 

    I'm going to try that out right now, thanks!

  7. Hey Jack!


    Thanks for sharing the sample. It's awesome to see different angles on solutions. 


    I understand your clock example. I thought one clock would be better too, but when pushed, set timeout is more performant in this case.

    I'm measuring using the timeline in Chrome Dev Tools. I'm capturing 3 animation cycles. Screenshots:



    long frames throughout. Visible jank. 




    some long frames but they aren't visible. It looks smooth.


    Do you know more precise measuring tools? I want to keep a closer eye on this while I'm building.


    Blake thanks for the promise references!

    Using a promise all makes way more sense for this, I'm going to try to write this that way.



  8. Thanks Jack!


    This makes a lot more sense and is way more readable. However It's less performant than what I was doing before and there's visible jank when this is implemented in my project.


    Before implementing the stagger as a gsap timeline, I was running the array through a set timeout that would stagger the sets before feeding them to a function. This gave a smoother frame rate in my project.


    Here's a codepen of the way I was doing this before, which is the most performant solution i've found thus far:

    See the Pen BWvLPG?editors=1010 by philipbell (@philipbell) on CodePen


    I need a callback function to know when the animations are all complete.

    That's a main reason why I was hoping the gsap timeline would work for this.

    It's possible with promises but it's looking a little crazy to me:

    See the Pen gmZLOZ by philipbell (@philipbell) on CodePen


    Is there another way to get the callback when all animations are complete without using a gsap timeline?

  9. This is great, I'll run through these.

    The interactive elements that are in your codePens are exactly what I'm looking to get a good grip on. 


    I have one question at the moment that's holding me up on a project:

    - I'm sourcing png files from a API

    - I want to dynamically change their color, ideally with GSAP


    I've seen this solved this by running the image through canvas then changing it's pixel data.

    I'm running into a CORS issue with this. have you run into this before? 



    See the Pen vxWGPY?editors=1011 by philipbell (@philipbell) on CodePen



  10. Hey Blake, Got it.


    I see what you mean that it's a better use of time to learn more performant rendering methods, rather than building a feature that will slow performance.


    Thank you for the Canvas/GSAP example. That's perfect for me to get running with. 


    Your codepen is awesome. Looks like you're using canvas whenever there are tons of elements being rendered.

    On this one, you're using canvas and LinkedList. Are you using LinkedList to optimize rendering? 

    See the Pen oLGBXy by osublake (@osublake) on CodePen


    Are there tutorial sets you recommend to get up to speed in canvas quickly?

    (sorry if this is off topic)


    Thanks man!

    • Like 1
  11. non-working example:

    now works!

    It's snapping to it's new X value instead of tweening.


    Example of what I'm trying to achieve:

    See the Pen XMaZEo by philipbell (@philipbell) on CodePen

    The same equation works when used in a separate tween. 


    I've used this same method in timelines, but for some reason it's not working for a 'to' tween. 

    Why is animContainerR snapping to it's x value when passed through the modifyer plugin? 



    See the Pen YZxewm by philipbell (@philipbell) on CodePen

  12. Jack thank you for the additional information on this.

    It's great to come full circle on the ModifiersPlugin and use it appropriately.


    I know this is getting off topic from the original question, but last 2 questions regarding performance:


    I want to have the maximum amount of elements rendering and animating for any given device to handle.

    - Is it possible to detect FPS with GSAP? What is your preferred method for that?

    - Is it possible to generate more elements & animations based on detecting a machines speed?


    Thank you so much for your help. You've got me set up to run with GSAP on this project!

    • Like 2
  13. Thanks for looking into this further. I'm new with GSAP so there may be a better way to achieve this. 


    Here is what I'm trying to achieve:

    - element generates at bottom of window.

    - element animates from bottom of window to random y position, random backgroundColor and random scale.

    - element moves y position by 1 pixel each frame. 

    - when the element hits the bottom of page, the cycle starts over. A new random y position, backgroundColor and scale is set.


    I'm using the modifiersPlugin to move the element by 1px each frame. 

    I got the idea for that from Blake Bowen's Homing Missiles example:

    See the Pen qNPBpJ by osublake (@osublake) on CodePen


    Thank you for your help!

  14. Hi Carl, Thanks for the reply and welcoming me to the forums!


    Thanks for looking at the code, I reduced it as much as possible to give my example.


    I'm looking to set scale in the updateElementInstance function, line 46:

    See the Pen vxxBbj by philipbell (@philipbell) on CodePen


    Within that function I set the backgroundColor, which works perfectly - BUT

    I then set scale the same way as I set backgroundColor and it's having no effect.


    Thanks for your help!