OSUblake last won the day on January 20

OSUblake had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. Having a good understanding of arrays will make this easier to understand. Beforehand, I create an array of arrays that hold the different path variations. So the structure looks kind of like this. var pathLists = [ [ [startPath1 + randomAltPath], [startPath1 + randomAltPath], [startPath1 + randomAltPath], [startPath1 + randomAltPath], ], [ [startPath2 + randomAltPath], [startPath2 + randomAltPath], [startPath2 + randomAltPath], [startPath2 + randomAltPath], ], [ [startPath3 + randomAltPath], [startPath3 + randomAltPath], [startPath3 + randomAltPath], [startPath3 + randomAltPath], ], [ [startPath4 + randomAltPath], [startPath4 + randomAltPath], [startPath4 + randomAltPath], [startPath4 + randomAltPath], ] ] The random alternate paths are shuffled, so there will only be 1 circle going down a certain path at a time. However, that will only happen if the duration/speed is the same for each circle for every path variation. By using a random duration for each circle/variation, there is a possibility that a fast moving circle could catch-up to a slow moving circle, and head down the same path. Eliminating that possibility completely would require more code and logic, but we can reduce that possibility by reducing the range of the random duration. Instead of using a large range, like random(1, 5), use a smaller range like random(1.5, 2).
  2. Calling just the ease function

    You might want to check and see if there is a way to disable animations, or at least some of them. In Angular material, there is way to disable animations, allowing you to provide your own with a little work. I realize that you're using completely different, but there might be a similar option. Just a thought.
  3. Set framerate on timeline

    Good to know. I wasn't sure about that because I know the time difference between updates could vary a lot more with rAF.
  4. Calling just the ease function

    The cubic you're thinking of is probably a cubic-bezier ease. CSS doesn't have a cubic, quad, quart, quint, sine, circ, expo, or back ease, but you can get close to those types of eases using the cubic-bezier values I posted above. If you're curious, most of the eases GSAP and other animation libraries use are called Penner easing functions... or equations. Just Google that to get the lowdown on what most easings are based on. And since you're limited to CSS eases, the best place to experiment with eases is probably cubic-bezier.com.
  5. Calling just the ease function

    Yeah, CSS and WAAPI cannot use JS based eases. You might be able to get close to some of GSAP's eases using these values. easeOutCubic = cubic-bezier(.215,.61,.355,1) easeInOutCubic = cubic-bezier(.645,.045,.355,1) easeInCirc = cubic-bezier(.6,.04,.98,.335) easeOutCirc = cubic-bezier(.075,.82,.165,1) easeInOutCirc' = cubic-bezier(.785,.135,.15,.86) easeInExpo' = cubic-bezier(.95,.05,.795,.035) easeOutExpo = cubic-bezier(.19,1,.22,1) easeInOutExpo = cubic-bezier(1,0,0,1) easeInQuad = cubic-bezier(.55,.085,.68,.53) easeOutQuad = cubic-bezier(.25,.46,.45,.94) easeInOutQuad = cubic-bezier(.455,.03,.515,.955) easeInQuart = cubic-bezier(.895,.03,.685,.22) easeOutQuart = cubic-bezier(.165,.84,.44,1) easeInOutQuart = cubic-bezier(.77,0,.175,1) easeInQuint = cubic-bezier(.755,.05,.855,.06) easeOutQuint = cubic-bezier(.23,1,.32,1) easeInOutQuint = cubic-bezier(.86,0,.07,1) easeInSine = 'cubic-bezier(.47,0,.745,.715) easeOutSine = cubic-bezier(.39,.575,.565,1) easeInOutSine = cubic-bezier(.445,.05,.55,.95) easeInBack = cubic-bezier(.6,-.28,.735,.045) easeOutBack = cubic-bezier(.175, .885,.32,1.275) easeInOutBack = cubic-bezier(.68,-.55,.265,1.55) Some eases, like bounce, can't be done with a cubic-bezier. And some of those names are different in GSAP. Quad = Power1 Cubic = Power2 Quart = Power3 Quint = Power4
  6. Calling just the ease function

    Hi @Ryan DeGorter What framework are you referring to? This one? http://www.material-ui.com/#/ Based on the code you provided, it doesn't look like you can override one of those eases with a GSAP ease, or any JavaScript based ease for that matter. A demo could always prove me wrong, but it looks like those eases are strictly CSS based. Animations that are built into a theme are usually pretty hard to override, particularly if they are CSS-based.
  7. Set framerate on timeline

    I was kind of curious about frames because I've never dealt with that. My concern with setting the fps to 50 is that 50 is a very hard number to hit using requestAnimationFrame. So I'm wondering if it might be better to also set useRAF to false? TweenLite.ticker.useRAF(false) TweenLite.ticker.fps(50)
  8. WAAPI-Powered GSAP? Unlikely

    As seen in my second GSAP vs WAAPI demo, it's better to let GSAP deal with the jank. Animators want consistent handling of jank first and foremost.
  9. Scaling parent and child element

    I don't see where you did that. Whenever you want to make changes to a demo you're asking a question about, please create a fork, and post the fork so we can see the incremental changes. It helps avoid a lot of confusion. To avoid jitter on mousemove, make sure you're throttling those events. Setting will-change: transform in your CSS might also help, but that introduces another set of problems. https://greensock.com/will-change I just quickly made a fork of your demo with those changes, and it seems to reduce the jitter a lot. I'm sure the onMove could be improved some more, but I'm really not 100% sure what you're trying to do.
  10. Fluid movement

    Your question is very similar to this one. They are using SVG, but that is irrelevant. Look at how I'm calculating the duration based on the distance between the points. The individual tweens use a linear ease. I then animate the progress of the timeline using a tween with a Power1.easeOut ease. That ease could be whatever.
  11. Set framerate on timeline

    50fps seems like a weird number, like with old analog signals and PAL. Are you in Europe? To be honest, I have never dealt with using frames, nor have I seen any questions on this forum (html5/js) about using frames, so that is something that @GreenSock or @Carl would probably have to answer. So I'm not 100% sure about the update frequency, but if you set the timeScale like that, then the playback speed will be probably be more like 50fps. If that's what you're going after, then setting the globalTimeScale might be a better option.
  12. Need help figuring out TimelineMax properties?

    Hi @AbhishekSock The secret to making responsive animations is to stop trying to make them responsive. It's very hard to do, and requires careful programming. So stop worrying about the responsive part. There are plenty of ways to deal with a change in screen size, like rebuilding your animation. Using FLIP animations Or change the positioning before and after an animation. This demo uses Draggable, but it's the same concept you could use for an animation. Once you start dragging a splitter pane, it converts its position to absolute, and when you stop dragging, it converts its position to relative/responsive units.
  13. Set framerate on timeline

    Hi @silid You can't set the frame rate for a timeline, just for a ticker. There is a way you could manually update a timeline at 50fps, but that requires some work. Can you make a demo of what you're trying to do? There might be a better way to do the conversion.
  14. Over 400 svg elements performance

    Oh, nice. I really didn't describe the process, but it sounds like you figured some stuff out, like using PIXI.Rectangle. I'm just going off the top of my head here, but I think you should use getBBox() instead of getBoundingClientRect(). That should allow you to scale the dimensions correctly. And the size of your svg/viewBox should probably be the same as the bbox of your typo element. Ideally, you want everything starting in the top-left corner, but your SVG isn't set up like that. I'll have to see about making an adjustment for the x and y values. SVGRect {x: 179.45834350585938, y: 233.4530029296875, width: 440.5416564941406, height: 133.09402465820312}
  15. Over 400 svg elements performance

    Hi @kaliel I didn't forget about you. I'm going to try and get around to making a version using PixiJS later today.
  16. Draggable jumps to end

    That would be nice, but is probably something CodePen has no control over. CodePen is just searching cdnjs, but it doesn't bring up results for different files within a library, like Draggable. At one point in time, cdnjs allowed for a "latest" version, but they've discontinued that. If you try to use that format, it will serve you v1.18.0. https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js
  17. Animate context in canvas?

    Since you asked. Scale is a transform, and that can be really confusing if you've never messed with raw transforms before. GSAP makes transforms seem super easy, but they aren't... not by any stretch of the imagination. Canvas transforms work just like SVG transforms, and use the same matrix. In canvas, there is no transform origin which can make transforms seem even more confusing. SVG really doesn't have a transform origin either. CSS adds one, but it doesn't work the same in every browser, so GSAP has to calculate it for you. With canvas, you can call transformation methods, like ctx.translate(), ctx.scale(), and ctx.rotate(). Or you can set the transformation matrix in 1-shot by calling ctx.setTransfrom(). For this post I'm going to use setTransform to set the matrix. An identity matrix, a matrix with no transforms, will look like this. ctx.setTransform(1, 0, 0, 1, 0, 0) To understand how those values are calculated is beyond the scope of this post, but as long as rotation isn't involved, you could look at the matrix as looking like this. ctx.setTransform(scaleX, 0, 0, scaleY, x, y) And to get around calculating the transform origin for your circle, you can just draw it centered at 0,0. So here's your demo animating scale instead of radius. I'm using Path2D because it's easier... and fun, but it won't work in IE. Google does have a polyfill for it, but it doesn't work good. One of these days I should just write my own polyfill.
  18. WAAPI-Powered GSAP? Unlikely

    Hehe. I can appreciate not wanting to get involved with a spec as it's the equivalent of dealing with the government. It takes 10 years to come up with something, and the end result looks nothing like what you originally proposed. I need to do some more investigating, but it seems like a worklet for doing purely JS-driven animations could be possible. The current draft for the animation worklet describes something close to that, but is designed to work with a WAAPI/CSS timeline. Here's the message that led to what is now the animation worklet, and some of the problems with running animations on a different thread. https://lists.w3.org/Archives/Public/public-houdini/2015Mar/0020.html
  19. WAAPI-Powered GSAP? Unlikely

    I'm going to post more stuff about Houdini, but the reason I'm doing this is to be a little proactive so what we don't have to wait until mid-2019. Features get added based on popularity, so the word needs to get out. But more importantly, you can use your influence as the author of a popular animation library to help shape Houdini. For example, one problem I see in the future is that requestAnimationFrame is capped at 60fps, and there are no plans to change that because it will break some existing sites. This means that JavaScript animations will only be able to run at 60fps regardless of the user's display, while CSS animations will be able to match any refresh rate, so 120fps+. And then you have WebVR, which is supposed to run at 90fps. So JS needs a timing mechanism than runs faster than rAF, which might be possible with the help of worklet. I don't know what that might look like, but it should definitely be explored.
  20. WAAPI-Powered GSAP? Unlikely

    It's always fun to lead the reader on, validating their opinions, and then pull a 180 on them! I should find a pro-WAAPI place to post that on. For even more fun, check out this tweet. https://twitter.com/shshaw/status/941767533610323968
  21. WAAPI-Powered GSAP? Unlikely

    Every time I hear somebody talk about burning witches, I always think of this scene from Monty Python.
  22. Animate context in canvas?

    Hi @jesper.landberg Nice use of mix-blend-mode! It looks like @Sahil might have got you going in the right direction. The thing to understand about the canvas context is that it's more of a graphics API, so there really aren't any built in objects to animate. Whatever properties you want to animate, just make an object with those properties, and animate that object. One thing to be careful about when using lerp is that it might result in a lot of unnecessary, tiny calculations (see Zeno's paradox of motion). The paradox is that you can never move to a goal because it requires an infinite number of steps. Computers do have limits, so that's technically not possible, but it's usually a good idea to only lerp when the difference between the values is large enough to be noticed. So something like this. var dx = mouseX - circle.lastX; // Only lerp when the difference is greater than 0.01 // Could be any threshold, but something in the range of 0.01 to 1e-6 // should work fine for what you're doing if (Math.abs(dx) > 0.01) { circle.lastX += dx * 0.25; } else { circle.lastX = mouseX; } For more info about animating canvas with GSAP, here are some threads worth checking out.
  23. Sure. Here's a variation that creates 5 different timelines for each circle, which should be running at different speeds.
  24. Scaling parent and child element

    No biggie. You weren't here when this question originally was asked, but welcome back buddy!
  25. Scaling parent and child element

    That's what @Sahil originally did. See my post about the ExpoScaleEase above, and the thread it links to. It should work the same, and I was only suggesting it as another use case so it can be added to the GSAP library. My guess is that it would perform better than manually calculating the scale on every update.