Create scrollable DOM elements with Greensock
In this lesson, we will look at Greensock's Draggable API. We will implement a scrollable <div> container and explore some options available.
[00:00] In our markup, we have a div with the ID of map, which contains an image, and our image is a large image of a map. Currently, the way to navigate around the map is by using our mousewheel, but we want to make the experience a bit nicer.
[00:18] Instead, we're going to click and drag to navigate around the map. When we use the mousewheel, we're going to zoom in and zoom out. In our CSS we have a height and width set, each taking up the maximum available viewport space so that the image just overflows. This way we can navigate around the image.
[00:38] The first thing we're going to do is implement Draggable functionality to be able to navigate around the map. Let's go into our JavaScript, and we'll store our map div in a variable, because we're going to be using it more than once. Then we're going to use the Greensock Draggable API.
[01:00] We're going to call the create method. The first argument will be our map div and the second argument is going to be an object of options. The only thing we need to do to tell our map to move when we drag on it, is use type scroll. Now when we drag on our map, we can move around it.
We can use throwProps: [01:26] True if we want some movement after letting go of the mouse click. We can also use edge resistance if we want some movement when we drag to the edges of our div, so when it's set to zero, there's a very little amount of resistance. If we increase it to .5, you can see a bit more resistance. At .9 there's a lot of resistance. The default is set at one.
[02:02] Another option we could use is lock access. If we set that to true, then the access is locked when we start scrolling. In this example we'll keep if false because we want to be able to navigate around our map. Now that we've got our navigation in place, let's implement some zoom functionality.
[02:29] We're going to add an event listener to our map div, and it's going to be a wheel event. Then we'll supply it a function passing in the event. The first thing we want to do inside this event listener is prevent the default behavior.
[02:48] We're going to say event.preventDefault. Now when we use our mousewheel, nothing happens because the default behavior is prevented. Next let's store the scroll direction in a variable. The way to tell if scroll down is true, is whether deltaY value of the event is more than zero.
[03:15] Then in our event handler, we can use TweenLite and the .to method. The first argument in our .to method can be this, because we're targeting the map div. Then we'll specify the duration which in this case will be zero, so it won't take any time to zoom in or out. Lastly, we can specify the CSS property that's going to change when we scroll up or down.
[03:45] Let's use transform scale to do this. We'll say transform, and we use a template literal here, and we'll say scale if scroll down is true and set the scale to one, otherwise set it to two. Now when we navigate our map, we can scroll up to zoom in and we can scroll down to zoom out.