Jump to content
GreenSock

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

processprocess

Members
  • Content Count

    22
  • Joined

  • Last visited

Everything 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!
  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? Thanks!
  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. https://greensock.com/forums/topic/8198-end-position-with-draggable-and-throwprops/ Thanks!
  4. @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. 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 ma
  6. 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. 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. 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. 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 o
  10. 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 fu
  11. 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. 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. 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? (sorr
  14. 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. 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!
  16. 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 wit
  17. Jack - last question about this: I'm using a timeline for the left and right segments of this 'TlL' & 'TlR' http://codepen.io/philipbell/pen/vxxBbj Most of the arguments for them are the same, except for the y position and rotation. Is it possible to simplify this code for the timelines further? I feel like there's got to be a way. Thank you!
  18. Thanks Jack & Carl! I integrated this back into my project overall: http://codepen.io/philipbell/pen/vxxBbj It's awesome to see how you're using timelines for this. Way more simple. This is great. Thank you!
  19. 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 Missil
  20. 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: http://codepen.io/philipbell/pen/vxxBbj 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!
  21. In my codepen - I'm instantiating elements from a class. x, y and backgroundColor successfully update. Scale fails to update. I'm updating scale exactly the same way I'm updating backgroundColor. I've tried everything I can think of... What's going on here?
×