scale not updating on Class instantiated object

[processprocess 11 Likes (Newbie)]

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

[Carl 11,167 Likes (Superhero)]

Hi and welcome to the GreenSock forums,

 

Its quite a bit of code to try to figure out but It appears if you set your scale:0 instead of scale:null the scale will change.

 

http://codepen.io/GreenSock/pen/ryyVQe?editors=0010

[processprocess 11 Likes (Newbie)]

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!

[Carl 11,167 Likes (Superhero)]

Sorry, the problem is I don't follow what you are trying to do.

 

I don't understand why you are using the modifiersPlugin on scale, background and y and also have an onUpdate that will appear to conditionally create a new tween of those 3 properties.

 

So when I see this, I see a whole bunch of code related to animating and changing a whole bunch of properties in different places, but if  If I comment out line 58

//elementInstance.y += 1.5

There is no animation at all. 

 

When you use the modifiersPlugin it constantly checks for new values on every update.

Notice I added one log here:

modifiers: {
              y: function() { return elementInstance.y; },
              backgroundColor: function() { 
                console.log("my bacground color is " + elementInstance.backgroundColor)
                return elementInstance.backgroundColor; },
              scale: function() { return elementInstance.scale; },
            },

Open up the browser console here

 

http://codepen.io/GreenSock/pen/WppQqR?editors=0010

 

Those logs are just for 1 element and you'll see that most of the time it returns the same value. And you also have an onUpdate running at the same time that creates new tweens of the same properties (i'm assuming). I'm just really confused about how it is supposed to work. Any more details would be helpful. 

[processprocess 11 Likes (Newbie)]

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!

[GreenSock 18,584 Likes (Superhero)]

I read your description and code a few times and I'm still a bit lost, but here's my crack at a simplified (and more performant) version: 

http://codepen.io/GreenSock/pen/ba40260188acf76b876aa08eba6121ef/

 

Is that the effect you're after? 

 

By the way, one of the problems with your original example was that you were tweening to scale:null and backgroundColor:null which are both invalid values. 

[processprocess 11 Likes (Newbie)]

Thanks Jack & Carl!

 

I integrated this back into my project overall:

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

 

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

 

Way more simple. This is great. 

Thank you!

[GreenSock 18,584 Likes (Superhero)]

Yeah, you could totally just use simple tweens back-to-back, but I like the Timeline workflow

 

Glad it helped. Happy tweening!

[processprocess 11 Likes (Newbie)]

Jack - last question about this:

 

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

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

 

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!

[GreenSock 18,584 Likes (Superhero)]

Nothing wrong with the way you're doing it. If your goal is to have less code, you could animate both left and right to the exact same values, and then use an onUpdate to edit just the x and rotation properties of the "right" one:

http://codepen.io/GreenSock/pen/b37f6f5bae9414161e2665b6e119baf4/

 

Not necessarily "better" - just an alternate approach. 

 

There are other ways you could do it with ModifiersPlugin as well.

[GreenSock 18,584 Likes (Superhero)]

Actually, the ModifersPlugin version would perform a bit better and It's relatively simple: 

 

http://codepen.io/GreenSock/pen/a4e154e4048ff136af2332f55c2d0925?editors=0010

 

Does that help?

[processprocess 11 Likes (Newbie)]

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!

[GreenSock 18,584 Likes (Superhero)]

Well, a crude way of checking fps is just TweenLite.ticker.frame / TweenLite.ticker.time but that's the average since the page began loading, so I'm not sure that's what you'd want. Remember, initially when the page is in the process of loading and parsing all the HTML/CSS/JS, fps is gonna suffer. Typically it's best to sample the average frames per second over a certain interval, like every 1-2 seconds or something. You could do that like:

var interval = 1,
    ticker = TweenLite.ticker,
    lastUpdate = ticker.time,
    lastFrame = ticker.frame;
ticker.addEventListener("tick", function() {
    var time = ticker.time;
    if (time - lastUpdate >= interval) {
        console.log("fps: ", (ticker.frame - lastFrame) / (time - lastUpdate));
        lastUpdate = time;
        lastFrame = ticker.frame;
    }
});

Also keep in mind that you can set a maximum threshold, like TweenLite.ticker.fps(30) if you want to limit the frame rate.

 

