nerdwise / whelpton-electric

Promotional website for Whelpton Electric. Based in Agassiz.
1 stars 0 forks source link

Hero Motion Animation #289

Open angusm opened 5 years ago

angusm commented 5 years ago

Create a macro for rendering the logo using CSS. I think we can do the line with a really long thin div and a radial gradient background to created the pointed tips, but we might just need an SVG for that. Diamonds can be rotated divs.

Once we have this slotted out as DOM, we can start throwing CSS animations at it.

My current thinking is to have the green diamond scale up from nothing. Staggered behind that start the yellow diamonds scale up and slide out from behind the green diamond. Staggered behind that the line grows from nothing sliding out of the edges. Text fades in and slides up simultaneously.

kadenzipfel commented 5 years ago

https://codepen.io/kadenzipfel/pen/GaWJNQ?editors=1100