OSUblake last won the day on April 16

OSUblake had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. Importing gsap with modules gives big file sizes

    I actually forgot to mention a step in my description, but what I was trying to show was a way to eliminate some of the stuff that gets loaded automatically when you import TweenMax. But if you're just importing TweenLite, it won't make a difference.
  2. Off-Topic: Detect swipe-like gestures on trackpads

    I'm not familiar with those libraries, but gestures are really hard because they are usually device specific. You have to make a bunch of assumptions about what's going on. Have you tried hammer.js? That has pretty good support for gestures. http://hammerjs.github.io/ Here's another good source using Pointer Events. https://patrickhlauke.github.io/touch/ At the moment Safari is the only browser that doesn't support Pointer Events, but that can be polyfilled. https://github.com/jquery/PEP I linked to this article in another post of yours, but it shows how passive event listeners can improve performance. https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#IEiqEedYUtyPIBFX.97 And here's a really simple example of how Draggable could be used to detect swipes. It uses velocity instead of something like a timeout.
  3. Sprite Animation (via background-position) while throwing

    Hi @janchristoph.schumm To start, make sure you're using the latest versions of GSAP on CodePen. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/utils/Draggable.min.js https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js And here's a similar topic. It uses PixiJS, but the concept is still the same.
  4. Responsive tweens with function-based values

    Here's a demo I made with CSS vars. The --x and --y values are in vw/vh units, so it will be responsive.
  5. TimelineLite to mp4

    Or do a composite. Create the GSAP animation video first, and then overlay it over the video playing.
  6. TimelineLite to mp4

    Try pausing the video, and setting it's current time to match the animation's time.
  7. Move content on canvas background following mouse over

    Here's your demo using an offscreen canvas. It probably won't help with performance as the paths you are drawing are relatively simple. The slowest part of your demo is the trig. Math functions like cos, sin, and sqrt can be slow, and there's not a lot you can do about that. Anti-aliasing can be difficult in both canvas and SVG as an odd width stroke will straddle a pixel. Sometimes you can make it sharper by moving the stroke over half a pixel. Scale will of course need to be taken into consideration for when this will work. Related post...
  8. ModifiersPlugin not working on scale?

    You could still make it have the scope as the tween, but also pass in the tween instance as the third parameter to accommodate cases like an arrow function.
  9. Radient Gradient Glow

    A blur filter should work too. Or you could just use your image from photoshop.
  10. Translation with big images on tiny computer

    Is it better with canvas? That's still a lot of pixels that need to be painted for a weak device though.
  11. ModifiersPlugin not working on scale?

    I don't like that because it won't work with arrow functions.
  12. Translation with big images on tiny computer

    ^^^ By size, I'm talking about pixels, like 2048 x 2048.
  13. Translation with big images on tiny computer

    xPercent would be slower just because it has to calculate more things. But slow is relative. You probably won't notice the difference. GPUs have size limits, which will be some power of two, like 2048 or 4096 for weak devices. But I would just try drawing the image with canvas first. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
  14. Move content on canvas background following mouse over

    It could be used for shapes by converting the shape to a polygon, but if you're going that route you can just do polygon hit testing, which would be faster. I have some code if you want to see how that's done. For games I use this PhysicsEditor to generate the hit polygons. You normally don't need pixel perfect hit detection. Just close enough. https://www.codeandweb.com/physicseditor
  15. Move content on canvas background following mouse over

    Check out this thread for some canvas tips.
  16. Move content on canvas background following mouse over

    And how does SVG receive mouse events on a path or stroke? Through some canvas methods.
  17. Move content on canvas background following mouse over

    And on the topic of paths. I always see people claim that canvas doesn't use vectors. This is simply false. All you have to do is scale up a path to see that canvas uses vectors.
  18. Move content on canvas background following mouse over

    You can draw a canvas on another canvas. You can even draw a canvas on itself.
  19. Move content on canvas background following mouse over

    Yep, I figured you were looking at that page. Long story short, drawing a path is what makes SVG so slow. PixiJS and Three.js are fast because they generally don't use dynamically generated content like a path. Draw your path on a separate canvas element, and then draw that canvas on your main canvas using the .drawImage() method. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
  20. Responsive tweens with function-based values

    Getting the window size inside a modifiers function isn't going to help improve performance. $(window).height() jQuery or not, it's still requesting the current window size. See what forces a layout. https://gist.github.com/paulirish/5d52fb081b3570c81e3a The window size should be stored in a variable.
  21. Importing gsap with modules gives big file sizes

    You can create a file like this. window.GreenSockGlobals = {}; export const GreenSockGlobals = window.GreenSockGlobals; Now import GreenSockGlobals, TweenMax, and other GSAP goodies in another file. Now you can export GSAP stuff from that file, and tree-shaking will trim the fat for you. Kind of like what's described here. https://github.com/greensock/GreenSock-JS/issues/215#issuecomment-356884140
  22. target random DOM elements properly

    We could forgo the battle. All I really want is somebody to name their first born after me.
  23. Simulate overscroll rubber-band effect with ScrollMagic

    Basically what I'm saying is that you can't use ScrollMagic if you want to modify the scroll behavior. The library is not designed to handle such scenarios. By modifying the scroll behavior, I'm talking about modifying the native scroll behavior. How the user scrolls the page. https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#hwQTx9IDZT5f4TgU.97 Trying to do an overscroll effect would involve modifying the native scroll behavior.
  24. How have you used GreenSock?!

    Tesla using GSAP I can understand, but CodePen? Seems a bit risky. What happens if I fork that demo and change some stuff around?
  25. target random DOM elements properly

    I want to battle!!! Some infinitely repeating random animations... Some twinkling stars... And then my finisher, the chanceRoll.... jQuery can be easily replaced in ALL of my demos. The only reason I was using it is because that is what the person asking the question was using.