Happy tweening!

[processprocess 11 Likes (Newbie)]

Thank you Jack. You rule!

[OSUblake 18,495 Likes (Superhero)]

Hi @processprocess,

 

 

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

 

It's really hard to baseline speed as computer resources are always fluctuating. To accurately do this, you need to do polling, requiring you to constantly make adjustments for any performance drops/increases. 

 

I think a better approach would be to use renderer that can handle your performance requirements from the start, canvas. One interesting thing about canvas is that it's just a bitmap, so you draw a canvas on itself. That means it's really easy to do a reflected animation. All you need to do is animate one side, flip the canvas, and then draw the canvas on itself.

 

I'm only animating 2 lines here, but you'll see 4. It's kind of like a kaleidoscope. 

See the Pen 6fe51a8752f767dded9f698ebea35277?editors=0010 by osublake (@osublake) on CodePen

 

.

[processprocess 11 Likes (Newbie)]

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!

[OSUblake 18,495 Likes (Superhero)]

Hi @processprocess,

 

You're the first person to notice how I use linked lists in a lot of my demos, but yes, it's to optimize rendering for a lot of objects. A linked list is a data structure kind of like an array, but much faster to loop through, and to add and remove objects. Internally, GSAP uses them to improve performance for a lot of stuff.

 

I wrote a simple class to make creating them easier, which you can find right here.

https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/LinkedList2.js

 

How they work is pretty simple. Adding an object to a list will add a next and prev property to an object, which point to the object before and after that object in the list. The only limitation is that an object can only belong to one list at a time. Here's a demo that logs out some stuff, showing all the methods and properties.

See the Pen b9bfd9a1c09c017e6d3a42c4892657d4?editors=0010 by osublake (@osublake) on CodePen

 

Animating canvas with GSAP is pretty straightforward as it can be done with a bunch of generic objects. The hard part is understanding the canvas context if you've never used it before. I wouldn't say it's hard, just completely different than working with html/svg elements. Here's a post where I show some basics for working with it.

https://greensock.com/forums/topic/15088-tweening-a-svg-object-in-canvas/?p=65099

 

The hardest thing to understand is probably transforms. You transform the entire context, which has a transform origin in the top-left corner.

 

I think Kirupa might be quickest way to get up to speed.

https://www.kirupa.com/canvas/

 

Mozilla also has a pretty good turtorial...

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

 

For quick reference, I like to use this...

http://www.html5canvastutorials.com/

 

And here's a tutorial about using canvas with GSAP that looks kind of interesting.

https://css-tricks.com/using-gsap-animate-game-ui-canvas/

 

If you need anymore canvas help, just ask. I've have a lot of demos, but most of them are hard to find because they are private. I only did that for organization, and not to actually keep them hidden from the public.

 

.

[processprocess 11 Likes (Newbie)]

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!

[OSUblake 18,495 Likes (Superhero)]

CORS is a security feature that can be rather annoying. The image needs to be hosted on the same domain or sent with the correct header from the server.

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

 

Even with assets hosted on CodePen, this can be a problem as they are actually served from amazon. Using a cache busting url with crossorgin set to anonymous will usually fix it. 

<img class="target-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/42649-200.png?v=1" crossorigin="anonymous">

Here's your demo using that. 

See the Pen ryYLzR?editors=1010 by osublake (@osublake) on CodePen

 

If you want to animate that, you can use the ColorPropsPlugin. I have several post around here doing some stuff like that...

https://greensock.com/forums/topic/13435-color-tinting-an-image/?p=56065

https://greensock.com/forums/topic/15060-different-entrancesexits-effects-for-images/?p=65049

https://greensock.com/forums/topic/13145-colorprops-tinting-canvas/?p=54203

 

Beware that animating the color can be a rather slow operation. If you need to a lot of that, using Pixi.js would be the fastest way to do it, which some of those posts mention. It makes everything faster, and simplifies working with canvas. Here's a nice demo showing off different color filters you can use with it.

http://www.goodboydigital.com/pixijs/colorMatrix/

 

.

[OSUblake 18,495 Likes (Superhero)]

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

 

Any particular ones? And ultimately, what are you trying to build?

[processprocess 11 Likes (Newbie)]

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