OSUblake

I found these animations constructing a curve to be helpful. To help me better understand how to work with bezier curves in GSAP, I just played around with creating a bunch of random curves. You can check out the demo I made. If you open your console, you will see it print out a table of all the coordinates. The coordinates are based off of the top-left tile, so that would be { x: 0, y: 0 } http://embed.plnkr.co/CIiLR4/preview

After looking at the TweenMax file, it might be easier to just add this to the end of the file. module.exports = _gsScope; That way everything will be global like it is in a browser. require("gsap"); console.log("SAME: ", global === GreenSockGlobals); // true TweenMax.to(foo, 1, { x: 100, ease: Power3.easeOut}); var tl = new TimelineMax();

I was able to get it working using what Sebastian wrote in this thread. // Using the uncompressed file in node_modules/gsap/src/uncompressed/TweenMax.js var window = {} , navigator = { userAgent: "" } , dummyElement = { style: {}, getElementsByTagName: function() { return [] } } , document = { createElement: function() { return dummyElement } }; // START OF FILE var _gsScope = (typeof(module)... ... this || window, "TweenMax"); // END OF FILE module.exports = TweenMax; Inside your module you should be able to do this... var TweenMax = require("gsap"); var foo = { x: 0 }; TweenMax.to(foo, 1, { x: 100, onComplete: onComplete }); function onComplete() { console.log("foo.x == ", foo.x); // 100 }

This is happening because jQuery is adding those animations to a queue. Try adding stop to your animation. $("a").hover(function(){ $(this).stop().animate({className:"+=hover"}, {duration:300, easing:ExpoOut}); }, function(){ $(this).stop().animate({className:"-=hover"}, {duration:300, easing:ExpoOut}); });

Wow! That's an excellent analogy.

Your timeline is paused.

Its going to be offset 200px in the second tween, so just undo it. var logo = document.getElementById("elem"); new TweenMax(logo, 2, { x: 200 }); new TweenMax(logo, 2, { x: 0, left: 50, delay: 2 });

Just noticed this in the update. What's the diagonalThreshold for in getDirection, and how does it work?

Glad you were able to figure it out Angular is all about adding and removing elements from the DOM, which actually adds a new layer of complexity to animations than most people are used to. The biggest problem is dealing with the document flow changing and elements not being positioned where you want them to. Especially when transitioning between 2 elements. What I've found to be helpful in a lot situations is to use the directive as an element instead of an attribute, and use that as a wrapper for my template (Note: this might require the use of ng-transclude depending on the scope). If you don't add any styling to your directive element, it will have a size of 0, and won't be part of the document flow, kind of like a span tag. This will allow all its siblings to be positioned from the same origin, which makes positioning much easier, especially when using something like Draggable. But of course this all depends on the situation. <!-- This won't mess up the document flow --> <dragdrop> <div class="box"> <p>{{item.text}}</p> </div> </dragdrop>

Hi BirdInTheCity I can look at your code later tonight, but I'm can almost guarantee you that the problem is related to how your elements are nested. In the meantime, check out this Drag and Drop demo. It's in jQuery so more people could follow it, but it's based off of some directives that I made, so you should be able to tell how it would work in Angular. The createTile function would be a directive that is repeated using ng-repeat. The layoutInvalidated function would be an injected service. And everything else would be part of a parent directive or controller.

It amazes me how many features GSAP has. I was trying to wrap my brain around how this tween actually worked, and discovered that there is a plugin that tweens arrays: EndArrayPlugin Nothing fancy, but hey, it's there if you need it. http://codepen.io/osublake/pen/xbyvPb?editors=001

Everything seems to be resolved on my end, so I'd say it's a go.

If Diaco can confirm that he saw my problem, then I'm guessing it might have been some sort of caching issue we were both experiencing. If he didn't see my problem, and just guessed that snapping the values would fix it, then I'm thinking that my touch monitors were the culprits. Maybe some dirt or a smudge was interfering with the events. I do have an unresolved issue with my touch monitors, although I wasn't using both of them when I encountered this problem.

Ummm... I guess it was some kind of phantom glitch, because it's working properly now. And this problem wasn't limited to CodePen or any particular browser. What was happening when you pressed it, is that it would fire onPress -> onDragStart -> onDrag. Likewise, when you released it, it would fire onRelease -> onDragEnd. This problem started when I went to test out the Draggable update with a project that I was working on, and I noticed that all my callbacks were firing during a mouse press . I cleared my cache multiple times, and the problem still persisted, so I recreated the problem in CodePen and made that post. I'm pretty sure Diaco saw what was going on because his suggestion of rounding the values in a snap function fixed the problem at that time. As to why it's working now, I'm clueless.

