How it works

1. Implement in Webflow

   Apply the attributes to the elements inside the page

   Below is a list ofelements andoptions to apply the GSAP draggable effect.
   

   wrapper

   I want to set this

   Div Block

   as the wrapper of the draggable elements and the reset button.

   component

   I want these

   Images

   or

   Div Blocks

   to get the draggable effect.

   reset button

   I want this

   Button

   to reset the draggable animation.

   Option

   card rotation

   I want to state how sensitive the rotation is to dragging.

   Option

   reset duration

   I want to state how fast the card returns to center when released.

   Option

   throw duration

   I want to state how long it takes to throw a card off-screen.

   Option

   throw distance

   I want to state how far the card gets tossed.

   Option

   throw rotation

   I want to state how much the card spins when tossed.

   Option

   threshold

   I want to set how far you need to drag to trigger a throw.

   Option

   delay

   I want to state how long to wait before initializing the next card.

   Option

   ease

   I want to state what easing function to use across the entire draggable animation experience.