OSUblake last won the day on February 5

OSUblake had the most liked content!

OSUblake

Moderators
  • Content Count

    4,021
  • Joined

  • Last visited

  • Days Won

    415

OSUblake last won the day on February 5

OSUblake had the most liked content!

Community Reputation

9,263 Superhero

About OSUblake

  • Rank
    Moderator

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

17,529 profile views
  1. OSUblake

    Follow by mouse

    It's like an itch that I can't scratch. That code keeps showing up, people keep having problems with it, and there's nothing I can do about it from happening again.
  2. OSUblake

    Follow by mouse

    Yes, sorry if I seem grumpy. I just hate that code. I've seen it enough times that I can remember where it came from.
  3. OSUblake

    Follow by mouse

    Again, set its position to fixed. And stop copying other people's code you don't understand. I've seen that code before, and it's not a good example to follow.
  4. OSUblake

    Follow by mouse

    Don't let it scroll. Set its position to fixed. And it would be better to animate x and y Instead left and top. You should also be careful with your CSS transitions. Using all can cause a lot of problems.
  5. If you're working on Draggable, I was wondering if you could implement this feature request that I totally forgot about. A grab cursor that changes to grabbing when pressed should be the default. https://greensock.com/forums/topic/15705-draggable-improvements-snapping-and-position-properties/?tab=comments#comment-76829
  6. OSUblake

    Animating width in Animate CC

    I see. That does sound simple... but then I looked at the docs. It's rather confusing. You have to animate the graphics command that drew the rectangle.
  7. OSUblake

    Animating width in Animate CC

    I'm not familiar with Animate CC, but I can take a pretty good guess. Some objects might not have a width or height property that you can change. For example, you can't change the actual dimensions of an image. To change its size, you would have to transform it i.e. scale it. If you know the initial dimensions of the object, then it's very easy to calculate. scaleX = desiredWidth / initialWidth; scaleY = desiredHeight / initialHeight;
  8. OSUblake

    How to import SVG paths?

    Yep. After Effects exports frames, so everything is predefined. DragonBones is a free alternative, but I really don't know how it compares. http://www.dragonbones.com/en/index.html I also don't know if DragonBones can use the same runtimes as Spine. There are several different ones to choose from for Spine, like for PixiJS and Three.js. http://esotericsoftware.com/spine-runtimes#JavaScript Keep in mind that GSAP can animate anything, and you may need it to coordinate or animate additional stuff at runtime, like say a motion blur filter, background movement, scene transitions, etc. GSAP plays very nicely with WebGL libraries like PixiJS and Three.js. Just check out some the examples on the showcase page. https://greensock.com/examples-showcases And support for Unity is actually a commonly requested feature. Don't know if it will ever happen, but people want it.
  9. OSUblake

    How to import SVG paths?

    It's supposed to be a text editor. Type something into it. Hover over the letters. Enjoy. 😀
  10. OSUblake

    How to import SVG paths?

    I'm pretty sure there's something that can do whatever you're referring to. Searching for "web animation" tools isn't going to get you very far. When I hear the term web animations, I think of animating DOM elements. Nothing too fancy. In fact, I think most would probably consider CSS animations to be web animations. The tools you're looking for will be related to motion design and game development. The output can usually be exported as JSON, which can be consumed by JavaScript. From there, you just need some type of runtime to parse that JSON data and convert it into an animation. You could make your own, but there is probably one that already exists. I'd be willing to bet that a lot of the TV animations you're referring to are done in Adobe After Effects, which can be played using something like Lottie (bodymovin). And then you have Spine, which is used for a lot skeletal animations. Check out the demos page. http://esotericsoftware.com/spine-demos
  11. OSUblake

    Performance issues with TimelineMax and Three.js

    What, no CSS? That's where the problem is...
  12. OSUblake

    How to import SVG paths?

    I don't think SVG was ever envisioned to be highly animatable. At it's core, SVG is really just an image format that has some nice characteristics. You're not going to find anybody using SVG for really heavy animations, like in a video game. True, most libraries will simplify the painting process, but there are times when you need to manually paint stuff, like when doing compositing operations. You typically have to draw stuff to some sort of temporary buffer, like an offscreen canvas. A good example of that with PixiJS. https://pixijs.io/examples/#/demos/render-texture-demo.js And speaking of PixiJS, it's worth checking out their filters demo. http://pixijs.io/pixi-filters/tools/demo/ And I wasn't trying to discourage you from looking into canvas. All those coding math videos use canvas, and canvas is my preferred medium for creating animations, but there are a lot times when it shouldn't be used. For example, if you need to animate a navigation menu, you should probably be using DOM elements. To learn more about canvas, it's worth it to check out all the demos and links in these threads. https://greensock.com/forums/topic/16501-how-can-i-improve-this-gsap-particle-animation-code/ https://greensock.com/forums/topic/18873-animating-canvas-fillstyle-with-gsap/ https://greensock.com/forums/topic/15088-tweening-a-svg-object-in-canvas/ I'll just add that while all that is possible, the web is limited by network speeds, so having users download 100MB worth of JavaScript, images and sound might not be the best idea.
  13. OSUblake

    How to import SVG paths?

    Not strange. Animations are usually pretty bespoke, so there's not a lot of need to maintain a tool that you're only going to use once. For example, Jack just made a tool to split apart the paths in his demos for you, but he's probably never going to use it again. I also make a lot of tools that I think will be useful in the future, but it never turns out that way. There is no easy button when it comes to animations. Learn everything you can about JavaScript, and then you can make your own tools. When people ask me how to become better, my response is always the same, go through all these Coding Math videos. https://www.youtube.com/user/codingmath/videos They show how to do fun stuff like physics, particle emitters, and even how to create your own tweening engine, but it's not something that you will be able to go through in a week or two... or month. It will take time. SVG isn't static. You can do all that drawing stuff dynamically with SVG. Canvas is faster, but SVG is much, Much, MUCH easier to work with. It also requires a lot less code because the browser manages all the complicated stuff for you. With canvas, the browser does nothing for you, and I do mean NOTHING. If you want to move something on the screen, you have to erase everything, and redraw the entire updated screen from scratch. And canvas may not have elements or CSS, but guess what? You'll have to make something analogous to an element in pure JavaScript to store and access all the state and related graphical properties of whatever it is you're drawing/animating.
  14. OSUblake

    2 questions about documentation and error messages

    No. I just find it annoying having to expand stuff when it's usually not that much longer than the collapsed content. And when copying text, it will automatically collapse once you release your mouse button. I usually don't it want to collapse, and my initial reaction is to immediately click to re-expand the content, but that won't work if the click event happened in the expanded area because the item below it will move up, so I end up toggling the item below the one I'm interested in.
  15. OSUblake

    2 questions about documentation and error messages

    Are you using source maps? That should make it easier to track down stuff like that. https://webpack.js.org/guides/development/#using-source-maps