HTML <BASE> & RELATIVE ABSOLUTE URL

[{"selector":"#anim-676847ea-5bbc-4bd4-bcd0-c32b8c1e4307","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d76f09f1-73d4-4a4e-9b86-44774d844b65","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-e60b423a-36cb-4252-8413-9748a9183f29","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6d720966-6a92-4f88-b974-880c209e0b97","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-f24eebd3-ede8-43c3-8799-d1a54e6d2aa4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b2015aa8-0c69-409b-b2dc-fec96c8b308f","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-6b57c12f-771a-4549-9622-c8c08dce7e0f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a6580947-5c61-4e58-929d-d44d88799ce3","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-090c6a4d-ba33-4e31-ba9f-4c30c28192dd","keyframes":{"opacity":[0,1]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-56027733-4fe7-4220-81ea-ba7dafaa7e32","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-2368594c-ec53-40d9-abed-c39e24820e5b","keyframes":{"opacity":[0,1]},"delay":200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a9f64235-3d3f-4540-8478-fad5dc5578ae","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-50c5fcd4-5818-42f3-b8b2-5eb3a35eccb6","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-85b326e4-0d37-4122-b08d-d68703c9a2b9","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-030a5c10-100f-4bef-ab0c-793f17c665a2","keyframes":{"opacity":[0,1]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bd6621d5-eae1-4b5e-81c8-d7077d98629b","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-2cc48264-f866-45b2-9317-3d7c8e4826f6","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fe1b82bb-17bd-428a-895d-46862f7635bf","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-7728c93d-aeff-4fad-bd87-150a130ccc92","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-093e54db-9772-47bd-be76-4bdf336a1ec8","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-4ebec539-7044-4347-953e-cc4b47fe0f89","keyframes":{"opacity":[0,1]},"delay":2000,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-91a72f0c-95dc-405c-b3b5-870b06e31fbe","keyframes":{"opacity":[0,1]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-53e7189d-6a60-43ac-8766-c46be49151e5","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-d0ea9362-2478-4702-a2b5-4c1c9c3a27ce","keyframes":{"opacity":[0,1]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b199c5f1-de23-48bf-9d17-a1ee463b7d1c","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-a337b4c0-9351-49fe-b066-0cde5b5f1fd3","keyframes":{"opacity":[0,1]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0a09a46d-a8f1-4382-97cc-6b627b4164bf","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-7adcb66a-6c32-4fbc-99a5-02f6e6e43e50","keyframes":{"opacity":[0,1]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b9545e27-293e-49c6-9b37-45a4d7a4abe3","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-a18e75f0-bfe7-45bb-9081-17910321c676 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(25%, 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