OSUblake last won the day on July 17

OSUblake had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. OSUblake

    Particles animation into shape

    Yes, I'm responsible for that. I never finished the demo I was working on, but morphing into different shapes is what I actually designed it to do. I totally forgot all about making that, so thanks for reminding me. Now I just need to find time to finish it.
  2. Concerning your first question about library overlap, look at what I wrote about ScrollMagic in my previous post. I have always claimed that ScrollMagic isn't needed, and it isn't. You can do the same exact thing by specifying the scroll position for an animation's time/duration. Nothing magical.
  3. There is no passing of commands between GSAP and ScrollMagic. GSAP has no concept of ScrollMagic. It doesn't exist as far as GSAP is concerned. And Lottie is just a fancy flip book animation. Tell it what frame to display, and it displays that frame. Maybe it's best to take a step back, and first understand how some of this stuff works conceptually. Please watch these 3 videos. It will only take like 10 minutes, and is key to understanding how a lot animation works. Normalization - https://www.youtube.com/watch?v=hJqRcExiBk0 Linear interpolation - https://www.youtube.com/watch?v=mAi2-LTC2CA Map - https://www.youtube.com/watch?v=FxAEXHGZSPA All GSAP animations have a start and end value. It changes the value using interpolation. The norm value is time. The normalized time value is the same thing as the progress value. https://greensock.com/docs/TweenLite/progress() ScrollMagic does the same thing as GSAP, but instead of using time for the norm value, it uses the scroll position. So scroll position can also be considered a progress value. So here's the connection. ScrollMagic can change the progress of a GSAP animation. A GSAP animation can change a frame value. Lottie can be controlled by specifying a frame number. GSAP can't control the frame value of a Lottie animation directly, but you can animate a frame value on a generic object. Every time GSAP updates that object, you take the frame value, round it, and pass it into Lottie. See how it works on it's own. You shouldn't be calling .play() on your Lottie animation inside an onUpdate callback as it will constantly call it. The reason your animation isn't working like it should is because you omitted the most important part. You can't animate something if it doesn't exist. You have to wait for .json file to download and processed by the player. Look at the onDOMLoaded function in that video. That's kind of important.
  4. OSUblake

    Updating SVG Node Positions Via Wiggles

    There's some SVG magic going on there. Not really, people just think SVG is all based on attributes, but there's objects to work with. This line of code is getting actual point objects from the SVG. var point = star.points.getItem(i); Changing a point automatically updates the element. I show how some of that works in this post. And to get the transform values, GSAP puts an object on the element called _gsTransform. OBJECT is the key word there. That means we can scope a function to that object i.e. moveAction. var tl = new TimelineMax({ onUpdate: moveAction, callbackScope: handle._gsTransform }); // Draggable and the timeline can share this function function moveAction() { point.x = this.x; point.y = this.y; }
  5. OSUblake

    Infinite Uncaught Exception Loop (Cannot tween a null)

    I don't know why it keeps throwing an error, but it's supposed to throw an error if the target doesn't exists. If it failed silently, then it would be hard to debug. Error handling is just part of development, and no, you shouldn't wrap all your code up in try... catch statements. Elements don't magically add and remove themselves from your app. Whenever something changes, you should update your code to reflect those changes. There is no easy answer on how to do that as it depends on what you're doing. A simple way to prevent a null target error is to test for a truthy value. https://developer.mozilla.org/en-US/docs/Glossary/Truthy Any object will be true. if (foo) { tl.fromTo(foo, 1, { x: 100 }, { x: 0 }); }
  6. OSUblake

    Get rotated position of element

    Understanding how matrices work probably isn't too important. I would focus on how and when to use them. Using an SVG Matrix. The trick is doing stuff in the correct order. matrix = svg.createSVGMatrix() .translate(X, Y) .rotate(R) .scaleNonUniform(SX, SY);
  7. OSUblake

    Get rotated position of element

    I can appreciate the difficulty and the amount of support it would involve, but it still has a lot of neat features. The spinning dot wheel demo you made with that tool is really cool. You should make that into a coding challenge. I'd like to see how many people could actually do that.
  8. OSUblake

    Get rotated position of element

    Here's your matrix. Then just transform the points like I showed above. const cos = Math.cos(rotation); const sin = Math.sin(rotation); matrix.a = cos * scaleX; matrix.b = sin * scaleX; matrix.c = -sin * scaleY; matrix.d = cos * scaleY; matrix.e = x - matrix.a + matrix.c; matrix.f = y - matrix.b + matrix.d;
  9. OSUblake

    Get rotated position of element

    Sometimes I need the matrix, but I hate splitting up a string, so I was thinking it might be helpful if there was a way to get the matrix values from GSAP. And if there was a way to transform a point from that matrix, even better. Didn't you have something like that in the CSSTransform tool?
  10. OSUblake

    Get rotated position of element

    That works! The nice thing about using a matrix to get the coordinates is that it will handle other transforms like scale. Maybe @GreenSock will consider adding transform methods like that to the CSSPlugin.
  11. OSUblake

    Get rotated position of element

    I can't find a way to get a DOMMatrix from an element. Webkit had this, but I don't see an equivalent of that in Chrome. https://developer.apple.com/documentation/webkitjs/webkitcssmatrix
  12. OSUblake

    Get rotated position of element

    MDN says it's non-standard, but it's just in draft. https://drafts.fxtf.org/geometry/
  13. OSUblake

    Get rotated position of element

    Interesting. Just saw that there's a DOMPoint, and it will work with a DOMMatrix almost exactly like my SVG example. I guess it doesn't matter if it's a 2d or 3d matrix since it will do the math for you. https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix/DOMMatrix
  14. OSUblake

    Get rotated position of element

    Hmmm... I dunno. Are you still doing electron based apps? What I did above will probably only work for regular SVG elements. However, a new feature is the DOMMatrix, which looks like it was added to Chrome 61. I haven't tried it yet, but that should work for any type of any element. *In theory* https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix But if you can get a 2d matrix... matrix(a,b,c,d,e,f); Then you should be able to get a transformed corner like this. You of course would need to do that for every corner. var x = matrix.a * corner.x + matrix.c * corner.y + matrix.e; var y = matrix.b * corner.x + matrix.d * corner.y + matrix.f;
  15. OSUblake

    Get rotated position of element

    It's pretty easy if you can get the matrix. SVG provides the easiest way to get a matrix. a = topLeft; b = topRight; c = bottomRight; d = bottomLeft; var r = element.getBBox(); var p = svg.createSVGPoint(); var matrix = svg.getScreenCTM().inverse().multiply(element.getScreenCTM()); p.x = r.x; p.y = r.y; var a = p.matrixTransform(matrix); p.x = r.x + r.width; p.y = r.y; var b = p.matrixTransform(matrix); p.x = r.x + r.width; p.y = r.y + r.height; var c = p.matrixTransform(matrix); p.x = r.x; p.y = r.y + r.height; var d = p.matrixTransform(matrix); A demo where I use that to match up the positions of different SVG elements.
  16. OSUblake

    Pixi 3D Carousel

    You'll probably have to use projections to do 3d in Pixi. https://github.com/pixijs/pixi-projection Check out the examples in the Projections section. http://pixijs.io/examples/#/projection/cards.js
  17. OSUblake

    Prevent GSAP from transforming my transforms into matrix()

    Lots of possibilities. Simplest solution, flip your images, scale a wrapper.
  18. OSUblake

    Prevent GSAP from transforming my transforms into matrix()

    Did you see this? If you want to keep scaleX(-1) in your CSS, then you'll also need to set scaleY to 1, and rotation to 0. Same matrix, different results.
  19. OSUblake

    Move an element from one div to another?

    Hehe. I think most of the confusion surrounding it has been clarified, so it's OK to use again.
  20. OSUblake

    Truly responsive Animations

    Actually that wasn't necessary for that demo. The tween ratio is what the current ease ratio is.
  21. OSUblake

    Truly responsive Animations

    It's probably not a good idea to keep asking for the size of something 60/second. jQuery .width() and .height() uses stuff from this list. https://gist.github.com/paulirish/5d52fb081b3570c81e3a Maybe something like this.
  22. OSUblake

    PixiPlugin Color

    Well, the end result will be the same. Creating canvas textures is nice if you don't want to make different versions of an image for different resolutions i.e. image@2x.png, image@3x.png. Raster images do not scale up nicely. console.log(window.devicePixelRatio || 1); On a normal desktop monitor, that will be 1. On a new phone, that will probably be 3, which means everything is being scaled 3x. Run these demos on your phone in debug/full page mode. The first one won't be that sharp. The second one should look really sharp. Adapting for resolution means more pixels have to be processed, so there will be a performance hit.
  23. Hehe. I could never beat Jack at his own game.
  24. OSUblake

    Truly responsive Animations

    Well there's a lot of different approaches to this. It really depends on what the animation does, and what it's being used for. If an animation runs continuously, the ModifiersPlugin might be a good option. Remember that you can change the timescale of an animation, allowing you to change the speed on the fly.
  25. OSUblake

    Bezier Path Animation Fun

    Hey @swampthang Here's a fork of your demo using the .bezierThrough() method that @GreenSock mentioned. It's usage can be a little confusing, but it can make some nice looking motion paths.