Jump to content
Search Community

GSAP Smooth scroll can't get correct body height because of text

Tee test
Moderator Tag

Recommended Posts

I'm currently trying to implement a smooth scroll just like @OSUblake's smooth scroll. 

 

 

As for my content I solely have some images and some text. These images and texts are being fetched asynchronously, as soon as the data is set I try to resize the body to make the smooth scroll work for all of its content:

doResize() {
    this.scroller.scrollRequest++;
    this.requestId = null;
    this.scroller.resizeRequest = 1;
    this.requestId = requestAnimationFrame(this.updateScroller.bind(this));
}

 

This works fine. But somehow the text is still causing some minor height problems, not much but there's still some inset not showing all of the body's content - not always, but moste of the times. Removing the text solves the problem, but that's obviously not an option. 

 

My text component:

<div class="row m-0">
  <div class="col p-0">
    <h1 class="title-container">
      {{title}}
    </h1>
  </div>
  <div class="col p-0">
    <p>{{text}}</p>
  </div>
</div>

Removing p solves the problem.

 

Calling doResize() after a few second does also help, but I want it to have the correct height from the very start. 

BTW changing p's line height etc. does also affect the inset's size hiding some content.

 

Any suggestion how to prevent this from happening? 

 

EDIT: After removing the custom font, everything works as well - how so? 

See the Pen MWwbmMV by magiix (@magiix) on CodePen

Link to comment
Share on other sites

5 minutes ago, ZachSaucier said:

Hey Tee and welcome.

 

It's pretty hard for us to help without seeing the issue ourselves. Can you please create a minimal demo of the issue and share it with us so that we can take a look? For more information see this post:

 

I reckon I did - as far as I know.

Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

That's likely because it takes times for the font to load, which changes the size of the page when it renders. So you should wait to call the resize function until after the font has loaded.

The font is local, how do I know when it's loaded? Additionally I've never had this problem before, and I've used custom fonts and smooth scroll before. 

Link to comment
Share on other sites

Just now, Tee said:

The font is local, how do I know when it's loaded?

Even if it's local, it takes time for it to load for the page most likely. See https://stackoverflow.com/a/32292880/2065702 for more info on detecting if it's loaded.

 

It could be a different issue, but my guess is that it's related to the font loading at this point. 

Link to comment
Share on other sites

51 minutes ago, ZachSaucier said:

Even if it's local, it takes time for it to load for the page most likely. See https://stackoverflow.com/a/32292880/2065702 for more info on detecting if it's loaded.

 

It could be a different issue, but my guess is that it's related to the font loading at this point. 

I was able to fix the issue by adding 'sans-serif' to the font-family.. it's crazy. 

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...