Jump to content
Search Community

scrollSmoother and uikit sticky objects

ginphreak test
Moderator Tag

Recommended Posts

Hello everyone,
i have a problem with scrollSmoother plugin and sticky objects created with uikit (https://getuikit.com/docs/sticky with show-on-up parameter active). I take the object I want (the header in this case) out of the "smooth wrapper" and the animation works fine except at the beginning (when the page has just loaded). Has anyone already found themselves in this situation? Any suggestions?

Thank you all!

Link to comment
Share on other sites

Hi there,


Thanks for joining club GreenSock, we appreciate the support! 🥳


So, it sounds like you're aware that fixed elements need to be out of the wrapper

  <div id="smooth-wrapper">
    <div id="smooth-content">
      <!--- ALL YOUR CONTENT HERE --->
  <!-- position: fixed elements can go outside --->


I'm afraid without seeing a minimal demo we can't help much further as this sounds very specific to your trigger points and code setup!

  • Like 1
Link to comment
Share on other sites

Can you explain what you mean by "...makes a horrible click"? I'm struggling to understand what you think the problem is. I'm probably missing something obvious, but it seems to be working exactly as it should. I wonder if you just have the "start" value set to a higher value than you need(?) 


If you still need help, please provide a minimal demo, like in CodePen or Stackblitz that only shows the essential code to illustrate the problem (don't include your whole project). Some colored <div> elements is adequate. We just can't effectively troubleshoot a live site where it's impossible to quickly tweak the code and poke around.

Link to comment
Share on other sites

You mean like this?: 

See the Pen dywzYrO by GreenSock (@GreenSock) on CodePen


  start: 1, // as soon as the user scrolls down even 1 pixel, trigger
  onEnter: () => gsap.to(".main-tool-bar", {top: 0}),
  once: true

By the way, I noticed you had a CSS transition on the element you were animating with GSAP. You definitely shouldn't do that. It'll perform much, much better if you just let GSAP handle it. Otherwise, the CSS animation constantly interferes and tries to restart gradually animating the value that GSAP just tried to set. 

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