click animation

[AkhilRaja]

i created this click function animation, the problem im having is when the page load all the link should have red color, on clicking on any one of the link rest of the link get blue color and the click link should have red color. like when i click on "slide3"  then it become red and rest become blue but when i click on "slide1" all of them become red, i only want click link should get red, and on the second click on "slide1" all of them become red like a toggle action

See the Pen gOGMBjB by AkhilRaja (@AkhilRaja) on CodePen

[Cassie]

Hey there @AkhilRaja,

 

It's a little out of the scope of these forums to help with custom logic and I'm not certain what it is you're after from the description. But it sounds like you need to run different logic depending on whether you're clicking on the same card you've just clicked on. Or whether you're clicking on a new card?
 

let previous;

links.forEach((link, index) => {
  link.addEventListener("click", (e) => {
    console.log(e.target.id)
    let current = e.target.id
    
    if(current === previous) {
      console.log('same')
    } else {
      console.log('new')
    }
    
    previous = current
  });
});

 

[AkhilRaja]

7 minutes ago, Cassie said:

Hey there @AkhilRaja,

 

It's a little out of the scope of these forums to help with custom logic and I'm not certain what it is you're after from the description. But it sounds like you need to run different logic depending on whether you're clicking on the same card you've just clicked on. Or whether you're clicking on a new card?
 

let previous;

links.forEach((link, index) => {
  link.addEventListener("click", (e) => {
    console.log(e.target.id)
    let current = e.target.id
    
    if(current === previous) {
      console.log('same')
    } else {
      console.log('new')
    }
    
    previous = current
  });
});

 

Hey @Cassie

what i want to do is create reverse animation like a toggle animation on each click, 
 

my aim are
- click on a link will get me a red color on the "selected link" text and rest of them become blue 
- click on the same link again will get me red color on all the links, which is running fine as a reverse animation 
- now if we click on the link like click on "link 2" and then click on "link 4" then "link 4" should get red color and rest of them become blue and click on "link 4" for second time then all of the link should get red color

[Cassie]

Hey again Akhil,

I've expanded on the snippet I linked to above - something like this might work.

See the Pen wvrWNKx?editors=1011 by GreenSock (@GreenSock) on CodePen

As I said before though, this is a custom logic issue, not a GSAP question and I'm afraid this falls outside of the help we offer here.

[AkhilRaja]

On 12/9/2021 at 10:43 PM, Cassie said:

Hey again Akhil,

I've expanded on the snippet I linked to above - something like this might work.
 

 

As I said before though, this is a custom logic issue, not a GSAP question and I'm afraid this falls outside of the help we offer here.

 

 

thank you so much @Cassie for helping me on this, i never heard of e.target.id its really new for me and its so helpful feature.

[OSUblake]

10 hours ago, AkhilRaja said:

thank you so much @Cassie for helping me on this, i never heard of e.target.id its really new for me and its so helpful feature.

 

Actually, it might be better to use e.currentTarget.id, as target might not be the correct element if you have several elements nested inside of it.

 

Quote

The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target, which identifies the element on which the event occurred and which may be its descendant.

 

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget