Jump to content
GreenSock

hellehs90

Text scrolling on window resize

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have a marquee animation on a text that works fine on page load. But when you adjust the browser window, the dimensions are not correct. Is it possible to update the x-axis with the correct variable on window resize and not run the whole function over again?

See the Pen LBYzzz by helleholmsen (@helleholmsen) on CodePen

Link to comment
Share on other sites

+1

As far as I know GSAP applies fixed value (eg. 1000), even tho if you apply for example 100vh value, which should scale nicely. I believe it's done due to better performance, but having an option to animate keeping responsivity would be nice. There's always this moment at the end when I have to bind tweens on window resize to keep things responsive.

Link to comment
Share on other sites

  • 1 year later...

@GreenSock,

 

How can I remove the horizontal line which is coming? Also text is overlaying. Can you help me out in this?

Screenshot 2020-03-09 at 12.13.09 PM.png

Link to comment
Share on other sites

Hey @hybreeder,

 

Without seeing the case live, it is difficult to give advice.
So please provide a codepen with your (reduced) case.

 

Happy CodePening ...

Mikel

 

  • Like 1
Link to comment
Share on other sites

Hey @hybreeder,

 

The resize function runs perfectly, no problem.

 

4 hours ago, hybreeder said:

How can I remove the horizontal line which is coming?

 

If you mean the scroll bar ?? Then

 

body{
  width:100%;
  overflow:hidden;
}

 

Happy tweening ...

Mikel

Link to comment
Share on other sites

1 minute ago, mikel said:

Hey @hybreeder,

 

The resize function runs perfectly, no problem.

 

 

If you mean the scroll bar ?? Then

 


body{
  width:100%;
  overflow:hidden;
}

 

Happy tweening ...

Mikel

If he means the scrollbar, you just disabled scrolling for the page.

I believe, the answer should be to keep the scrolling, but hide the scroll indicator:

::-webkit-scrollbar {
    display: none;
}

 

  • Like 2
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.
×