Hey ya! I’m using the new GSAP UI - and it’s magnificent! Thank you much for this update
One really big problem that I’m facing is that when I’m trying to use it to define a hover interaction on my CMS item. Whatever I do, it affects all the items in the list!
I’ve tried using :scope .inner-card for instance, in the custom selector
I’ve tried using the interaction on the CMS item, or alternatively on a child div that contains all the other elements.
Quite lost here, I can imagine that there is a way but I’m not finding it!
In the link, please scroll the words Walnut and Sweep on the list at the bottom of the page!
So for some reason I can’t access the interactions panel for the GSAP animation from your read only link. But I had a similar problem, what you have to do on hover interactions is not to apply them to the element’s class, because that will do it to all the elements with the same classes all at once. What work for me on hovering animations is to leave it as same as trigger and if you press on the same as trigger option is should also say to all matching elements. I hope this helps!
Thanks so much for your response Pablo! My example doesn’t show this very well, but I’d like to hover on a div and trigger different animations to elements within it. Just for example, move the heading 10px to the right and change the font colour of all the text elements to grey and the background to pink.
If I use Same as Trigger, I’m only able to animate the specific element I’m hovering on. Does that make sense? If it doesn’t, I’ll make another example tomorrow. Let me know what you think!
I haven’t used IX3 enough, but it has far more advanced targeting options than IX2 did.
What you probably want is to use this setup, and then below Descendants you’ll see a way to identify the elements within the trigger.
Here I’m targeting h1 classes within, but you could do far more complex CSS selectors here, combining ID’s classes, pseudoselectors…
