Jump to content
Search Community

GSAP marquee few lines in diff direction with increse speed on scroll?

Poylar test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hi.

I'm trying to make a fully responsive marquee with gsap with increasing marquee speed scrolling on page scroll  (I'm using gsap smoothScroller)
I have already read a lot of topics on the marquee gsap forum, but somewhere the quality of the code leaves much to be desired.
Is there any best practice to do what I want?
most likely I made a mistake in the html markup.
I tried increasing the timeScale in the scrollTrigger but it just didn't work.
Thanks for any advice/examples

See the Pen OJwbjZq?editors=0011 by poylar (@poylar) on CodePen

Link to comment
Share on other sites

Apologies for the lack of response so far, but it looks like people are struggling to help with this question. Vague details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Here are some tips that will increase your chance of getting a solid answer:
 

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 

 

You said you're using SmoothScroller (I assume you meant ScrollSmoother) but I didn't see that anywhere in your code. I'm not exactly sure what you're looking for, what's not working the way you want, etc. Do you have links to the other marquee effects you're pulling from? What do you mean by "scroll acceleration" and "pro scroll page"? 

Link to comment
Share on other sites

11 minutes ago, GSAP Helper said:

Apologies for the lack of response so far, but it looks like people are struggling to help with this question. Vague details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Here are some tips that will increase your chance of getting a solid answer:
 

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 

 

You said you're using SmoothScroller (I assume you meant ScrollSmoother) but I didn't see that anywhere in your code. I'm not exactly sure what you're looking for, what's not working the way you want, etc. Do you have links to the other marquee effects you're pulling from? What do you mean by "scroll acceleration" and "pro scroll page"? 

im sorry, i edited my topic.

i dont know you are bot or real human, but anyway...

I said about ScrollSmoother just so you understand that I have access to its methods, maybe this is not necessary (Just additional information)

 

In fact, I expect just an infinite marquee with acceleration of its scrolling when scrolling the entire page, but at the same time, the marquee itself also has its own speed

 

maybe i am looking for something like this

See the Pen VwQgQWW by theflash8888 (@theflash8888) on CodePen

But I can't repeat this code in my case

Link to comment
Share on other sites

13 minutes ago, Poylar said:

In fact, I expect just an infinite marquee with acceleration of its scrolling when scrolling the entire page, but at the same time, the marquee itself also has its own speed

Do you mean something like this (from one of the links I already shared above)?: 

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

Link to comment
Share on other sites

37 minutes ago, GreenSock said:

Do you mean something like this (from one of the links I already shared above)?: 

 

 

yes, this good, but a lot of code (jk)

how i can add there increase marquee speed while scrolling page and return to normal speed when scrolling is done?

Link to comment
Share on other sites

  • Solution

Hi,

 

This should work:

const roll1 = roll(".rollingText", {duration: 10}),
      roll2 = roll(".rollingText02", {duration: 10}, true),
      scroll = ScrollTrigger.create({
        onUpdate(self) {
          if (self.direction !== direction) {
            direction *= -1;
            roll1.timeScale(direction * 3);
            roll2.timeScale(direction * 3);
            gsap.to([roll1, roll2], {timeScale: direction, overwrite: true, duration: 1});
          }
        }
      });

Happy Tweening!

Link to comment
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.
×
×
  • Create New...