Hemanta Posted July 31, 2020 Share Posted July 31, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 31, 2020 Share Posted July 31, 2020 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! 2 Link to comment Share on other sites More sharing options...
Hemanta Posted July 31, 2020 Author Share Posted July 31, 2020 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 31, 2020 Share Posted July 31, 2020 Hey Hemanta. Is this what you're wanting? See the Pen rNxXjza?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Hemanta Posted August 1, 2020 Author Share Posted August 1, 2020 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 1, 2020 Share Posted August 1, 2020 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. 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