OSUblake

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 }, { "time": 1.1333, "angle": 7.56 }, { "time": 1.3333, "angle": -28.43 } ] }, So I'm assuming that could be converted into a timeline like this. const target = document.querySelector("#front-fist"); const rotateTimeline = gsap.timeline() .set(target, { rotation: -28.43 }) .to(target, { duration: 0.4333, rotation: -45.61, ease: "none" }) .to(target, { duration: 0.7333 - 0.4333, rotation: -53.66, ease: "none" }) .to(target, { duration: 0.8667 - 0.7333, rotation: 7.56, ease: "none" }) .to(target, { duration: 0.9333 - 0.8667, rotation: 31.16, ease: "none" }) .to(target, { duration: 1.0333 - 0.9333, rotation: -32.59, ease: "none" }) .to(target, { duration: 1.1333 - 1.0333, rotation: 7.56, ease: "none" }) .to(target, { duration: 1.3333 - 1.1333, rotation: -28.43, ease: "none" }) The curve property in the animations appears to be the easing. I'm not exactly sure what the curve number and c2, c3, and c4 numbers are. Maybe just controls points on a cubic bezier curve, which gsap can do. It can definitely do a stepped ease, although it doesn't state how many steps there are. 🤷‍♂️ "rotate": [ { "time": 0.2, "angle": -246.69 }, { "time": 0.6, "angle": 11.28, "curve": 0.246, "c3": 0.633, "c4": 0.54 }, { "time": 0.7333, "angle": -57.46, "curve": 0.38, "c2": 0.53, "c3": 0.745 }, ], "translate": [ { "time": 0.2, "x": 7.23, "y": -13.13, "curve": "stepped" }, ] Probably have to look at their source code to get a full understanding.

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 Depends on how you change the color. For example, it could be composite of several different layers with there own tint.

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", true))

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.

Please make a demo on codesandbox. https://codesandbox.io/ This is not needed. import { gsap, TimelineLite, TimelineMax, TweenMax, CSSPlugin } from "gsap"; https://greensock.com/docs/v3/Installation?checked=core,draggable#esModules import { gsap } from "gsap"; import { Draggable } from "gsap/Draggable"; This is incorrect. this.dial is null. this.dialPos = TweenMax.set(this.dial, { x: "+=0", }); Should be gsap.set(), but only after mounted.

Several reviews state it breaks a lot of sites.