OSUblake last won the day on October 16

OSUblake had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. OSUblake

    Toggle an input's checked "value"

    Nope. .checked is a property of the input. :checked is a pseudo class representing the state of the input, and would be applied based on the value of the property. I'd imagine it would be pretty easy to get past a "I'm not a robot" checkbox in a CAPTCHA if all a spammer needed to do was apply a pseudo class.
  2. OSUblake

    GSAP Version Question

    What if he does nothing for a few months? Will the project complete itself? 🤔
  3. OSUblake

    improve performance of slide animation

    Your animation was really smooth for me, and I didn't see anything unusual from Chrome's Rendering dev tools.
  4. OSUblake

    Toggle an input's checked "value"

    Notice that I'm doing that in CodePen's debug view so I don't have to deal with selecting the element from an iframe.
  5. OSUblake

    Toggle an input's checked "value"

    There's a bunch of ways. You can set a break point in the Sources debugger and check the value of anything in memory at that time. Or you can just select your element in the console, and print out its checked status.
  6. OSUblake

    Draggable with create-react-app

    Works fine here. https://codesandbox.io/s/8z3z82rvo8
  7. OSUblake

    Animating at Same Time - Missing Point of TimeLineMax

    You don't need a negative delay. Look at the link look he suggested, and watch the video.
  8. OSUblake

    draggable object with throwResistance and minDuration

    First, that demo isn't using the latest version of TweenMax or Draggable, which is currently at 2.0.2, so that's part of the problem. Now check out the docs for ThrowPropsPlugin.to(), which is what creates the throw tween. https://greensock.com/docs/Plugins/ThrowPropsPlugin/static.to So setting a duration cancels out the throwResistance.
  9. OSUblake

    draggable plugin - update children elements

    Ha. Same time!
  10. OSUblake

    draggable plugin - update children elements

    You can learn from this example. I'm controlling the progress of animation using draggable.
  11. OSUblake

    Intercept animated value to start from somewhere else

    Sure, you can add your own easing. I was just showing it working in one continuous tween.
  12. OSUblake

    Intercept animated value to start from somewhere else

    Okay. That confused me. So like this then?
  13. OSUblake

    Intercept animated value to start from somewhere else

    Sorry, I'm still confused. The canvas arc method is pretty flexible. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc So you may need to set and/or tween the start angle, and use the anticlockwise flag to control the direction. Fork my demo, and try to close to what you're going after.
  14. OSUblake

    Intercept animated value to start from somewhere else

    I'm still confused what you're asking. Like this?
  15. OSUblake

    Intercept animated value to start from somewhere else

    The DirectionalRotationPlugin can use radians. See the useRadians flag. https://greensock.com/docs/Plugins/DirectionalRotationPlugin But I'm not sure what the problem is if you know the values.
  16. OSUblake

    morphSvg with canvas and timelineMax

    GSAP irons out lot browser inconsistencies with SVG, so compatibility really isn't an issue. And it's true that canvas may perform better than SVG, but that also comes at cost. Mainly, you have to manually do everything the browser would automatically do for you, and the learning curve can be steep. With SVG, this is pretty much all you need to morph. tl.to(path, 1, { morphSVG:"#morph-step-1" }) .to(path, 1, { morphSVG:"#morph-step-2" }) .to(path, 1, { morphSVG:"#morph-step-3" }); With canvas, this is the code for 1 animation.
  17. OSUblake

    morphSvg with canvas and timelineMax

    Is there any reason you're trying to use canvas for this? I think it would be much easier to do everything with SVG if you're just starting out.
  18. OSUblake

    Div -> flip and full screen

    That demo doesn't use Babel so you're good. A lot of my demos are configured that way just in case I need to use it. If you find something that uses Babel or TypeScript, you can get the compiled code by adding .js to end of the url. If there is a ? in the url, delete that and anything that follows it. So for a url like this. https://codepen.io/osublake/pen/WwgQEV?editors=0010 Delete the ?editors=0010 part, and add .js. https://codepen.io/osublake/pen/WwgQEV.js
  19. OSUblake

    Give me Suggestions to showcase PLIS

    I totally get that. People want to see eye candy, and not a lot of code. I always show this demo to people who don't mess with animations on a frequent basis. It does something that cannot be done with CSS alone, and is pretty simple. I spent less than an hour on it, and to my shock, ended up being the 16th most hearted pen of 2017.
  20. That's probably your best option. The only way to really prevent that is to use a monospace font with the same amount of characters, but that wouldn't work for what your doing because the number of characters would differ, and there's a size difference between English and Korean characters.
  21. If something isn't working, the first thing you should do is check your browser's console for errors. https://developers.google.com/web/tools/chrome-devtools/console/get-started You're missing the MorphSVGPlugin script, which you can copy from here.
  22. OSUblake

    Counting down from 5 to 0 – proceed to next step

    Check out what the SteppedEase does. https://greensock.com/docs/Easing/SteppedEase It changes a value in "steps". However, sometimes you need to be careful about that if you're expecting a certain value as there might be a floating point error. For this particular demo, 2 ends up being 1.9999999999999996 for me. There's nothing you can do about that besides rounding, which brings you back to what Jack or PointC did. So SteppedEase might not be the best solution if you need to display the actual value.
  23. OSUblake

    SVG translate elements from svg coordinates

    This demo uses a slightly modified version of that function. The object returned by that function has cx and cy properties, which are for centerX and centerY. That can help out a lot if you're trying to center stuff. It's also helpful when scale or rotation is involved as the top-left corner might be in a different position.
  24. OSUblake

    ticker vs rAF?

  25. OSUblake

    ticker vs rAF?

    There could be a small performance hit if you have multiple rAF loops. GSAP's ticker will only call rAF once for every listener. What's best really depends on what you're doing. For long running usage I typically use GSAP's ticker unless I'm using a library that has it's own ticker, like PixiJS. For short term usage, like debouncing an event, I might use rAF or a promise.