show gsap: on hover, change another (w/ gsap jquery plugin)

[Guest Vic_]

Hi,

I'm sure you know that most award winning web sites use gsap. 

Here, on hover of a 'card' I change height of the background stipe, like so:

 

$('.scard').hover(function(){

   console.log('in')

   $('.stripe', this).animate({ height: LH*2.75 }, 300)

}, function(){

   console.log('out')

   $('.stripe', this).animate({ height: LH*1.5 }, 200 )

})

 

Notice it is card that hovers, but stripe tweens. This looks like jquery, but it uses gsap - via gsap's jquery plug in.

You can see it running here:

http://masons-foundation.org/en/s_home/stun_0/stun
 

(I promise that at least half of my examples will be codepen, next one!)

cheers,

Vinn