OSUblake

Chicken scratch! The only words I could read were "Draggable, letter.forEach, and Check Hit". So I took Carl's advice and put the description in the code. While I was in there, I did some refactoring, like adding jQuery to simplify some things so other people might have an easier time understanding it. I like where this is going, so I think I'm going to have to do a part II, implementing some of the features that were just added to Draggable, like autoScrolling. Original version: http://codepen.io/osublake/pen/RNdBOe Refactored version: http://codepen.io/osublake/pen/XJQKVX I totally understand the colors. Before I posted this to CodePen, I had a toggle button on there that would add outlines and background colors so I could see where the elements were. Anyways, you're right about the touch messing up because of the mousedown. Adding a touchstart event seems to have fixed that. I'll have to look at your code later tonight to see what you got going on with the tiles moving around when you press them. Something looks weird. Moving tiles back to their original position shouldn't be too hard. Just record its position before you remove it. You can check out how I did it in this demo. When you drag a tile out of bounds and release it, it will go back to it's last position. Because the grid is always being sorted in a certain order, I just record it's index and not the actual coordinates. http://codepen.io/osublake/pen/RNLdpz

Just let me know if you need help understanding how or why something works. I know it can be confusing when you are first starting out. For anybody else that is interested, here's an overview of how it works. The app starts off by creating clones for each letter with the following scope element - the tile element located in the div#scroll-box wrapper - the element's parent, which is used to animate the space collapsing when the tile is dragged outside of its box clone - a clone of the element that gets appended to the div#container draggable - the draggable instance used by the clone placed - is true when the tile is appended to the div#end-zone moved - is true when the tile has been dragged outside of its wrapper x, y - starting position of the element When the user clicks on a tile, startDraggable is called, which sets everything else in motion... StartDraggable calculates the position of the element if this is its first run, it will create a new draggable instance hides the element while moving the clone to its position starts the draggable instance by passing in the click event to its startDrag method OnDrag checks if the clone is outside of the wrapper using hitTest if outside, the moved flag is set and it animates the space collapsing OnRelease checks if the clone is inside the end zone using hitTest if its inside and not already placed, it calls addToZone to move the tile to end-zone otherwise it will call moveBack, which will move the tile back to it's original starting place MoveBack animates the wrapper space expanding animates the clone moving back to it's starting position when the animation is complete, it hides the clone and makes the element visibile AddToZone appends the wrapper to the end-zone expands the wrapper's width, which should be collapsed calculates the clones position relative to the wrapper's new position hides the clone and makes the element visible animates the element moving from the clones position back to the wrapper

The getTotalLength method is for paths, not polylines. Or did you try it on a path and the whitespace removal messed it up?

Hi Skybox Dev I think this is more of an issue of SVGs being picky about whitespace, which you can remove using this... shapes.each(function() { $(this).attr("points", $(this).attr("points").replace(/\s+/g, " ")); }); http://codepen.io/osublake/pen/WbWwrO

I just tested out that function in your demo, resulting in a slightly better but much more consistent framerate... at least on my machine. http://codepen.io/osublake/pen/gbyYJG

I had no idea jQuery did the same kind of thing, but it seemed like the only logical way to break out of an overflow container.

What about updating your objects in the loop using the actual time? Maybe using something like this... function getTime() { now = window.performance.now(); time = (now - last) / 1000; last = now; return time; }

Check out my cloning technology I did basically what I described above. Created clones that are not attached to the scroll box, and made those my draggables. http://codepen.io/osublake/pen/XJQKVX

Well if you need a code editor, I would use Plunker, which is an online editor and server that runs on the MEAN stack. It has a lot more features than CodePen, plus its open-source. I've used it in the past, and wasn't too hard to setup.

That could work too. Here's a fork of something I was working on that creates animations from JSON. Open the timeline-service.js file to check it out. The tweenSteps array would be an object extracted from JSON. It's in Angular and uses a bunch of promises, so you may not understand everything that is going on, but should provide a little guidance. http://plnkr.co/edit/D3NSr4rliU1kuDbjLNHP?p=preview

Well I guess developers would be both those who copypasta and code writers. You have to start off somewhere, and copying can help you get started if you are actually trying to learn. That's kind of how I got started programming, but I wasn't copying to take credit for it and pass it off as my own. I would take an example and comment out almost every line of code, and then rebuild it one line at time until I could figure out what was going on. So yes, a lot depends on the developers creativity, but that can only take you so far if you don't know how to apply it.

Oh yeah, I totally forgot about game dev communities! I like the idea, especially with the rise of new libraries like Angular, React, and Polymer, where it's real easy to share and create custom controls. I'd love to see what other people are working on.

