Jump to content

OSUblake last won the day on November 19 2022

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by OSUblake

  1. 23 minutes ago, Milk0 said:

    Regarding the problem on iOS.. if someone has a way to fix it feel free to share, i can't find a way out from this at the moment


    We're looking into that. Can you confirm if the issue is still present if you don't create and the ScrollSmoother and just do ScrollTrigger.normalizeScroll?


    // let smoother = ScrollSmoother.create({
    //   smooth: 1,
    //   normalizeScroll: true
    // });


  2. It runs fine on CodeSandbox for me. Am I missing something?


    If you're using React 18, maybe the issue is related to this. If not handled properly, your from animations might end up creating a from logic issue



    I would also make sure that your effect has a dependency array and you kill of any animations you created in it. See the Cleaning Up part of our React Guide for more information about that.


  3. Then I'm not sure what to really recommend and this point. If that CodeSandbox version works fine for you, I would reduce everything you have down to that, so just some basic panels and nothing else, and then start adding in the rest of your page's layout, images, text, etc until you figure out what might be causing the issue.

  4. Thanks for demo. Like I was saying earlier, you can use a Timeline's position parameter to control that.


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


    Also, if you are going to animate the same element more than once, you may want to consider use fromTo animations instead so that you don't create from logic issues.



    • Like 2
  5. I'm still a little unsure about what you're having an issue with. Can you make a minimal demo that clearly shows what you are having an issue with? You don't need to include React or anything else not-related to the animation issue. Just something simple like an animation with a colored block. Thanks!

  6. Welcome to the forums @oskar råhlén


    It doesn't look like you have installed correctly as all of the bonus plugins are missing from your screenshot. Maybe you have an older version cached.



    And you'll need to import every plugin from the dist folder in next.js for the time being.


    • Thanks 1
  7. 5 hours ago, Trang said:

    I did think of animating 2 waves and flipping one but I thought there might be a more elegant solution. I always feel my solutions are very clumsy.


    That's the only thing I can think of that would work without actually modify the actual plugin, so it's not too clumsy of an idea.

  8. 20 minutes ago, Maga Pascansky said:

    First, I had to disable "scroll-behavior: smooth", which makes my nav work kind of awfully.


    I'm not sure what you mean, but you really shouldn't have that set if you're doing anything remotely related to scrolling with JavaScript.


    20 minutes ago, Maga Pascansky said:

    Also, killing the scrolltrigger made all of the following sections (which also work with scrolltrigger) break 😕


    Also, I'm not sure what mean here. What breaks? 


    I was nudging you towards the first solution in that thread because I know more people have had success with that solution, but I don't know what issues you are experiencing.



  9. Oh, I think I see the problem now. Gatsby is wrapping everything in a focusable element. That is why I recommended to try it without Gatsby to make it easier to narrow the problem down.



    So now I can reproduce the issue in vanilla html. We'll need to investigate if this is something ScrollSmoother can resolve.


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



  10. Hi Neontrenton,


    Sorry to hear about that, but there is not a lot we can really suggest if it works on CodePen as GSAP doesn't do anything special in a WordPress environment.


    You say the ScrollTrigger events don't work, but how to do you really know that? To debug stuff, I would turn your markers on and maybe add an onUpdate callback to your ScrollTriggers just to log something out so you know if it's working.


    onUpdate(self) {
      console.log("updating my scrolltrigger", self.progress)