I'm not exactly sure how the CSS Plugin deals with x/y units that are not "px" or "%". This is probably not what you were looking for, but when all else fails, you can always tween a transform with your special units. TweenLite.to(element, 1, { transform: "translate3d(15em, 50vh, 0)" });

Weird!!! Snapping seems to work, although I'm not sure if that might affect what I'm working on. I thought about subpixels, so I tested it with small and large minimum movement values, but the behavior persisted.

This update broke something I was working on. Maybe I missed something, or never noticed this, but my drag related callbacks are being called when the mouse is pressed on a draggable. Is this normal? This behavior seems to only occur when the draggable is somewhere in between its min/max bounds. It behaves normally using touch. Using Oisin's example, notice how the onDrag/Start/End callbacks are being called when you press the carousel when its somewhere in the middle. When the carousel is at its left or right limit, it behaves normally when pressed, and turns green. http://codepen.io/osublake/pen/gbBQPY

Menus can be kind of tricky. I was hoping you were going to say something easier, because within an hour of reading this, he probably would have an example ready for you. I've seen plenty of jQuery UI type widgets made with GSAP. The problem is that they're usually one-offs, so you're not going to find them all in one place. You should look through all of the CodePens created by these members. You'll probably find exactly what you're looking for buried somewhere in one of these collections. Chrysto Rodrigo Hernando Jamie Jefferson Jonathan Marzullo Diaco-MAW Chris Gannon Dennis Gaebel GreenSock Community

Just out of curiosity, what would be your #1 pick for a widget you'd like to see running in GSAP?

I really wasn't expecting my demo to be seen by more than a handful of people, but now it's on the front page of CodePen, so people seem to like the idea. Looks like I'm not the only one that would like to see this implemented. Better get to it!

So what I realized after reading Carl's post is that all tweens are not created equally. I never noticed this before, but className is a special kind of tween that behaves like a normal CSS operation, so all inline styling is removed after the animation is complete. And if you were to remove the class name, all the styling related to that class would be removed as well. This isn't necessarily a bad thing, and I understand the reasoning behind it, but it did trip me up because I operated under the assumption that all tweens kept the styling inline. So here's my suggestion on how the API could handle this differently. Instead of messing with the className property, leave it as it is, and create a different property that handles extending inline styles. This special property could be called something like style or extendStyle, and would accept a CSS rule selector (string), an element, or an array of either. If it's an array, the styles would be merged, so the item on the right would overwrite any matching properties on the left item. // Extending the style of an element... TweenLite.to(target, 1, { style: myElement }); // A CSS rule... TweenLite.to(target, 1, { style: ".my-class" }); // Or a combination TweenLite.to(target, 1, { style: [myElement, ".class-1", ".class-2"] }); Another property could be provided to filter out any unwanted styles. This could be called filterStyle, and could use the -=,+= assignment operators as a predicate to determine what properties should be extended. The += operator would create a whitelist, so only those properties would be extended. Conversely, the -= operator would create a blacklist, and those properties will be ignored. // This whitelist will only extend the x, y, and width properties TweenLite.to(target, 1, { style: [myElement, ".class-1"], filterStyle: "+=x,y,width" }); // This blacklist will ignore any x, y, or width properties, and extend everything else TweenLite.to(target, 1, { style: [myElement, ".class-1"], filterStyle: "-=x,y,width" }); The style property would also need to run at a higher priority, allowing you to overwrite any of the extended values in the same tween. In case any of this didn't make sense, I created a simple prototype that handles everything described above.

The link is on the main GitHub page under releases, which is right next to the commits, branches, and contributors links. https://github.com/greensock/GreenSock-JS/releases https://github.com/greensock/GreenSock-JS/releases/tag/1.16.0

In it's most basic usage, I'd say it's comparable to scroll events, i.e. you might want to know whether you are scrolling up or down. With a draggable you have more directions to contend with, so that's one less thing to calculate. EDIT: I think I misunderstood your statement. I thought you were asking why it would be useful.

Hi bluisier If you create your charts in your update function it seems to work. http://codepen.io/osublake/pen/azjvEo

Wow! This actually helps explain a lot. I always wondered why tweening the timeScale in this example worked the way it did. Thanks for clearing this up. I don't remember seeing anything about this in the documentation, although today I looked around, and I found a mention of this on the colorProps plugin page.