Help updating this continuous repeating text scroll

[Pata]

Hello, I'm trying to update this @Shaun Gorneau Codepen.

 

First of all I would appreciate some help moving the code from jQuery to plain JavaScript. I'm stucked

 

On the other hand I'm experimenting with this pen trying working with a font-size relative to the window width (example: font-size: 8vw;). Obviously, on window resize it messes up all the programming because it changes the object width. Anyone has a better idea than refreshing the page on window resize with a classy:

 

window.onresize = function(){ location.reload(); }

 

Thanks in advance,

See the Pen mWEddP by sgorneau (@sgorneau) on CodePen

[ZachSaucier]

Hey Pata,

 

It looks like you linked the original pen without any changes? Did you mean to do that? We're happy to help with errors that you're running into but it'd be good if you showed what you're having trouble with in the demo pen. 

 

What's your end goal here? And are you going to use GSAP 3 or GSAP 2?

[Pata]

2 hours ago, ZachSaucier said:

Hey Pata,

 

It looks like you linked the original pen without any changes? Did you mean to do that? We're happy to help with errors that you're running into but it'd be good if you showed what you're having trouble with in the demo pen. 

 

What's your end goal here? And are you going to use GSAP 3 or GSAP 2?

 

Thanks for the fast answer. My goal is to use the latest version of GSAP. I've made some improvements on the forked code below:

 

See the Pen gOOZZxO by pataduprins (@pataduprins) on CodePen

 

I'd like to translate the jQuery to JavaScript and find a solution for the window resize and the responsive typography size issue.

 

Thanks!

 

[ZachSaucier]

1 hour ago, Pata said:

I'd like to translate the jQuery to JavaScript and find a solution for the window resize and the responsive typography size issue.

Cool. Good work so far! What are you stuck on? There aren't any errors in the pen. It doesn't look like you've tried anything related to these requests.

[Pata]

43 minutes ago, ZachSaucier said:

Cool. Good work so far! What are you stuck on? There aren't any errors in the pen. It doesn't look like you've tried anything related to these requests.

 

1- I don't know if reloading the page every time I resize the window to fix the problem with the typography is the best solution.

 

2- I tried to start typing the code translation to JavaScript but I have no progress because I can't understand the jQuery code. Maybe is a question for another forum because is not 100% related to GSAP.

[ZachSaucier]

1 - Reloading the page on resize is almost never the best solution  It's generally best to create a function to update what you need to update on resize.

 

2 - I helped you out below. You could do the same by googling each piece of the jQuery code and looking up a vanilla JS equivalent. 

 

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

 

Let me know if you have any questions!

[Pata]

Many many thanks Zach. It works really great!

 

After inspecting the code I have a couple of questions just to fully understand your improvements : )

 

- What is the adjustTween() function taking care of?

- What is the usefulness of .progress(progress) after the timeline?

 

The solution for the resize seems quite obvious now that I see it.

 

Thanks,

[ZachSaucier]

I added some comments to the code to explain. Let me know if that's not enough.

[Pata]

Everything clear. Thanks : )