[Blending Animations (ie walk, jump, idle)]

Sorry I was being so confusing! Diaco, I'm pretty sure that's just what I needed. Thanks! 

[Blending Animations (ie walk, jump, idle)]

Sorry about that. Here's a CodePen: 

See the Pen pvjwyL by anon (@anon) on CodePen

 

I would like to be able to seamlessly cycle between animations. Instead when you click any of these, it jumps to the start position, rather than playing from where it is. Thanks!

[Input wanted: should we change the force3D default?]

As long as we get to turn it off if we want to, which it sounds like you're planning on doing, I'm happy. I heart GS.

[Blending Animations (ie walk, jump, idle)]

I want to be able to seamlessly jump between different states of the animation. For example, let's say there's a walk, run, sprint, and idle animation (in that order). Let's say I'm running and I want to sprint. I can use play("sprintFrame") and it'll go straight to that label, but then if then if the legs aren't exactly how they should be on that frame, it'll look jumpy. I tried using tweenTo, but it plays all the animations in between. I'm thinking of using a fromTo, but then I'd have to manually get the current size, position, and rotation of everything. That could get ugly. Is there a better way that I'm not thinking of?

 

Thanks for always proving such amazing support for newbs like me!!!

See the Pen raOwYR by MAW (@MAW) on CodePen

[SVG Scaling - Transform Origin]

Oh, turns out it's super easy.  transformOrigin:"65px 77px"

[SVG Scaling - Transform Origin]

I can't seem to figure out how I'd set the transform point so that I could have it scale from the right, bottom, etc. Thanks!

 

- Lance

See the Pen EaYdEx by anon (@anon) on CodePen

[Drag bounds move as image is dragged]

Works perfectly. Thanks!!! 

 

- Lance

[Drag bounds move as image is dragged]

I thought it might have something to do with Snap or calling the node, but even if you take snap out of the equation, the same thing happens: 

Draggable.create($("#geometricOctopus2"), {type:"x,y", bounds:bounds});

[Drag bounds move as image is dragged]

Though bounds size reacts slightly differently when I put in hard-coded numbers (codepen updated), but the bounds still move every time you let go of the image. 

[Drag bounds move as image is dragged]

Check out the Codepen and you'll notice that you're able to drag the octopus to the left a bit before the bounds stop you from going further. You can't go to the right at all. After you let go, you'd expect to be able to drag it to the right (back to where it started), but it seems as though the bounds reset based on the image's relative position. When you drag it, you can't go to the right, but you can go further to the left than you originally could. 

 

Thanks for your help! 

See the Pen QwLVzM by anon (@anon) on CodePen

[Animating SVG's fill-opacity]

You, Diaco, are the best. 

[Animating SVG's fill-opacity]

Instead of animating the opacity, it seems to wait until the tween is over and then instantly jumps to the final opacity. Any thoughts on what I might be doing wrong?

See the Pen JeDLo by anon (@anon) on CodePen

[SVG Animations in IE]

Oh, I didn't realize transformOrigin wouldn't work in IE. That makes life a little tougher. I may have to just be content with the animation not working in IE . . . stupid IE. 

[SVG Animations in IE]

Oh how I hate IE. I have this working in all browsers, including mobile iOS. The only place it doesn't work is in ie. Everything shows up as it should, but none of the movements happen. I'm not even sure where to start. Thanks for your help! Here's the non-codepen version if that helps: http://aprendagames.com/stock/error_pages_robot/headlessRobot/?errorcode=404

See the Pen mnbLK by anon (@anon) on CodePen

[Issues Animating Elements of SVG]

That's exactly what I needed, thanks! 

[Issues Animating Elements of SVG]

I'm able to animate the entire SVG. I'm also able to call and modify an element within the SVG (rect02), but I can't seem to animate rect01. Help would be much appreciated! 

See the Pen yfljJ by anon (@anon) on CodePen