Leaderboard

Try making it more challenging. Maybe start with indirect fire using a paladin. ( @mikel knows what I'm talking about ?) Then you could add in a goal, like having to kill the enemy within a certain amount of time. Indirect fire is a core game mechanic in Worms. Really fun! You can animate a projectile along a parabolic path using the Physics2DPlugin. https://greensock.com/docs/Plugins/Physics2DPlugin And for very simple collision detection between the projectile and the enemy, you can use Draggable's .hitTest() method. https://greensock.com/docs/Utilities/Draggable/hitTest

Here's something I threw together. You might be able to learn from it. Hold down the mouse button and get rid of those pesky bees.

Hi einomi, regarding jquery.gsap we still make it available for legacy users but we don't actively promote its use anywhere. It was originally created many years ago when people still considered jQuery.animate() a practical animation solution. The only purpose of jquery.gsap was to make it easy to show people that GSAP could hijack existing jQuery animations and perform equally as well if not better (in most cases). In other words it was more of a tool to help convince people that it was safe to move away from jQuery for animations, not something that you should use in every project so that you could avoid doing things properly with GSAP. Our recommendation these days is that if you want the power of GSAP you should actually be writing your animations using TweenLite, TweenMax, etc. Some users mistakenly believe that since they are using jQuery for anything on their site and GSAP that jquery.gsap must be loaded. This isn't true. GSAP has no dependencies on jQuery and you can use the 2 together without loading jquery.gsap. jquery.gsap is only for the fairly un-common case that you want jQuery.animate() to use GSAP under the hood. Hopefully this helps clear some things up.

My first GreenSock mini Game! If you have any suggestions for better coding but not to intricate with greensock termimology, just simple gsap things and terms I would be glad to listen to you!

Nice job! The best way to learn is to build something small that you enjoy doing.

Well maybe start with something simple and then build on top of it. Simple examples are really good way to understand something more efficiently. Not sure if it will help but in first few minutes in following video I have explained how Draggable works.

Hi all, This can fix it. I have same problem. https://medium.com/@mr.frag85/using-gsap-with-angular-6-project-it-works-on-prod-too-9ac036f21487

You should be able to go into your dashboard and upgrade to Shockingly Green if you like. Happy tweening.

WOW now, I got it. I bought the wrong license! lol. Thanks for the help!

Hi @Donatti Welcome to the forum. Looks like you're a Simply Green member which does include some bonus plugins, but ThrowProps is not one of them. Shockingly Green (& Business Green) members have access to all the bonus plugins. More info: https://greensock.com/club Happy tweening.

And regarding the whole stale thing. Just do as Blake said with setting it to false. stale is scheduled to be removed in the next release:

GSAP is an animation engine. The only thing it's designed to do is change numbers over time. It can animate text around your spherical object, but you'd have to create those objects first using a 3D renderer like three.js.

Hi @craigib Welcome to the forum. The short answer is no. The morphSVG plugin works path to path so if you morphed those two into the circle they would each morph into their own circle. Probably not what you want. You can fake it though. At the end of the timeline you can hide the two paths that draw your square and swap in a new square which could be morphed into a circle. Something like this: Hopefully that helps. Happy tweening.

Don't animate transform as it will undo the matrix. Hint, a matrix does rotation using scale and skew, which explains the weird behavior. TweenMax.to('#wheel', 1, { rotation: rotateDeg }); But I don't know if that is the correct behavior. You can rotate something more than 360 degrees... and it can be negative. You might want to look at the DirectionalRotationPlugin, which is baked into the CSSPlugin. https://greensock.com/docs/Plugins/DirectionalRotationPlugin This will rotate it the shortest distance. TweenMax.to('#wheel', 1, { rotation: rotateDeg + "_short" });

I wouldn't say it's a bad practice. I think it's better for the developer to decide what language features should be transpiled. There's really no need to build a single, one size fits all solution anymore as ES6 can run in most browsers now. I use prpl-server to do differential serving, which serves a bundle that is optimized for a browser's capabilities. That works really well with HTTP/2 as you can basically create a bundle on the fly. https://github.com/Polymer/prpl-server-node#as-a-library

If you're talking about the files it's because Draggable also needs the CSSPlugin, which isn't bundled with TweenLite.

I'm not sure what the problem is. It seems to works on Stackblitz. Maybe try exporting it and building it locally and see it if still works. https://stackblitz.com/edit/angular-3rxkgr

okay, if I understand your desired outcome correctly, I'd recommend creating the explosion timeline ahead of time rather than every time you click. You can then play() it on each click. In that click handler you can pause the tank timeline and then add a delayedCall to resume() it. Maybe something like this: Does that help? Happy tweening.

I was able to see the images, but I'm still having a hard time understanding the question. Are you trying to pause the tank timeline and animate an explosion or are you trying to find the tank's x position to start the explosion near it? We're happy to help with any GSAP related problems, but you can help us better assist you by creating simplified demos. The opening sequence of the demo you listed above is 26 seconds and uses your actual photo assets. We don't need all your final images or the full animation. Just some simple divs and enough code to demonstrate the problem/question is preferable. Thanks.