kubik101 Posted December 15, 2022 Posted December 15, 2022 Hi Guys. I am new to GSAP, GSAP3 and scrollTrigger. I have been trying to implement some of the basics to learn how to use GSAP and ScrollTrigger. Please refer to the codePen. I am trying to make the letters (YEAH) in the first horizontal sliding section move up then down then up then down through the "scrubbed" animation. In other words, how do I make them go up and down multiple times instead of just the once. I have looked for examples and have been unable to find anything doing this. Can it be done? See the Pen yLEmJor by kubik101 (@kubik101) on CodePen.
Rodrigo Posted December 15, 2022 Posted December 15, 2022 Hi @kubik101 and welcome to the GreenSock forums! Please take a look at this thread to see how a similar situation it was approached: Hopefully that's enough to get you started. Let us know if you have more questions. Happy Tweening!
Solution GreenSock Posted December 15, 2022 Solution Posted December 15, 2022 Welcome aboard, @kubik101! You could actually use a function-based value to simplify things so that you don't need one animation for the even ones, and another for the odd ones: See the Pen MWXNjEj?editors=0010 by GreenSock (@GreenSock) on CodePen. And you just set a repeat value to whatever you want (I chose 3, so it'll play once and then repeat 3 times) and set yoyo: true to make it invert on every repeat. Does that clear things up?
kubik101 Posted December 15, 2022 Author Posted December 15, 2022 Hi GreenSock. Thank you for your solution. So simple in the end. While I have you, if you're able and willing, an extended question which I have posted here:
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