I am trying out the gsap animation library. According to the basic docs the syntax for getting a tween up and running is:
TweenLite.to( [target object], [duration in seconds], [destination values] )
So I have tried a really simple tween based on jQuery's hover event:
$('.contact-item').hover(function(){
TweenLite.to(this,4,{background:'#671B4B'});
},function(){
TweenLite.to(this,4,{background:'#FFFFFF'});
});
Oddly, the background does change to the correct color, but it tweens instantly instead of over the course of 4 seconds as I have specified in the second argument.
I did check to make sure the default is seconds not milliseconds. It's in the docs I linked to.
I did make sure I am using TweenLite and not TweenMax.
I am using jQuery but see no conflicts or errors in the console.
Any help is appreciated. I have linked to a codepen
I have added the css plugin and it is added to the codepen as well.