Hi guys, I'm going to show you an easy but very effective animation example. This can be used in grid designs, which are becoming more and more popular.

1 - You can draw a grid as you like. Make sure it is 1px stroke. or create with fffuel.co/ooorganize

2 - You will get much more effective results from an angled grid design. I did it at an isometric angle with the Easometric plugin.

Plugin: Easometric

3 - Design the grid however you like.

4 - Design the baseline. Through it, we'll see our twinkling lights in there. I prefer the radial gradient, it just will look better IMO.

5 - Duplicate it and give it a linear gradient with shiny colors. Opacities (0% , 100% , 0%)

6 - Create a component and duplicate it. Then combine as a variants.

7 - Okey, here we go. Important part. 1st Variant: Move the linear gradient outside the lines but above the line, not below it. And make it shorter, just like this. 2nd Variant: Move the linear gradient outside the lines but below the line, not above it.

8 - Make it a smart animate. 1st one is like that. (my fav easing: "0.6, 0.6, 0, 1")

9 - Last part is 2nd one is like that. So " V1 -> V2 with smart animate" and "V2 -> V1 instant with after delay"

10 - Result Follow for more tips