Plugins for GSAP are pretty sweet, but let’s take a look at the utilities provided by GreenSock; specifically a utility called Draggable. With Draggable it’s remarkably straightforward to create touch enabled interactions which also work with a keyboard and mouse. This tutorial is a final two-parter as we end our GreenSock journey. We’ll begin by learning Draggable’s syntax, setup, and ending in the next tutorial with the creation of an off-canvas menu that works with mouse and touch-enabled devices!

Before You Drag, Get Momentum

If you’re after momentum-based animations which automatically apply natural, momentum-based movement, you can include the ThrowPropsPlugin. This particular plugin is a membership benefit of Club GreenSock as it’s not present in any public CDN or GitHub repository. If you’d like to demo Draggable you can take it for a test drive using a white listed URL for CodePen users. The URL for CodePen users is: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js and will only work on CodePen.

Markup

Here’s the general markup, and what it will look like in order to jump into the JavaScript portions more thoroughly. For the purpose of this tutorial we’ll focus on the container since this will be the primary surface where a user can drag.

We’re using TweenMax, so we load that first. However, when it comes to script loading order, authors shouldn’t be concerned with a dependency chain. This means you can load TweenMax and then Draggable, or vice versa. Draggable will now give you the power to write code that allows your elements of choice to flick, swipe, spin and even drag!

The Draggable Setup

With scripts defined and loaded it’s time to write some code. For Draggable we’ll define a constructor as the initial starting point in this journey. The syntax for the constructor allows you to pass a target and series of options.

Draggable ( target: Object, vars: Object )

Instead of using the constructor above, you may find the following option a bit more flexible:

Draggable.create([obj1, obj2], { option1: value1, option2: value2 })

Typically it’s best to use Draggable.create() instead of the constructor, because it can accommodate multiple elements with one call.

Draggable.create(target, options)

The argument referred to as target for the create method is referencing the element that should be draggable; be it a regular DOM element, a jQuery object or an array of elements as we previously saw. The options argument lets us pass in an object literal that contains key/value pairings with a multitude of options supplied by the API. For a complete list of the options refer to the official GreenSock documentation.

Testing Draggable

Knowing how to debug Draggable events (should things go awry) can be extremely valuable before beginning any project, but don’t feel overwhelmed by trying to learn every single option under the stars; become familiar using the basics and work from there.

var container = document.querySelectorAll('.container')[0];

We’ll grab our container using the document.querySelectorAll method provided out of the box by our buddy JavaScript. Note that we’re still using the markup I wrote out at the beginning of this tutorial.

Draggable.create([container], {});

We’ll add our container variable inside an array ([]) and finally pass in an empty object where options will be defined for debugging purposes.

These default values are well explained in the GreenSock documentation. You may have noticed the throwProps key set to true. This is because in our next and final tutorial we’ll be using the throwPropsPlugin for controlling momentum of the off-canvas menu as it opens and closes. Since throwPropsPlugin is a GreenSock member benefit you can use this URL only useable through CodePen as mentioned in the beginning of this tutorial.

Demo Time

Start by including all our scripts that include throwPropsPlugin, Draggable and TweenMax (remember: order matters not!).

Remember we’re loading Draggable, TweenMax and the throwPropPlugin. Applying those to our original markup, and using the lines for debugging, we can finally move the container with our mouse or finger on touch-enabled devices!

Feel free to experiment with different values and options. This demo is meant to be a playground, not the final product, so go nuts and break stuff, then fix it!

Conclusion

If you’d like to go further with other utilities besides Draggable you can check out GreenSock’s website for more information. I suggest taking a look at SplitText for some serious typographic flair.

Catch you next time for the last and final tutorial of this series, where we wrap up the off-canvas menu!