Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
icraig6666

Button Hover state using GSAP and Adobe Animate CC

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.

 

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×