GreenSock

Hm, I'm kinda confused. That codepen you linked to seems to work perfectly. I must be missing something. Like Jonathan said, it'd really help if you could provide a reduced test case so we can see things in context and identify what's going awry.

Yep, that's exactly the error I was describing. It's saying that you're running a file locally that's attempting to load something over the network. Adobe won't allow that. Nor can you run a file from the network that attempts to load a local file. You need to make sure you're either loading everything locally (where the swf is) or over the network (in which case the container swf must also be served from the network). It might be worthwhile to research Flash's security restrictions (this isn't something LoaderMax can solve for you).

@wintercounter that sounds like a question for the webpack folks. How exactly are you importing things? Perhaps the problem is related to the line where you're doing the import. (just grasping at straws here)

It might just be the Flash setting that only allows loading EITHER over the network OR locally (can't do both). Perhaps you're testing it locally when it's set to load over the network. It's in publish settings. Have you tried putting it on your server and testing it from there? FYI, we shifted focus to our HTML5/JS tools a few years ago because that's where the market clearly wanted us to go, thus we've "sunset" our ActionScript tools and no longer actively support them. You're welcome to use them, of course. Just letting you know that we don't plan any updates and support is limited. Good luck with your project.

Yep, due to a performance optimization, we internally merge skewY into the rotation and skewX values but your use case showed a rare side effect of that strategy which only shows up when you use separate simultaneous tweens on the same element's rotation and skewY. I believe I've fixed that for the next release which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js. Just plug that into your jsfiddle and you should see that it behaves as expected (right?) Thanks for pointing this out. Sorry about any confusion that caused.

@swampthang exactamundo. You got it.

Ah yes, if your link has href="#", that tells the browser to go to the top of the current window, so that'd certainly explain why things appear to "reset" to the top. Expected behavior. As wia points out, the solution is to remove that # and just use an onclick to trigger your JS logic.

Happy to help, Nate. Glad to hear you're starting to grasp the syntax. Seriously, keep with it and in no time you're gonna feel so comfortable doing just about anything with animation Happy tweening!

I'm not quite sure I understand the effect you're going for, but I took a guess: http://codepen.io/anon/pen/pbQKkm?editors=0010 I just sequenced all the animations in a TimelineMax (remove the paused:true to see it just play straight through). I placed a label at each key spot, and then I just used TimelineMax's tweenTo() to animate the virtual playhead to the appropriate spot on that timeline according to what number they hit. That way, it can go backwards or forwards - it doesn't really matter. There are a bunch of different ways to do this, but perhaps this will get you moving in the right direction. TweenLite.defaultEase = Linear.easeNone; var tl = new TimelineMax({paused:true}); tl.fromTo("#strip1 img", 0.3, {y:-219}, {y:-145}, "strip0") .to("#strip1 img", 0.3, {y:-74}, "strip1") .fromTo("#strip2 img", 0.3, {y:-219}, {y:-145}, "strip1") .to("#strip2 img", 0.3, {y:-74}, "strip2") .fromTo("#strip3 img", 0.3, {y:-219}, {y:-145}, "strip2") .to("#strip3 img", 0.3, {y:-74}, "strip3") .fromTo("#strip4 img", 0.3, {y:-219}, {y:-145}, "strip3") .add("strip4"); $(window).keydown(function(e){ //Park if (e.keyCode == 49 || e.keyCode == 97) { tl.tweenTo("strip1", {ease:Power2.easeOut}); } //Reverse if (e.keyCode == 50 || e.keyCode == 98) { tl.tweenTo("strip2", {ease:Power2.easeOut}); } //Neutral if (e.keyCode == 51 || e.keyCode == 99) { tl.tweenTo("strip3", {ease:Power2.easeOut}); } // Drive if (e.keyCode == 52 || e.keyCode == 100) { tl.tweenTo("strip4", {ease:Power2.easeOut}); } }); Does that help at all?

There are actually a lot of ways you could handle this. If your goal is to be able to drop them both into an easily-controllable container (a TimelineMax), you could do that and just use a tweenFromTo() to basically play from one spot to another spot in that timeline and stop, like this: var tl = new TimelineMax({paused:true}); tl.fromTo(".box", 5.5, {x:0}, {x: 500, ease:Linear.easeNone}); tl.fromTo(".box", 1, {y: 10}, {y: -10, yoyo: true, repeat: -1, ease:Linear.easeNone}, 0); $("button").on("click", function() { tl.tweenFromTo(0, 5.5); }); http://codepen.io/anon/pen/JKZAVW?editors=0010 If you need to keep things as separate tweens (not using a TimelineMax), that's entirely possible too. You could just keep a reference of that "y" tween and then restart() it in an onStart from your other tween, and pause() it in an onComplete. There are other ways you could do it too, but I don't want to confuse things by offering too many different techniques

Oh, sorry! Almost all the questions these days are HTML5/JS-focused. I missed that you posted in the Flash forum. You could probably just use a simple function that you drop into your timeline. Kinda like: timeline.call( function() { textField.text = "whatever"; }); That'd only work one-way, though (not in reverse). You could use ScrambleTextPlugin as a hack - since you're not really animating anything, a zero-duration scrambleText tween would essentially have the same effect as just immediately setting the text to that end value. Just an idea.

You should be able to do that - you just need to load the TextPlugin. http://greensock.com/docs/#/HTML5/GSAP/Plugins/TextPlugin/ If you're still having trouble, please provide a reduced test case in a codepen (or jsfiddle) and we'd be happy to take a peek. Happy tweening!

That's just a scope issue. When you reference "tl2.pause", it's just pointing to that method itself and there's no inherent context for that (it's just how JavaScript works). In other words, tl2.pause is exactly the same as tl1.pause. Both point to exactly the same method on the prototype. The solution is simple, though - you can define the scope parameter. tl1.call(tl2.pause, null, tl2); //that last parameter is for scope. See the docs at http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/call/

