Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

OSUblake last won the day on September 6

OSUblake had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


OSUblake last won the day on September 6

OSUblake had the most liked content!

Community Reputation

13,783 Superhero

About OSUblake

  • Rank

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

24,002 profile views
  1. OSUblake

    Follow by mouse

    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
  2. 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.
  3. 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.
  4. Here's an example of animating SVGPoints. https://codepen.io/osublake/pen/7108c0f8dd0d32408ab3c7e5c93929ee
  5. 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/
  6. 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.
  7. 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
  8. 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))
  9. I don't think so. The point of prettier is be very strict about the formatting.
  10. 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.
  11. 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
  12. We still need a demo to see the problem.
  13. It doesn't seem to have any gsap code in it.
  14. 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.
  15. Several reviews state it breaks a lot of sites.