FatMunkey

OK I realized that I have a conflict between impress.js and gsap draggable. the moluse lag was caused by impress.js and not gsap. I have fixed that conflict and everything is now working. Thanks for your help!

Well some things are improved but somethings - not so much. I switched over to the minified versions as Jack suggested and that made the difference. But I am still getting the error on ThrowPropsPlugin if I use ""text/javascript". <div id="impress-toolbar"></div> <div id="impress-help"></div> <!-- impress scripts --> <script type="text/javascript" src="..\node_modules\impress.js\js\impress.js"></script> <script>impress().init();</script> <!-- gsap scripts --> <script type="text/javascript" src="..\node_modules\gsap\src\minified\TweenMax.min.js"></script> <script type="modules" src="..\gsap-bonuses\ThrowPropsPlugin.js"></script> <script type="text/javascript" src="..\node_modules\gsap\src\minified\utils\Draggable.min.js"></script> <!-- my scripts --> <script type="text/javascript" src="index.js"></script> </body> </html> As you can see in the code above, I have ThrowPropsPlugin as "module". This does not throw an error. However, the Draggable is not working as I expected it to. On the product page for Draggable (https://greensock.com/draggable) this line of code results in the div being both draggable and scrollable: Draggable.create("#scroll_1", {type:"x,y", edgeResistance:0.5, throwProps:true, bounds:window}); As you can see in the screenshot, I have dragged the div to the left of it's original position and it is scrollable via the scroll bars. When I use this exact same code on my test page i am able to drag the div around BUT there is no scrolling ability and the text is visible overflowing the div. If I change the CSS to "overflow: scroll" the overflow is hidden and I can scroll. I can also drag the div around. However, the div gets way ahead of the cursor as you drag it from one side of the window to the other. Strange.

So I have a test file trying out an idea. Want to use the Draggable scroller In the screenshot below you will see that Draggable is undefined. The file paths are all correct - I have checked my script tags thoroughly. The problem seems to be due to the other two errors. See below This seems to be an issue with "import" as opposed to the " { " As an aside, That last error on the list shows up in any web page i open in Chrome. It has something to do with promises but it does not appear to be specific to ANY web page (Google mail, CNN, etc all show that same error) and may be a problem with my browser. At any rate, i do not think it has anything to do with the problem I'm having with GSAP. Does anyone have any ideas?

I made a little game for a class I am taking on Udacity. I used GSAP all over the place in the game. If anyone is interested in looking at it, you can go to this GitHub Repo and download it. I would appreciate any feedback anyone wants to give. What could I have done differently or better? not just in terms of GSAP but javascript/webDev in general. Thanks in advance!

right. It works in the codepen but it is not visible when I use the same code in my app. I could link to the git repo but there is a lot of code. Probably spagetti-esque!

