Jump to content
Search Community

Pin issue with Chrome

danish.gd test
Moderator Tag

Recommended Posts

Hi everyone!
I'm new in this forum and a beginner with gsap.

 

I created a very simple animation with a pin section, it works well in every browser, mobile devices included, but I have this strange issue on Chrome with pin-spacing. 
When I load the page from the top or after the animation, it works perfect, but if I load, refresh or resize the page at any point before the animation it doesn't work. It creates a white space where the animation should be, the animation is pinned in a random space before the white space and the section with the final position of elements is duplicated after the white space. I can't really figure it out, it's driving me crazy!

 

I recreated a simplified project on codepen with the same js code and css and it works fine!!!! I have this problem only with my full project (see the screens).

I already tried to delete sections and javascript codes that can create a conflict, and tried other stuff that I found in this forum, but nothing seems to work.

 

Can anyone help me?

Thank you very much

animation-overlap.jpg

white-space.jpg

section-duplicated.jpg

See the Pen xxNYWew by Grazioli-Design-Srl (@Grazioli-Design-Srl) on CodePen

Link to comment
Share on other sites

Hi @danish.gd and welcome to the GSAP Forums!

 

Yeah, is really hard for us to do a lot without a demo that clearly illustrates the problem. This could be perhaps in a CSS library or the styles being injected by another package.

 

Another option could be that this stems from a global style in your CSS and some chrome extension is being affected by that. For example this:

section {
  height: 100vh;
  width: 100%;
}

Will  affect every <section> tag. I know for a fact that the Loom extension adds a section tag to your HTML, so that tag  creates extra vertical space. Maybe try inspecting the extra space you got with devtools and see where it belongs and comes from, but the fact that this happens just in chrome could lead me to think that maybe an extension could be the culprit here.

 

Sorry I can't be of more assistance. Hopefully this helps in some way.

Happy Tweening!

Link to comment
Share on other sites

Hi Rodrigo,

thanks for your reply. This actually really helped me! 
I tried to delete every single css rule that affected multiple elements, I found out that the problem was this line of code

html {

scroll-behavior: smooth;

}

I don't know why, because I use this rule in every project and it never happens to find out this issue, even using gsap ?

But now it works fine!!!

Thank you very much for your help!

  • Like 2
Link to comment
Share on other sites

4 hours ago, Cassie said:

Ah yeah, we've seen a fair amount of issues related to that rule and ScrollTrigger functionality!

Just to clarify, this isn't due to some kind of bug in ScrollTrigger. It's because when you set scroll-behavior: smooth on the body or html like that, it's just like applying a CSS transition to properties that GSAP is trying to animate - when GSAP tries to set a value, the browser is like "NOPE! I'm not gonna do that yet...I'm gonna drag that out over time instead..." When ScrollTrigger tries to recalculate all of the start/end positions, it must temporarily set the scroll position to 0 and then set it back to what it was. But the browser refuses to cooperate promptly if you set scroll-behavior: smooth like that. 

  • Like 1
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...