Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
tibo78

Timeline / Class application issue

Go to solution Solved by nico fonseca,

Recommended Posts

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()
});

});

 

Link to comment
Share on other sites

  • Solution

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

  • Like 6
Link to comment
Share on other sites

Thank you !

  • Like 1
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.
×