OSUblake

Looks like you're off to a good start. You can do movieclips. For scene management, you can group everything inside a container. When a scene isn't in use, remove the scene container from the stage so it doesn't get rendered. If memory becomes an issue, you should probably destroy all the display objects in that container when the scene isn't active. Just animate whatever properties you want. const dropShadow = new PIXI.filters.DropShadowFilter(); mySprite.filters = [dropShadow]; gsap.to(dropShadow, { rotation: 100, blur:

Absolutely. I prefer Pixi, but Phaser is a more complete game engine so you don't have to code a lot of stuff from scratch.

Not sure what you mean. Need to see a demo. Hide it when it leaves the window, or when it's a certain distance away from an edge. What is a mobile device? Most Windows laptops and Chromebooks have touch and mouse inputs. I wouldn't show the ball until there is a mouse event. https://codepen.io/osublake/pen/3170174f4ce844f78c7789a279f8e50e

Loading the module version should be fine, but it's hard to say what your gulp build is doing. I think letting Babel handle the imports can lead to problems. You might be better off using a build solution like webpack, rollup, parcel, etc.

I just made that format up to demonstrate how you COULD create animations from data. I'm sure you could just use the spine json and create gsap animations from it, it'd just take some time understanding the format to create your own parser/runtime. Just took a quick sub-animation snippet from that json file. "front-fist": { "rotate": [ { "angle": -28.43 }, { "time": 0.4333, "angle": -45.61 }, { "time": 0.7333, "angle": -53.66 }, { "time": 0.8667, "angle": 7.56 }, { "time": 0.9333, "angle": 31.16 }, { "time": 1.0333, "angle": -32.59

Here's an example of animating SVGPoints. https://codepen.io/osublake/pen/7108c0f8dd0d32408ab3c7e5c93929ee

GSAP just animates stuff. To render stuff like that, you need to use WebGL. It looks like they are using three.js. https://threejs.org/

I guess it depends on how you want it to look and animate. Some people just make "bendy" arms and legs, but it can look weird. Here's an example using of how bone and joints could work with svg. It would take some work figuring out the transform origins for something more complicated. https://codepen.io/osublake/pen/ooYgWg A basic example of how that might look as JSON data. It could definitely end up a lot more complicated than this, probably looking more like the spine json. https://codepen.io/osublake/pen/4b284beb6cb2824918888251e944e4cf

You're loop is running the same logic over and over. It will always be the condition of the last loop. You probably need to use a for loop with something like break or continue. See how I do it here. https://codepen.io/osublake/pen/ae04f1f23935e7d7a13c823d6141dec2

It's been brought up several times in the past. 😉 Spine doesn't use SVG because they are slow and require more work to animate for bones and joints. If you need bones and joints, you're better off sticking to spine. To change the color, you can use canvas or WebGl to tint your textures. And gsap can be used with spine to orchestrate all your animations. For example this fades in a character and then starts a spine walk animation (using PixiJS). gsap.timeline() .from(character, { alpha: 0 }) .add(() => character.state.setAnimation(0, "walk", t

I don't think so. The point of prettier is be very strict about the formatting.

Well, I don't want to explain shaders, so the best I can recommend is to use something prebuilt. PIXI has a twist filter. https://pixijs.io/pixi-filters/tools/demo/ You can animate the filter properties like the angle and radius.

So what's the problem? Your draggable is fine. You're just dragging a transparent circle. dragClickables is only for stuff like <a> tags. https://codesandbox.io/s/happy-ramanujan-gtz69?file=/src/drag.js

We still need a demo to see the problem.

It doesn't seem to have any gsap code in it.