HTML <BASE> & RELATIVE ABSOLUTE URL

[{"selector":"#anim-0fcf2c37-571a-4c29-b5d6-1c66e2f8c870","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d563998e-aeee-46b5-8a5e-9d41c9f7277c","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-5747e84f-169c-4841-8aaf-6e9d88eaf662","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3645574f-0491-4bee-ba4c-64ff97583df6","keyframes":{"transform":["translate3d(0px, 137.35829%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-24307e23-389d-42c0-8d96-83dfd11f33f8","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b8b30000-9586-4734-b1d1-9b3673854479","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"}] HTML (a quick guide)

ABSOLUTE VS RELATIVE URL

[{"selector":"#anim-54b7e034-ddc8-478e-9265-c85e5d3b33a9","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b56b570b-b24d-4773-a3f0-916595f9f03a","keyframes":{"transform":["translate3d(-114.87342%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5de2297a-d4a4-42f0-af7f-246d96cebcd4","keyframes":{"opacity":[0,1]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ab186a18-a5fc-4352-b139-446ec9ebaa1b","keyframes":{"transform":["translate3d(-114.8265%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8d231769-a614-4c05-8e7a-332ab1303645","keyframes":{"opacity":[0,1]},"delay":200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-77897e0f-b9df-4a6b-abdc-7e190d4ca70c","keyframes":{"transform":["translate3d(-114.19558%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] ABSOLUTE URL A “full website address”. For example, http://site.com/assets/img.jpg RELATIVE URL A partial website address”. For example, assets/img.jpg Based on current address. If current URL is http://site.com/abc/ , image will resolve to http://site.com/abc/assets/img.jpg

HTML BASE TAG

[{"selector":"#anim-e473a7fe-1826-4507-bfe6-be8f7c243107","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-425a9d82-12b8-4558-b32e-11aa2a46d864","keyframes":{"transform":["translate3d(115.18987%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-332051a7-e40d-495b-9b7d-9c190bf29ce9","keyframes":{"opacity":[0,1]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-17e0b6a1-e1db-4764-ad39-0ef2b6a1aed0","keyframes":{"transform":["translate3d(115.18987%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] MUST BE IN <HEAD> SECTION <head> <base href="http://site.com/assets/"> </head> THIS WILL NOW RESOLVE TO http://site.com/assets/img.jpg <img src="img.jpg">

OVERRIDE BASE TAG

[{"selector":"#anim-2ec988a1-5738-4600-a035-fa7557c990e3","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5b390ce4-9d78-4387-af9a-62819b058515","keyframes":{"transform":["translate3d(-115.18988%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9cbd0833-b475-438b-972e-7fe5533feca9","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-04e830cf-470a-49ff-8d35-72810fe81245","keyframes":{"transform":["translate3d(115.18987%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] http://site.com/assets/foo.html <a href="foo.html">Link</a> JUST USE ABSOLUTE URL <a href="http://site.com/foo.html">Link</a>

VISIT & FOLLOW

[{"selector":"#anim-46ad2c8f-c33f-4b56-af6f-73d9674b4b4b","keyframes":{"opacity":[0,1]},"delay":2000,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-54ee5dae-aaa5-4a5c-9081-d343a2cb6cab","keyframes":{"opacity":[0,1]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1a8e8ca4-0518-4aeb-a689-f3341836cbb8","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-fcdea153-beca-47ff-b552-0de0ea1407cd","keyframes":{"opacity":[0,1]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f900cc56-6038-4265-b037-662d4591f728","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-379a401c-4119-40a3-9eb5-09018b8e64e9","keyframes":{"opacity":[0,1]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d7b85dad-c2eb-49f0-9621-0130e8b12d40","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-7dfaa62d-630e-49d8-96ad-f580b5ffb2ae","keyframes":{"opacity":[0,1]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-890bb7a4-9127-4efe-ac34-0aa10e6275ca","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-5da60d15-2a4e-496d-9a5e-78210e54660a [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"}]

HTML <BASE> & RELATIVE ABSOLUTE URL

ABSOLUTE VS RELATIVE URL

01

HTML BASE TAG

02

OVERRIDE BASE TAG

03

VISIT & FOLLOW

CODE BOXX YOUTUBE

CODE BOXX PINTEREST

FULL TUTORIAL