How to make animation happen when you click?

[Kapaluika]

I'm new to jQuery and JavaScript, don't judge strictly. I wrote a small script to animate the display of tabs. And I decided to add animation when hovering and clicking on the button itself. But I can't figure out how to do it. Made an animation when hovering through mouseenter and mouseleave. I want these lines to move to the center of the word when you click them, and when you click another button in active mode, they leave the old one and appear on the new one.

I uploaded the full code to CodePen

See the Pen abdMzPO by nikita-sidorenko (@nikita-sidorenko) on CodePen

[ZachSaucier]

Hey Kapaluika and welcome to the GreenSock forums.

 

First things first: You're using a pretty old version of GSAP. We highly recommend that you learn and use GSAP 3, which has a smaller file size, a sleeker API, and a bunch of new features that you're going to love!

 

Additionally I see that you're loading ScrollMagic in that pen. We don't recommend using ScrollMagic. Instead, we recommend using the official GSAP scroll plugin: ScrollTrigger!

 

The Getting Started article is a good place to start, but if you think you have a good grasp of v2 of GSAP you can read the migration guide instead.

 

In general it's best to create animations before and and use control methods to affect their state. I highly recommend reading through the common GSAP mistakes article as it talks about how to do that as well as several other common errors.

 

Another recommendation is to use GSAP's timelines instead of delays on tweens. I talk about doing that in my article on tips to animate efficiently among other helpful tips  

 

I know that the above is a lot of resources, but they are all well worth your time and will help save you a lot of time in the long run. Plus you'll be able to write better code!

 

Now onto your question: What do you mean "I want these lines to move to the center of the word when you click them, and when you click another button in active mode, they leave the old one and appear on the new one."? Do you mean that you want to animate the position of the lines from one set of words to the other? Or are you just wanting to the lines to move from the outside of the words to fill the entire width? Or something else? 

[Kapaluika]

I want these lines to move to the center when the button is clicked, but I don't know how to do it:(

[ZachSaucier]

Like I said, I do not understand how you want them to animate. Please create a diagram of what you're wanting or describe it more explicitly.

[Kapaluika]

I created a new pen on 

See the Pen ZEQPGMO by nikita-sidorenko (@nikita-sidorenko) on CodePen

I showed there how animation should be, but the code is very bad and it can't be used together with mouseenter and mouseleave.