VERTICAL LINES WITH HTML CSS

[{"selector":"#anim-b7abaa6a-f2a1-4c9f-b12b-9709647daeb0","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fae08269-b32a-4cc2-a326-5241a9adc372","keyframes":{"transform":["translate3d(0px, 137.74339%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1d1960d6-0d48-4920-9da5-141cbb5fc6b2","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ce1e1d23-f6f5-4e6c-81b6-d1590b77d837","keyframes":{"transform":["translate3d(0px, -1289.5067%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-388342d4-90a6-4d68-a008-6c7a1df34ccd","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2605bd57-84ab-4fa2-adea-c2b207b95fa5","keyframes":{"transform":["translate3d(0px, 294.07400%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] JS CSS (a quick guide)

LINE WITH CSS BORDER

[{"selector":"#anim-386126fc-9935-4dc8-a239-6735a787b65d","keyframes":{"transform":["translate3d(-115.18988%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7faee6f0-c880-4b12-84f9-763ee4fb92ac","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9c0c576f-4c0f-47fe-88fc-819ee5a13660","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] <div class="border-l">Left border</div> <div class="border-r">Right border</div> LEFT BORDER .border-l { border-left: 5px solid red; } RIGHT BORDER .border-r { border-right: 5px dashed blue; }

LINE IN CENTER

[{"selector":"#anim-d9f6c5f5-4bdd-43ef-8b71-adc605be90b5","keyframes":{"transform":["translate3d(115.18987%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b8ee52d6-2199-46d0-a25b-aa594fdca132","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0a2489ac-764a-445f-91dc-368ad8b15c2c","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] <div class="wrapper"> <div class="left-side">Left</div> <div class="right-side">Right</div> </div> FLEX WRAPPER .wrapper { display: flex; } LEFT-RIGHT DIMENSIONS .left-side { width: 50%; } .right-side { flex-grow: 1; } VERTICAL LINE left-side { border-right: 5px dotted red; }

HR AS VERTICAL LINE

[{"selector":"#anim-9c6f8202-8449-4cbe-9119-428232ceb834","keyframes":{"transform":["translate3d(115.18987%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6d287170-0efa-49d5-8398-12e708c6a6b5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b1a612c8-5223-48a3-b31d-72077bba3aff","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] <hr width="1" size="100">

VISIT & FOLLOW

[{"selector":"#anim-8b4fdca6-e54e-4f18-9379-c864967d3f95","keyframes":{"opacity":[0,1]},"delay":2000,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-692f2021-5236-4d3b-946e-8dfd15903c4d","keyframes":{"opacity":[0,1]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-48932394-bbb9-42c2-b7a9-663f1d70ef26","keyframes":{"transform":["translate3d(-128.43511%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c63d1290-6b92-423d-bddd-4b161b91b357","keyframes":{"opacity":[0,1]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-11f74889-bcdb-4045-b6fb-8decb7b7816f","keyframes":{"transform":["translate3d(-151.73267%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-242239db-20db-4c7c-a5c3-7c88c9cbe340","keyframes":{"opacity":[0,1]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-25c98c45-ed3b-4baf-8354-b40d0091eec3","keyframes":{"transform":["translate3d(-151.23154%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-143c33c4-d169-4703-a1af-7b2224c869cc","keyframes":{"opacity":[0,1]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-691d1001-9407-44ab-95ac-99c22eae821b","keyframes":{"transform":["translate3d(-170.88234%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8a87f169-36d2-4f33-8993-ba29c2d3aeec [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(20.250939014149093%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}]

VERTICAL LINES WITH HTML CSS

LINE WITH CSS BORDER

01

LINE IN CENTER

02

HR AS VERTICAL LINE

03

VISIT & FOLLOW

CODE BOXX YOUTUBE

CODE BOXX PINTEREST

FULL TUTORIAL