Timeline / Class application issue

[tibo78]

Hello,

 

I am stuck, most probably it is JS related and no GSAP related, so sorry for this. If this is the case just let me know, no worries.

 

I have the following code: basically it gives to class circle and wrapper a certain timeline animation. The issue is when I duplicate the DIV, the effect when hovering on .wrapper will be on all div having the class .circle. Not sure I am clear here.

 

Seems the issue is both the classes but also the timeline as it is only set to .circle, maybe I am wrong here too.

 

How should I turn the code here to have the .circle effect only applied on the Div I am hovering and not all of them...?

 

Thank you in advance.

 

Thibaut

 

var wrapper = $(".wrapper"),
circle = $(".circle"),

 

tl = gsap.timeline({paused:true});

tl.fromTo(circle,{left:0,right:"auto"},{width:"100%"})
.set(circle,{right:0, left: "auto"})
.to(circle,{width:"60px"})
       
wrapper.on("mouseenter", () => {
  tl.restart()
})
.on("mouseleave", () => {
  tl.reverse()
});

});

 

[nico fonseca]

Hi @tibo78, when you use $('.whatever') jQuery will target all those elements from your page, so it is the same as document.querySelectorAll('.whatever'). So when you use those elements to animate with GSAP all are affected.

 

You need to target only the elements you want to animate, you can do something like this:

See the Pen 0aa7834959a64963e469a2d64e5328ec by nicofonseca (@nicofonseca) on CodePen

[tibo78]

Thank you !