jsco

Sometimes the motionpathplugin doesn't work for certain paths and I'm not sure why. Here's an example. In this case, I want to draw different parts of the white line but it seems like either the css properties (stroke-dashoffset & stroke-dasharray) or the plugin isn't working. I tried running the svg through svgo too, but that didn't help either.

@PointC will need to mask some other elements as well so can't use rotate, but the mask fix works!

I want to animate some planets that rotate around on an orbit. The problem is that the lines from the orbit and the lines from the planet intersect which doesn't look good. My solution was to add another white element behind the planet to overlay the orbit and generate space between the lines. Now my problem is that this solution doesn't work with backgrounds that are not a solid color. I have gradients in my background so just masking it with a solid color won't work. Is there a way to cut out certain elements behind the main shape, but animate this cut out part with the main shape? I tried using masks, but it seems like masks don't work with motionpathplugin and the solution is also fairly verbose as I have to copy every element I want to animate

@GreenSock I only want the rotation to start in the middle of my timeline, though. I also have a bunch of rotating elements so having to manually time them all is not super clean. I take it there's no built-in way to accomplish this then, right?

In the middle of my timeline, I have an infinite animation that starts (the blue rectangle in my demo). Because of this, the `totalProgress` value becomes unusable, as the duration is something close to infinite. Is it possible to "ignore" the infinite animation on my timeline and calculate my progress and duration from other animations (in this case, the orange rectangle)? (bonus points if I can also get rid of the -1.5 delay on the following animation as that also feels a bit counter-intuitive)

@Cassie Funny timing, I'm literally doing one of your tutorials right now Thanks, I'll give Affinity a try. Shame that there's no solution that just keeps the svg completely as is

I've been using figma to draw my svg's, but figma gets rid of my classnames and other attributes in the svg whenever I make a change. This is frustrating because I usually go back and forth between animating in code and changing the svg in figma and have to manually re-add all these classes again. It also doesn't respect <text> elements What svg editor do you guys use? Do you have the same workflow?

In case anyone else comes across this, animating along a path is actually fairly straightforward, just use the native getPointAtLength and getTotalLength functions together and take the point for every percentage of the path.

thanks for the help @ZachSaucier! I'm visualizing an assembly line. Below is a screenshot of how it looks. It need to show rectangles moving along multiple paths, choosing the next path and stopping if there's another element in front of it. The reasons I struggled with this using just gsap are: I need to be able to change the speed while the animation is playing (based on its position) For collision detection (which I would do by just getting the distance traveled of an element on the path, and comparing it to the position of all other elements) Elements need to play/pause when they detect an element in front of it. I've used paused(true|false) to start/stop the animation but had some issues where onComplete() is called before it's supposed to. I'll try to get a reproduction ready for that soon. All of this should be pretty precise I based the collision detection on tl.progress()but am a bit concerned about both performance and precision since I have to call it pretty much every ms on all of my elements.

I'm developing an app that needs to animate objects along svg paths but also do advanced stuff like detecting the collision of objects on the same path, pausing/restarting the position of individual elements and so on. I tried doing this with the MotionPathPlugin but it didn't work the way I needed. Is there any way I can get the unminified code of the plugin to extend it to my needs or any other, more precise, way to animate elements along an svg path?

In case someone else comes across this, what I do now is 1. get the start and endpoint of each path 2. see which one is closest to the first path 3. if its an endpoint I flip the path and connect the coordinates, if its a starting point I connect the coordinates as is (removing the M command at the beginning). I couldn't find any library that does this so I created this. should be able to handle most use cases but if anyone else wants to use it make sure to test it thoroughly first.

const value = window.scrollY * x you can get x by checking what the transform value is at the top of the page transform: matrix(1, 0, 0, 1, 0, {value});

I would use scrollmagic or sth similar to get the current scrollheight and combine that with the drawsvg plugin so the line is an svg path that you drew beforehand and then you just fill it. Alternatively you can also use this guide to animate the line yourself.

I have an svg that is made out of multiple <path> elements. My Desired Solution : the element (the blue rect) should travel from one side of the line to the other (like in the image I attached, which way doesn't matter for now, as long as it goes into one direction) My Problem: The line is made out of multiple <path> elements that all have different directions. I wasn't able to see common start/end coordinates for them either but my svg knowledge is still limited so I may just not know how to identify them. What I tried Currently I map over all the paths and create an animation for each one, but thats not ideal because they all have different directions and I will also have to calculate the speed. Ideally I'd want to combine all of them into 1 single path object. I have no control over the svg I get (its parsed from word) and the solution needs to be dynamic (needs to work for all kinds of lines without manual work)

I have a path that has a transform on it like this: <path d="M 5794.010417 13741.015625 L 6057.942708 14725" transform="matrix(0.03,0,0,-0.03,0,842)" /> and I want to animate an element to move along this path. Unfortunately because of the transform there is an offset. Is there a way for me to remove the transform without moving the svg or a way to apply to the element that I'm moving aswell?