I'm very short on time and didn't have a chance to read through every post here, so I may be misunderstanding something but when you disable() the Draggable couldn't you simply add a regular click/touchpress/mousedown listener to the element itself? You just wanted to know when the element is pressed in that case, right? Again, perhaps I'm missing something obvious.

Yeah, it looks like you just have an improper directory structure, but it's pretty easy to fix with that post that Carl linked to (just set up a path in your Webpack config file).

It should work fine if you keep the normal directory structure, where the plugin is inside a "plugins" directory. But if you're running into trouble, perhaps it'd help to just define the paths in your config file, kinda like: ... resolve: { root: path.resolve(__dirname), extensions: ['', '.js'], alias: { "TweenLite": "gsap/src/uncompressed/TweenLite" } } This might be helpful: https://github.com/greensock/GreenSock-JS/issues/165

I'm on the road and don't have time to address #1 and #2, but for #3 in your particular case since you want precise control over merging two points into one, it's probably best to just take your square in Illustrator, duplicate it and drag the two corners to the center and basically make it into the triangle (though this triangle would technically have two points on top of each other at the tip) and use that as the shape you want to morph to, and you can set the shapeIndex to 0 so that it doesn't do any automatic attempts at figuring out how to shift things around to reduce the travel distance of the points. Usually you don't have to do that sort of thing and you can just let MorphSVGPlugin work its magic and fabricate points for you on-the-fly, but you described a very particular effect that won't really work with fabricating points on-the-fly, thus it's easiest to just control the points yourself by duplicating the shape and moving its points precisely the way you want. Does that help? And yeah, it's absolutely fine to use shapes with as many curves as you want.

Welcome to the forums. It looks like you just forgot to load the MorphSVGPlugin, so TweenMax had no idea what to do with "morphSVG" (it was actually trying to tween a literal property on your object called "morphSVG" which, of course, doesn't exist). Here's a forked version that loads a codepen-only version of MorphSVGPlugin: http://codepen.io/anon/pen/qNJBww?editors=1010 Important: MorphSVGPlugin is a membership benefit of Club GreenSock. You can download the "real" version of the plugin from your Account Dashboard once you're a member (Shockingly Green or higher). http://greensock.com/club/ The "real" version doesn't limit you to a specific domain name and there's no "phone home" code in it at all, nor anything that would disable it for any reason. Happy tweening!

Thanks for the suggestion. We'll keep it in mind as a possibility for the future especially if a lot of people request it. Cheers!

Yep, that makes total sense. GSAP stores all of its classes at com.greensock, thus if you had a "com()" method, that'd mess it up. Another solution would be to define a GreenSockGlobals object on your window so that GSAP puts its stuff in there, but typically that's not necessary. Like window.GreenSockGlobals = {}. But that'd also mean that you'd have to make sure all your animation code starts with that too, like GreenSockGlobals.TweenLite.to(...) which could be a pain (though you could easily set a variable at the top, like var TweenLite = GreenSockGlobals.TweenLite). Glad you figured it out.

Well, the codepen won't help much if it's not reproducing the problem. I guess it kinda proves that the problem is with some other script in your project. Can you just do a search for "Object.prototype" in your entire project and see if there's any JavaScript that references that? Unfortunately we don't have the resources to troubleshoot problems that aren't GSAP-related; it definitely sounds like you've got some 3rd-party script that's doing something dangerous (or at least overstepping its bounds). I really wish I had time to read through all the code and find the issue for you. Maybe try removing 3rd party scripts one at a time until the problem goes away and that'll at least show you which one is to blame.

Yep, there's definitely something interfering with normal JS operations in your project. Again, I suspect something is messing with Object.prototype or something (which is very dangerous). Tough to troubleshoot blind, but hopefully when you've got a reduced test case in codepen we'll be able to see what's going on.

That sounds like a security restriction that Adobe has put in place. I'm not aware of a solution. I know that in general, you must choose to allow EITHER local OR network connections (not both). You might want to look into how to sense which you need in your particular scenario and perhaps change a setting in the player (not VideoLoader - I mean Adobe's runtime). Sorry I don't have an easy answer for you. These ActionScript tools aren't really supported anymore as the market has shifted to HTML5.

Right. Whenever you add() something, the default behavior is to add it to the end of the timeline. The "+=1" is just saying make it 1 second after that (creating a gap). You could just as easily use an absolute value (a number) if you prefer. Lots of flexibility. See http://greensock.com/position-parameter Happy tweening!

Sure. Right now, you've written your code such that the tween always has a duration of 9 seconds and travels the width of the text (that's why it moves further per second for longer text). You just need to alter your duration accordingly. Pick how many pixels per second you want it to move, and then do the math. Kinda like: var pixelsPerSecond:Number = 500; //tweak this var duration:Number = txt_1.width / pixelsPerSecond; //plug this into your tween as the duration.