Jump to content
GreenSock

Kent Pilkington

ScrollSmoother doesn't appear to update transform matrix3d value until page reload

Recommended Posts

So, the above codepen is a fork of the Greensock codepen demo. I modified it a little bit to test out some theories and understand what was going on and what might be going wrong on my dev site, but have not been able to reproduce the behavior that I'm seeing. 

 

Worth noting: I've now used GSAP and ScrollTrigger on a couple of sites, but this is my first encounter with ScrollSmoother, so it's possible that I'm making a rookie mistake.

 

The link where I'm seeing the problem is https://lariattx.dennardlacey.com/homepagetest/. (This is the only page where the ScrollSmoother init code is running because I need to keep working on the rest of the site.)

I'm initializing things as follows:

jQuery(document).ready(function(){

    gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
    
    let smoother = ScrollSmoother.create({
        content: 'main',
      //smooth: 2,   // seconds it takes to "catch up" to native scroll position
        effects: true // look for data-speed and data-lag attributes on elements and animate accordingly
    });
    smoother.effects('.parallax img', { speed: "auto" });
});

This is almost a cut/paste of the init code used in this other pen (

See the Pen PoOpobM?editors=1111 by GreenSock (@GreenSock) on CodePen

) which is a lot closer to what I'm trying to accomplish (basic parallaxing of images). Rather than adding smoother-wrapper and smoother-content elements to my HTML, I'm telling it to use the main tag as the content (there's only one per page) and allowing it to create the wrapper tag around it - which it does appear to be doing. (I've actually tried it both ways with the same resulting behavior.)

 

When I inspect either of the codepens mentioned above, I can see that the the content element is getting its style updated as the user scrolls. For example, style="translate: none; rotate: none; scale: none; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -630, 0, 1); box-sizing: border-box; width: 100%; overflow: visible;" Specifically, I can see the matrix3d transform getting updated, which I believe is the bit that actually scrolls the content.

 

When I inspect the page on my site, the elements are present in the HTML, but the style attribute does not get updated when I scroll, nor does the content scroll. I DO, however, see the scrollbar moving, and if I reload the page, then it reloads and shows the content that I would have scrolled to - AND it even updates the content element's style (style="translate: none; rotate: none; scale: none; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -136, 0, 1); box-sizing: border-box; width: 100%; overflow: visible;").

 

So, it seems to be working on some level, but just isn't posting updates correctly?

 

I'm trying to pull out any kind of plugin feature that I suspect might be interfering, but haven't yet had any success, and since I'm unable to replicate it in a codepen, I'm not entirely sure where to turn next.

 

I'm also looking at any CSS properties I may have applied to the HTML or body elements - basically anything that's a parent to <main>, but again, no luck so far.

 

Ideas? Suggestions?

See the Pen OJZEzOB by ThinkByDesignInc (@ThinkByDesignInc) on CodePen

Link to comment
Share on other sites

We can't effectively troubleshoot a live site (too many factors, impossible to tweak/experiment), but I would definitely recommend fixing your setup so that you've got ALL your content in a wrapper <div> as the docs state. Right now, you've got a bunch of other stuff sitting loose in the <body> which is not good. ScrollSmoother works by having your entire page inside that content <div> that's inside a wrapper which serves as the viewport and then it translates the content <div> accordingly to make it appear to scroll.  Only position: fixed elements should sit outside your wrapper because they won't take up any space/layout. Try that and then if it still isn't working, see if you can get a minimal demo that's showing a similar problem so that we can give you some help. 

 

Thanks for being a Club GreenSock member! 🥳

  • Like 1
Link to comment
Share on other sites

Oh, also, DEFINITELY  update to version 3.11.3.  :)

Link to comment
Share on other sites

I think the footer is the only other thing to move inside. The header is fixed, as would be things like modals and their overlays.

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