I have been using the new GSAP UI (as many of you I’m sure) - and although it’s really good there are some issues - obviously the page load issue many are having, but for me the problem is about getting the right things animating using the selectors.
For example, I have 5 divs, all the same class (.card), with another div inside (.card_info), and then another inside that (.card_info_holder)
I’m attempting to use .card as the mouse hover trigger, then .card_info as the target to go from 0% opacity to 100% on hover of .card - simple right? But all I can get it to do is change all 5 of the .card_info classes. Using child selectors appears to do nothing so I must be doing something wrong but at the same time I’ve tried all combinations and have researched on it and just can’t get it.
For NDA purposes I can’t I’m afraid… However I have attached screenshots of the relevant items… It just makes no sense it’s so confusing!!! Thank you for your response @AJ_Dev
So yeah, when I hover on marquee_link I need the marquee_info child to change from 0 to 100 opacity, however it always does it for all of them… I think the problem is the target, but selecting any other scope doesn’t actually do anything…
Hello @frazerphrase ,
Without a read-only link it is very hard to show you all the necessary steps to make your animation work. But what you can do is to take a look at this free cloneable Joseph Berry Gsap Example - Webflow and see how the hover animations are handled. I think there is also a youtube tutorial. Take a look at the menu items hover animations. Basically you have to specify the descendant that you want to animate. I hope this helps.
Hi @Pablo_Cortes - thank you for this it totally helped!
This was the thing I needed, where the target is the same as the trigger and then you’re using the descendant to choose the class within the target. I was straightaway changing the target to the class and then this was choosing all of those classes and then therefore all of the descendants from inside those classes.
