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


Everything posted by OSUblake

  1. 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:
  2. 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.
  3. 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
  4. 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.
  5. 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
  6. Here's an example of animating SVGPoints. https://codepen.io/osublake/pen/7108c0f8dd0d32408ab3c7e5c93929ee
  7. 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/
  8. 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
  9. 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
  10. 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
  11. I don't think so. The point of prettier is be very strict about the formatting.
  12. 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.
  13. 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
  14. We still need a demo to see the problem.
  15. It doesn't seem to have any gsap code in it.
  16. 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.
  17. Several reviews state it breaks a lot of sites.
  18. Here's an example using v2. Shouldn't be too hard to convert to v3. https://codepen.io/osublake/pen/xYMeKP
  19. Nah. It has to be an interesting question.
  20. Anchor only works for sprites. For other stuff like graphics or containers, you need to use pivot.
  21. Definitely don't know what you're asking, but if you're rotating an element, then getBoundingClientRect might not be the values you are expecting. This demo draws the coordinates of getBoundingClientRect around rotating elements. https://codepen.io/osublake/pen/wRvjJL If you're trying to do circle collision detection, that's super easy. Just compare the distance to the sum of the radii. https://codepen.io/osublake/pen/LYNLxYr
  22. A useEffect should always have an array as the second parameter, and your gsap code doesn't have a valid target. You should also stick to the new syntax. TweenLite, TweenMax, TimelineLite, and TimelineMax are deprecated. If you're trying to stagger all 4 elements, then it might be something like this. export default function() { let animatedEl = useRef(null) let animatedEl2 = useRef(null) let animatedEl3 = useRef(null) let animatedEl4 = useRef(null) useEffect(()=>{ const staggerTargets = [ animatedEl.current, animatedEl2.current,
  23. No, just that you shouldn't animate the same properties with gsap and css. For example, if you have transition: all 1s; css on an element and then try to animate that element with gsap, it's probably going to animate incorrectly.
  24. It looks like firefox doesn't rasterize scale. It shows paint flashing.
  25. Using will-change is fine. Articles warning about it are to prevent people from doing stupid stuff like this. * { will-change: transform; } Will change creates a bitmap of the element for faster rendering. The only issue with that is scaling. Choose your poison. https://codepen.io/osublake/pen/6ed5cf3966861e68ac0d4e7a47c17847