(see the codepen above) I have adapted the codepen into my little app with no changes other than where the code is (t's split up into a couple of different places due to where my draggles are.) My problem is that the path does not render at all. In the inspector i can see the path "d" attribute changing as I move the draggable and the coordinates look correct. I just cant see the path. I have tried altering z-index for the container and wrapper and the path itself but that does not seem to help. I'm stumped as to why this would happen. I'm using google chrome.

Well! I seriously never thought of that! Derp! Works like a charm. A hard flick and Throwprops tears it loose but, no sweat...turning it off. Thanks for the answer!

I am trying to have a bezier connector between two draggable divs. I have used the code made by OUSblake at this codepen. So I can make it work, more or less. Draggable works? Check. Autoscroll works? Check. I can draw a bezier between my draggables? Check. The problem happens when I drag either of the the Things to make the area Autoscroll. The bezier seems to forget that it was attached to the divs. When I scroll back so that both of them are in view the bezier re-connects - sort of. The connection is apparently very loose because it breaks when you scroll the window with a mouse wheel or by using the scrollbar as well as when you scroll while dragging. Editing this post again! I just realized that the script only updates the curve onDrag! That means it does not update when scrolling is happening. Wondering now how to approach that. Really, Autoscroll is not what I originally wanted. I want draggable on the divs so they can be moved.. But I wanted to also make the Playground pan and zoom. So instead of scrolling by dragging only also pan and zoom the area like in a maps application. Eventually, I want to take this proto-type and use it to create a content rich kind of "flow-chart". Basically, think of Thing 1 and Thing 2 both being filled with content - text, images etc. All of it will be added via DOM manipulation when buttons in an accordion menu are clicked. Let's say that I open the menu and click on Thing 1. it opens and is draggable and filled with content. On thing 1 is button that says "Thing 2". Click it and Thing 2 will open next to Thing 1 with a bezier connector between them. You can think of it as a simplified version of a node editor. I don't need for the user to be able to drag and drop the connectors between blocks. I also don't need to have the user delete or cut the connectors. (both of them are typically feature of node editors but not necessary for my design.) So, anyway, that is the goal. None of that will work if I can't figure out how to stop these things from losing the connection with the curve when you autoscroll. Any help and suggestions will be appreciated!

OSUBlake, Thanks for the reply. I appreciate the time you spend doing this. Well, I understand that collision detection from the ground up is not a trivial thing. It is if you re using a game engine because the engine does all that heavy lifting. I don't want to reinvent the wheel! In fact, if Unity had a good way to display HTML5/CSS/ inside of a game environment I would be doing this in Unity. As it stands, there is a Unity add-on that wil do it but it is not up-to-date with the engine version. Additionally, Unity is getting rid of JavaScript as a scripting language. C# won. I have looked at some HTM5 game engines but I have not found a good fit. Maybe you can make a suggestion? Anyway, I don't really need a true collision detection. I don't want anything bouncing off of anything like a pong game. I just want to detect if two draggables are overlapping and then move the one that was dragged last the shortest possible distance to get to a non overlapping location. Everything will be square or rectangular. No circles of weird polygonal shapes, just plain boxes. Let me ask you: Does SAT.js only work in an HTML canvas? Will it move Dom elements with content such as iframes with video or text, etc.? Does it play nice with gsap? (This is not the only thing I want to use gsap for.) I read the README for SAT.js and I can't see the answers to those questions there. I have updated the codepen in my original question to give you a better idea of what I am shooting for. If you double click on "Thing 1" you will see it twen to 500px by 600px. The intent is to use that same double click event to add DOM element that will have content such as text, images and even iframes with video. I am a little hesitant to use iframes but... If you look at this codepen you will see an earlier experiment I did before i spent money on gsap. It was good enough to convince me to buy, but I used bootstrap and it has an iframe so it causes some wonkyness when you double click on to collapse the bootstrap card. I will give you the general idea though.

I have taken the Codepen for "Draggable with "droppable" logic" (located here) and forked it and rewritten a lot of it to to get the effect i am looking for. basically, i do not want any draggable item to EVER overlap any any other draggable item. I spent a good part of the morning today searching the forum and reading up in the docs trying to think of some form of simple collision detection. The idea being to detect a collision and have a simple collision event that would make the divs bounce off of each other. that is not built in to gsap (should be!) and I have not found anyone on the forum who has successfully done it. So I must try. What I have in my sample is the result of banging my newbie head on my monitor all day! it is not 100% collision detection (like I'm used to seeing in Unity) but it does prevent overlaps in a clunky sort of way. If you drag, say, box1, over any other box it will be tweened 100px repeatedly until it is no longer overlapping. Additionally, there is a recursiveness in the function calls. If, while moving box1 away from box2, box1 then overlaps box3, the recursive will continue to cycle the functions and the tween will be repeated until box1 is no longer overlapping any box. This works regardless of which box you drag around and drop. I say it is clunky because it tweens 100px, pauses, tweens another 100px, pases...and so forth until the dreaded overlapping is cured. Where I am stuck is replacing the 100px with the amount of overlap (plus some small amount so the box ends up a little bit away from the last box it overlapped). I have commented the code so you can see the varible names, etc. and understand what i am struggling with. As an added bonus, it would be nice, but not strictly necessary, to remove the clunkiness I mentioned above. One final comment, it may appear that this if for a game. It is not. I would do this in Unity if it were a game - or maybe Buildbox. This is actually just one step along the path I have chosen to build a "unique" interface for a desktop app I want to build using Electron.

Yes, I wrote that reply without looking at the code. Your answer to number one is spot on. Maybe I can set up a button with a click event to scroll to the location of the shape. I will come back with a reply to this with my final result just for completeness. It may be a few days. Thanks for the help.

Thanks for taking the time to answer and make the codepen. I really appreciate it. Regarding number 2 - No that is not what draggable autoscroll does. It scrolls the container only when you are dragging something. I want to ALSO scroll the container when the mouse hovers near the border (not dragging anything). Having the divs all around the border of the container seems like a start. The mouse moves into the div (maybe it changes color for some feedback) and scrolling happens. I did this with the UI in Unity but that is totally different approach as it is not javascript or webpages. The game engine actually had a big part in how that worked. Regarding your answer to number one. I have been at work all day but when I get I get home I will check out the code. The codepen has only one shape and it seems to be moving the shape back into view rather than scrolling to the shape. What about if I had fifty draggable shapes and want to scroll to the LOCATION of a particular shape as opposed to MOVING THE SHAPE back into view? Caps are for emphasis - not shouting intended. LOL

Refer to the Codepen which is the autoscroll demo from GreenSock. First off, I am totally new to GreenSock. I love the smooth functionality of this right out of the box! I need some additional things for my app and I am hoping for some pointers to get me rolling in the right direction. (1) If you throw the green div and it flies out of view I want a corresponding button for that div (maybe in a top nav bar?) that will smoothly scroll the autoscroll area to bring that div back to the center of the screen. This will make it easy to find that "lost" element. (2) It would be useful to have four transparent bars (left, right, top, bottom) that always live on the edges of the autoscroll container and four squares (top-right, bottom-right, bottom-left, and top-left) that always live in the corners of the autoscroll container (maybe positioned outside of the autoscroll container?). What I mean is that when scrolling occurs these eight elements always remain around the edges of the autoscroll container. Then when the mouse hovers over these areas the autoscroll area scrolls in the corresponding direction. Note that I do not intend for this app to be used on mobile devices as ultimately I intend for this to be built out using Atom's Electron framework as a desktop app. Because of that I am not concerned with the fact that hover is a problem on mobile devices. It would be even better if the scroll speed was controlled by how far the mouse is inside of the border div. For example, considering the right side bar, as the mouse enters the bar from the left the scrolling is slowest and the further to towards the right edge of the bar the mouse gets the faster the scrolling becomes. I Hope I made sense there! Lastly, this should not interfere with the default behavior of the draggable autoscroll. That is, I still want the autoscroll to happen based on dragging a div to the edge of the container. Any advise you have to offer on these two functionalities would be very much appreciated.

Sahil, I am adapting your codepen for my own little project. I'm still learning and pretty inexperienced so I need to get some understanding. in your codepen I see variables you are calling proxies with a $ in front of the variable name ($right, etc.) Then in the variable you create and an element that is already in the DOM. What is going on here?? What does that do?