Jump to content
GreenSock

OSUblake last won the day on November 19

OSUblake had the most liked content!

OSUblake

Administrators
  • Posts

    9,196
  • Joined

  • Last visited

  • Days Won

    705

Everything posted by OSUblake

  1. That feature will not work with ScrollTrigger, so it's fine. Also, we have our own smooth scrolling plugin for Club GreenSock members. https://greensock.com/scrollsmoother/
  2. 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 // }); ScrollTrigger.normalizeScroll(true);
  3. Welcome to the GSAP forums @omi I would suggest using a different ease. Check out the graph of a circ.in ease. Notice how the very end is almost a vertical line, which can result in a snapping-like behavior once the animation gets near the end.
  4. Welcome to the forums @Priti Parikh Before continuing any further, you should refactor your code as you have nested timelines, which is going to mess stuff up. Please check out the Most Common ScrollTrigger Mistakes article, especially the part about nesting ScrollTriggers inside tweens.
  5. OSUblake

    Gsap and react

    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.
  6. Hi Shaun, I would keep everything scoped inside a function, kind of like this. And I would also use fromTo animations just to make sure you don't into any from logic issues. GSAP ScrollTrigger + motionPath 003 (codepen.io)
  7. 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.
  8. Here's a starter template with nuxt if you want to see a basic setup. Notice how we add transpile: ["gsap"] to the build in the nuxt.config. Otherwise, you would need to import plugins from the dist folder. https://codesandbox.io/s/gsap-nuxt-starter-r5lkg?file=/pages/index.vue
  9. OSUblake

    Gif Control

    Thanks for demo. Like I was saying earlier, you can use a Timeline's position parameter to control that. GSAP Fireball Example (codepen.io) 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.
  10. OSUblake

    Gif Control

    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!
  11. Can you verify that it is the latest version. Look for the version number inside the package.json in node_modules > gsap > package.json.
  12. OSUblake

    Gsap and react

    Welcome to the forums @Hernanbp It's very hard to answer a question like this without a minimal demo. You can use CodeSandbox if you need to use next. Thanks!
  13. Hi nattha, There's some basic dragging demos here. And there are a couple in our CodePen collection. https://codepen.io/collection/KpNYOd
  14. Hi mea_culpa, Did you have a question?
  15. 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.
  16. Welcome to the forums @b-link To do the animations on the site, ScrollTrigger is probably not the best tool. Notice how you freely scroll around on that site. That's because all the animations are event driven, which is the kind of stuff the Observer plugin can help out with. https://codepen.io/GreenSock/pen/XWzRraJ https://codepen.io/cassie-codes/pen/vYWvwXV
  17. OSUblake

    GSAP - Wavify

    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.
  18. And you should also get rid of those nested ScrollTriggers. Check out the section about nesting ScrollTriggers here...
  19. 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. 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.
  20. 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. https://github.com/gatsbyjs/gatsby/issues/7310 So now I can reproduce the issue in vanilla html. We'll need to investigate if this is something ScrollSmoother can resolve. A Pen by GreenSock (codepen.io)
  21. Please add in a fire button so we can shoot at the fly. 🙏
  22. Hi BC, That seems a little odd so I'll need to investigate that some more, but here's a work around for now. gsap-resize-width (codepen.io)
  23. 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) }
  24. Hi Anup, It's not clear what you're asking or having problems with. Can you be a little be more specific with your question?
  25. Welcome to the forums @Maga Pascansky Check out the solutions posted in this thread. Also, I would recommend switching over the newer GSAP syntax. // var headerAnim = new TimelineMax(); var headerAnim = gsap.timeline(); You can check out the syntax changes in the Migration Guide.
×