Jump to content
GreenSock

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

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

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

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:

 

Link to post
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 post
Share on other sites
Just now, Tee said:

I reckon I did - as far as I know.

It looks like you linked the original pen, which has no text. Please click "Fork" on it in the bottom right and then edit it to recreate the error that you are describing.

Link to post
Share on other sites
10 minutes ago, Tee said:

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

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.

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

×