Spich launch and line-animation-how-to

Hi there!
Wanted to show you our blockchain project website http://spich.tech/en
Built it using a Webflow (— Wow, what surprise, son of dragon, — I heard ur thoughts).

Animation. This one was a headache on the very start. But than a solution comes true. (This is what this post actually about)

It takes a number of well organized layers neatly drawn in Adobe Illustrator:

Looks great! Right? But during the work process my real notes looks like shit on a paper, u know:

What are we talking about… animation! Sure. Carefully exporting every layer separately to svg (default settings is okay) and go to http://lazylinepainter.info (magic happens there)

Upload svg’s one by one → get the code. Copy-paste. RTFM twice. Then group my 9 layers to 4 stacks:
webflow-layers

And here comes the Webflow super-duper 3D Transaction feature (always wanted to try it).

Wasting a lot of time tuning delay starts of all parts. And here we go! Animation is ready!

Was useful:

  1. 11 things about flexbox

  2. 11 time-saving pro-tips for Webflow designers

What else… okay nothing. Cheers.

9 Likes

Very cool bro! Well done! How much would you charge to do a site like this?

Hi there! Thanx. About charge — it depends. There are no ready prices. Drop me a line via direct (is this forum has DM? Guess yes.). We’ll discuss. Then see.