Switch pictures as I hover on the text aside

[Carlos Maurin]

Hi guys! how you doing?
I am trying to recreate the effect that you will see on the file attached.
I want that pictures change as I hover on the text aside.
Can somebody give some hints about how to do it? 

Thanks in advance!

 

 

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[Carlos Maurin]

Hi!
I made this codepen. As you can see, I just could change the "image" when I hover the word work.
I dont know how to keep with the animation while hovering the other words.

 

See the Pen gOQxKyB by carlosmaurin (@carlosmaurin) on CodePen

 

Thanks!

[Rodrigo]

Hi @Carlos Maurin and welcome to the GreenSock forums!

 

Is better in this cases to create an array for the links and the images. Since they have the same amount of items you can use the index of the forEach loop in order use the mouse enter event listener to set the z-index of the corresponding image.

 

Here is a fork of your codepen:

See the Pen BaGdPKg by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Carlos Maurin]

17 hours ago, Rodrigo said:

Hi @Carlos Maurin and welcome to the GreenSock forums!

 

Is better in this cases to create an array for the links and the images. Since they have the same amount of items you can use the index of the forEach loop in order use the mouse enter event listener to set the z-index of the corresponding image.

 

Here is a fork of your codepen:

 

 

 

Hopefully this helps.

Happy Tweening!

 

 

WOW! thank you very much Rodrigo, you are amazing! I knew that I had to do an array of images but I couldnt figure out how to use it until you replyed my question. You were really helpfull!
Thanks again!