OSUblake

Welcome to the forums @prst22 Are you using Bootstrap? Most people don't add that to their CSS, so I was just curious how it got there.

Oh, right. I forgot about there not being a gsap/all for dist. Transpiling modules is still an experimental feature in next.js. There is a package to transpile ES Modules, which in theory should allow you to use gsap/all, but I've honestly never tried it so I can't say with 100% certainty that it will work. https://github.com/martpie/next-transpile-modules

Yeah, that's weird. I have no idea why it might be doing that for you on your setup but not on CodeSandbox. Just curious is using something like typeof Draggable works. But you really don't even need to have myDraggable and the proxy in the data because you really don't need those to be reactive, so something like this should be fine. Also note that if you're only creating a single Draggable, you can use new Draggable instead of Draggable.create to get the instance.

Yeah, that should be fine. There is no best solution as that is kind of subjective.

Love it! Thanks for sharing!

That is not going cause any errors, and you really shouldn't worry about that property as it's really not documented. Can you post your TypeScript code and why you think it's an error? You can use CodeSandbox if you really need to show the TypeScript error.

Hi kingcrimson, I'm not exactly sure what mean by hitting the bottom. Are you trying to get the bottom of img to unpin when it hits this red line?

Is this the same question/issue you were asking here?

Sure, I just switched the wrap to clamp, and then check if the index is the same as the currentIndex. If they're the same, that means it's either on the first or last slide, so we should just return out of the function. let clamp = gsap.utils.clamp(0, sections.length - 1); function gotoSection(index, direction) { index = clamp(index); // make sure it's valid // If they are the same, it's either the first or last slide if (index === currentIndex) { return; } ... } Animated Continuous Sections with GSAP Observer (codepen.io)

Were you only testing on CodePen, or is this something you were running into locally? I couldn't reproduce the issue using the debug URL which doesn't run in an iframe. https://cdpn.io/pen/debug/XWVvMGr#section3

Actually you can. ? import { gsap, ScrollTrigger, ScrollSmoother } from "gsap/all"; The reason it's not like that as the default is because when version 3 of GSAP came out, tree-shaking wasn't that common of a practice, so people would end up with huge bundles.

I'm not sure what you mean by this. There really aren't any learning resources, but we do have a collection of Observer demos on CodePen. The thing to keep in mind for the Observer is that is doesn't provide any logic to any animations, so you have to come up with that. Observer Showcase - a Collection by GreenSock on CodePen

If you're looking for the basics of using React with GSAP, we do have a guide.

Hi @Apnw2 It would be very helpful if you could provide a minimal demo that clearly shows the issue, and feel free to start a new topic in the forum.

Yeah, I see the issue but I'm not sure why. That's why we like to have a minimal demo so we can test and experiment with issue.

Welcome to the forums @Attaaa If you need help, please provide a minimal demo. You don't need to include everything in your project or even React. Just make a simple CodePen that focuses on the animation.

So sorry. It was bad timing because this happened right around the time we were getting ready to push out the latest version of GSAP, so I had to this on the back burner. But now that's released, I can look more into this. I don't have a lot of pointers to give right now. It's a super complicated task, and I just started roughing out some ideas. I only got as far a doing a simple prev and next animation, so no dragging or wrapping at the moment. And the code super messy because I was just testing different ideas out as the wrapping can become really complex if the elements inside are not all the same width. https://codepen.io/osublake/pen/jOYPqbE/7add63e1e42d8bcad8f0fa2807498210

Hi @Scriviante If you need help, please don't post live sites or code snippets. That's what CodeSandbox is for ? I'm not sure what you're encountering, but maybe this thread will help you out. It's next.js, but close enough.

You can listen for that. ScrollTrigger.addEventListener("refresh", () => { if (someCondition) { goToPer(); } else { goToSec(); } })

Did you try setting ScrollTrigger's config to ignore resize? And have you tried some of the new viewport units? They should be in Safari. https://dev.to/frehner/css-vh-dvh-lvh-svh-and-vw-units-27k4

Snapping, whether through GSAP or CSS, will only start once you stop scrolling. If you're looking to do something like fullpage, you can use the Observer plugin to control stuff using stuff like wheel and touch events, kind of like what this demo is doing. https://codepen.io/GreenSock/pen/XWzRraJ

You just need to set overflow: visible on your SVG. ?

I think we might able to resolve this issue in the future by updating GSAP's package.json by explicitly defining what files to use for exports, but I still need to do some more testing to make sure it works with other build tools.

Welcome to the forums @De.Minov I'm not seeing any issues in the demo, but maybe I'm not doing it correctly. ?‍♂️ If you don't want ScrollTrigger to refresh on resize, you can tell ScrollTrigger what events to refresh on with autoRefreshEvents or to ignoreMobileResize with ScrollTrigger.config(). https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.config()

Welcome to the forums @NoOneFreelanceCollective I'm not sure what you mean by it breaks. Can you be a little more descriptive because I'm not noticing any issues here? GSAP Starter Template (codepen.io)