Jump to content
Search Community

processprocess

Members

  • Posts

    22

  • Joined

  • Last visited

Recent Profile Visitors

1,502 profile views

processprocess's Achievements

11

Reputation

  1. processprocess
    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!
  2. processprocess
    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? Thanks!
  3. processprocess
    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. https://greensock.com/forums/topic/8198-end-position-with-draggable-and-throwprops/ Thanks!
  4. processprocess
    @PointC Tinting works great for white objects. The pngs start as black though and i'm pulling them from an API so I can't color them by hand. I can use color matrix to make them white, but then I tried to add tint and it's having no effect.
  5. processprocess
    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?
  6. processprocess
    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 www.rorshock.com 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
  7. processprocess
    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!
  8. processprocess
    to get a sense of what I'm building and the animations you can check out the work-in-progress here: http://rorshock.com/ Click anywhere to re-generate the composition. Enter any word to generate a composition out of icons related to the word. I definitely need tools to keep an eye on performance.
  9. processprocess
    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: gsap: http://i.imgur.com/dwvCGRg.png long frames throughout. Visible jank. setTimout: http://i.imgur.com/8clO2dx.png 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. Thanks!
  10. processprocess
    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: http://codepen.io/philipbell/pen/BWvLPG?editors=1010 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: http://codepen.io/philipbell/pen/gmZLOZ Is there another way to get the callback when all animations are complete without using a gsap timeline?
  11. processprocess
    I'm setting a delay as a negative number to simulate staggering. I'm wondering if there's a better way to achieve this with nested timelines.
  12. processprocess
    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? codepen: http://codepen.io/philipbell/pen/vxWGPY?editors=1011 Thanks!
  13. processprocess
    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? http://codepen.io/osublake/pen/oLGBXy Are there tutorial sets you recommend to get up to speed in canvas quickly? (sorry if this is off topic) Thanks man!
  14. processprocess
    I see this much clearer now. It needs to be based animContainerL's real-time position rather than the single endX value. Awesome. Thanks Jack!
  15. processprocess
    non-working example: now works! http://codepen.io/philipbell/pen/YZxewm It's snapping to it's new X value instead of tweening. Example of what I'm trying to achieve: http://codepen.io/philipbell/pen/XMaZEo 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? Thanks!
×
×
  • Create New...