Jump to content
GreenSock

SteveZ

Infinite Draggable

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

Is it possible to create an infinite draggable loop using GSAP Draggable coupled with TweenMax?

 

I'm creating an animation demonstrating a briefcase combination lock - the kind with three or four inline tumblers next to each latch on a briefcase that are rotated to form a combination. Only one number (an image-not text) appears on the face of the tumbler I made. Draggable works great when I move ("rotate") the tumblers to reveal the next successive number; but my image is a png file that is a vertical line of numbers from 0 thru 9. I would like the numbers to repeat or loop if I was to continue dragging the tumbler giving the impression that it loops around.

post-15950-0-45674600-1377574682_thumb.jpg

Link to comment
Share on other sites

There isn't really a built-in way to automate that type of behavior, no, but you could create a proxy of sorts that does the conversion for you. In other words, imagine a DialProxy object (I made that up) whose rotation (or y position or whatever) correlates to your dial's, but when the value exceeds a certain amount, it wraps it back to the beginning. 

 

For example, if you want to move the png vertically and it's 100px tall, you'd have to place 2 instances of that (stacked vertically) and slide them behind a mask (or use canvas). Your DialProxy object may have a "y()" method that can be tweened, and when it receives a new value, it moves the 2 pngs to their appropriate positions. That way, even if yourDialProxy.y() is set to 150, inside your function you could just do the math (modulus) to wrap that and figure out that it'd be 50 instead of 150 and then apply it to your position(s). 

DialProxy = function() {
    var currentY = 0;
    this.y = function(value) {
        if (!arguments.length) {
            return currentY; //if no parameters are passed, this function acts as a getter, otherwise it's a setter.
        }
        currentY = value % 100; //wrap
        TweenLite.set(png1, {y:currentY});
        TweenLite.set(png2, {y:currentY - 100});
    }
}

At least that's the rough theory. The proxy object is the key - it's an object that handles the conversion and applies the values that come in from the tweening engine and does some magic. If you look at the guts of Draggable, that's exactly what we're doing for scrolling - there's a ScrollProxy class/object that runs special logic to do overscrolling. 

  • Like 2
Link to comment
Share on other sites

Hi Steve

 

I think I have a way for doing this. Give me until tomorrow morning to post it.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Hi Steve,

 

Is not the complete job but I hope is enough to start. I must tell you that I became fascinated by the concept of the briefcase lock simulation.

 

With this an issue came up, so there's a question to Carl and Jack. When you do a partial drag, not until the bound, the code tweens the progress and the draggable's target to the corresponding limit, then onComplete takes everything to 0, but if you click the value this.y is not updated, it should be 0 and creates an unwanted behaviour. How can I reset that value?.

 

Please take a look here:

See the Pen 5366f11be0238e46a98cdaf74ae6d882 by rhernando (@rhernando) on CodePen

 

Hope this helps,

Rodrigo.

Link to comment
Share on other sites

Thanks Rodrigo, you've given me a lot to go on!

 

~Steve

Link to comment
Share on other sites

With this an issue came up, so there's a question to Carl and Jack. When you do a partial drag, not until the bound, the code tweens the progress and the draggable's target to the corresponding limit, then onComplete takes everything to 0, but if you click the value this.y is not updated, it should be 0 and creates an unwanted behaviour. How can I reset that value?.

 

I haven't had time to look at that yet, but I just posted a preview of Draggable 1.8.1 in another thread; the update contains a bunch of enhancements and a few fixes, so would you mind trying that version and letting me know if it resolves things or if you still need the question answered? (for the record, there are no known outstanding bugs)

 

http://forums.greensock.com/topic/8056-draggable-invert-bounds-behavior/#entry31763

Link to comment
Share on other sites

Thanks Jack, I'll take a look.

 

In the meanwhile the issue got solved by adding the following to the Draggable.create() instance:

onClick:function()
    {
        this.y = 0;
    } 

For some reason that value didn't get back to 0 so I hardcoded it.

 

As soon as I've tested the new update I'll post back.

 

Rodrigo.

Link to comment
Share on other sites

Hi Jack,

 

The latest draggable update solved the issue.

 

Thanks a lot,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

  • 10 months later...

Hi,

 

I am using draggable + throwprops and I want to build an infinite draggable loop using scrollTop.

 

I would like to obtain the same effect than I could using rotation, an infinite scroll loop but I want to drag with an axe and not rotation.

 

So during drag or throwupdate I need to update the scrollTop while not breaking the dragging or throwprops.

 

Imagine a text to be scrolled, with 26 lines A to Z into a 3 lines container. So one can easily use draggable + throwprops to scroll the alphabet.

 

But I would like to be able to scroll by dragging with throwprops infinitely, A-Z A-Z A-Z, without the need to have a locked position at A and Z.

 

In fact, I want to build an infinite draggable scrollable smooth wheel, exactely as an infinite rotation jog, but only using one axe.

 

Some mobile applications use that to select date day hours, we face a roll with all the value, and you can turn it.

 

Draggable and throwprops is very near to offer this. I just need to loop without stopping the animation.

 

What the best strategy to use draggable + throwprops with scrolltop and make it infinite loopable ?

 

The looping shift update has to be invisible and has not to break the smooth animation at all.

 

This could offer fantastic perspectives to build navigation and draggable is better then hammer.js and so on to build a dragpad (even if not first done for that).

Link to comment
Share on other sites

Hi Mobile,

 

It appears you posted this question on this old thread and also started a new topic. Its best to keep the discussion in one place. And since this old issue has been resolved that would be your new topic.

 

Thanks.

  • Like 2
Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
×