{"id":"f3672586-f137-4b4c-bdba-505b18059c54","type":"collection","status":"publish","slug":"link-hover-effects","titleHtml":"Link Hover Effects","descriptionHtml":"A collection of playful and expressive hover effects.
Animated with css.","theme":{"color":"#2a2309","background":"#F3E9C6"},"demoIframe":{"src":"/demos/link-hover-effects/demo.html","height":150},"content":[{"name":"effect-1","html":"about us","css":"@font-face {\n font-family:\"bely-display\";\n font-display:auto;\n font-style:normal;\n font-weight:400;\n src: url(\"https://use.typekit.net/af/dd002d/00000000000000007735b06a/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff2\"),\n url(\"https://use.typekit.net/af/dd002d/00000000000000007735b06a/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff\"),\n url(\"https://use.typekit.net/af/dd002d/00000000000000007735b06a/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"opentype\");\n }\n \n .effect-1 {\n color: #161f2d;\n \n font-size: 2.4em;\n font-family: bely-display, sans-serif;\n \n text-transform: lowercase;\n text-decoration: none;\n \n position: relative;\n \n cursor: pointer;\n \n white-space: nowrap;\n }\n \n .effect-1::before {\n content: '';\n \n background: currentcolor;\n \n width: 100%;\n height: 0.05em;\n \n position: absolute;\n left: 0;\n bottom: -0.2em;\n \n pointer-events: none;\n \n transform-origin: 100% 50%;\n transform: scale3d(0, 1, 1);\n \n transition: transform 0.3s;\n }\n \n .effect-1.hover::before,\n .effect-1:hover::before,\n .effect-1:focus::before {\n transform-origin: 0 50%;\n transform: scale3d(1, 1, 1);\n }","append":{"js":"const els = document.querySelectorAll('a');\nfor (const el of els) {\n // disable tab focus\n el.setAttribute(\"tabIndex\", \"-1\")\n \n // disable click\n el.onclick = (event) => {\n event.preventDefault();\n event.stopPropagation();\n }\n}\n\n//toggle .hover in a loop\nsetInterval(toggleHover,2000)\nfunction toggleHover() {\n const els = document.querySelectorAll('a');\n for (const el of els) {\n el.classList.toggle('hover')\n }\n}"}},{"name":"effect-2","html":"Shop the look","css":"@font-face {\n font-family: \"europa\";\n font-display: auto;\n font-style: normal;\n font-weight: 400;\n src: url(\"https://use.typekit.net/af/1db03a/00000000000000007735a08e/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff2\"),\n url(\"https://use.typekit.net/af/1db03a/00000000000000007735a08e/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff\"),\n url(\"https://use.typekit.net/af/1db03a/00000000000000007735a08e/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"opentype\");\n}\n\n.effect-2 {\n color: #460505;\n font-size: 2.4em;\n font-family: europa, sans-serif;\n text-decoration: none;\n position: relative;\n cursor: pointer;\n white-space: nowrap;\n }\n\n.effect-2::before,\n.effect-2::after {\n content: '';\n background: currentcolor;\n width: 100%;\n height: .025em;\n position: absolute;\n top: 100%;\n left: 0;\n pointer-events: none;\n}\n\t\n.effect-2::before {\n transform-origin: 100% 50%;\n transform: scale3d(0, 1, 1);\n transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);\n}\n.effect-2.hover::before,\n.effect-2:hover::before,\n.effect-2:focus::before {\n transform-origin: 0 50%;\n transform: scale3d(1, 1, 1);\n transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);\n}\n\t\n.effect-2::after {\n content: '';\n top: calc(100% + 0.2em);\n transform-origin: 0 50%;\n transform: scale3d(0, 1, 1);\n transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);\n}\n.effect-2.hover::after,\n.effect-2:hover::after,\n.effect-2:focus::after {\n transform-origin: 100% 50%;\n transform: scale3d(1, 1, 1);\n transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);\n}","append":{"js":"const els = document.querySelectorAll('a');\nfor (const el of els) {\n // disable tab focus\n el.setAttribute(\"tabIndex\", \"-1\")\n \n // disable click\n el.onclick = (event) => {\n event.preventDefault();\n event.stopPropagation();\n }\n}\n\n//toggle .hover in a loop\nsetInterval(toggleHover,2000)\nfunction toggleHover() {\n const els = document.querySelectorAll('a');\n for (const el of els) {\n el.classList.toggle('hover')\n }\n}"}},{"name":"effect-3","html":"Track package","css":"@font-face {\n font-family:\"angie-sans\";\n font-display:auto;\n font-style:normal;\n font-weight:400;\n src:url(\"https://use.typekit.net/af/8367fd/0000000000000000773598ff/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff2\"),\n url(\"https://use.typekit.net/af/8367fd/0000000000000000773598ff/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff\"),\n url(\"https://use.typekit.net/af/8367fd/0000000000000000773598ff/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"opentype\");\n }\n\n .effect-3 {\n color: #402D2D;\n \n font-size: 2.4em;\n font-family: angie-sans, sans-serif;\n \n text-transform: uppercase;\n text-decoration: none;\n \n position: relative;\n \n cursor: pointer;\n \n white-space: nowrap;\n }\n \n .effect-3::before,\n .effect-3::after {\n content: '';\n \n background: currentcolor;\n \n width: 100%;\n height: 0.025em;\n \n position: absolute;\n left: 0;\n top: 100%;\n \n pointer-events: none;\n }\n \n .effect-3::before {\n transform-origin: 100% 50%;\n transform: scale3d(0, 1, 1);\n transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);\n }\n \n .effect-3.hover::before,\n .effect-3:hover::before,\n .effect-3:focus::before {\n transform-origin: 0 50%;\n transform: scale3d(1, 2, 1);\n transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);\n }\n \n .effect-3::after {\n content: '';\n top: calc(100% + 0.2em);\n transform-origin: 100% 50%;\n transform: scale3d(0, 1, 1);\n transition: transform 0.4s 0.1s cubic-bezier(0.2, 1, 0.8, 1);\n }\n \n .effect-3.hover::after,\n .effect-3:hover::after,\n .effect-3:focus::after {\n transform-origin: 0 50%;\n transform: scale3d(1, 1, 1);\n transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);\n }","append":{"js":"const els = document.querySelectorAll('a');\nfor (const el of els) {\n // disable tab focus\n el.setAttribute(\"tabIndex\", \"-1\")\n \n // disable click\n el.onclick = (event) => {\n event.preventDefault();\n event.stopPropagation();\n }\n}\n\n//toggle .hover in a loop\nsetInterval(toggleHover,2000)\nfunction toggleHover() {\n const els = document.querySelectorAll('a');\n for (const el of els) {\n el.classList.toggle('hover')\n }\n}"}},{"name":"effect-4","html":"\n Our Philosophy\n Our Philosophy\n","css":"@font-face {\n font-family:\"orpheuspro\";\n font-display:auto;\n font-style:normal;\n font-weight:700;\n src: url(\"https://use.typekit.net/af/f1ff11/00000000000000007735a590/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\") format(\"woff2\"),\n url(\"https://use.typekit.net/af/f1ff11/00000000000000007735a590/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\") format(\"woff\"),\n url(\"https://use.typekit.net/af/f1ff11/00000000000000007735a590/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\") format(\"opentype\");\n }\n \n .effect-4 {\n color: #402D2D;\n \n font-size: 2.4em;\n font-family: orpheuspro, serif; \n \n line-height: 2;\n text-decoration: none;\n \n display: inline-block;\n position: relative;\n overflow: hidden;\n \n cursor: pointer;\n \n white-space: nowrap;\n }\n \n .effect-4::before{\n content: '';\n \n background: currentcolor;\n \n width: 100%;\n height: 0.1em;\n \n position: absolute;\n top: calc(100% - 0.25em);\n left: 0; \n \n pointer-events: none;\n \n transform-origin: 100% 50%;\n transform: scale3d(0, 1, 1);\n transition: transform 0.3s cubic-bezier(0.5, 0.5, 0.3, 1);\n }\n\n .effect-4.hover::before,\n .effect-4:hover::before,\n .effect-4:focus::before {\n transform-origin: 0 50%;\n transform: scale3d(1, 1, 1);\n }\n\n .effect-4 .second {\n display: block;\n \n position: absolute;\n \n height: 100%;\n top: 0;\n \n background: none;\n \n transform-origin: 100% 50%;\n transform: translate3d(150%, 0, 0);\n transition: transform 0.3s cubic-bezier(0.5, 0.5, 0.3, 1);\n }\n \n .effect-4.hover .second,\n .effect-4:hover .second,\n .effect-4:focus .second {\n transform: translate3d(0, 0, 0);\n }\n \n .effect-4 span {\n display: inline-block;\n transition: transform 0.3s cubic-bezier(0.5, 0.5, 0.3, 1);\n }\n \n .effect-4.hover span,\n .effect-4:hover span,\n .effect-4:focus span {\n transform: translate3d(-150%, 0, 0);\n }","append":{"js":"const els = document.querySelectorAll('a');\nfor (const el of els) {\n // disable tab focus\n el.setAttribute(\"tabIndex\", \"-1\")\n \n // disable click\n el.onclick = (event) => {\n event.preventDefault();\n event.stopPropagation();\n }\n}\n\n//toggle .hover in a loop\nsetInterval(toggleHover,2000)\nfunction toggleHover() {\n const els = document.querySelectorAll('a');\n for (const el of els) {\n el.classList.toggle('hover')\n }\n}"}},{"name":"effect-5","html":"\n Downloads\n","css":"@font-face {\n font-family:\"halyard-display\";\n font-display:auto;\n font-style:normal;\n font-weight:400;\n src: url(\"https://use.typekit.net/af/7e8d8a/00000000000000007735adb8/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff2\"),\n url(\"https://use.typekit.net/af/7e8d8a/00000000000000007735adb8/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff\"),\n url(\"https://use.typekit.net/af/7e8d8a/00000000000000007735adb8/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"opentype\");\n }\n \n .effect-5 {\n color: #402d2d;\n \n font-size: 2.4em;\n font-family: halyard-display, sans-serif;\n \n text-decoration: none;\n text-transform: uppercase;\n letter-spacing: 0.055em;\n text-indent: 0.055em;\n \n display: inline-block;\n position: relative;\n \n padding: 0 0.55em;\n \n cursor: pointer;\n \n white-space: nowrap;\n }\n \n .effect-5::before {\n content: '';\n \n background: currentcolor;\n \n width: 100%;\n height: 0.1em;\n \n position: absolute;\n top: 50%;\n left: 0; \n pointer-events: none;\n \n transform-origin: 100% 50%;\n transform: scale3d(0, 1, 1);\n transition: transform 0.3s cubic-bezier(0.4, 1, 0.8, 1);\n }\n \n .effect-5.hover::before,\n .effect-5:hover::before,\n .effect-5:focus::before {\n transform-origin: 0 50%;\n transform: scale3d(1, 1, 1);\n }\n \n .effect-5 span {\n display: inline-block;\n transition: transform 0.3s cubic-bezier(0.4, 1, 0.8, 1);\n }\n \n .effect-5.hover span,\n .effect-5:hover span,\n .effect-5:focus span {\n transform: scale3d(1.1, 1.1, 1.1);\n }","append":{"js":"const els = document.querySelectorAll('a');\nfor (const el of els) {\n // disable tab focus\n el.setAttribute(\"tabIndex\", \"-1\")\n \n // disable click\n el.onclick = (event) => {\n event.preventDefault();\n event.stopPropagation();\n }\n}\n\n//toggle .hover in a loop\nsetInterval(toggleHover,2000)\nfunction toggleHover() {\n const els = document.querySelectorAll('a');\n for (const el of els) {\n el.classList.toggle('hover')\n }\n}"}},{"name":"effect-6","html":"\n Studio\n","css":"@font-face {\n font-family:\"aktiv-grotesk-extended\";\n font-display:auto;\n font-style:normal;\n font-weight:400;\n src: url(\"https://use.typekit.net/af/e10446/00000000000000003b9ad13a/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff2\"),\n url(\"https://use.typekit.net/af/e10446/00000000000000003b9ad13a/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff\"),\n url(\"https://use.typekit.net/af/e10446/00000000000000003b9ad13a/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"opentype\");\n }\n\n .effect-6 {\n color: #402D2D;\n \n font-size: 2.4em;\n font-family: aktiv-grotesk-extended, sans-serif;\n \n text-decoration: none;\n \n position: relative;\n \n cursor: pointer;\n \n white-space: nowrap;\n }\n \n .effect-6::before {\n content: '';\n \n background: currentcolor;\n \n width: 100%;\n height: 0.025em;\n \n position: absolute;\n top: 100%;\n left: 0;\n \n pointer-events: none;\n \n transform-origin: 50% 100%;\n transition: clip-path 0.3s, transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);\n clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0%);\n }\n \n .effect-6.hover::before,\n .effect-6:hover::before,\n .effect-6:focus::before {\n transform: translate3d(0, 0.05em, 0) scale3d(1.08, 3, 1);\n clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 0, 50% 0, 50% 100%, 50% 100%, 0 100%, 100% 100%, 100% 0%);\n }\n \n .effect-6 span {\n display: inline-block;\n transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);\n }\n \n .effect-6.hover span,\n .effect-6:hover span,\n .effect-6:focus span {\n transform: translate3d(0, -0.05em, 0);\n }","append":{"js":"const els = document.querySelectorAll('a');\nfor (const el of els) {\n // disable tab focus\n el.setAttribute(\"tabIndex\", \"-1\")\n \n // disable click\n el.onclick = (event) => {\n event.preventDefault();\n event.stopPropagation();\n }\n}\n\n//toggle .hover in a loop\nsetInterval(toggleHover,2000)\nfunction toggleHover() {\n const els = document.querySelectorAll('a');\n for (const el of els) {\n el.classList.toggle('hover')\n }\n}"}},{"name":"effect-7","html":"Portfolio","css":"@font-face {\n font-family:\"freightdispcmp-pro\";\n font-display:auto;\n font-style:normal;\n font-weight:400;\n src: url(\"https://use.typekit.net/af/aac473/000000000000000077359fb4/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff2\"),\n url(\"https://use.typekit.net/af/aac473/000000000000000077359fb4/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff\"),\n url(\"https://use.typekit.net/af/aac473/000000000000000077359fb4/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"opentype\");\n }\n \n .effect-7 {\n color: #402D2D;\n \n font-size: 2.4em;\n font-family: freightdispcmp-pro, serif;\n \n text-decoration: none;\n \n position: relative;\n \n cursor: pointer;\n \n white-space: nowrap;\n }\n \n .effect-7::before,\n .effect-7::after {\n content: '';\n \n background: currentcolor;\n \n width: 100%;\n height: 0.025em;\n \n position: absolute;\n top: 100%;\n left: 0;\n \n pointer-events: none;\n \n opacity: 0;\n transform-origin: 50% 0;\n transform: translate3d(0, 0.075em, 0);\n transition-property: transform, opacity;\n transition-duration: 0.3s;\n transition-timing-function: cubic-bezier(0.2, 1, 0.8, 1);\n }\n \n .effect-7.hover::before,\n .effect-7:hover::before,\n .effect-7:focus::before,\n .effect-7.hover::after,\n .effect-7:hover::after,\n .effect-7:focus::after {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n transition-timing-function: cubic-bezier(0.2, 0, 0.3, 1);\n }\n \n .effect-7::after {\n content: '';\n \n width: 70%;\n \n top: calc(100% + 0.125em);\n left: 15%;\n }\n \n .effect-7::before,\n .effect-7.hover::after,\n .effect-7:hover::after,\n .effect-7:focus::after {\n transition-delay: 0.1s;\n }\n \n .effect-7.hover::after,\n .effect-7:hover::after,\n .effect-7:focus::after {\n transition-delay: 0s;\n }","append":{"js":"const els = document.querySelectorAll('a');\nfor (const el of els) {\n // disable tab focus\n el.setAttribute(\"tabIndex\", \"-1\")\n \n // disable click\n el.onclick = (event) => {\n event.preventDefault();\n event.stopPropagation();\n }\n}\n\n//toggle .hover in a loop\nsetInterval(toggleHover,2000)\nfunction toggleHover() {\n const els = document.querySelectorAll('a');\n for (const el of els) {\n el.classList.toggle('hover')\n }\n}"}},{"name":"effect-8","html":"Explore more","css":"@font-face {\n font-family:\"halyard-display\";\n font-display:auto;\n font-style:normal;\n font-weight:400;\n src: url(\"https://use.typekit.net/af/7e8d8a/00000000000000007735adb8/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff2\"),\n url(\"https://use.typekit.net/af/7e8d8a/00000000000000007735adb8/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff\"),\n url(\"https://use.typekit.net/af/7e8d8a/00000000000000007735adb8/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"opentype\");\n }\n\n .effect-8 {\n color: #082c35;\n \n font-size: 2.4em;\n font-family: halyard-display, sans-serif;\n \n text-transform: lowercase;\n text-decoration: none;\n \n position: relative;\n \n cursor: pointer;\n \n white-space: nowrap;\n }\n \n .effect-8::before,\n .effect-8::after {\n content: '';\n \n background: currentcolor;\n \n width: 100%;\n height: 0.055em;\n \n position: absolute;\n top: 100%;\n left: 0;\n \n opacity: 0;\n \n pointer-events: none;\n }\n \n .effect-8::before {\n height: 0.2em;\n top: 100%;\n }\n \n .effect-8::after {\n transition: opacity 0.3s;\n transition-delay: 0s;\n }\n \n .effect-8.hover::before,\n .effect-8:hover::before,\n .effect-8:focus::before {\n opacity: 1;\n animation: lineUp 0.3s ease forwards;\n }\n \n .effect-8.hover::after, \n .effect-8:hover::after, \n .effect-8:focus::after {\n opacity: 1;\n transition-delay: 0.3s;\n }\n \n @keyframes lineUp {\n 0% { transform-origin: 50% 100%; transform: scale3d(1, 0.045, 1); }\n 50% { transform-origin: 50% 100%; transform: scale3d(1, 1, 1); }\n 51% { transform-origin: 50% 0; transform: scale3d(1, 1, 1); }\n 100% { transform-origin: 50% 0; transform: scale3d(1, 0.045, 1); }\n }","append":{"js":"const els = document.querySelectorAll('a');\nfor (const el of els) {\n // disable tab focus\n el.setAttribute(\"tabIndex\", \"-1\")\n \n // disable click\n el.onclick = (event) => {\n event.preventDefault();\n event.stopPropagation();\n }\n}\n\n//toggle .hover in a loop\nsetInterval(toggleHover,2000)\nfunction toggleHover() {\n const els = document.querySelectorAll('a');\n for (const el of els) {\n el.classList.toggle('hover')\n }\n}"}},{"name":"effect-9","html":"Blog","css":"@font-face {\n font-family:\"adrianna-extended\";\n font-display:auto;\n font-style:normal;\n font-weight:700;\n src: url(\"https://use.typekit.net/af/887c6a/0000000000000000773597b9/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\") format(\"woff2\"),\n url(\"https://use.typekit.net/af/887c6a/0000000000000000773597b9/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\") format(\"woff\"),\n url(\"https://use.typekit.net/af/887c6a/0000000000000000773597b9/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\") format(\"opentype\");\n }\n\n .effect-9 {\n color: #161f2d;\n \n font-size: 2.4em;\n font-family: adrianna-extended, sans-serif;\n \n text-transform: uppercase;\n text-decoration: none;\n \n position: relative;\n \n cursor: pointer;\n \n white-space: nowrap;\n }\n \n .effect-9::before,\n .effect-9::after {\n content: '';\n \n background: currentcolor;\n \n width: 100%;\n height: 0.055em;\n \n position: absolute;\n top: 100%;\n left: 0;\n \n pointer-events: none;\n }\n \n .effect-9::before {\n transform-origin: 0 50%;\n transform: scale3d(0, 1, 1);\n transition: transform 0.3s;\n }\n \n .effect-9::after {\n top: calc(100% + 0.2em);\n transition: transform 0.3s;\n transform-origin: 100% 50%;\n }\n \n .effect-9.hover::before,\n .effect-9:hover::before,\n .effect-9:focus::before {\n transform: scale3d(1, 1, 1);\n }\n \n .effect-9.hover::after,\n .effect-9:hover::after,\n .effect-9:focus::after {\n transform: scale3d(0, 1, 1);\n }","append":{"js":"const els = document.querySelectorAll('a');\nfor (const el of els) {\n // disable tab focus\n el.setAttribute(\"tabIndex\", \"-1\")\n \n // disable click\n el.onclick = (event) => {\n event.preventDefault();\n event.stopPropagation();\n }\n}\n\n//toggle .hover in a loop\nsetInterval(toggleHover,2000)\nfunction toggleHover() {\n const els = document.querySelectorAll('a');\n for (const el of els) {\n el.classList.toggle('hover')\n }\n}"}},{"name":"effect-10","html":"\n Discover\n","css":"@font-face {\n font-family:\"aktiv-grotesk-extended\";\n font-display:auto;\n font-style:normal;\n font-weight:400;\n src: url(\"https://use.typekit.net/af/e10446/00000000000000003b9ad13a/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff2\"),\n url(\"https://use.typekit.net/af/e10446/00000000000000003b9ad13a/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff\"),\n url(\"https://use.typekit.net/af/e10446/00000000000000003b9ad13a/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"opentype\");\n }\n\n .effect-10 {\n color: #460505;\n \n font-size: 2.4em; \n font-family: aktiv-grotesk-extended, sans-serif;\n font-weight: bold;\n \n text-decoration: none;\n \n position: relative;\n \n cursor: pointer;\n \n white-space: nowrap;\n }\n \n .effect-10::before {\n content: '';\n \n background: currentcolor;\n opacity: 0;\n \n width: 100%;\n height: 0.1em;\n \n position: absolute;\n top: 100%;\n left: 0;\n \n pointer-events: none;\n }\n \n .effect-10.hover span,\n .effect-10:hover span,\n .effect-10:focus span {\n animation: glitchText 0.4s linear;\n }\n \n .effect-10.hover::before,\n .effect-10:hover::before,\n .effect-10:focus::before {\n opacity: 1;\n animation: glitchLine 0.4s steps(2, start) forwards;\n }\n \n @keyframes glitchLine {\n 0% { transform: scale3d(1, 1, 1); }\n 10% { transform: translate3d(10px, 0, 0); }\n 20% { transform: translate3d(0, 4px, 0); }\n 30% { transform: scale3d(0.1, 1.4, 1) translate3d(0, -25px, 0); transform-origin: 100% 0; }\n 40% { transform: scale3d(1, 0.3, 1) translate3d(0, 25px, 0); }\n 50% { transform: scale3d(0.5, 0.3, 1) translate3d(-100px, -80px, 0); }\n 60% { transform: scale3d(1, 1.25, 1) translate3d(10px, -5px, 0); }\n 70% { transform: scale3d(0.5, 0.5, 1) translate3d(0, 20px, 0); }\n 80% { transform: translate3d(-30, 10px, 0) scale3d(1, 0.4, 1); transform-origin: 100% 0; }\n 90% { transform: scale3d(1, 0.5, 1) translate3d(0, -15px, 0); transform-origin: 0 50%; }\n 100% { opacity: 1; }\n }\n \n @keyframes glitchText {\n 0% {\n clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);\n -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);\n transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1);\n opacity: 1;\n }\n 10% {\n clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);\n -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);\n }\n 20% {\n clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);\n -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);\n }\n 35% {\n clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);\n -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);\n }\n 50% {\n clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);\n -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);\n }\n 60% {\n clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);\n -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);\n }\n 70% {\n clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);\n -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);\n }\n 80% {\n clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);\n -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);\n }\n 90% {\n transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1);\n }\n 100% {\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);\n -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);\n transform: translate3d(0, 0, 0) scale3d(1, 1, 1);\n opacity: 1;\n }\n }","append":{"js":"const els = document.querySelectorAll('a');\nfor (const el of els) {\n // disable tab focus\n el.setAttribute(\"tabIndex\", \"-1\")\n \n // disable click\n el.onclick = (event) => {\n event.preventDefault();\n event.stopPropagation();\n }\n}\n\n//toggle .hover in a loop\nsetInterval(toggleHover,2000)\nfunction toggleHover() {\n const els = document.querySelectorAll('a');\n for (const el of els) {\n el.classList.toggle('hover')\n }\n}"}},{"name":"effect-11","html":"Inquiries","css":"@font-face {\n font-family:\"aktiv-grotesk-extended\";\n font-display:auto;\n font-style:normal;\n font-weight:400;\n src: url(\"https://use.typekit.net/af/e10446/00000000000000003b9ad13a/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff2\"),\n url(\"https://use.typekit.net/af/e10446/00000000000000003b9ad13a/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff\"),\n url(\"https://use.typekit.net/af/e10446/00000000000000003b9ad13a/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"opentype\");\n }\n\n .effect-11 {\n color: #000;\n \n font-size: 2.4em;\n font-family: aktiv-grotesk-extended, sans-serif;\n \n text-transform: uppercase;\n text-decoration: none;\n outline: none;\n \n position: relative;\n \n cursor: pointer;\n \n white-space: nowrap;\n }\n \n .effect-11::before,\n .effect-11::after {\n content: '';\n \n background: currentcolor;\n \n width: 100%;\n height: 0.05em;\n \n position: absolute;\n top: 100%;\n left: 0;\n \n pointer-events: none;\n }\n \n .effect-11::before {\n height: 100%;\n top: 0;\n opacity: 0;\n }\n \n .effect-11::after {\n transition: opacity 0.3s;\n }\n \n .effect-11.hover::before,\n .effect-11:hover::before,\n .effect-11:focus::before {\n opacity: 1;\n animation: coverUp 0.3s ease forwards;\n }\n \n .effect-11.hover::after,\n .effect-11:hover::after,\n .effect-11:focus::after {\n opacity: 0;\n }\n \n @keyframes coverUp {\n 0% { transform-origin: 50% 100%; transform: scale3d(1, 0.045, 1); } \n 50% { transform-origin: 50% 100%; transform: scale3d(1, 1, 1); } \n 51% { transform-origin: 50% 0; transform: scale3d(1, 1, 1); } \n 100% { transform-origin: 50% 0; transform: scale3d(1, 0.045, 1); }\n }","append":{"js":"const els = document.querySelectorAll('a');\nfor (const el of els) {\n // disable tab focus\n el.setAttribute(\"tabIndex\", \"-1\")\n \n // disable click\n el.onclick = (event) => {\n event.preventDefault();\n event.stopPropagation();\n }\n}\n\n//toggle .hover in a loop\nsetInterval(toggleHover,2000)\nfunction toggleHover() {\n const els = document.querySelectorAll('a');\n for (const el of els) {\n el.classList.toggle('hover')\n }\n}"}},{"name":"effect-12","html":"\n Learn more\n \n","css":"@font-face {\n font-family:\"lust-fine\";\n font-display:auto;\n font-style:italic;\n font-weight:100;\n src: url(\"https://use.typekit.net/af/c55c05/00000000000000007735dbeb/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i1&v=3\") format(\"woff2\"),\n url(\"https://use.typekit.net/af/c55c05/00000000000000007735dbeb/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i1&v=3\") format(\"woff\"),\n url(\"https://use.typekit.net/af/c55c05/00000000000000007735dbeb/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i1&v=3\") format(\"opentype\");\n }\n\n .effect-12 {\n color: #402D2D;\n \n font-size: 2.4em;\n font-family: lust-fine, sans-serif;\n \n text-decoration: none;\n \n display: inline-block;\n position: relative;\n overflow: hidden;\n padding: 0.4em 0;\n \n cursor: pointer;\n \n white-space: nowrap;\n }\n \n .effect-12__graphic {\n fill: none;\n stroke: currentcolor;\n stroke-width: 0.05em;\n \n position: absolute;\n top: -0.16em;\n left: 0;\n \n transition: transform 0.7s;\n transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);\n \n pointer-events: none;\n }\n \n .effect-12.hover .effect-12__graphic,\n .effect-12:hover .effect-12__graphic,\n .effect-12:focus .effect-12__graphic {\n transform: translate3d(-66.6%, 0, 0);\n }","append":{"js":"const els = document.querySelectorAll('a');\nfor (const el of els) {\n // disable tab focus\n el.setAttribute(\"tabIndex\", \"-1\")\n \n // disable click\n el.onclick = (event) => {\n event.preventDefault();\n event.stopPropagation();\n }\n}\n\n//toggle .hover in a loop\nsetInterval(toggleHover,2000)\nfunction toggleHover() {\n const els = document.querySelectorAll('a');\n for (const el of els) {\n el.classList.toggle('hover')\n }\n}"}},{"name":"effect-13","html":"\nAmazon\n\n","css":"@font-face {\n font-family:\"freight-display-pro\";\n font-display:auto;\n font-style:normal;\n font-weight:700;\n src: url(\"https://use.typekit.net/af/c9d9e8/000000000000000077359f97/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\") format(\"woff2\"),\n url(\"https://use.typekit.net/af/c9d9e8/000000000000000077359f97/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\") format(\"woff\"),\n url(\"https://use.typekit.net/af/c9d9e8/000000000000000077359f97/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\") format(\"opentype\");\n }\n \n .effect-13 {\n color: #402d2d;\n \n font-size: 3.4em;\n font-family: freight-display-pro, serif;\n \n text-decoration: none;\n \n position: relative;\n \n cursor: pointer;\n \n white-space: nowrap;\n }\n \n .effect-13__graphic {\n width: 2em;\n height: 1em;\n \n fill: none;\n stroke: currentcolor;\n stroke-width: 1px;\n \n position: absolute;\n top: .8em;\n left: 0;\n \n pointer-events: none;\n }\n \n .effect-13__graphic path {\n stroke-dasharray: 1;\n stroke-dashoffset: 1;\n transition: stroke-dashoffset 0.4s cubic-bezier(0.7, 0, 0.3, 1);\n }\n \n .effect-13.hover .effect-13__graphic path,\n .effect-13:hover .effect-13__graphic path,\n .effect-13:focus .effect-13__graphic path {\n stroke-dashoffset: 0;\n transition-duration: 0.3s;\n transition-timing-function: cubic-bezier(0.8, 1, 0.7, 1);\n }","append":{"js":"const els = document.querySelectorAll('a');\nfor (const el of els) {\n // disable tab focus\n el.setAttribute(\"tabIndex\", \"-1\")\n \n // disable click\n el.onclick = (event) => {\n event.preventDefault();\n event.stopPropagation();\n }\n}\n\n//toggle .hover in a loop\nsetInterval(toggleHover,2000)\nfunction toggleHover() {\n const els = document.querySelectorAll('a');\n for (const el of els) {\n el.classList.toggle('hover')\n }\n}"}},{"name":"effect-14","html":"\n Writings\n \n","css":"@font-face {\n font-family:\"angie-sans\";\n font-display:auto;\n font-style:normal;\n font-weight:400;\n src:url(\"https://use.typekit.net/af/8367fd/0000000000000000773598ff/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff2\"),\n url(\"https://use.typekit.net/af/8367fd/0000000000000000773598ff/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff\"),\n url(\"https://use.typekit.net/af/8367fd/0000000000000000773598ff/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"opentype\");\n }\n \n .effect-14 {\n color: #000;\n \n font-size: 2.4em;\n font-family: angie-sans, sans-serif;\n \n text-decoration: none;\n \n position: relative;\n \n cursor: pointer;\n \n white-space: nowrap;\n }\n \n .effect-14__graphic {\n width: 100%;\n height: 1em;\n \n fill: none;\n stroke: currentcolor;\n stroke-width: 1px;\n \n position: absolute;\n top: 1em;\n bottom: 0;\n left: 0;\n \n pointer-events: none;\n }\n \n .effect-14__graphic path {\n stroke-dasharray: 1;\n stroke-dashoffset: 1;\n transition: stroke-dashoffset 0.6s cubic-bezier(0.7, 0, 0.3, 1);\n }\n \n .effect-14.hover .effect-14__graphic path,\n .effect-14:hover .effect-14__graphic path,\n .effect-14:focus .effect-14__graphic path {\n stroke-dashoffset: 0;\n transition-duration: 0.3s;\n transition-timing-function: cubic-bezier(0.8, 1, 0.7, 1);\n }","append":{"js":"const els = document.querySelectorAll('a');\nfor (const el of els) {\n // disable tab focus\n el.setAttribute(\"tabIndex\", \"-1\")\n \n // disable click\n el.onclick = (event) => {\n event.preventDefault();\n event.stopPropagation();\n }\n}\n\n//toggle .hover in a loop\nsetInterval(toggleHover,2000)\nfunction toggleHover() {\n const els = document.querySelectorAll('a');\n for (const el of els) {\n el.classList.toggle('hover')\n }\n}"}},{"name":"effect-15","html":"\n Contact\n","css":"@font-face {\n font-family:\"europa\";\n font-display:auto;\n font-style:normal;\n font-weight:400;\n src: url(\"https://use.typekit.net/af/1db03a/00000000000000007735a08e/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff2\"),\n url(\"https://use.typekit.net/af/1db03a/00000000000000007735a08e/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff\"),\n url(\"https://use.typekit.net/af/1db03a/00000000000000007735a08e/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"opentype\");\n }\n\n .effect-15 {\n color: #000;\n \n font-size: 2.4em;\n font-family: europa, sans-serif;\n \n text-decoration: none;\n \n position: relative;\n \n cursor: pointer;\n \n white-space: nowrap;\n }\n \n .effect-15::before {\n content: '';\n \n background: currentcolor;\n \n width: 100%;\n height: 0.2em; \n border-radius: 1em;\n \n position: absolute;\n top: 100%;\n left: 0;\n \n pointer-events: none;\n \n transform: scale3d(1, 1, 1);\n transition: transform 0.2s, opacity 0.2s;\n transition-timing-function: cubic-bezier(0.2, 0.57, 0.67, 1.53);\n }\n \n .effect-15.hover::before,\n .effect-15:hover::before,\n .effect-15:focus::before {\n opacity: 1;\n transform: scale3d(1.2, 0.2, 1);\n transition-duration: 0.4s;\n transition-timing-function: cubic-bezier(0.8, 0, 0.1, 1);\n }\n \n .effect-15 span {\n display: inline-block;\n transform: translate3d(0, -0.2em, 0);\n transition: transform 0.2s 0.05s cubic-bezier(0.2, 0.57, 0.67, 1.53);\n }\n \n .effect-15.hover span,\n .effect-15:hover span,\n .effect-15:focus span {\n transform: translate3d(0, 0, 0);\n transition-delay: 0s;\n transition-duration: 0.4s;\n transition-timing-function: cubic-bezier(0.8, 0, 0.1, 1);\n }","append":{"js":"const els = document.querySelectorAll('a');\nfor (const el of els) {\n // disable tab focus\n el.setAttribute(\"tabIndex\", \"-1\")\n \n // disable click\n el.onclick = (event) => {\n event.preventDefault();\n event.stopPropagation();\n }\n}\n\n//toggle .hover in a loop\nsetInterval(toggleHover,2000)\nfunction toggleHover() {\n const els = document.querySelectorAll('a');\n for (const el of els) {\n el.classList.toggle('hover')\n }\n}"}}],"effectWidth":400,"effectHeight":300}