Button Hover state using GSAP and Adobe Animate CC

[icraig6666 0 Likes (Newbie)]

Hi All,
My client has requested a simple rollover/hover state color change for a button in a HTML5 banner.
I use Adobe Animate CC to load in SVG assets and then code GSAP animations in the actions panel.
What's the best way to implement this?
Thanks in advance for advice and/or examples about how to achieve this.

 

 

[somnamblst 200 Likes (Specialist)]

//Mouse interactions  
  
canvas.addEventListener("mouseover", over.bind(this));  
  
function over()  
{  
  this.cta.gotoAndPlay("expand");  
}  
  canvas.addEventListener("mouseout", out.bind(this));  
  function out()  
{  
  this.cta.gotoAndPlay("contract");  
}  

I used shape tweens for the color change. It is not abrupt. 

[icraig6666 0 Likes (Newbie)]

Thanks for posting this. So "expand" and "contract" are frame labels that will play a tween sequence in the main timeline. I have an imported SVG as my cta so will have to target the fill color of the rectangle. Do you have a Codepen example?

[somnamblst 200 Likes (Specialist)]

Reply. Yes. Just frame labels in a Movieclip. The CTA is a nested movieclip with a label called cta. I initially had buttons that grew a bit on rollover, but color tweens I think are more noticeable, so I started doing shape tweens from one color to the rollover color.  It is Animate, so no Codepen. 

 

In this example both the button and the button copy change color on rollover, and then back on roll off.

 

[icraig6666 0 Likes (Newbie)]

Thanks. most helpful. Much appreciated..?

[somnamblst 200 Likes (Specialist)]

I am a big fan of nested movieclips for moving things from one size banner to the next by only having to move one frame. I think we are up to versioning for 9 sizes now.