Jump to content


List Active State Issues

Recommended Posts

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

Link to comment
Share on other sites

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: (targetvars) 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()

  • 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.