Adding bounds to a scrollable group of elements (using Draggable plugin)

[rm2773]

Hi there, 

 

I found this older demo of a GSAP draggable picker: 

 

 

How can we add bounds that start from the top item, but end at the last item?  I want this to happen whether I drag or throw the draggable items.

 

To be clear, I want this picker to have a "top edge" and "bottom edge".  I'm not sure whether this is controlled by bounds or a progess function.

 

Also, if there is a way to add an "active" class to the current item, that would help tremendously.  Thank you in advance!

See the Pen YrXdGZ by osublake (@osublake) on CodePen.

[AntonioNB4]

21 hours ago, rm2773 said:

Ciao, 

 

Ho trovato questa vecchia demo di un selettore trascinabile GSAP: 

 

 

 

Come possiamo aggiungere limiti che partono dall'elemento in alto, ma finiscono all'ultimo elemento? Voglio che ciò accada sia che trascini o lanci gli elementi trascinabili.

 

Per essere chiari, voglio che questo selettore abbia un "bordo superiore" e un "bordo inferiore". Non sono sicuro se questo sia controllato da limiti o da una funzione di avanzamento.

 

Inoltre, se esiste un modo per aggiungere una classe "attiva" all'elemento corrente, sarebbe di grande aiuto. Grazie in anticipo!

Hi maybe this ?

See the Pen GRVEGjZ by Antonio-Nocella (@Antonio-Nocella) on CodePen.

[Rodrigo]

Hi,

 

Draggable allows you to define bounds easily:

https://gsap.com/docs/v3/Plugins/Draggable/#bounds

 

In the case of Antonio's great demo it should be as simple as this:

var draggable = new Draggable(proxy, {  
  trigger: picker,
  throwProps: true,
  onDrag: updateProgress,
  onThrowUpdate: updateProgress,
  snap: { 
    y: snapY 
  },
  // Apply bounds based on the container height
  bounds: {
    minY: -picker.clientHeight,
    maxY: picker.clientHeight,
  }
});

Hopefully this helps

Happy Tweening!

[rm2773]

Hi @AntonioNB4@Rodrigo, 

 

Thanks for providing responses to the above.....I'm taking some time to work on these and will post back here!  

 

One more thing (asking because our client is wanting something additional). 

 

• Is it possible to have the picker update automatically when an link anchor (hash) is clicked somewhere on the page?  For example, let's say that we place link anchors on specific sections throughout a page.  And if the user clicks on the section anchor "#2018", then the picker would autoscroll to that year and show as active.  

I know that's a lot!  But I'll be happy to publish this CodePen in GSAP 3 so that we have an up-to-date example!  This picker would be very good because it seems to be one of very few examples on the Internet.  Thank you!

[Rodrigo]

Hi,

 

You can definitely do that, keep in mind that whether is a GSAP Tween or a Draggable instance you'd be updating the Y transform property. All you have to do is remember to update the Draggable instance after the tween has completed otherwise you'll get an odd jump, because the Draggable instance will remember a different value than the one the element has after being moved by a Tween:

https://gsap.com/docs/v3/Plugins/Draggable/update()

 

Here are a couple of demos that could help

See the Pen dyQdNEV by GreenSock (@GreenSock) on CodePen.

 

See the Pen VwOwymP by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[rm2773]

Hi Rodrigo, I'm still having some trouble wrapping my head around how clicking a link anchor will translate into changing the Y transform position.  I did find this example which seems to be close to what I want.  The example below doesn't use draggable, but the behavior is somewhat the same. 

 

Notice the navigation at the top with progress bar....I think this demo animates the width of the orange background.  The only difference, in my case, is that clicking the link would change the Draggable position to the year that is clicked in one of the links.  

 

See the Pen abKrGVK by renoxx (@renoxx) on CodePen.

 

I'll try and work on a demo myself, but if there any way to help me synchronize link anchors with draggable position, that would certainly help.  

 

Thanks so much I appreciate your contributions with GSAP.

 

 

    

 

 

[Rodrigo]

Hi,

 

Maybe something this demo can illustrate the idea better:

See the Pen MWNrKyR by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!