Jump to content
Search Community

Updating/changing snap on resize

Sahil test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

I have come far enough with what I wanted to do for carousal effect. Initially wasn't using throwProps plugin but I decided to use it. Following is the snippet that controls snap

 

    function snapX(x){
        console.log(Math.round(x / boxWidth) * boxWidth);
        return Math.round(x / boxWidth) * boxWidth;
    }

 

The issue is, on resize slides start snapping at wrong place. This is the first time I am using ThrowProps and snap. From what I have found so far, the snap doens't update on resize and it keeps referencing previous boxWidth. And once you drag it, then on second drag it starts referencing newly calculated value on resize.

 

Steps to reproduce,

Case 1:

1. Load page.

2. Drag slider.

3. Resize window.

4. Drag slider again and it won't snap normally.

5. Let slides auto slide.

6. Drag again and it will snap like normal.

 

Case 2:

1. Reload page or let it snap normally.

2. Drag slider and let it slide normally.

3. Resize window.

4. Let it slide normally and it will slide as if nothing is wrong.

5. Now drag and it will snap incorrectly.

6. Now let it slide automatically.

7. Now drag again and you will see that it snaps correctly.

 

Both of cases tell me that draggable only updates snap on dragging. Is it possible to update snap? Or any other solution that will just update Draggable instance so it will snap correctly?

See the Pen gGLaMv?editors=0111 by Sahil89 (@Sahil89) on CodePen

Link to comment
Share on other sites

Well I gave up on using throwProps, I couldn't get slides to snap to original position. I haven't really used throwProps until today so I guess I will need to spend some time practicing it to really understand what is going on. I decided to just slide based on if user keeps dragging or cancels in the middle.

 

See the Pen veLaxP by Sahil89 (@Sahil89) on CodePen

 

Link to comment
Share on other sites

You can totally use ThrowPropsPlugin for that - I think there were just some logic issues in your updateProgress() function. If you prevent the onThrowUpdate from calling that, you'll see what I mean. I haven't had time to analyze it all and figure out exactly how to re-code things, but it sounds like you got what you wanted already, right? Let me know if you need some more help with it.

 

Another interesting approach you could consider is to just create a linear timeline that animates the whole thing across the screen, pause it, and hook up a Draggable to an invisible div that sits on top and simply controls the progress() or time() of that timeline. Just a thought. 

Link to comment
Share on other sites

Hi @Sahil

 

I think you might be overthinking some of the demos I made. Updating the progress using a draggable proxy should give you a clue how to update a slide without dragging. Just tween the proxy div, and update the slider progress using the onUpdate callback.

 

The resize could use a little work. Maybe by keeping track of the current slide, but see if this helps out.

 

See the Pen ?editors=0010 by osublake (@osublake) on CodePen

 

  • Thanks 1
Link to comment
Share on other sites

Thanks Blake that is perfect.

 

I did manage to do what I wanted but you know I wanted to do more. :-D So decided to use throwProps but it was headache as I had no experience with throwPropsPlugin. I learned a lot from your demos and thanks for new demo.

  • Like 1
Link to comment
Share on other sites

What a lot of people don't realize is that the ThrowPropsPlugin is NOT dependent on Draggable. Check out the docs for it and the VelocityTracker

 

You can do a lot of interesting things with those plugins/utils, like bounce an object...

 

 

And throw stuff isn't part of the DOM, like an object in canvas/WebGL...

 

See the Pen dNdbwW by osublake (@osublake) on CodePen

 

 

  • Like 4
Link to comment
Share on other sites

Ya I was messing with velocity but you saved me when you posted your demo.

 

I don't know if you remember but more than a year ago I had contacted you saying I would like to learn from you, but after that I had been out of touch. Now I am getting back to it and have decided to learn it so I can do some fun stuff.

  • Like 1
Link to comment
Share on other sites

1 hour ago, Sahil said:

I don't know if you remember but more than a year ago I had contacted you saying I would like to learn from you, but after that I had been out of touch. 

 

Hehe. I remember you. I actually had to look you up not too long ago because I was helping somebody with a rotating cube, and forgot how I did it in that demo I made for you.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...