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.

On 4/29/2022 at 6:28 PM, NickPish said:

I just want to confirm that the best way to handle the behavior is using a "master" forEach loop that checks for the panel type and creates the appropriate scrolltrigger, assuming I use a consistent pattern of classes for elements throughout? In my case, following @OSUblake's model, it would be something like this, I assume?

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

Love it! Thanks for sharing!

8 hours ago, Antdev said:

I wonder if the issues I am having with setting the type as Draggable is related to this in draggable.d.ts

 

readonly scrollProxy: any; // TODO: Create interface

 

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;
  }
  
  ...
}

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

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

7 hours ago, chimp1nski said:

I think it's kind of the wrong place to discuss it but i'd love to be able to import like this:

import gsap, { ScrollTrigger, ScrollSmoother } from "gsap";

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. 

8 hours ago, Chybosky said:

Please How can I set this to just scroll up and down and not animate continuously?

I'm not sure what you mean by this. 

5 hours ago, Chybosky said:

Please I will really appreciate any learning resource on Vertical Scroll Snapping using Observer Plugin.

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.

See the Pen 7add63e1e42d8bcad8f0fa2807498210 by osublake (@osublake) on CodePen

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.

10 minutes ago, De.Minov said:

It seems to me that when refresh() is used, it is necessary to check where `start` is relative to the center of the screen and "send" it to the nearest "screen"

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.

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

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?

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