Kapaluika Posted July 23, 2020 Share Posted July 23, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 23, 2020 Share Posted July 23, 2020 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? 2 Link to comment Share on other sites More sharing options...
Kapaluika Posted July 23, 2020 Author Share Posted July 23, 2020 I want these lines to move to the center when the button is clicked, but I don't know how to do it:( Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 23, 2020 Share Posted July 23, 2020 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. Link to comment Share on other sites More sharing options...
Kapaluika Posted July 23, 2020 Author Share Posted July 23, 2020 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. 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