Jump to content
Search Community

How can i implement such a marquee with GSAP

compli test
Moderator Tag

Recommended Posts

What have you tried already? We love to see minimal demo's, that way we can see your thought process and thus better help you. 


Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.


Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen


If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.


Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

2 hours ago, GSAP Helper said:

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Here is a demo of what I've created. I couldn't figure out here how to make the marquee reverse at any point from the middle.
Lets say the marquee has gone from 0% to 60% and then direction is changed, so instead of going from 100% to 0% it should go from that 60% to 0%

Edit: I figured it out, but then now the reverse speed sometimes matches the original speed, sometimes its less, help me out with that please

Link to comment
Share on other sites

I would use the ScrollTrigger observer for this. I've tried it with the scroll event handler, but then you need to debounce it and deal with other stuff, that I just don't want to deal with, seen I will probably end up using ScrollTrigger in my project any way, but you could definitely do it, if your up for it.


You could look in to the GSAP helper seamless looping function https://greensock.com/docs/v3/HelperFunctions#loop but I wonder if that is needed. If you just duplicate the element like two of three times and have the animation repeat X times and then set the timeline to start from the middle of the timeline on page load, I think that would be sufficient, but again it is up to you. Hope it helps and happy tweening! 



  • Like 1
Link to comment
Share on other sites



Just to add to @mvaneijgen's great advice, when working with GSAP and React always use GSAP Context:



Also take a look at the resources in this article:


Finally here is an example that uses the horizontal loop with the scroll event to change it's direction:

See the Pen zYaxEKV by GreenSock (@GreenSock) on CodePen


Hopefully this helps.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

Nothing fancy, I just copied(as it fullfil my requirement) the above example code and just wanted to change the direction. I read the Helper function doc and fount tl.previous function but I was confused on how to change the direction.
I tried adding reversed:true, the marquee is reversed but problem arrives.

Here is the demo link Codesandbox Demo

Link to comment
Share on other sites

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...