Juc1 Posted March 9, 2020 Share Posted March 9, 2020 Hi all, My single square codepen works fine with getElementById targeting #top Can anyone please tell me the syntax to do the same thing (run timeline on mouseover) but with multiple targets on the same page = See the Pen ZEGvyEV by Juc1 (@Juc1) on CodePen Perhaps using .top and getElementsByClassName ? ie aim is hover on the red layer = fade the red layer hover on the yellow layer = fade the yellow layer etc Thanks... See the Pen qBdpmOQ by Juc1 (@Juc1) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted March 9, 2020 Share Posted March 9, 2020 There are a few ways to do that and .getElementsByClassName() is certainly one of them. You could also get a node list with querySelectorAll(). You can then loop through or use the .forEach() method to give each element a timeline and play/reverse on hover. Here's a basic example in which I used one of the new GSAP 3 utility method to select my targets. Hopefully it helps. See the Pen abOEyww by PointC (@PointC) on CodePen Happy tweening. 4 Link to comment Share on other sites More sharing options...
PointC Posted March 9, 2020 Share Posted March 9, 2020 PS Just FYI. If you do want to use getElementsByClassName(), this is a fork of your pen showing that option. See the Pen poJpdaY by PointC (@PointC) on CodePen Happy tweening. 5 Link to comment Share on other sites More sharing options...
OSUblake Posted March 9, 2020 Share Posted March 9, 2020 getElementsByClassName is a really old method, that nobody really uses that anymore. Just use querySelectorAll or querySelector for selecting 1 element. querySelector/All handles everything including class names, IDs, attributes, tag names, etc. getElementsByClassName is a really old method. 4 Link to comment Share on other sites More sharing options...
PointC Posted March 9, 2020 Share Posted March 9, 2020 6 minutes ago, OSUblake said: getElementsByClassName is a really old method 4 Link to comment Share on other sites More sharing options...
Juc1 Posted March 10, 2020 Author Share Posted March 10, 2020 Thanks to all for replies. 😀 My javascript skills are currently suboptimal so can anyone please show me a pen using play / reverse timeline (as used in my getElementById pen ) and querySelectorAll ? I know I don't need a timeline for just opacity but this is just a simplified example and I will be adding more cool stuff to the timeline 😀 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 10, 2020 Share Posted March 10, 2020 1 hour ago, Juc1 said: My javascript skills are currently suboptimal so can anyone please show me a pen using play / reverse timeline (as used in my getElementById pen and querySelectorAll ? I know I don't need a timeline for just opacity but this is just a simplified example and I will be adding more cool stuff to the timeline 😀 I don't understand what you're asking. What are you looking to get in addition to the above demos? They show the technique quite clearly. Link to comment Share on other sites More sharing options...
PointC Posted March 10, 2020 Share Posted March 10, 2020 I'm not sure I understand the follow up question either. Are you asking how to make a timeline for each element rather than a single tween? Here's a new version of my pen from above in which I used document.querySelectorAll() and a loop instead of the forEach() method. I've also added a simple timeline to each element. See the Pen oNXpVoL by PointC (@PointC) on CodePen Is that what you needed? 4 Link to comment Share on other sites More sharing options...
Juc1 Posted March 10, 2020 Author Share Posted March 10, 2020 4 hours ago, PointC said: Is that what you needed? Yes timeline + querySelectorAll() = perfect, thank you 👍 Link to comment Share on other sites More sharing options...
Juc1 Posted March 11, 2020 Author Share Posted March 11, 2020 @Craig sorry I missed something out and spoke too soon Can I please bug you some more.... In my getElementById pen the mouseover event on the box div triggers the timeline which animates other objects individually within the same svg: tl1.to(".mytitle", {duration:.5, fill:"lime"}); tl1.to(".rectangle-big", {duration:.5, opacity:0}); tl1.to(".myimage", {duration:.5, rotation:20}); tl1.to(".rectangle-small", {duration:.5, rotation:-20}); So my aim is to do the same thing when there are multiple boxes on the same page. With your querySelectorAll code See the Pen NWqypwV by Juc1 (@Juc1) on CodePen 1. mouseover / mouseout event targets the box class 2. the box class event fires the timeline 3. the timeline (eg rotation) acts on all parts of the svg together Could you please adjust the querySelectorAll pen so that after box class event, the timeline targets individual objects within the same svg? Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 11, 2020 Share Posted March 11, 2020 2 minutes ago, Juc1 said: Could you please adjust the querySelectorAll pen so that after box class event, the timeline targets individual objects within the same svg? You just need to scope the variable(s) to the element that is being hovered. You can do so by using .querySelector/.querySelectorAll on nodes other than the document. For example: // inside of your loop where targets[i] points to the container var title = targets[i].querySelector(".mytitle"); gsap.to(title, {...}); 2 Link to comment Share on other sites More sharing options...
Juc1 Posted March 11, 2020 Author Share Posted March 11, 2020 @ ZachSaucier awesome thank you 👍 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now