VERTICAL LINES WITH HTML CSS

[{"selector":"#anim-fe542226-56c0-4128-8bc6-23fac17511ea","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b925afe1-6cb9-40bd-8205-01772958348a","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-32a7a0a1-e11b-4dcd-8d13-90df55e43c0e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-605e86f9-05d1-4851-87d1-8e432699d53d","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-664c5a11-19b6-4e02-bc24-b9924a99149c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5df51bcb-4c50-4e12-ab59-24e3b0f871df","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-1953045e-f1a1-4952-9afb-429925d116a3","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-757eb686-5488-4106-a9bb-a039f529769b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5741ba95-698f-4a0a-b1c8-7963f66d637c","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-f6d83df8-b49a-4bc5-9810-38f00b607884","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-1a5c19d9-a33b-4e98-bd6e-145a138aca57","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-30802fc9-c7c1-42fb-b1f3-f474a3c04916","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-e6de3616-9324-427f-b0e4-287e2c30a5cc","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-0820317f-2c9a-4a70-9ff4-082409e10117","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cda5a1fa-0f17-4f0c-a9aa-515d62d9f6bf","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-aa9bba5b-d2b0-448c-97de-2265d22d93c6","keyframes":{"opacity":[0,1]},"delay":2000,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cd73a595-67c1-4d47-82c5-ac533f06bb28","keyframes":{"opacity":[0,1]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cf7e880c-3c38-46bd-9e5d-c80462163713","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-ff018b0f-4ad3-413b-8cf8-9c527d824085","keyframes":{"opacity":[0,1]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-46dfb93e-7997-49f0-808b-d58eb5ad6670","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-1d0be7ce-71ab-4d70-ba45-f42a90532d76","keyframes":{"opacity":[0,1]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8abc74d8-0d84-43c6-9ad4-c6f4e6904e45","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-db65db5d-d2a9-4ff3-a5fc-2775903cc1d5","keyframes":{"opacity":[0,1]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-43124a49-0896-4c48-854a-1e8a0e15b744","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-149af33d-04ae-4acc-941e-e77b491ff972 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-4.665192251743079%, 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