OSUblake

Try making your #doc element bigger for the autoScroll to work. http://codepen.io/osublake/pen/MYMErE?editors=001

Interesting approach. I've done that before creating a draggable, but never during a press.

Right. I wasn't suggesting that something should be added to the core, like what Elliot proposed... although I do I like his idea. My idea was just to use GSAP as a centralized event dispatcher, nothing more. Since most events are tied to the UI, and GSAP is core to the UI, having a fast, lightweight dispatcher built-in seems only natural. I created the dispatcher used in that demo to avoid having to use ones provided by frameworks like Angular, which can be slow due to all the overhead involved in doing stuff like dirty checking. Having one built into GSAP would definitely help streamline the development process, and would probably offer a performance gain in apps that rely heavily on events.

The margin one would probably confuse people trying to remember TRBL. But the offset one is actually what I first thought of, but changed it because I was thinking about being able to use both relative and absolute values.

Yup! That fixed it.

Nice Job! It's not ending on the snap because the timeScale pauses the tween before it finishes. But right above it in the commented out code, is a different way to alter the rotation, which tweens the progress. If you use that one instead, it will play to the end, so it will last a little bit longer. It will also fire the onThrowComplete callback.

That works! He makes awesome draggable stuff. If you still want the overshoot, I was going to suggest slowing down the tween inside the onThrowUpdate function when it starts to reverse. http://codepen.io/osublake/pen/xboqjr?editors=001

You can change the overshoot tolerance. http://codepen.io/osublake/pen/MYMJdd?editors=001

You can set your edgeResistance a little lower, to like 0.99... or you could make an adjustment during onDrag onDrag: function(){ if (this.x >= this.minX) TweenLite.set(this.target, { x: this.minX + 3 }); }

Like Diaco just showed, you can snap to whatever you want. Just feed it a number. You can also create a snap effect in your drag function. Doing this will give you more flexibility as you can do things like add an animation to the movement. http://codepen.io/osublake/pen/b46392f9d230db0521502815ae836106

Your onClick is being dispatched when you drag outside of the bounds because you dragged your element to its maxX, and since it can't be dragged anymore, the minimumMovement requirement hasn't been met, so it's interpreted as a click. If this is an issue, you can change the edgeResistance to give it some wiggle room. With your clickable children, are they supposed be draggable? If you don't want them to be draggble, you can add a data-clickable="true" attribute to prevent the draggable onClick from firing. I guess it would be easier to understand if you could explain what the different clicks are supposed do, and how you want differentiate between them.

I can't test your CodePen because I don't have Safari, but what I do to prevent FOUC is put a class called unresolved on any containers that have a lot of initialization to do, or the body for that matter. And then at the end of my file after all the JavaScript is ready, remove the unresolved classes like this $(".unresolved").removeClass("unresolved"); See if that changes anything... http://codepen.io/osublake/pen/EaBgoZ

Not sure what you are trying to do... maybe something like this? Like clicking one of the buttons to start a tween? http://codepen.io/osublake/pen/NPZNep

The overflow scrolling is happening in the .content instead of the window, so that's where you would get your scrollTop value. The scrollTop value is kind of like the y value for the .wrapper.

One nice thing about using an element instead of min/max values for a Draggable's bounds is that the bounds automatically adjust if the bounding element resizes. But sometimes you don't want the bounds to extend all the way to an element's edges, so you have to pass in min/max values. The problem with this is that your bounds won't change on a resize, so you have to manually calculate and apply a new bounds object. What if we could combine the two approaches? There are many times where I want the bounds to be offset just a little bit from it's container, and have to decide between passing in min/max values or creating a new element specifically for the bounds. It would be nice if I could skip this, and just pass in an element with optional min/max values. Consider the following... Draggable.create(".box", { bounds: { target: "#container", minX: 10, maxX: "+=50", maxY: "-=25" } }); If the .box element is 100 x 100 and the #container element is 500 x 500, then the bounds would be calculated as: minX: 10, minY: 0, maxX: 450, maxY: 375 Here's a demo of what this would like in action. The container is in black, and the offset is in red. If you resize the window, it still maintains the offset bounds.

