Jump to content

OSUblake last won the day on June 4

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by OSUblake

  1. 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.





  2. 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. 


    • Like 1
  3. 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.


  4. 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) {


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


    • Like 3
  5. 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. 


  6. 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


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



    • Like 1
  8. 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) {
        } else {