Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Pata

Help updating this continuous repeating text scroll

Recommended Posts

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

Link to post
Share on other sites

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?

Link to post
Share on other sites
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!

 

Link to post
Share on other sites
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.

Link to post
Share on other sites
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.

Link to post
Share on other sites

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!

  • Like 2
Link to post
Share on other sites

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,

Link to post
Share on other sites

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

Link to post
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.

×