Moving a line along its own angle?

[thedamon]

Wondering if there's a "nice" way to move lines along their own angle. I have tried to guess the angle in the codepen, but it's not looking so hot.

 

Also curious.. because I was considering going back to the source SVG and rotating all the source lines to be vertical, then somehow using a rotation while just moving them vertically.. but i'm not sure if that would actually work (unless maybe each path was grouped?)

See the Pen poJJVNV by thedamon (@thedamon) on CodePen

[GreenSock]

Sure, either way is possible. One involves a lot more work

 

If I understand your goal correctly, I think the simplest way of doing it would be to start off with the lines all being horizontal (or vertical) and animating their "x" (or "y") property, but put them into a group that's rotated. Easy-peasy. 

 

The other way requires math for the angle calculations and parsing of the <path> data. If you want that explanation, let me know but it's certainly a lot more work. I'd recommend the simple approach I outlined above. 

[thedamon]

(this is from a rain illustration that i want to animate a little.. though also worried about CPUs abit)..

 

It does sound like rotating a group (or groups) and straightening the lines will work a lot more easily.. i'll have to investigate how easily i can do that with the source svgs.. (i'm working with illustrations provided to me but i have a lot of leeway to edit them)

 

I'm wondering if a 'particle creation' approach might serve me a little better here though.

 

Guessing the math way is slope calculation and then projecting that with relative units? I'm curious.. but i'd like to be able to control the rotation easily, so i think rotated groups (possibly dynamically created based on a few templates) will be best

[GreenSock]

Yes, I'd be concerned about the CPU too. animating rain as SVG is tough on the CPU, not because of GSAP but because of the graphics rendering that the browser will need to do. You'd be much better off using canvas or a WebGL-powered option like PixiJS. You could try it with SVG and just see how it does though. 

 

1 hour ago, thedamon said:

Guessing the math way is slope calculation and then projecting that with relative units?

Right, you'd need to determine the slope (angle) and then have some kind of velocity that'd determine how far to go on that angle to determine the x/y coordinates. 

 

Good luck with the project!

[ZachSaucier]

Another alternative is to draw the full path of a rain drop in SVG and then use DrawSVGPlugin to make it look like a droplet is falling along that path. It wouldn't be as performant as a canvas/webgl approach but if you already have all your assets as SVG and don't have too many droplets it should be fine.