Leaderboard

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" });

Hello OSUblake, thank you for the very quick response. I've replaced the transform with directionalRotation and added the "_short" suffix. The codepen as well as the real deal work great now, thank you! Demo: Best regards

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.

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

The only thing I can think of (which would validate what @PointC theorized) is that perhaps you're animating SVG elements and you've got transform-related data defined in both CSS and the SVG's "transform" attribute. In that case, the browser has conflicting data about transforms and it just has to pick one. So, for example, if you've got transform: translate(0, 10px)" in CSS, and then GSAP sets the SVG's transform attribute to transform="matrix(1,0,0,1,100,200)", what should happen? GSAP may be setting the values properly, but the browser may be overriding it with the CSS data (which isn't changing). Updating to the latest version will likely fix that anyway, because at some point we added a workaround for that. If you still need help, please post a reduced test case with details and we'd be happy to take a peek. Happy tweening!

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.

I'm not sure I understand what you're trying to doing with the SVG. Is the end result supposed to be something that looks like depthy, but animated using a tween instead of mouse movement? I'm kind of interested in this because I researched it several years ago, but the project I was working on changed, so I never got around to prototyping anything.

Yup, we have the GSAP Overview on the docs homepage which shows which tools are on the CDN: https://greensock.com/docs However, I've also added 2 questions to the FAQs that will be easy to find if anyone searches for CDN: https://greensock.com/faqs/#/Search/CDN/ Hopefully this helps avoid more confusion in the future. Sorry for the frustration. Thanks for the feedback!

Sounds like more of a browser update quirk than anything related to GSAP. I'd still recommend updating your CDN links to the latest GSAP. If that doesn't fix it, you can always provide a simplified demo and details about what exactly isn't working.

Hi @zozo We just had a similar question that can probably help. Please check out this thread: Happy tweening.

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

Figured it out. It was a scoping issue. I added window. to make the function global and it works. window.pauseTL = function () { tl.pause(); }

Animate is using Easel. There's no reason you can't use it directly. https://www.createjs.com/easeljs

Hi @jSwtch I made all those demos, and what you see in that thread is pretty much the only way to tween stuff in parallel. It's not super complicated. Basically, you tween a generic object with the properties you want, and then in a render method you combine the values and apply them to the actual object you are rendering. There's an old Pixi demo in that thread, but it's probably not the best example to learn from. This demo does a good job showing how to make an additive animation. Instead of using an array, I'm using a linked list to store the animations. https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/LinkedList2.js

I don't know much about Animate so I can't be much help, but I wanted to make sure you were aware of this: https://greensock.com/GSAP-Animate-CC-2017 @Carl knows a ton so he may have some answers for you. Happy tweening.