How can i implement such a marquee with GSAP

[compli]

How can I implement a marquee with GSAP which changes direction on scroll (ease part), but then it continues in the reverse direction from the state it was there previously (tough part, couldn't figure out this)

https://drive.google.com/file/d/1J4Dquyl-proyeh5EqPTXioNAfFQc_twq/view?usp=sharing

Site link: https://hello.cuberto.com/

[GSAP Helper]

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. 

[compli]

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. 

Surely, 
https://stackblitz.com/edit/gsap-react-basic-f48716-j9rvrq?file=src%2FApp.js
https://gsap-react-basic-f48716-j9rvrq.stackblitz.io
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.
Example:
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

[mvaneijgen]

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! 

 

https://stackblitz.com/edit/gsap-react-basic-f48716-7fnrzp?file=src%2FApp.js

[Rodrigo]

Hi,

 

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

https://greensock.com/docs/v3/GSAP/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!

[Shahbaz Shaikh]

How can I change the direction in the above example(not onscroll)?

[mvaneijgen]

What have you tried already? We love to see what you can come up with. That way you we can see your thought process and thus better help you. 

[Shahbaz Shaikh]

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.
Update:
I tried adding reversed:true, the marquee is reversed but problem arrives.

Here is the demo link Codesandbox Demo

[Rodrigo]

Hi,

 

When using the horizontal endless loop helper, instead of reversing the timeline returned by it, is better to tween the timescale property of it as shown in the example.

 

Here is a simple demo in React using the Observer Plugin:

https://stackblitz.com/edit/vitejs-vite-auctqy?file=src%2FApp.jsx

 

Hopefully this helps.

Happy Tweening!