Jump to content

OSUblake last won the day on November 19 2022

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything 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.
  2. Actually those updates were just push a couple of hours ago, so try downloading the new tgz.
  3. You really can't use fit like that by passing in a scrollTrigger. However, you can still use fit to get the values you need. ScrollTrigger invalidation on window resizing (codepen.io)
  4. 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; } Infinite Scrolling Cards with GSAP and ScrollTrigger (continuous snap) (codepen.io) 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
  5. Hi beavykins, It's hard to advise without seeing a minimal demo, but there is helper function for using Lottie with ScrollTrigger. https://greensock.com/docs/v3/HelperFunctions#lottie https://codepen.io/GreenSock/pen/QWdjEbx
  6. 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.
  7. Hi @konstantinschuette I'm not seeing that. Maybe you have an extension that is messing with it. Have you tried it in incognito mode?
  8. It just clears the dev console. You'll typically see that in CodePen demos because it doesn't reload the page when you make changes, so the console might have a bunch of old console.log messages showing. https://developer.mozilla.org/en-US/docs/Web/API/console
  9. Currently normalizeScroll does not support nested scrollers, but it's something we're investigating. For now you'll just have to disable that feature. ScrollSmoother.create({ 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, })
  10. 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.
  11. 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. https://codepen.io/osublake/pen/GMrExO
  12. Welcome to the forums @Oleh_Rusyi Can you make a minimal demo showing that? And you are you using normalizeScroll?
  13. Hi Sascha, Can you try with these beta files for 3.10.4? https://assets.codepen.io/16327/ScrollTrigger.min.js https://assets.codepen.io/16327/ScrollSmoother.min.js
  14. Yeah, that can work too. You just have to be careful if the elements are nested deeply as offsetLeft/offsetTop are relative to the nearest offset parent.
  15. 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. https://codepen.io/GreenSock/pen/GRyLgYP 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.
  16. Welcome to the forums @Vinicius Eidy You can use your ScrollTrigger's callbacks like onEnter, onLeave, onEnterBack, and onLeaveBack to custom whatever you want. It's very similar to this answer. @akapowl is changing the classList property of an element. Same basic concept.
  17. 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. ScrollTrigger invalidation on window resizing (codepen.io)
  18. I think the demo just needed the beta version of ScrollTrigger 3.10.4. https://assets.codepen.io/16327/ScrollTrigger.min.js A Pen by GreenSock (codepen.io)
  19. 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. ScrollTrigger - horizontal scroll with variable width sections and anchor links (codepen.io)
  20. Can you check this version of ScrollTrigger to see if fixes your issue? https://assets.codepen.io/16327/ScrollTrigger.min.js If you need to import it, just add that file to your project and import ScrollTrigger from it instead of gsap.
  21. 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} /> </PageTransition> </div> </div> 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? https://codesandbox.io/s/gsap-scrollsmoother-next-js-starter-forked-demo-459fmr?file=/pages/_app.js I'm going to tinker around with make a ScrollSmoother component similar to what I did with this nuxt.js one.
  22. Hm... I'm not sure about. When CodeSandbox, I usually click the Restart Sandbox and Restart Server buttons, and that usually fixes it. @Cassie do know anyone who might be able to help with this?
  23. This is what looks with the console closed. https://gyazo.com/5753f1e3d634888f0dd743bab23d94ff
  24. Hi null, Here's a next.js demo you can fork for ScrollSmoother. To use on CodeSandbox, install gsap-trial instead of gsap. https://codesandbox.io/s/gsap-scrollsmoother-next-js-starter-0h67eh?file=/pages/index.js