Vertical infinite scroll

[Daniyarkz]

Hello!
Please tell me what needs to be done to keep the blocks moving indefinitely vertically?

I tried to adjust the vertical change of blocks, but they update when they reach the height of one word, and not the height of the block

See the Pen MWOjpgR by Daniyar01 (@Daniyar01) on CodePen.

[akapowl]

Hello @Daniyarkz

 

It looks to me like you tried to re-write the horizontalLoop helper function from the docs to make it work vertically?

 

I'm not sure it would be as easy as that, as I saw @GreenSock craft another version of a helper function specifically for vertical looping in this thread.

 

 

 

Here is one way you could utilize it to fit the logic you were trying to implement in your example.

I'm not sure if this is the best way to do it, but it works. Maybe it will help. Happy tweening!

 

See the Pen LYORWLW by akapowl (@akapowl) on CodePen.

 

 

 

Edit:

 

And just now I saw the comment in the code, that the 'speed can be positive or negative (in pixels per second)'.

So this actually gets quite a bit easier in the end.

 

See the Pen RwjGVWq by akapowl (@akapowl) on CodePen.

 

 

[Daniyarkz]

12 hours ago, akapowl said:

Hello @Daniyarkz

 

It looks to me like you tried to re-write the horizontalLoop helper function from the docs to make it work vertically?

 

I'm not sure it would be as easy as that, as I saw @GreenSock craft another version of a helper function specifically for vertical looping in this thread.

 

 

 

Here is one way you could utilize it to fit the logic you were trying to implement in your example.

I'm not sure if this is the best way to do it, but it works. Maybe it will help. Happy tweening!

 

 

 

 

 

 

Edit:

 

And just now I saw the comment in the code, that the 'speed can be positive or negative (in pixels per second)'.

So this actually gets quite a bit easier in the end.

 

 

 

 

 

Thank you so much! You helped a lot!

[Dooshan]

On 2/4/2022 at 12:13 PM, akapowl said:

Hello @Daniyarkz

 

It looks to me like you tried to re-write the horizontalLoop helper function from the docs to make it work vertically?

 

I'm not sure it would be as easy as that, as I saw @GreenSock craft another version of a helper function specifically for vertical looping in this thread.

 

 

 

Here is one way you could utilize it to fit the logic you were trying to implement in your example.

I'm not sure if this is the best way to do it, but it works. Maybe it will help. Happy tweening!

 

 

 

 

 

 

Edit:

 

And just now I saw the comment in the code, that the 'speed can be positive or negative (in pixels per second)'.

So this actually gets quite a bit easier in the end.

 

 

 

 

 

Can I get some help? I need a third column that goes down, as first? (JS confuse me)
Here is a forkec codepen: 

See the Pen BaOZLNV by stdusan (@stdusan) on CodePen.

[GreenSock]

@Dooshan do you mean like this?: 

See the Pen GRXEadV by GreenSock (@GreenSock) on CodePen.

[Dooshan]

6 hours ago, GreenSock said:

@Dooshan do you mean like this?: 

 

 

That's it! Thanks.

[Yaan]

On 2/4/2022 at 1:13 PM, akapowl said:

Hello @Daniyarkz

 

It looks to me like you tried to re-write the horizontalLoop helper function from the docs to make it work vertically?

 

I'm not sure it would be as easy as that, as I saw @GreenSock craft another version of a helper function specifically for vertical looping in this thread.

 

 

 

Here is one way you could utilize it to fit the logic you were trying to implement in your example.

I'm not sure if this is the best way to do it, but it works. Maybe it will help. Happy tweening!

 

 

 

 

 

 

Edit:

 

And just now I saw the comment in the code, that the 'speed can be positive or negative (in pixels per second)'.

So this actually gets quite a bit easier in the end.

 

 

 

 

 

and how to make the traetcory to be similar to a checkmark(<), almost like the example above, but there the path is straight, and I need as <, and to loop

[Rodrigo]

Hi @Yaan and welcome to the GSAP Forums!

 

That would be more suited for the MotionPath Plugin actually, the vertical loop helper is not based for diagonal motion, that is a completely different situation.

 

Maybe this video by @Carl can help:

 

Also check these demos by Carl as well:

See the Pen wvOyeYO by snorkltv (@snorkltv) on CodePen.

 

See the Pen zYyBKmG by snorkltv (@snorkltv) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Yaan]

15 hours ago, Rodrigo said:

Hi @Yaan and welcome to the GSAP Forums!

 

That would be more suited for the MotionPath Plugin actually, the vertical loop helper is not based for diagonal motion, that is a completely different situation.

 

Maybe this video by @Carl can help:

 

Also check these demos by Carl as well:

 

 

 

 

 

 

Hopefully this helps

Happy Tweening!

Hi! Thank you!:)

[Yaan]

On 9/19/2024 at 11:51 PM, Rodrigo said:

Hi @Yaan and welcome to the GSAP Forums!

 

That would be more suited for the MotionPath Plugin actually, the vertical loop helper is not based for diagonal motion, that is a completely different situation.

 

Maybe this video by @Carl can help:

 

Also check these demos by Carl as well:

 

 

 

 

 

 

Hopefully this helps

Happy Tweening!

@Rodrigo Hi again!) I'm actually trying to implement something similar to this site(reference https://ctrl.xyz/), but unfortunately I still can't get it to work.. could you help? list animation like in the picture
 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

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

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

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

[Yaan]

7 minutes ago, GSAP Helper said:

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

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

 

 

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

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

Hi. So I did provide a link to the site and a screenshot from the site as an example, which is what I'm trying to implement as well! Thanks:)

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[Yaan]

7 hours ago, GSAP Helper said:

Мы любим помогать с вопросами, связанными с GSAP, но, к сожалению, у нас просто нет ресурсов, чтобы предоставлять бесплатные общие консультации, устранение неполадок в логике или руководства «как мне воссоздать этот классный эффект, который я видел на другом сайте?» . Конечно, любой другой может опубликовать ответ — мы просто хотим управлять ожиданиями.  

 

Если вы ищете эффекты ScrollTrigger , я бы рекомендовал посмотреть демоверсии по адресу  https://codepen.io/collection/DkvGzg и https://codepen.io/collection/AEbkkJ  — возможно, вы сможете использовать одну из них в качестве отправной точки. 

 

Вы можете разместить сообщение на форуме «Работа и фриланс» для получения платной консультации или связаться с нами напрямую. 

 

В противном случае, если у вас есть вопрос, касающийся GSAP, просто опубликуйте его здесь вместе с минимальной демонстрацией , и мы с радостью рассмотрим его. 

Hi! I've created a minimal project. 

See the Pen MWNWKoq by yynyds (@yynyds) on CodePen.

  Need help, as you can see from the code, on the scroll, changes the direction of animation, but at some points the elements begin to overlap, I suspect that this is because the previous animation is not finished, and also need to dynamically change the speed depending on the scroll, this I have not yet done, I do not know how, please help!

[Yaan]

Hi everyone, I don't need any more help, I've solved my problem, thanks:)

[Arafatah]

On 9/23/2024 at 9:22 PM, Yaan said:

Hi everyone, I don't need any more help, I've solved my problem, thanks:)

 

Yaan, how did you solve the problem? If you could share your answer, it would be very helpful. I'm also looking for this.