Animation

Grid Design and Interaction for Landing Pages

January 23, 2023

January 23, 2023

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

Continue Reading