List Active State Issues

[james182]

I am having issues in getting this to work properly, as I am new to GreenSock and JS in general.

The active state should have the "dot" expand in width (which it does) but it's not going back when the next one is clicked.

See the Pen NWWLOZP by james182 (@james182) on CodePen

[ZachSaucier]

Hey James. We're glad you're around and that you asked!

Several notes about your demo:

• You should try to do two things in your click listener: 1. remove the active state from the last one (optionally you could only do this if it's not the same one that is clicked) and 2. make the clicked one active. I think thinking about it in that way will help your logic.
• The format of most tweens is: (target, vars) where target is your element(s), vars is an object ({}) with your duration, ease, and properties that you want to change. fromTos are a little different because they have the format (target, fromVars, toVars). where the duration and ease is found in the toVars.
• Eases in GSAP 3 are recommended to be in string form. It's shorter and may save you trouble down the road  

Altogether you get this pen:

 

See the Pen LYYgRQV?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I recommend taking a look at GSAP's getting started article:

 

Also the documentation is super helpful for knowing where to put things. For example, gsap.to()'s docs: https://greensock.com/docs/v3/GSAP/gsap.to()

[james182]

Awesome thanks for the tips and help.