Jump to content
Search Community

Button Hover state using GSAP and Adobe Animate CC

icraig6666 test
Moderator Tag

Recommended Posts

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.

 

 

Link to comment
Share on other sites

//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. 

  • Like 2
Link to comment
Share on other sites

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.

 

image.png.7a5f7d6855c392cfd4ac0f3833d21b0d.png

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...