ginphreak Posted September 11, 2023 Share Posted September 11, 2023 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 More sharing options...
Cassie Posted September 11, 2023 Share Posted September 11, 2023 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 <body> <div id="smooth-wrapper"> <div id="smooth-content"> <!--- ALL YOUR CONTENT HERE ---> </div> </div> <!-- position: fixed elements can go outside ---> </body> 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! 1 Link to comment Share on other sites More sharing options...
ginphreak Posted September 11, 2023 Author Share Posted September 11, 2023 Ok i have create a demo, you can see it on my server url: https://ilabserver.com/demo user: user_demo password: pass_gsap I commented the sticky object in the source. As you can see, when you start scrolling it makes a horrible click. But then continuing to scroll the animations of entry and exit of the black bar work great. Link to comment Share on other sites More sharing options...
GreenSock Posted September 11, 2023 Share Posted September 11, 2023 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 More sharing options...
Rodrigo Posted September 11, 2023 Share Posted September 11, 2023 Hi, Maybe this example can provide a good starting point for what you're trying to do: See the Pen qBawMGb by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
ginphreak Posted September 14, 2023 Author Share Posted September 14, 2023 Thank you very much, it worked very well. I would just like to make a small change: I would like to change the top margin of the header. When the page is just loaded it should be 50px from the top, while throughout the page it should be 20px from the top. See the Pen NWevKNG by Giuseppe-D-Manzavino (@Giuseppe-D-Manzavino) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted September 14, 2023 Share Posted September 14, 2023 You mean like this?: See the Pen dywzYrO by GreenSock (@GreenSock) on CodePen ScrollTrigger.create({ 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now