How to animate multiple images on hover from 0 to 1 with GSAP?

[Galanthus]

Hi,

 

I am trying to replicate something like this on hover: http://vlnc.studio/

There are multiple images on the background, where when you hover each image it will animate/fade from 0 to 100%.

I have tried Canvas.. but it is a hell to make it work. I am wondering if someone can help me out, or point me out to the right direction

to a demo or something similar.

 

What i am trying to, is add like 14 images on the background and on hover change the opacity of each image from 0 to 100%.

 

Is this something i can do with GSAP and if so can someone help me out?

 

 

 

See the Pen VwZJBwr by Merdzanovich (@Merdzanovich) on CodePen

[Shaun Gorneau]

Hi @Galanthus,

 

I'm not sure your requirement is to use canvas for this, but this is something GSAP can certainly handle. You can choose to use jQuery (or not) for simplifying some event listeners ... regardless, the GSAP part is very simple! I would use simple Tweens vs Timelines because there isn't too much to control. Here is an example ... note I haven't gone through the effort of placing the images in a mosaic fashion ... but you'll get the idea.

 

See the Pen zYOVMpw by sgorneau (@sgorneau) on CodePen