[pixelated scale-down GSAP & Pixi.js]

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]

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!

 

 

 

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

[Maintain velocity on re-positioned objects with ThrowProps]

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!

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

[staggerTo on master timeline, with nested tweenMax]

@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. 

[staggerTo on master timeline, with nested tweenMax]

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]

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]

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]

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]

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]

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?

[staggerTo on master timeline, with nested tweenMax]

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.

 

 

 

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

[scale not updating on Class instantiated object]

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:

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

 

Thanks!

[scale not updating on Class instantiated object]

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!

[Modifiers Plugin snaps to X value instead of tweening]

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]

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? 

 

Thanks!

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

[scale not updating on Class instantiated object]

Thank you Jack. You rule!

[scale not updating on Class instantiated object]

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!

[scale not updating on Class instantiated object]

Jack - last question about this:

 

I'm using a timeline for the left and right segments of this 'TlL' & 'TlR' 

 

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!

[scale not updating on Class instantiated object]

Thanks Jack & Carl!

 

I integrated this back into my project overall:

 

It's awesome to see how you're using timelines for this. 

 

Way more simple. This is great. 

Thank you!

[scale not updating on Class instantiated object]

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!

[scale not updating on Class instantiated object]

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:

 

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!

[scale not updating on Class instantiated object]

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?

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