en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en en en en en en en en en en en en en it en en fr en en en en en en en ms si nb en ms si en en en en en en en ms si nb en ms si en en en en en en en en en nb en en en en en en en en en it en nb en it en ja en en en en en sv it en nb en it en ja en en en en en nl en nb en nl en en en en en en en it en nb en it en ja en en en en en it en nb en it en ja en en en en en it en nb en it en ja en en en en en it en nb en it en ja en en en en en it en nb en it en ja en en en en en nl en nb en nl en en en en en en en en nl en nb en nl en en en en en en en sv sv nl en en en en en sv nl en en en en en en en en es en en en pt en fr en lt en en en es en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
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!
pixelated scale-down GSAP & Pixi.js
processprocess posted a topic in GSAP
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!
Maintain velocity on re-positioned objects with ThrowProps
staggerTo on master timeline, with nested tweenMax
processprocess replied to processprocess's topic in GSAP
@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.
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?
scale not updating on Class instantiated object
processprocess replied to processprocess's topic in GSAP
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
staggerTo on master timeline, with nested tweenMax
processprocess replied to processprocess's topic in GSAP
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!
staggerTo on master timeline, with nested tweenMax
processprocess replied to processprocess's topic in GSAP
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.
staggerTo on master timeline, with nested tweenMax
processprocess replied to processprocess's topic in GSAP
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!
staggerTo on master timeline, with nested tweenMax
processprocess replied to processprocess's topic in GSAP
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?
staggerTo on master timeline, with nested tweenMax
processprocess posted a topic in GSAP
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.
scale not updating on Class instantiated object
processprocess replied to processprocess's topic in GSAP
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!
scale not updating on Class instantiated object
processprocess replied to processprocess's topic in GSAP
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!
Modifiers Plugin snaps to X value instead of tweening
processprocess replied to processprocess's topic in GSAP
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!
Modifiers Plugin snaps to X value instead of tweening
processprocess posted a topic in GSAP
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!
“The GreenSock animation platform is one of the most useful sets of tools in existence when it comes to web animation.”
“...obviously GSAP is incredible.”
“With the incredible functionality, and the mind-blowing customer service, the price of Club GreenSock admission is well worth it!”
“Really quite impressed with @GreenSock JS - even the small things.”
“Massive shoutout to GreenSock for having an amazing product with fantastic documentation, hugely talented support staff and an active and helpful community. If you do anything with web animation you should *definitely* be using them.”
“GreenSock is the best thing that happened to SVG animations since SVG animations.”
“GSAP, the rolls-royce of JS animation frameworks. Still going strong!”
“No other animation library is as intuitive, rigorous, conceptually simple and well curated as GreenSock’s.”
“I’ve long felt like GSAP is the best kept secret in JavaScript.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.