Help with adding EaselJS to my project

[Dizablah The Lamot]

Hey all! So, I've given up trying to shoehorn GSAP into Adobe Animate. Big step! But now I am having issues with getting easelJS to play nice. See the attached CodePen. I am not sure what or who is fighting with whom or if I am just missing something. I am just getting back into GSAP/HTML/CSS after  some time away so I am pretty sure that I am missing something. The codePen is me testing out if I can tint my image (what I really want is to mess with the brightness and exposure.) and doesn't work. I've tried uploading to codePen, running locally, firing up XAMMP and running a webserver locally and bupkis. the animation makes it past the easel but won't affect the tint. If any one has a moment please show me the error of my ways. I am pretty sure I am missing something that may be second nature to y'all. 

Please and thank you, 

Dez

See the Pen ExbRjqZ by Dizablah (@Dizablah) on CodePen

[OSUblake]

Hi Dizablah,

 

EaselJS is only for canvas, so it's not going to work with HTML/CSS. For HTML, you would need to use CSS or SVG filters...

 

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

 

I don't think CSS provides an easy filter for tinting, so you would probably have to use a color matrix filter SVG filter. 

 

https://kazzkiq.github.io/svg-color-filter/

 

You can use an SVG filter for HTML elements, you just need to put the ID of the filter in your CSS.

 

.talent {
  filter: url("#my-filter");
}

 

[Dizablah The Lamot]

I appreciate the help! But I don't understand, according to this doc https://greensock.com/docs/v3/Plugins/EaselPlugin I should be able to access the brightness and exposure attributes. Which now that I look at it they are probably not the same thing. But when I try to register gsap.registerPlugin(EaselPlugin);  Nothing runs. 

[Carl]

 

 

If your end goal is just brightness / exposure effects you can do that just with css filters and gsap as @OSUblake suggested.

Here is a demo and video from one of my courses

 

See the Pen mdOBLoR?editors=0010 by snorkltv (@snorkltv) on CodePen

 

Full Lesson Video

 

If you want to check out my courses you can access my complete GSAP 3 beginner's course for free (link below).

 

I'd be happy to extend a 15% discount if you want to purchase Lifetime access to my full course bundle (over 140 lessons and growing weekly).

Just use coupon code: gsforums at checkout within the next 10 days.

Learn GreenSock at creativeCodingClub.com

 

If you're serious about getting back into GSAP I'm confident this training will save you loads of time.

 

Unless you have good working knowledge of working with the HTML <canvas> element AND the EaselJs library I don't think it's a good place to start with GSAP. You will do MUCH better working with HTML, CSS and basic SVG elements. 

 

 

 

 

[OSUblake]

1 hour ago, Dizablah The Lamot said:

But I don't understand, according to this doc https://greensock.com/docs/v3/Plugins/EaselPlugin I should be able to access the brightness and exposure attributes.

 

That's for Easel objects, but in your demo you are using HTML. Those are two completely different ways of displaying something to screen. As Carl mentioned, if you are trying to learn GSAP, I would not be concerned with using a canvas library at the moment. 

 

[Dizablah The Lamot]

2 hours ago, OSUblake said:

 

That's for Easel objects, but in your demo you are using HTML. Those are two completely different ways of displaying something to screen. As Carl mentioned, if you are trying to learn GSAP, I would not be concerned with using a canvas library at the moment. 

 

I see I have much to learn! Not onlywith GSAP but with HTML/JS/CSS! Thanks so much for the help!

 

[Dizablah The Lamot]

3 hours ago, Carl said:

 

Quote

 

If your end goal is just brightness / exposure effects you can do that just with css filters and gsap as @OSUblake suggest

 

If you're serious about getting back into GSAP I'm confident this training will save you loads of time.

 

Unless you have good working knowledge of working with the HTML <canvas> element AND the EaselJs library I don't think it's a good place to start with GSAP. You will do MUCH better working with HTML, CSS and basic SVG elements. 

 

 

Yeah, I am kind of haphazardly trying to relearn this all at the same time! Will look into that LifeTime Subscription!

Thank you so very much. I have much to learn. 😐

 

 

 

[Dizablah The Lamot]

I guess the thing that was throwing me off what it seemed that the only way to affect exposure and brightness were through the EaselPlugin:
 

Quote

GreenSock’s EaselPlugin exposes convenient properties that aren’t a part of EaselJS’s API like tint, tintAmount, exposure, and brightness for ColorFilter, as well as saturation, hue, contrast, colorize, and colorizeAmount for ColorMatrixFilter. Simply wrap the values that you’d like to tween in an easel: {}

 

Am I srsly missing something glaringly obvious? Is the page outdated or do I have a case of the DumbDumbs and not fully understanding the way that gsap3 handles css properties? EDIT: Or CSS in general?

[OSUblake]

35 minutes ago, Dizablah The Lamot said:

Am I srsly missing something glaringly obvious? Is the page outdated or do I have a case of the DumbDumbs and not fully understanding the way that gsap3 handles css properties?

 

The page isn't outdated. The Easel Plugin is only for use with the EaselJS library to animate Easel objects. It will not work for HTML/SVG elements.

https://www.createjs.com/easeljs

 

The same goes for the PixiPlugin. It can do the same kind of stuff as the EaselPlugin, but again, it's not for HTML/SVG elements. It will only work with Pixi objects.

 

For GSAP to animate a CSS property, it has to be a valid CSS property. There is no such things as a tint, exposure, brightness, etc property in CSS. To do something similar, you would need to use something equivalent to what those canvas libraries are doing, which would be the filter property.

 

Perhaps your confusion is that you might be thinking that GSAP only works with HTML/SVG elements, which is probably what 99% of our users use it for, but it can animate any property of any type of object. GSAP is just a property manipulator. For example, I can animate a value property of simple a simple JavaScript object like so...

 

See the Pen gOXKNXq by GreenSock (@GreenSock) on CodePen

 

But of course I couldn't animate the foo property because it does not exists.

 

let myObject = {
  value: 0
};

gsap.to(myObject, {
  foo: 100 // ! does not exists
});

 

Most of GSAP's plugins are made specifically for HTML/SVG elements. The only plugins that aren't would be the EaselPlugin and the PixiPlugin.

 

Does that make sense?

 

[Dizablah The Lamot]

26 minutes ago, OSUblake said:

 

The page isn't outdated. The Easel Plugin is only for use with the EaselJS library to animate Easel objects. It will not work for HTML/SVG elements.

https://www.createjs.com/easeljs

 

The same goes for the PixiPlugin. It can do the same kind of stuff as the EaselPlugin, but again, it's not for HTML/SVG elements. It will only work with Pixi objects.

 

For GSAP to animate a CSS property, it has to be a valid CSS property. There is no such things as a tint, exposure, brightness, etc property in CSS. To do something similar, you would need to use something equivalent to what those canvas libraries are doing, which would be the filter property.

 

Perhaps your confusion is that you might be thinking that GSAP only works with HTML/SVG elements, which is probably what 99% of our users use it for, but it can animate any property of any type of object. GSAP is just a property manipulator. 

 

Most of GSAP's plugins are made specifically for HTML/SVG elements. The only plugins that aren't would be the EaselPlugin and the PixiPlugin.

 

Does that make sense?

 

Yes, lol, this now makes sense! I truly appreciate your patience. Hopefully I can look back at this and be like haha, what a dope I was
Srsly, thanks for helping out. You and @Carl's are gods!