Discover the best path websites created by professional designers. Get inspired and start planning your perfect path web design today!

Inspired by:
https://github.com/codrops/AnimateSVGTextPath/

(this version is easier and more efficient)

SVG Path text

Svg Path text

For a while I have wanted to learn how to created slanted edges and shapes with CSS for sections and also things like tool-tips etc. Well here is a quick cloneable project you can use to learn and apply "Clip-Path" in CSS to any of your sections. I also left some quick resources at the bottom to help you even further. Thanks to Kevin Powell on YouTube for his demonstration. It inspired me to make a cloneable project for anyone who was thinking the same thing I was. Just seemed like a hack-job to be rotating whole sections with transform inside of Webflow as opposed to properly adding a bit of CSS. Anyhow, I hope this helps!

Slanted Edges with CSS

Learn more at https://greensock.com/motionpath/

GSAP MotionPath

GSAP MotionPath Plugin

Sygnal

It might not be obvious, but you can in fact stack your pages so that you have e.g. /news as your directory page, and then /news/my-article for each article page. Here's how to do that.

Discover path websites built by the Webflow community

Discover path websites built by the Webflow community