Jump to content
Search Community

GSAP3 ScrollTrigger - Scrub Enabled - Move element up and then down

kubik101
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Posted

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.

Posted

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
Posted

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? 

Posted

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:

 

 

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...