It's not scrolling because you have the body set to height: 100vh. You usually set an element to 100vh, like a slide, not the body. If you need to do a full bleed, you could do something like setting the body to min-height: 100vh http://codepen.io/osublake/pen/PwrwYe

Wow... that's a lot of code! I don't know if you would have to use a runtime because GSAP can do the interpolation. And if you look at the JSON data, most of those properties could easily be converted into a GSAP equivalent (for DOM elements at least). Sample Data https://github.com/EsotericSoftware/spine-runtimes/blob/master/spine-turbulenz/example/data/goblins.json

Here's a different version of my demo showing the event system being used by different classes http://codepen.io/osublake/pen/d40ca0a3f07b6da8c8410006cd61f9ac

No. color-changed was just what I copied over from my demo, and would not be called every time the color actually changes. In my demo when you press the color button, it raises the color-changed event, and there are 2 listeners that do something when its called. These are just generic events/messages/signals, whatever you want to call them. Isn't this the same concept used by GSAP's EventDispatcher? So I could re-write the code above like this, and the same thing would happen. TweenMax.broadcast("something-cool-happened"); TweenMax.on("something-cool-happened", someCallback);

What about just exposing some version of the EventDispatcher GSAP uses? From what I can tell, it looks very similar to the event system used in Backbone and Angular to pub/sub. While it may not be what Elliot was looking for, it could still be a nice way to send out messages to any listeners, and this way the events aren't bound to a certain type of object. The syntax could be... // Trigger, dispatch, signal, etc. an event TweenMax.broadcast("color-changed", someData); // Subscribe TweenMax.on("color-changed", someCallback); // Unsubscribe TweenMax.off("color-changed", someCallback); http://codepen.io/osublake/pen/9e5abfa4f97deefa4333f155fb171f15

Sounds like you got a lot of issues with whitespace. You can remove the leading and trailing whitespace using trim or with this regex... // leading and trailing myString.replace(/^\s+|\s+$/g, ""); // or all whitespace... myString.replace(/^\s+|\s+$/g, "").replace(/\s+/g, " ");

This is cool! After looking at it, I'm wondering how hard it would be to integrate a Spine animation to create more complex animations, like with bones. Demo http://esotericsoftware.com/files/runtimes/spine-as3/spineboy/

Sorry if the code changes confused you. But there was one important thing added to the last revision, and that was adding all the scopes to an array so you can lookup values (~line 116). Now you can create a function like this to return the scope. // Add your scopes here var letters = []; // Get your scope function getScope(element) { var index = letters.map(function(letter) { return letter.element[0]; // Unwrap jQuery object }).indexOf(element); return letters[index]; } You can test it out doing this. $(".tile").each(function() { var scope = getScope(this); console.log("SCOPE: ", scope); });

You did a good job implementing the sort, except for the last letter. But I discovered that it gets out sync because you are not using the start index you recorded. That's an easy fix though. You can add the letter scopes to an array, and then you can filter it based on where the letter is contained and its index. I also noticed that your auto sizing container was messing up the positioning because the letters recorded the start position before the container resized. Another easy fix. Just add the clones to whatever container the letters are being added to. So I added some functionality to automatically create droppable areas by just adding some attributes to an element. If you add the data-sorted="true", it will place the letters in the correct order, otherwise it will just do a normal append. You can see that the middle container in my demo does not do a sort. <section drop-zone="bottom" data-sorted="true"> <div class="clone-container"> <div class="letter-container"></div> </div> </section> I somehow managed to add more functionality, while reducing the code. http://codepen.io/osublake/pen/dPEbey If you wondering how to make a floating animation, the wander tween in this example might be helpful. You basically create some random position to move to, and then when the animation is over, call the function again to create a new random position. Rinse and repeat. http://codepen.io/GreenSock/pen/kingu

Hi saturnflyer Check this out, and let me know what you don't understand. I positioned all the elements absolutely from the same origin just to make it easier to see how I'm calculating the offset. The _gsTransform is a property GSAP adds to elements to store transform values like x, y, rotation, scale, etc. http://codepen.io/osublake/pen/bNJPwM