tauab

Thanks Carl - will look into it.

Hey guys, I'm trying to animate an array of objects along a path using staggerTo and bezierThrough and I'd like each object to have a unique destination. Is there an easy way to plug in the last x,y coordinates on a per object basis while using staggerTo?

Thanks again @AncientWarrior These links are super helpful. The final piece of the puzzle for me is to figure out how to achieve the same functionality for scrolling(trackpad on laptop or mouse wheel) like in the codepen you provided above. For instance, if a user starts to scroll down the page vertically, the horizontal strips would lock. Conversely, if a user were to start scrolling one of the horizontal strips then the vertical scroll would lock. Just to clarify, when I say "scroll" I mean desktop scroll via either a mouse or trackpad. Currently the dragging functionality is exactly what I need, however I can't get it to work for scrolling.

@AncientWarrior - wow, this is awesome. Very clever! If I understand this correctly, the crux of what's happening is that the edge resistance value is being toggled via user mouse events like mouse down etc? Could the same concept work for scrolling? Like using Jquery to listen to a scroll event and then toggle the edge resistance? Thanks for the amazing codepen, and for the time!

Hey guys, First off let me start out by saying how great this product is, really impressive and loads of fun to use. I came across an interesting challenge today. I am trying to figure out how to temporarily disable the dragging or scrolling of one Draggable instance when a separate Draggable instance is being dragged or scrolled. If you're thinking, why on earth would you want to do that? I'll explain. I have one div(the parent div) that is only responsible for vertical dragging/scrolling. Inside of that parent div I have child divs that act almost like film strips that require only horizontal dragging/scrolling. What I was hoping to achieve is similar to the "lock axis" feature currently available for the same Draggable instance. Otherwise it's very wonky to drag/scroll when multiple axis are moving around simultaneously. I set up a simple code pen for anyone who is brave enough to humor my ridiculous request Any guidance would be most appreciated.

Thanks Carl! Exactly what I was looking for. Appreciate the swift response.

Hey guys, Was wondering how to best approach tweening a div that has a Draggable function associated with it, so that it does not mess up any of the values that is being calculated for dragging/scrolling etc. Let's say I wanted to anchor to a particular section automatically by using tweenmax but also wanted to preserve the Draggable features like grabbing and scrolling. More specifically, how would I tween the div with class"box" in the code pen? Any help would be greatly appreciated. Thanks!

Hey guys, Thank you for all your help, I finally figured it out! The problem was not related to div wrapping or overflow issues, the issue was on the javascript side. I was calling the play() function before the draggable.create() which caused the issue, see below: brandVid = document.getElementById('brandVid'); brandVid.play(); Draggable.create("#columnsParent", { type:"scrollLeft" , bounds:"#columnsParent", edgeResistance:0.5, throwProps:true, throwResistance:1500, onDragStart:function() { //trace('dragging'); CANVAS.dragging = true; }, onClick:function() { //trace('Not dragging'); CANVAS.dragging = false; } }); When I switched the order and called play() after the draggable.create() it worked! : Draggable.create("#columnsParent", { type:"scrollLeft" , bounds:"#columnsParent", edgeResistance:0.5, throwProps:true, throwResistance:1500, onDragStart:function() { //trace('dragging'); CANVAS.dragging = true; }, onClick:function() { //trace('Not dragging'); CANVAS.dragging = false; } }); brandVid = document.getElementById('brandVid'); brandVid.play(); Thanks for your patience, hopefully this thread will help others who encounter the same issue – or maybe this was just a rookie mistake on my part

Thanks Rodrigo, To clarify, I applied the Draggable to a parent div. Draggable type: "x,y" works fine. But type: "scrollLeft" does not. I think it has something to do with a tag that is automatically generated that reads: <div style="display: inline-block; width: 100%; padding-right: 0px; position: relative; overflow: visible; transform: translate3d(0px, 0px, 0px);">

Thanks Jonathan, but no luck yet. One key consideration though, is that using type:"scrollLeft" seems to automatically generate a "wrapper" tag that reads as follows: <div style="display: inline-block; width: 100%; padding-right: 0px; position: relative; overflow: visible; transform: translate3d(0px, 0px, 0px);"> While other drag types like "x,y" do not generate a wrapper tag by default. Please note that this tag does not show up on codepen but does in the browser. I believe this is where the issue lies. Can you explain what that tag does?

Thanks for the codepen example! When I change the scroll type from "x,y" to "scrollLeft" I get the same problem I'm having. The video just doesn't play. Please check the link below. http://codepen.io/anon/pen/hIDvL

Hey Jonathan, Thanks for the swift reply! Unfortunately sharing the code on code pen is not an option as the content on the site is not to be disclosed before launch. If we cannot trouble shoot this "in the dark" so to speak, I can create a simplified version with alternate content which will take some time so I'm hoping the former will shake out. To answer your question above: I am using an html 5 video tag. When I comment out the draggable constructor the video plays fine.

Hello! I applied GSAP draggable to a container that houses a grid of images and videos. The dragging and throwProps works beautifully, the only issue I'm having is that the videos inside the div do not play. Sometimes the first frame will appear but that's about it. I ran some tests and found that videos outside of the draggable div would play, but the ones nested do not. Any ideas? Below is the draggable set up I'm using: Draggable.create("#columnsParent", { type:"scrollLeft" , edgeResistance:0.5, throwProps:true, throwResistance:1500, onDragStart:function() { //trace('dragging'); CANVAS.dragging = true; }, onClick:function() { //trace('Not dragging'); CANVAS.dragging = false; } }); Thanks for the time, -Taua