GSAP 3 + easel + animate

[fripi]

Hi everyone,

 

working on a banner, need some tint change with mouse over, I already used it in the past but not since gsap 3

and I have this error message.

 

Quote

easelplugin_3.1.0_min.js:10 Uncaught TypeError: Cannot read property 'x' of null
    at o (easelplugin_3.1.0_min.js:10)
    at p (easelplugin_3.1.0_min.js:10)
    at n.init (easelplugin_3.1.0_min.js:10)
    at Eb (gsap_3.1.0_min.js:10)
    at _initTween (gsap_3.1.0_min.js:10)
    at xa (gsap_3.1.0_min.js:10)
    at Tween.render (gsap_3.1.0_min.js:10)
    at Timeline.render (gsap_3.1.0_min.js:10)
    at da (gsap_3.1.0_min.js:10)
    at updateRoot (gsap_3.1.0_min.js:10)

 

Now it's in animate so the code isn't always the easiest to read, so I just paste here the code I used (on line 110 in the codepen)

 

stage.enableMouseOver();

var root = this;

gsap.registerPlugin(EaselPlugin);

canvas.addEventListener('mouseover',overHandler,{ once: true, passive: true, capture: true});


function overHandler(){
	canvas.addEventListener('mouseout',outHandler,{ once: true, passive: true, capture: true});
	gsap.to(root.cta.txt, .3, {easel:{tint:"#FF4901"}});
	gsap.to(root.cta.bg, .3, {easel:{tint:"#FFFFFF"}});
}

function outHandler(){
	gsap.to(root.cta.txt, .3, {easel:{tint:"#FFFFFF"}});
	gsap.to(root.cta.bg, .3, {easel:{tint:"#FF4901"}});
}

 

See the Pen wvaeRaW by fripi (@fripi) on CodePen

[ZachSaucier]

Hey fripi. There is no x property in the code that you gave us. The pen that you linked to has a different error about cjs.MovieClip. Can you please recreate the error that you are having an issue with?

[fripi]

14 minutes ago, ZachSaucier said:

Hey fripi. There is no x property in the code that you gave us. The pen that you linked to has a different error about cjs.MovieClip. Can you please recreate the error that you are having an issue with?

 

Well that's exactly the problem, there is no x property in my code : http://www.sharpness.be/demo/tint_test/

I have one background plane, the button with text and that's all, nothing more...

 

I copied everything from animate to codepen, used the same libraries hosted by google and I see the error in my browser console, not in the codepen one

https://www.dropbox.com/s/p63lad4mgecyu9u/tint_test.zip?dl=1

 

Also it's Animate 2019, not the last version which has to many problems, I have to use it for this client

 

 

[GreenSock]

It looks like the objects you're trying to animate have no cache set in EaselJS, nor do they have any bounds. In EaselJS for filters to render properly, the object must have a cache set (that's unrelated to GSAP). So you need to do that before animating them. 

 

Here's a hack I came up with that you can drop into your project - you probably only need to call it once on each object that you're animating: 

function forceCache(obj) {
  var b = obj.getBounds();
  if (!b) {
    b = obj.nominalBounds || {x:0, y:0, width: 100, height:100};
    obj.setBounds(b.x, b.y, b.width, b.height);
    obj.cache(b.x, b.y, b.width, b.height);
  }
  return obj;
}

It uses an undocumented "nominalBounds" property I stumbled upon. I'm certainly not an EaselJS expert, but hopefully that's durable enough for your needs. Here's a fork of your codepen with it working: 

See the Pen 2966563c4383ad0d0395364a935d0d09?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I have also updated the next version of EaselPlugin to make an attempt at that automatically. Here's a preview of that: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/EaselPlugin3.min.js (you're welcome to use that if you'd like). 

 

Happy tweening!

[fripi]

7 hours ago, GreenSock said:

Happy tweening!

Thanks, 

 

I'm trying it, and it works but... only one time, I just copied the code to animate and compared to your codepen, 

everything seems the same but it only works at the first mouse over, than nothing anymore...

But I have a warning in my console:

Quote

DevTools failed to parse SourceMap: http://localhost:8080/headless-content.js.map

 

And when I use your next version of the plugin I have another warning:

Quote

EaselPlugin: for filters to display in EaselJS, you must call the object's cache() method first. GSAP attempted to use the target's getBounds() for the cache but that may not be completely accurate. [MovieClip (name=txt)]
n @ EaselPlugin3.min.js:10

 

[GreenSock]

8 hours ago, fripi said:

it works but... only one time

That's because your event listener is set up to only work ONCE: 

canvas.addEventListener('mouseover',
  overHandler, { 
    once: true, // <-- THIS IS THE PROBLEM!!!
    passive: true, 
    capture: true
  }
);

Remove that and you should be fine

8 hours ago, fripi said:

Quote

DevTools failed to parse SourceMap: http://localhost:8080/headless-content.js.map

 

That's unrelated to GSAP. It just means the browser is having trouble loading your SourceMap. There's a known bug in recent versions of Chrome that causes issues like that. 

 

8 hours ago, fripi said:

And when I use your next version of the plugin I have another warning:

Quote

EaselPlugin: for filters to display in EaselJS, you must call the object's cache() method first. GSAP attempted to use the target's getBounds() for the cache but that may not be completely accurate. [MovieClip (name=txt)]
@ EaselPlugin3.min.js:10

 

Yep, that's just a warning, it's not an error. It's the plugin trying to be helpful by making you aware of what it's doing to try to work with the EaselJS cache restrictions/requirements. 

 

Does that clear things up? 

[fripi]

15 hours ago, GreenSock said:

That's because your event listener is set up to only work ONCE

 

🤦‍♂️ oh yeah sorry 🙈

 

thanks for your time, makes all sense