Binding EventListeners to multiple ID's

[cbourne]

Hi,

I have page with some some squares defined as buttons. I have a function that attaches an onClick handler to each the buttons which works fine, however I can't work out how to add a mouseover animation to each of the buttons. 

I've attached a codepen that demonstrates what I have so far. 

See the Pen WNgZWeZ by carlskii (@carlskii) on CodePen

[Toso]

I changed   {style: "fill: #F2653A", duration: 1}    to   {background:" #F2653A", duration: 1}   and it worked just fine 

[cbourne]

OK so I made some progress and update the pen. However, I'm getting...

"Invalid property" "style" "set to" "fill:#1ABFD3" "Missing plugin? gsap.registerPlugin()"

.. when the event fires. 

[Toso]

please try this one and let me know if that's what you looking for   

See the Pen MWqEdYN?editors=0110 by ahmed-attia (@ahmed-attia) on CodePen

 

 

[cbourne]

Perfect that did the trick. Thanks very much. Only thing I needed to do was change the `background` to `fill` for it to work with my SVG.

[GreenSock]

Nice job, @Toso 👍

 

Minor tweaks: 

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

 

I'd use backgroundColor rather than background, and I'd set the overwrite to either true or "auto" just in case the user rolls over/out quickly, you don't want to create conflicting animations. 

[cbourne]

Don't think "backgroundColor" works with SVG. Is there a universal attribute ? 

[Rodrigo]

Hi,

 

For SVG is best to use the Attribute Plugin:

https://greensock.com/docs/v3/GSAP/CorePlugins/AttrPlugin

 

So in this case it would be:

gsap.to(['#box1', '#box2'], {
  attr: {
    fill: "#F2653A"
  },
  duration: 1
});

Where box1 and box2 are SVG elements.

 

Hopefully this helps.

Happy Tweening!

[cbourne]

Hmm.. So I tried the Attribute Plugin using this code, but it doesn't work with my SVG. 

let elements = document.querySelectorAll('.button');

    let clickEvent = (e) => {
      console.log('some event content here...')
      console.log("----------------" + e.target.id + "----------------------")
    }
    elements.forEach((item) => {
      item.addEventListener("mouseenter", ()=>{
		gsap.to(item, {attr: {fill: "#F2653A"}, duration: 1, overwrite: "auto" });
      });
      item.addEventListener("mouseout", ()=>{
            gsap.to(item, {attr: {fill: "red"} ,duration: 1, overwrite: "auto" });
      }); 
      item.addEventListener('click', clickEvent)

      });

	});

 

[cbourne]

Hmm.. So I tried the Attribute Plugin using this code, but it doesn't work with my SVG. Actually it doesn't seem to work with the basic div's either.

let elements = document.querySelectorAll('.button');

    let clickEvent = (e) => {
      console.log('some event content here...')
      console.log("----------------" + e.target.id + "----------------------")
    }
    elements.forEach((item) => {
      item.addEventListener("mouseenter", ()=>{
		gsap.to(item, {attr: {fill: "#F2653A"}, duration: 1, overwrite: "auto" });
      });
      item.addEventListener("mouseout", ()=>{
            gsap.to(item, {attr: {fill: "red"} ,duration: 1, overwrite: "auto" });
      }); 
      item.addEventListener('click', clickEvent)

      });

	});

 

[Rodrigo]

Hi,

 

Fill is not a CSS property of regular DOM elements and, as stated in the documentation, the Attribute Plugin is not meant for DOM elements when you animate CSS properties, that's what the CSS Plugin is for.

 

Please create a minimal demo that shows exactly what you're trying to do.

 

Happy Tweening!

[cbourne]

Here's what I now have: 

 

See the Pen mdGBNmO by carlskii (@carlskii) on CodePen

[Rodrigo]

Hi,

 

There are no SVG elements in your code so this I can't understand correctly:

34 minutes ago, cbourne said:

So I tried the Attribute Plugin using this code, but it doesn't work with my SVG

The solutions provided by @Toso and Jack should be enough for the codepen example you have. As mentioned before there is no need for the Attribute Plugin if you want to animate the background color of a DIV or any other regular DOM element, just follow the code that has already been provided and you should be fine. Unless your real life scenario does include SVG elements, but you're not including them in the codepen examples you're providing, so we're running in circles here.

 

Happy Tweening!

[PointC]

Exact same thing with SVG fill and the attrPlugin. Happy tweening.

 

See the Pen 19b1b9a98a4cd015fcdfebb25cb2d513 by PointC (@PointC) on CodePen

[cbourne]

Perfect this is exactly what I needed. This works with my SVG nicely.