I thought GSAP was ridiculously easy to pick up, and I never used an animation library before... unless jQuery/UI counts. After spending one day messing around on CodePen after watching that Burger Boy video, I swore off of from ever using CSS to do anything interactive. I think the biggest problem people have is that jQuery has spoiled them, and they don't know how to do anything without a $ sign attached to every line of code, so a JavaScript primer would also be nice. So how do you get more people involved in a community effort? You need some sort central hub to link everything together, and I'm not sure if they have any immediate plans to add more functionality to this site. Just curious, do you know of any good community examples/models out there? Most of the groups I used to be a part of have slowly disappeared thanks to social media.

I know what you mean. Here's a thread where I bring up some of the same points as you. I'd like to come up with some way to aggregate all the good examples listed in the forum. Something I think would be really helpful would be to have a tutorial section like Knockout.js has on their site. You go step-by-step building an example, and if you get stuck, it corrects your code. http://learn.knockoutjs.com/#/?tutorial=intro

Another nice thing about using an array of tweens, is that it is real easy to build custom timelines using the Array.prototype.reduce method. You can pass in a timeline as the accumulator object, and start building a timeline À la carte. I use this technique to build animation factories in Angular. arrayOfTweens.reduce(function(timeline, tween) { // Some logic.. timeline.add(tween); return timeline; }, new TimelineMax());

This might be of some use to you. I created a demo that saves every card move you make. But instead of adding the tweens to a timeline, I just save them in an array for use later on. So when you press one of the buttons, I just dump all the stored tweens into timeline, which can then be manipulated. I spent about 5 minutes building up a list of animations, and it worked fine. http://codepen.io/osublake/pen/zxbdmL

There's a couple discussions on this forum where people use timelines to manage a bunch of animations and scenes, but I've never taken that approach. When I need to manage a bunch of animations that aren't sequential, I usually use some sort of list, and control them using an event aggregator and/or state. What type of game are you making? And why would you need keep 20-30 minutes of animation? And if its replayable, how can it be dynamic? Maybe the invalidate method can help you out here. Seems like it would be easier just to have a function that returns a new tween, but then again, I don't know what you're building.

I'm pretty sure GSAP is up to the challenge. Check out this game made with GSAP. https://www.kickstarter.com/projects/nevergrind/nevergrind-html5-action-rpg And here's a pretty complicated animation scene. Toggle the mouse button in the top left corner to move that thing to your mouse cursor. http://codepen.io/gordonnl/pen/byouf As far as the internals go, I know GSAP uses some sort of linked list, but I've never dug deep into it, so Jack would have to answer that one.

It sounds like you are trying to do something like exportRoot to control your tweens globally. But I'm having a hard time understanding what your set problems are. From what I can tell, it looks like you have sequencing problems going on. Have you watched the sequencing and position parameter videos? Also, adding some labels might help you out so you can jump back and forth between positions in your timeline. Here's a fork of your example. See if this helps you out any. http://codepen.io/osublake/pen/gbERXd

Hi tomekpilot UpdateTo isn't working because x is a CSS-Plugin value. Don't worry, I got confused by what it does when I first started using GSAP. So what you need to do is to create another tween with your new x value. I updated your profile2 function showing how to do this while putting everything inside a new timeline. http://codepen.io/osublake/pen/pvYydx

Hi MattE You could manually change the DOM structure when you start to drag, like appending your draggable to the letterbar, but that could end up being complicated real quick. It might be easier to create some sort of clone or proxy element and use that as your draggable, which Rodrigo explains in this thread. http://codepen.io/rhernando/pen/LEyLxp

Oh yeah! I have been discovering a bunch of stuff while working on a new set of TypeScript definitions. But like Jack said, I don't know if they're meant to permanent. Lately, I've just been creating new types of Draggable when dealing with any limitations or want to add some custom behavior. Using ES6 classes makes this real easy, and you don't have to mess around with changing the source code in most cases. class CustomDraggable extends Draggable { constructor(target, vars) { super(target, vars); // Customize your draggable... } } So here's a demo of how you can extend the Draggable class to create a repsonsive draggable. When onThrowComplete is called, it positions the target relative using x/yPercent, which is just whatever the top or left percent is times -1. http://codepen.io/osublake/pen/azMONr

I don't think this is documented, but you can pass in the overshootTolerance when you create your Draggable. Draggable.create(".box", { bounds: "#demo", edgeResistance: 1, type: "x,y", throwProps: true, overshootTolerance: 0 }); http://codepen.io/osublake/pen/jEXQBP

And here would be an example of manually creating your own throw. This one is setup so both the rotation and x/y throws end at the same time. http://codepen.io/osublake/pen/ByvqwV

Hi captainlardnicus You were on the right track, but you had some CSS positioning problems going on. If you want more control, you can manually create the rotation when onDragEnd is called using the ThrowPropsPlugin. This will allow you to adjust things like the angular velocity or its transform origin. http://codepen.io/osublake/pen/KwbxNX