grid How do I connect grid intersections to from letters?

[lei10003]

I’m building a loader based on the Hermann grid: a field of ghost nodes (intersections).
Choreography: nodes are always visible; for each phase the nodes that form L then A are emphasized and edges are drawn between successive nodes. Next phase repeats at a different orientation/position (90° rotations + offsets).

 

 

Questions

1. Is my approach to connect nodes with DOM edges sound, or should I switch to SVG paths for precision/perf?
2. Any cleaner pattern to define letter sequences? I’m using small helpers (row/col/diagDR/diagDL, offset, rotate90) and explicit arrays for L/A.
3. Best practice to clear edges between phases without flashing? (I’m fading & removing.)
4. For the intro ripple, is using from:[(N-1)/2,(N-1)/2] the right way to stagger from the true center on even grids?

See the Pen bNVMWOj by ligea-alexander (@ligea-alexander) on CodePen.

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "please read through all my custom logic and find any problems for me" requests. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

Did you have a GSAP-specific question we could answer for you? 

[Rodrigo]

Hi @lei10003 and welcome to the GSAP Forums!

 

Unfortunately there is too much code in your demo for us to go through and have a closer look at it, is beyond the scope of the help we provide in these free forums.

22 hours ago, lei10003 said:

Is my approach to connect nodes with DOM edges sound, or should I switch to SVG paths for precision/perf?

You have to test, test and test the only way to know for sure. There are cases where simple SVG performs as well as regular DOM nodes and really simplifies the animation task, especially with the DrawSVG Plugin:

https://gsap.com/docs/v3/Plugins/DrawSVGPlugin

22 hours ago, lei10003 said:

Any cleaner pattern to define letter sequences? I’m using small helpers (row/col/diagDR/diagDL, offset, rotate90) and explicit arrays for L/A.

Pretty much repeating myself, using the DrawSVG Plugin should be far simpler since you can define the paths, you'll have to test performance but if your SVG doesn't have filters or anything it should be OK.

22 hours ago, lei10003 said:

Best practice to clear edges between phases without flashing? (I’m fading & removing.)

Yeah, fade out then show and fade in would be my approach. With the DrawSVG Plugin you can draw the next letter while fading out the previous one as well. There are lots of options here, you can un-draw one letter while drawing the next, etc.

22 hours ago, lei10003 said:

For the intro ripple, is using from:[(N-1)/2,(N-1)/2] the right way to stagger from the true center on even grids?

Have a look at advanced staggers:

https://gsap.com/resources/getting-started/Staggers

 

Hopefully this helps

Happy Tweening!