Jump to content
Search Community

getElementsByClassName ?

Juc1 test
Moderator Tag

Recommended Posts

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

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.

 

  • Like 4
Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

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

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

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?

  • Like 4
Link to comment
Share on other sites


@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

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, {...});

 

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...