toggle classList in GSAP

[Hemanta]

Hey folks,

 

Hemanta here. I recently started learning GSAP. And its awesome.

 

In the demo, clicking on the button adds a border to the box. I have used JS to achieve this.  How can I recreate the same using GSAP? 

 

Thanks in advance...

See the Pen pogMNrL by sundaray (@sundaray) on CodePen

[ZachSaucier]

Hey Hemanta and welcome to the GreenSock forums.

 

It looks like you just linked to the default GSAP starter pen (which is a great place to start). But you didn't link to anything that shows the effect that you're wanting. 

 

In general you can animate a button's border along the lines of this:

See the Pen YzwmwJM by GreenSock (@GreenSock) on CodePen

 

We highly recommend that you start with GSAP's Getting Started article as it will explain how to do this sort of thing (and much more!):

 

After that, I highly recommend reading the most common GSAP mistakes article:

 

Happy tweening!

[Hemanta]

Hi Zach,

 

Thanks for your reply. I have now edited my codepen link and have linked to the right demo. 

 

Can you please take a look at the demo and let me know how do I create the same using GSAP.

 

Thanks.

[ZachSaucier]

Hey Hemanta. Is this what you're wanting?

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

[Hemanta]

Hi Zach,

 

Thanks for your reply.  I actually want the CSS class called 'change' to be toggled when I click on the button.

If you see my codepen link, there is a class called 'change' with the following properties and values.

 

.change {

border: .2rem solid black;

}

 

Hope my question is clear.

 

Will wait for your reply.

[ZachSaucier]

Hey Hemanta. What's wrong with your non-GSAP approach to toggling the class then?

 

The whole purpose of GSAP is to animate things, not to toggle classes (though you can toggle classes with it). We highly recommend doing all of your animation in GSAP itself as doing so will assure that you work around cross browser issues and give you more control over your animations.