Tween in rollover

[julien94270]

Hello all,
and thanks a lot to this forum for the help !!

I have a button, BT, and when there is a rollover on it, it changes of color.
Here, I use CSS and "hover" ...

How can I use tweenMax to have a progressive change of color, from Green to Red ?

Thank you very much for your patience

See the Pen xvnyE by anon (@anon) on CodePen

[Jonathan]

Hello julien94270, and Welcome to the GreenSock Forum!

 

Here is a simple example that animates the color on hover:

 

See the Pen zKEsj by jonathan (@jonathan) on CodePen

 

It uses jQuery to bind the hover events using mouseenter and mouseleave

// Hover events
$(document).on("mouseenter", ".bt", function(){
  
    var $this = $(this);  
    TweenMax.to($this, 0.9, {backgroundColor:"red", ease:Power4.easeInOut});
  
}).on("mouseleave", ".bt", function(){
  
    var $this = $(this);  
    TweenMax.to($this, 0.9, {backgroundColor:"green", ease:Power4.easeInOut});
  
});

:

To get familiar with codepen.. Here is a video tut by GreenSock on How to create a codepen demo example.

 

Also are links to the:

 

CSSPlugin Docs: http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/

 

TweenMax Docs: http://greensock.com/docs/#/HTML5/Animation/TweenMax/

 

Does that help?

[julien94270]

Thank you, that's it !

 

It really helps !!