Jump to content

OSUblake last won the day on June 4

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by OSUblake

  1. Welcome to the forums @Tada AS


    Is very answer hard to local dev questions, but assuming you've nuked your node_modules folder and the latest tgz is in your project, then it's probably some sort of caching issue with the package manager you are using. Try googling for how to clear the cache of whatever package manager you are using. It usually seems to be yarn that does kind of stuff.


    • Like 1
  2. Welcome to the forums @Studio7


    To prevent it from looping, you just need to get rid of the wrapForward/wrapBackward calls.


    onUpdate(self) {
    			if (self.progress === 1 && self.direction > 0 && !self.wrapping) {
    				// wrapForward(self);
    			} else if (self.progress < 1e-5 && self.direction < 0 && !self.wrapping) {
    				// wrapBackward(self);
    			} else {
            scrub.vars.totalTime = snap((iteration + self.progress) * seamlessLoop.duration());
    				scrub.invalidate().restart(); // to improve performance, we just invalidate and restart the same tween. No need for overwrites or creating a new tween on each update.
    				self.wrapping = false;


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


    But that's a rather complicated demo to learn from. It might be easier to start out small and build up to what you want following this article. And, of course you can ignore the looping parts, but the animations might still be helpful.


    Going “Meta GSAP”: The Quest for “Perfect” Infinite Scrolling | CSS-Tricks - CSS-Tricks


    • Like 3
  3. 3 minutes ago, Shuriken said:

    As the From tween do not work as well. I must use a fromTo


    If you're using React 18, that just a new feature that is causing those issues. We're looking at ways to fix that, but for now it is what it is. It seems like every new version of React throws some new feature into the mix that makes doing animations increasingly more complex and tedious.



  4. Currently normalizeScroll does not support nested scrollers, but it's something we're investigating. For now you'll just have to disable that feature.


                content: "#smooth-content",
                wrapper: "#smooth-wrapper",
                smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position
                effects: false, // looks for data-speed and data-lag attributes on elements
                // normalizeScroll: true, // prevents address bar from showing/hiding on most devices, solves various other browser inconsistencies
                smoothTouch: 0,


    • Like 1
  5. 14 minutes ago, PointC said:

    I can't find anything on CodePen. 🤷‍♂️


    Haha, I can't either, but luckily someone brought that demo up to me in a DM a couple of weeks, so it was easy to find.


    • Like 1
  6. 28 minutes ago, PointC said:

    Here's a cool pen from resident guru @OSUblake. It's a few years old, but he may have an updated version - I'm not sure.


    Nope. I don't want to touch that again. It brings up way too many questions that I don't want to answer. 😉


    But here is a bezier connector isolated. 


    See the Pen GMrExO by osublake (@osublake) on CodePen

    • Like 2
  7. 24 minutes ago, Apnw2 said:

    when I saw it doesn't work on field. I think that's because getBoundingClientRect gives me the value with transform at each time.


    What do you mean by field? It's doing getBoundingClientRect correctly as you can see in the logs there are no transforms when it's called.


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


    If you're trying to have it match up exactly with size and position, it would be probably be better to calculate and animate to the center of each element. The scaling is going to mess up the x and y coordinates if you use the elements top left corner because the transform origin is in the center.


    • Like 1
  8. Hi Apnw2,


    One issue is that you forgot to put invalidateOnRefresh inside the scrollTrigger object. Another issue is that getBoundingClientRect includes transform, which is going to mess up your calculations if there are any transforms applied. It's best to compute all that when animation is invalidated as it will reset those transforms, allowing you to get the correct getBoundingClient values.


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


    • Like 2
  9. Hi PixelPixie,


    It's best to keep your demos as simple as possible, that just focus on the issue at hand. So based on the question in that previous post, is this what you were going for? All I really did is move the nav to side and added a the same onlick listener that the nav uses for each section, so when click on a section it does the same thing as click on the nav links.


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


    • Like 3
  10. Yeah, I can edit it. I think one of the issues is that that nesting needs to be different, kind like this.


    <div id="smooth-wrapper">
              <div id="smooth-content">
                <PageTransition route={router.asPath}>
                  <Component {...pageProps} />


    And we need to kill some ScrollTriggers and effects when navigating to a new page. We also need to refresh ScrollSmoother on new routes. I just put it inside a timeout for now. How would I go about calling ScrollTrigger.refresh() at the end of the page transition?


    It's looking better, but there are still issues with it, like that black area when you scroll down. Is that part of the wipe?




    I'm going to tinker around with make a ScrollSmoother component similar to what I did with this nuxt.js one. 




    • Like 2
  11. Hi serotininene,


    That scroll animation looks the same to me whether the console is open or closed. What browser and OS are you seeing this on?


    The only weird thing I noticed is that when that contact form at the bottom appears, it's changing the scroll position, probably because it's changing the height of the document, but I don't know if that is related to what you are seeing and you are properly handling that change like doing a ScrollTrigger refresh.


    If you could try to make a demo that reproduces the issue, that would be really helpful because it's really to troubleshoot a live site, especially when can't interact with the code and make changes to it. You can use CodeSandbox if you need to use React.