Advertisement
  1. Web Design
  2. UI Design
Webdesign

Building a Draggable Off-Canvas Menu with GreenSock

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called The Beginner’s Guide to TimelineMax.
TimelineMax: Getting a Handle on Bézier Tweening
Completing Our Draggable Off-Canvas Menu with GreenSock
Final product image
What You'll Be Creating

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.

From a birds-eye-view the markup is semantic, without the requirement of divs for hacking the menu layout and position; ultimately making this markup portable, reusable and even extensible.

How Draggable Works

Draggable allows any element to be “draggable” vertically and horizontally, based on custom instructions defined.

Similarly to any JavaScript library, we’ll need to load scripts before we get into any code or custom configurations.

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.

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

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

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.

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.

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

I’ve added three lines inside the object literal that contain events we’ll be reacting to. Specifically, we’ll be using these three drag events to test when and how the event responds.

What goes inside these functions is up to you, but for now I’ll add a console logging function that will tell us a bit about the events taking place. I call it the “kennyLogger” event logger.

Passing Options

Now that we have testing in place, we can pass more options to fine tune the drag event.

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.