Good morning all,
So I am working on a grid full of images. The moment I hover over one image all of the others get applied an opacity value, except for that image itself. A focusing effect.
Now, I don’t want to manually use the Selector and point to each image and tell gsap " on mouse move you apply opacity to img1,img2,img3,img4, etc.
That is what I am doing right now (in the video). But then I would have to create an interaction for every single image in the grid, pointing all images, excluding itself in the Timeline Selector.
I feel I can achieve this by using the more advanced selector options. I read the docs explaining selectors, but not there yet.
It should be somethig like $img.grid-image-size + exempt me!
It should be somethig like $img.grid-image-size + exempt me!
Hi @red-rosefields,
So, to apply the interaction, I’m assuming that all of your images have a common class like ‘grid-image’. So add an interaction to the first. Add a timeline with the selector $.grid-image. Use this timeline to set the opacity to 0.2 or whatever number you want. Now add a second timeline right below it with a target of this and set the opacity to 1. Like CSS there is a cascade that will set the opacity on the hovered item to 1. Then just use apply to many and target every $.grid-image. You’ll olso need a mouse leave event. For that one just set all of the .grid-image to an opacity of 1.
Hope this helps!
Bob
The second timeline overwritting the first did the trick. The cascade logic in interactions… Really thank you man!
I will share it once finished. It may help others.
