james182 Posted November 13, 2019 Share Posted November 13, 2019 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 More sharing options...
ZachSaucier Posted November 13, 2019 Share Posted November 13, 2019 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() 1 Link to comment Share on other sites More sharing options...
james182 Posted November 13, 2019 Author Share Posted November 13, 2019 Awesome thanks for the tips and help. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now