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

Everything posted by OSUblake

  1. OSUblake

    Smooth Page Scroll

    I've been getting a bunch of people asking me about how to do a smooth page scroll effect, so here it is. Scrolling is just a transform. If you scroll 100px down, the browser will translate the page -100px up. We can do that with GSAP. TweenLite.set(contentToScroll, { y: -window.pageYOffset }); So how do you prevent the browser from scrolling the content? Position your content in a fixed container, and set the height of the body equal to the height of your content. This will allow the page to scroll, but the fixed container won't move. Now animate the y position of your content based on the scroll position of the page.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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
  7. 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.
  8. 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;
  9. 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.
  10. OSUblake

    How to import SVG paths?

    It's supposed to be a text editor. Type something into it. Hover over the letters. Enjoy. 😀
  11. 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
  12. OSUblake

    Performance issues with TimelineMax and Three.js

    What, no CSS? That's where the problem is...
  13. 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.
  14. 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.
  15. 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.
  16. 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
  17. OSUblake

    2 questions about documentation and error messages

    Same here. Alphabetically would be much better. And I hate the auto-expand/collapse behavior. It's really annoying having it toggle while trying to copy some text. Look at the call stack. It should show you where it was called from. console.error() looks just like throwing an error, but it doesn't stop JS execution. There's also console.trace(), but it doesn't have a message parameter.
  18. OSUblake

    Animation runs choppy - how can I fix it?

    Sure. Don't animate all the things... #banner-message { background: #fff; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; /* transition: all 0.2s; */ margin: 0 auto; width: 75%; } CSS and JS can't animate the same properties. If you need CSS transitions on an element you're animating with JS, you should explicitly list those properties. Using "all" can also impact performance because the browser has to watch for changes to all those properties. Also, there's no such thing as an int or float type in JavaScript. Only "number". if ( arguments.length >= 5 && (typeof(speed) == "float" || typeof(speed) == "int") ) { Settings.speed = speed; }
  19. OSUblake

    Zoom lag SVG with expoScaleEase

    Well, a smaller number of layers will render faster. With PixiJS, you can define interactive hit areas on a sprite using something like a PIXI.Polygon, and attach the data from your database to the event listener for that hit area.
  20. OSUblake

    Zoom lag SVG with expoScaleEase

    Yes, doing click events from scratch isn't the easiest thing to do in canvas, but there are several libraries that can help with that, like PixiJS and EaselJS, and both play very nicely with GSAP. PixiJS demo - https://pixijs.io/examples/#/demos/interactivity.js EaselJS demo - https://www.createjs.com/demos/easeljs/draganddrop
  21. OSUblake

    Various questions not answered by the tutorials

    Curious. What's the FPS say at the top of this demo? https://codepen.io/osublake/full/oLGBXy
  22. OSUblake

    Various questions not answered by the tutorials

    To open an incognito window in Chrome, hit Ctrl+Shift+N Velocity is an animation engine. Mo.js is also an animation engine, with a little SVG creation thrown in. Try making a side-by-side comparison using one those libraries with GSAP, and see how the performance is. Three.js, PixiJS, and p5.js are canvas/WebGL libaries, and there are thousands of sites that use one of those libraries + GSAP. Just check out some of the examples on the showcase page. https://greensock.com/examples-showcases
  23. OSUblake

    Various questions not answered by the tutorials

    Ditto. 60fps on my end.
  24. OSUblake

    Various questions not answered by the tutorials

    Is this buttery? If not, there's something going on your end. GSAP is an animation engine. It doesn't do any rendering or anything else visually or graphically. All GSAP does is change the numerical value of a property, which is a ridiculously fast operation. Try running the animation in incognito mode. And check the refresh rate of your monitor. If it's running at 30hz, it will only run at 30fps. Also, make sure there aren't a bunch of background processes running on your computer, you're not running out of memory, and hardware acceleration is enabled in your browser.
  25. OSUblake

    Zoom lag SVG with expoScaleEase

    Eh... yes and no. You can render an SVG inside a canvas element, but it will be converted to a bitmap, so your map may become pixelated if you zoom in too much. Canvas can render vector paths, which scale just fine, but that might be a lot of work if you're not familiar with canvas. Why don't you try modifying the demo I posted above with your map? No guarantees, but it might perform better. The dragging and zooming is all done by changing the SVG's viewBox.