OSUblake last won the day on April 27

OSUblake had the most liked content!

OSUblake

Moderators
  • Content count

    3,538
  • Joined

  • Last visited

  • Days Won

    341

OSUblake last won the day on April 27

OSUblake had the most liked content!

Community Reputation

7,397 Superhero

About OSUblake

  • Rank
    Moderator

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

15,203 profile views
  1. Progressing draggable to smoothly drag along the path

    My demo is kind of crude, and I didn't spend a lot of time polishing it. Try returning the "bestLength" in the object that is returned by the closestPoint function. I think that value should give you what you want for the stroke.
  2. Progressing draggable to smoothly drag along the path

    Look at the page @Sahil linked to. You need to find the closest point on the path. NONE of the pens you have made do that. They all do linear progression.
  3. 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.
  4. 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.
  5. 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.
  6. 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; }
  7. 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 }); }
  8. 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);
  9. 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.
  10. 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;
  11. 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?
  12. 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.
  13. 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
  14. Get rotated position of element

    MDN says it's non-standard, but it's just in draft. https://drafts.fxtf.org/geometry/
  15. 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