Scrollable Marquee

[Alphamark]

Hello, so I'm trying to recreate the effect on the footer on this website (https://www.fielddaysound.tv/project/nike-we-are-all-witnesses). 
 

I know I'm way off from their approach, but I wanted to make this with a different approach. So I've gotten to a point where everything works as expected but on the part where I'm resetting the scrollPercent to 0 and gsap.set the container to 0em there's like a jump/cut and I wanted to know, is there any way to continue the transition and not just jump to 0em. 

Also, can someone explain to me, how I can make this same animation play in a loop while being controlled with the "wheel" event at the same time?

I appreciate any help you can provide.

See the Pen ZEPPPQw by Bobiman (@Bobiman) on CodePen

[Rodrigo]

Hi,

 

Maybe use the Horizontal Loop helper function and ScrollTrigger:

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

 

Hopefully this helps.

Happy Tweening!

[Alphamark]

@Rodrigo Hey, thanks for the reply. I've already tried using the Horizontal Loop helper function, but I can't seem to get It to work as I want. 

So the basic idea is the marquee sits on the bottom of my page.
Looping automatically like a CSS keyframe marquee
It can be scroll controllable
When it's hovered — scrolling is disabled, marquee is disabled

Just like the link to the website I've provided in the thread above.

 

Can you somehow point me to how can i use the helper function to achieve the effect I need?

[GreenSock]

That's totally possible, but it's a bit beyond the scope of help we can provide in these free forums. The basic approach I'd personally take is to get the seamless looper helper function to create the timeline, pause it, and then create a baseline variable like "velocity" representing the speed of the playhead. Then, in a tick event handler (gsap.ticker.add(() => {...})) I'd update the timeline's playhead accordingly so that it moves at a normal pace (whatever you decide that to be). Then use an Observer to listen for scroll, pointer, and touch events such that it alters the velocity according to the deltaX/deltaY, and tween that value back to the baseline with a gsap.quickTo() so that it decelerates. So your velocity variable goes up and down based on the various events/interactions, but always goes back to the baseline. 

 

Good luck! We do offer paid consulting services if you need more assistance. You're welcome to post in the Jobs & Freelance forum too. 

[Alphamark]

Thank you both for the replies.

 

So I've managed to get it close to what it should be working. Although I'm not sure if I'm on the right way. I can't figure out how to reset the velocity back to 0 with the gsap.quickTo() and smoothen out the deceleration. If you can help me out with that I'd be grateful.

Here's link to my codepen:

See the Pen VwRNbKR by Bobiman (@Bobiman) on CodePen

[Rodrigo]

Hi,

 

I would use the Observer Plugin instead of tacking on the window's wheel event, is far less complex:

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

 

Hopefully this helps.

Happy Tweening!

[Alphamark]

@GreenSock @Rodrigo

 

After experimenting with the code you've provided me with. I've managed to get exactly what I needed. Thank you both for the support and the time spent on my problem.