[V0_FILE]plaintext:file="RapidImageHoverMenuEffects-master/src/favicon.ico" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/favicon-WpdsZLEApfzYfnqKhioO5tmatzpQkv.ico" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo1/1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo1/1-4r7lOaEbLPL5nQXgMDYtao2XX4KIzQ.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo1/10.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo1/10-GMWAGIEdaZH1Gy2QRc6eNWUlZz0HGA.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo1/11.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo1/11-JM6yIWC2JCXdz9VKwMNR3LHxaw7mbr.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo1/12.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo1/12-TuBTkDpBrHjSeEFGsqxbZJTq0JIkEi.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo1/13.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo1/13-0KqILHgRkg04TaR01mSzMwMjr4LevB.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo1/14.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo1/14-YUKz7h6Ik8XdL2XqIKIjCLCLTGiK2l.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo1/15.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo1/15-ziC2xqQUv0LckmK9tzgPCuPUiNe4sR.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo1/16.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo1/16-kTrzZLrzPmPzG0XZXRVfzouZSrTemm.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo1/17.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo1/17-OCKcCC7WdcPjVDjwn7HgMtHLaGYL0m.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo1/18.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo1/18-1H24MP9AInptIin1cFn6ObBIuNnAXH.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo1/19.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo1/19-xrYOaiu2Ebq7gILdoystf5XJBvmFZI.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo1/2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo1/2-4iCbQDWTrAEIqGhsZV9n2M1azBeqSa.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo1/20.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo1/20-gkEXwOEs7XCO532XtRCqNCFdph1WGo.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo1/3.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo1/3-FkCuwO3mI2WMtrcpdJvs75kZtTsNt0.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo1/4.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo1/4-n0muu1bEC3o2UqtmLBKj6qP6emxj0b.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo1/5.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo1/5-bfR3hGHHBGU2U3tVfTiuFs3eGgOEtD.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo1/6.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo1/6-oUko7Hm4TNEEsJ1KFqikdgNjHEFfRp.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo1/7.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo1/7-v61m0WPKni0lxlbFmCXSFxBXUJRbpc.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo1/8.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo1/8-EbQ8hMpuHgNE1DRcmrEtiTBYiZHXtX.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo1/9.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo1/9-4C8F5MYH9DMjSy23s2vbcYqxnc0xhv.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo2/1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo2/1-RQORHpmKQN7cQaPD1gxMSFF8LPbryK.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo2/10.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo2/10-jFfn67jfx2RS4sj4kHb5hzd6NG1uCs.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo2/11.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo2/11-ChccfQnK5yth4M7s8mxxmMt6vR7530.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo2/12.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo2/12-VLRN6NT4yzqDC73jkP91wudlxd3jzp.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo2/13.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo2/13-ujlGoh7Ouku20APFNaUNso9lmVxaLC.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo2/14.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo2/14-y7QdYdVNPFM9zjFPhgDUljBix7kl0f.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo2/15.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo2/15-k8kB65cwHgaKSBhyxcCrSCRrgWJPRo.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo2/16.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo2/16-3OLZxUFoJO6LO14mVajCaIWUl4YtvM.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo2/17.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo2/17-YkW6iE2RQg6clA60QkoRCaXpJ7MubW.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo2/18.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo2/18-RCQ13NWzuQP0CX01KvHveSunufcSTg.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo2/19.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo2/19-GHuzkkRwvZzJltCiLpHG2MEKHJVRK5.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo2/2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo2/2-okcD9OFe32iiLA1tDUyCJbGwTX6B0E.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo2/20.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo2/20-jGI5ApTLjMmg7qHVyPhPW1KC2CPWxw.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo2/3.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo2/3-w1czTJbUIJfOK4jr968cIDz1AwBlQX.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo2/4.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo2/4-0PL4ngR1sH0HX2DEMO4OWaAiuvQzvO.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo2/5.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo2/5-nSU5USv9zljRdJH0qpjMLGaY5ig3db.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo2/6.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo2/6-epiItBLfCD0J6SsNkM6Vwc3JQfvu2b.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo2/7.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo2/7-TptUhbhsRqKvd4JQaAqgO6uVUwnPOe.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo2/8.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo2/8-UpF38JSNr6VruW52PIwsIspbN1T7gV.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo2/9.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo2/9-yk3GTT8lDLDyM3ZHg4Yf9w81IaCMji.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo3/1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo3/1-tBZZcwow72nTYF1DKr5HmAiJ3OSqpd.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo3/10.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo3/10-gV3UauTKafS4XFdNqFYYZh05irTb0e.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo3/11.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo3/11-2Dyacgskc1f2YWmZ6E3Z5l6d1bU73r.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo3/12.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo3/12-MA7eVwAu0eCFUJGyDHFYdL0CQOULPG.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo3/13.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo3/13-537OkMKRz4eyyVlaneDtH9VW1cDXk0.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo3/14.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo3/14-L82xo9dh7AkHgFc2OX4OiTBsh0zoWu.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo3/15.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo3/15-qkOb7coLdcbBfckV8ztnz4385fo2kP.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo3/16.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo3/16-tGngj6CaXiJCfDSaIRckph1ccyS5V0.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo3/17.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo3/17-3HzSAa5vsFtQbQe1yBX7IZ3nOMLcPa.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo3/18.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo3/18-32vknDbzTJDsy5aLBGqYX3mivxvybb.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo3/19.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo3/19-Qtp5LuI01lTvAumgSmrhFkI0qGuHus.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo3/2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo3/2-PbDwBNIIgkzkNhxToM6Nb3jwC3D8ns.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo3/20.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo3/20-330IiSc2bybZNeTQA8yierolXWhGHZ.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo3/3.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo3/3-SfEOZrIE1Di3DszLdTeyIAxMlQpTd2.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo3/4.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo3/4-bW6jnIjkQzRFuZs4YJDH6sDABkQhsC.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo3/5.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo3/5-cZGs0gqofBNap2f35JP2NZUSjoelC5.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo3/6.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo3/6-fBCZWcWdSCPzvmF8hS2s591q0nF6cW.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo3/7.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo3/7-gQDPmzWKNlwquK34K5qq77AYYDBCaV.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo3/8.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo3/8-vBGipFwpU1T3EDJNYwxXT7ALPYbGMG.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo3/9.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo3/9-SG56e9mtmO2gESUxjbpT89Labxir6L.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo4/1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo4/1-E1cUdn5TwrUj0lCIRClDFIbQgoHXOC.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo4/10.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo4/10-oL1xXxz1oJb5NeRgmTKTW180SYsNEf.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo4/11.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo4/11-iYFmljqcuX8XFrAAoIICqDKceyRz7j.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo4/12.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo4/12-tKWG3DuyCUNpL8JkYmL7HojAoS8j9t.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo4/13.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo4/13-jLN5dsbTx8WKi72lNR68iiT4kLIhVR.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo4/14.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo4/14-D6eID2LzANLfHIAKpkmSKgHEzgOjzE.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo4/15.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo4/15-edQoZiwwJNTinE13r9dfv6HivSuYlv.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo4/16.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo4/16-Yfid3EOYHeLHziXqASokKkmyd9sMhb.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo4/17.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo4/17-UwFvplmPElgdAhwdMuXOwZf01gzpYM.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo4/18.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo4/18-FXaOytXJX00OJyRGHUasZcMHfi77Rw.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo4/19.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo4/19-njUP2EhniA4VBXwBBzvM9j7Gq1M3na.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo4/2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo4/2-NpIaVkf9ii43WjpGLTxoxDY8QLRl0e.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo4/20.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo4/20-jIjj9MF2GQEA9kS2dmRlIDRJpHXQmd.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo4/3.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo4/3-ASMp9UvJMZXe1KsS6KhzORRIBBAybr.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo4/4.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo4/4-Qs890CRJ3XzWbabyves3wF7Qclo0CY.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo4/5.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo4/5-P5twpKvdSkEmkDBeqyhp9UamQZagzl.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo4/6.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo4/6-mtG6Sxkr4oZMleg67qPWhfnS62XnJV.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo4/7.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo4/7-OAThxHPbcSTRQfiUYMtVEs2ojYTNVx.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo4/8.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo4/8-a2WQkF0uvMmXcLbS6UTdMSSFVbpt2x.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo4/9.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo4/9-OYK71j09eVUCQq5IX9bmlEkWH86enO.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo5/1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo5/1-occALgemwK3YKFznv7rg3fKAG3frkz.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo5/10.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo5/10-zcOdTrnJ78XETAM4gIXKIfkpMjp7YI.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo5/11.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo5/11-aokdu2S7WGGeFF1wACr2cOi7MZoCyV.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo5/12.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo5/12-kGWaXiWn2pCc8LAd6gNSjtbO6WGpYZ.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo5/13.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo5/13-eRfimMitB3s5WDeEtx6IOblZpjJIN2.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo5/14.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo5/14-RDNJooVw1M63fbx4kElNjXmBc96u5h.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo5/15.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo5/15-7ArlH8pIhYhiyI56NJ7ugCpWtdGHHD.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo5/16.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo5/16-pF4wbGDtob7Ye0gzHm73hPHYE4IYWH.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo5/17.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo5/17-1ab1BRm7XFsADVNF6C7qVE0bfxgnzA.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo5/18.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo5/18-lrAgSOp59yFnGrFI23tgzTa3wzap4D.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo5/19.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo5/19-r7FeBA4D4acdV5VP1oUwnuMm1AaTdg.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo5/2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo5/2-6fEweY0vV5pzZxzcacvGQjnwz16hFo.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo5/20.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo5/20-mv77qLlrAUsCEaS0YrZcqGb2s79JOk.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo5/3.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo5/3-O2MhEfCP1SXwI3RtO6B2dq9uHbnWxu.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo5/4.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo5/4-5Ym2yJHsvFm7DuXObUGrEFHyFPqTB7.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo5/5.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo5/5-AfdaAYyBQ2J2GAZZTAFApwhZipiTb7.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo5/6.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo5/6-RgP2ZFNYRW84utpqyAJpB18TKbwyrN.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo5/7.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo5/7-YtnjJ9enJQzUaHX9z0NrusQREda3hl.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo5/8.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo5/8-RlIBD0iOf1DhUEhnxrLTfVwtTqk4CC.jpg" [V0_FILE]jpg:file="RapidImageHoverMenuEffects-master/src/img/demo5/9.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/RapidImageHoverMenuEffects-master/src/img/demo5/9-aVrRgJJTxAQyrkH50Z1JCJoZ9M0s2T.jpg" [V0_FILE]plaintext:file="LICENSE" MIT License Copyright (c) 2009 - 2020 [Codrops](https://tympanus.net/codrops) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. [V0_FILE]css:file="src/css/demo1/base.css" *, *::after, *::before { box-sizing: border-box; } :root { font-size: 12px; } body { margin: 0; --color-frame-bg: #ded7b3; --color-text: #000; --color-bg: #ece7ce; --color-link: #ff5200; --color-link-hover: #000; --color-menu: #3a3005; --color-menu-hover: #ff5200; --color-menu-deco: #000; color: var(--color-text); background-color: var(--color-bg); --cursor-stroke: none; --cursor-fill: #0aa240; --cursor-stroke-width: 1px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: wedding-gothic-atf, sans-serif; font-weight: 600; } /* Page Loader */ .js .loading::before, .js .loading::after { content: ''; position: fixed; z-index: 1000; } .js .loading::before { top: 0; left: 0; width: 100%; height: 100%; background: var(--color-bg); } .js .loading::after { top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; opacity: 0.4; background: var(--color-link); animation: loaderAnim 0.7s linear infinite alternate forwards; } @keyframes loaderAnim { to { opacity: 1; transform: scale3d(0.5,0.5,1); } } a { text-decoration: none; color: var(--color-link); outline: none; cursor: pointer; } a:hover, a:focus { color: var(--color-link-hover); outline: none; } .frame { position: relative; padding: 1rem 1.5rem; width: 100%; display: flex; text-transform: uppercase; z-index: 1000; background: var(--color-frame-bg); } .frame__title { font-size: 1rem; margin: 0; font-weight: 600; } .frame__links, .frame__demos, .frame__demos { margin: 0.5rem 0; } .frame__demos a { border-bottom: 1px solid currentColor; transition: 0.2s border-color; } .frame__demos a:hover, .frame__demos a:focus { border-color: transparent; } .frame__links a:not(:last-child), .frame__demos a:not(:last-child) { margin-right: 1rem; } a.frame__demo--current { border-color: transparent; color: var(--color-text); } .menu { padding: 5rem 0 40vh 0; position: relative; display: grid; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; counter-reset: menucounter; } .menu__item { justify-content: start; position: relative; display: grid; width: 100%; grid-template-areas: 'counter text'; grid-template-columns: 3rem auto; grid-template-rows: auto; padding: 0.5rem 1rem; } .menu__item::before { text-align: right; grid-area: counter; align-self: start; justify-self: end; counter-increment: menucounter; content: counters(menucounter, ".", decimal-leading-zero); color: var(--color-menu-deco); opacity: 0; font-family: wedding-gothic-atf, sans-serif; font-weight: 100; line-height: 1; padding-right: 0.5rem; display: grid; place-items: center; font-size: clamp(1.5rem, 5vw, 4rem); transform: translateX(1rem); transition: transform 0.3s, opacity 0.3s; } .menu__item:hover::before { color: var(--color-menu-deco); opacity: 1; transform: translateX(0); } .menu__item-text { grid-area: text; position: relative; cursor: pointer; display: block; overflow: hidden; line-height: 1; height: 100%; } .menu__item-textinner { font-size: clamp(3rem, 7vw, 5rem); width: 100%; height: 100%; position: relative; display: block; font-family: ambroise-firmin-std, serif; font-weight: 300; text-transform: uppercase; white-space: nowrap; color: var(--color-menu); } .js .menu__item-textinner { transform: translateY(100%); } .menu__item:hover .menu__item-textinner { color: var(--color-menu-hover); } .menu__item-sub { grid-area: sub; display: none; font-size: 10px; text-transform: uppercase; font-family: wedding-gothic-atf, sans-serif; font-weight: 600; white-space: nowrap; position: relative; width: 100%; line-height: 1; padding: 0 0 0.5rem 0; color: var(--color-menu-deco); opacity: 0; margin-left: auto; transform: translateX(-1rem); transition: transform 0.3s, opacity 0.3s; } .menu__item:hover .menu__item-sub { color: var(--color-menu-deco); opacity: 1; transform: translateX(0); } .hover-reveal { position: absolute; z-index: -1; width: 300px; height: 400px; top: 0; left: 0; pointer-events: none; opacity: 0; will-change: transform, filter; } .hover-reveal__inner { overflow: hidden; } .hover-reveal__inner, .hover-reveal__img { width: 100%; height: 100%; position: relative; } .hover-reveal__img { background-size: cover; background-position: 50% 50%; } .cursor { display: none; } .credits { align-self: flex-start; padding: 5rem 0 0 0; } .credits a { text-decoration: underline; } @media screen and (min-width: 53em) { .frame { pointer-events: none; background: none; } .frame__title-wrap { pointer-events: auto; } .frame__demos { margin: 0.5rem 0 0; justify-self: start; } .frame__demos a { margin-right: 0.5rem; } .menu__item { grid-template-areas: '. counter text . .' '. . sub . .'; grid-template-columns: 1fr 7rem auto 7rem 1fr; } .menu__item-sub { display: block; } } @media (any-pointer: fine) { .cursor { position: fixed; top: 0; left: 0; display: block; pointer-events: none; } .cursor__inner { fill: var(--cursor-fill); stroke: var(--cursor-stroke); stroke-width: var(--cursor-stroke-width); opacity: 0.7; } .credits { padding-left: 25vw; } } /*! locomotive-scroll v3.5.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */ html.has-scroll-smooth { overflow: hidden; } html.has-scroll-dragging { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .has-scroll-smooth body { overflow: hidden; } .has-scroll-smooth [data-scroll-container] { min-height: 100vh; } .c-scrollbar { position: absolute; right: 0; top: 0; width: 11px; height: 100vh; transform-origin: center right; transition: transform 0.3s, opacity 0.3s; opacity: 0; } .c-scrollbar:hover { transform: scaleX(1.45); } .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar { opacity: 1; } .c-scrollbar_thumb { position: absolute; top: 0; right: 0; background-color: black; opacity: 0.5; width: 7px; border-radius: 10px; margin: 2px; cursor: -webkit-grab; cursor: grab; } .has-scroll-dragging .c-scrollbar_thumb { cursor: -webkit-grabbing; cursor: grabbing; } [V0_FILE]css:file="src/css/demo2/base.css" *, *::after, *::before { box-sizing: border-box; } :root { font-size: 13px; } body { margin: 0; --color-frame-bg: #201f1f; --color-text: #f70d0d; --color-bg: #000; --color-link: #969696; --color-link-hover: #fff; --color-menu: #fff; --color-menu-hover: #18d1ea; --color-menu-deco: #ffffff; color: var(--color-text); background-color: var(--color-bg); --cursor-stroke: none; --cursor-fill: #ff0000; --cursor-stroke-width: 1px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; } /* Page Loader */ .js .loading::before, .js .loading::after { content: ''; position: fixed; z-index: 1000; } .js .loading::before { top: 0; left: 0; width: 100%; height: 100%; background: var(--color-bg); } .js .loading::after { top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; opacity: 0.4; background: var(--color-link); animation: loaderAnim 0.7s linear infinite alternate forwards; } @keyframes loaderAnim { to { opacity: 1; transform: scale3d(0.5,0.5,1); } } a { text-decoration: none; color: var(--color-link); outline: none; cursor: pointer; } a:hover, a:focus { color: var(--color-link-hover); outline: none; } .frame { position: relative; padding: 1rem 1.5rem; width: 100%; display: flex; text-transform: uppercase; z-index: 1000; background: var(--color-frame-bg); } .frame__title { font-size: 1rem; margin: 0; font-weight: 400; } .frame__links, .frame__demos, .frame__demos { margin: 0.5rem 0; } .frame__demos a { border-bottom: 1px solid currentColor; transition: 0.2s border-color; } .frame__demos a:hover, .frame__demos a:focus { border-color: transparent; } .frame__links a:not(:last-child), .frame__demos a:not(:last-child) { margin-right: 1rem; } a.frame__demo--current { border-color: transparent; color: var(--color-text); } .menu { padding: 5rem 0 40vh 0; position: relative; display: flex; align-items: flex-end; flex-direction: column; text-align: right; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; counter-reset: menucounter; } .menu__item { flex: none; display: flex; justify-content: flex-end; position: relative; padding: 0 15vw; } .menu__item::before { counter-increment: menucounter; content: counters(menucounter, ".", decimal-leading-zero); position: absolute; left: calc(15vw - 2rem); color: var(--color-menu-deco); top: 0%; height: 60%; display: flex; align-items: center; line-height: 1; font-weight: bold; opacity: 0; transform: translateX(-1rem); transition: transform 0.3s, opacity 0.3s; } .menu__item:hover::before { color: var(--color-menu-deco); opacity: 1; transform: translateX(0); } .menu__item-text { position: relative; cursor: pointer; display: block; overflow: hidden; line-height: 1; font-size: clamp(2rem, 6vw, 6rem); } .menu__item-textinner { display: block; font-family: tenez, sans-serif; font-weight: 400; text-transform: uppercase; white-space: nowrap; color: var(--color-menu); } .js .menu__item-textinner { transform: translateY(100%); } .menu__item:hover .menu__item-textinner { color: var(--color-menu-hover); } .menu__item-sub { display: none; text-transform: uppercase; font-weight: bold; white-space: nowrap; align-items: center; position: relative; margin-left: 2rem; padding-left: 3rem; color: var(--color-menu-deco); opacity: 0; transform: translateX(-1rem); transition: transform 0.3s, opacity 0.3s; mix-blend-mode: difference; } .menu__item:hover .menu__item-sub { color: var(--color-menu-deco); opacity: 1; transform: translateX(0); } .menu__item-sub::before { content: ''; position: absolute; left: 0; top: 15%; width: 1px; height: 70%; background: currentColor; transform-origin: 0 100%; transform: rotate(22.5deg) scale3d(1,0,1); transition: transform 0.3s; } .menu__item:hover .menu__item-sub::before { transform: rotate(22.5deg) scale3d(1,1,1); } .hover-reveal { position: absolute; z-index: -1; width: 200px; height: 280px; top: 0; left: 0; pointer-events: none; opacity: 0; will-change: transform, filter; } .hover-reveal__inner { overflow: hidden; } .hover-reveal__inner, .hover-reveal__img { width: 100%; height: 100%; position: relative; } .hover-reveal__img { background-size: cover; background-position: 50% 50%; } .cursor { display: none; } .credits { align-self: flex-start; padding: 5rem 0 0 0; } .credits a { text-decoration: underline; } @media screen and (min-width: 53em) { .frame { pointer-events: none; background: none; } .frame__title-wrap { pointer-events: auto; } .frame__demos { margin: 0.5rem 0 0; justify-self: start; } .frame__demos a { margin-right: 0.5rem; } .menu__item-sub { display: flex; } } @media (any-pointer: fine) { .cursor { position: fixed; top: 0; left: 0; display: block; pointer-events: none; } .cursor__inner { fill: var(--cursor-fill); stroke: var(--cursor-stroke); stroke-width: var(--cursor-stroke-width); opacity: 0.7; } .credits { padding-left: 25vw; } } /*! locomotive-scroll v3.5.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */ html.has-scroll-smooth { overflow: hidden; } html.has-scroll-dragging { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .has-scroll-smooth body { overflow: hidden; } .has-scroll-smooth [data-scroll-container] { min-height: 100vh; } .c-scrollbar { position: absolute; right: 0; top: 0; width: 11px; height: 100vh; transform-origin: center right; transition: transform 0.3s, opacity 0.3s; opacity: 0; } .c-scrollbar:hover { transform: scaleX(1.45); } .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar { opacity: 1; } .c-scrollbar_thumb { position: absolute; top: 0; right: 0; background-color: black; opacity: 0.5; width: 7px; border-radius: 10px; margin: 2px; cursor: -webkit-grab; cursor: grab; } .has-scroll-dragging .c-scrollbar_thumb { cursor: -webkit-grabbing; cursor: grabbing; } [V0_FILE]css:file="src/css/demo3/base.css" *, *::after, *::before { box-sizing: border-box; } :root { font-size: 15px; } body { margin: 0; --color-frame-bg: #b23326; --color-text: #fff; --color-bg: #c2392b; --color-link: #000000; --color-link-hover: #fff; --color-menu: #fff; --color-menu-hover: #000000; --color-menu-deco: #ffffff; color: var(--color-text); background-color: var(--color-bg); --cursor-stroke: none; --cursor-fill: #000000; --cursor-stroke-width: 1px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: ivymode, sans-serif; } /* Page Loader */ .js .loading::before, .js .loading::after { content: ''; position: fixed; z-index: 1000; } .js .loading::before { top: 0; left: 0; width: 100%; height: 100%; background: var(--color-bg); } .js .loading::after { top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; opacity: 0.4; background: var(--color-link); animation: loaderAnim 0.7s linear infinite alternate forwards; } @keyframes loaderAnim { to { opacity: 1; transform: scale3d(0.5,0.5,1); } } a { text-decoration: none; color: var(--color-link); outline: none; cursor: pointer; } a:hover, a:focus { color: var(--color-link-hover); outline: none; } .frame { position: relative; padding: 1rem 1.5rem; width: 100%; display: flex; text-transform: uppercase; z-index: 1000; background: var(--color-frame-bg); } .frame__title { font-size: 1rem; margin: 0; font-weight: 400; } .frame__links, .frame__demos, .frame__demos { margin: 0.5rem 0; } .frame__demos a { border-bottom: 1px solid currentColor; transition: 0.2s border-color; } .frame__demos a:hover, .frame__demos a:focus { border-color: transparent; } .frame__links a:not(:last-child), .frame__demos a:not(:last-child) { margin-right: 1rem; } a.frame__demo--current { border-color: transparent; color: var(--color-text); } .menu { padding: 5rem 0 40vh 0; width: 90vw; position: relative; display: flex; flex-direction: column; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; counter-reset: menucounter; } .menu__item { flex: none; display: flex; justify-content: flex-end; position: relative; padding-left: 5rem; } .menu__item::before { counter-increment: menucounter; content: counters(menucounter, ".", decimal-leading-zero); position: absolute; left: 0; color: var(--color-menu-deco); border-left: 3px solid currentColor; top: 20%; height: 60%; padding-left: 1rem; display: flex; align-items: center; line-height: 1; opacity: 0; font-weight: 200; font-size: clamp(2rem, 6vw, 4.5rem); transform: translateX(-1rem); transition: transform 0.3s, opacity 0.3s; } .menu__item:hover::before { color: var(--color-menu-deco); opacity: 1; transform: translateX(0); } .menu__item-text { position: relative; cursor: pointer; display: block; overflow: hidden; font-size: clamp(2rem, 5vw, 4.5rem); } .menu__item-textinner { display: block; font-family: ivymode, sans-serif; font-weight: 200; text-transform: uppercase; white-space: nowrap; color: var(--color-menu); } .js .menu__item-textinner { transform: translateY(100%); } .menu__item:hover .menu__item-textinner { color: var(--color-menu-hover); } .menu__item-sub { display: none; font-weight: 200; font-size: clamp(1rem, 2vw, 2rem); white-space: nowrap; align-items: center; position: relative; margin-left: 2rem; padding-left: 3.25rem; color: var(--color-menu-deco); opacity: 0; transform: translateX(-1rem); transition: transform 0.3s, opacity 0.3s; mix-blend-mode: difference; } .menu__item:hover .menu__item-sub { color: var(--color-menu-deco); opacity: 1; transform: translateX(0); } .menu__item-sub::before { content: ''; position: absolute; left: 0; top: 50%; width: 3rem; height: 1px; background: currentColor; transform-origin: 0 100%; transform: scale3d(0,1,1); transition: transform 0.3s; } .menu__item:hover .menu__item-sub::before { transform: scale3d(1,1,1); } .hover-reveal { position: absolute; z-index: -1; width: 220px; height: 280px; top: 0; left: 0; pointer-events: none; opacity: 0; will-change: transform, filter; } .hover-reveal__inner { overflow: hidden; transform-origin: 30% 50%; } .hover-reveal__inner, .hover-reveal__img { width: 100%; height: 100%; position: relative; } .hover-reveal__img { transform-origin: 70% 50%; } /* .hover-reveal__img { width: calc(100% + 120px); height: calc(100% + 120px); margin: -60px 0 0 -60px; } */ .hover-reveal__img { background-size: cover; background-position: 50% 50%; } .cursor { display: none; } .credits { align-self: flex-start; padding: 5rem 0 0 0; } .credits a { text-decoration: underline; } @media screen and (min-width: 53em) { .frame { pointer-events: none; background: none; } .frame__title-wrap { pointer-events: auto; } .frame__demos { margin: 0.5rem 0 0; justify-self: start; } .frame__demos a { margin-right: 0.5rem; } .menu__item { padding-left: 25vw; } .menu__item-sub { display: flex; } } @media (any-pointer: fine) { .cursor { position: fixed; top: 0; left: 0; display: block; pointer-events: none; } .cursor__inner { fill: var(--cursor-fill); stroke: var(--cursor-stroke); stroke-width: var(--cursor-stroke-width); opacity: 0.7; } .credits { padding-left: 25vw; } } /*! locomotive-scroll v3.5.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */ html.has-scroll-smooth { overflow: hidden; } html.has-scroll-dragging { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .has-scroll-smooth body { overflow: hidden; } .has-scroll-smooth [data-scroll-container] { min-height: 100vh; } .c-scrollbar { position: absolute; right: 0; top: 0; width: 11px; height: 100vh; transform-origin: center right; transition: transform 0.3s, opacity 0.3s; opacity: 0; } .c-scrollbar:hover { transform: scaleX(1.45); } .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar { opacity: 1; } .c-scrollbar_thumb { position: absolute; top: 0; right: 0; background-color: black; opacity: 0.5; width: 7px; border-radius: 10px; margin: 2px; cursor: -webkit-grab; cursor: grab; } .has-scroll-dragging .c-scrollbar_thumb { cursor: -webkit-grabbing; cursor: grabbing; } [V0_FILE]css:file="src/css/demo4/base.css" *, *::after, *::before { box-sizing: border-box; } :root { font-size: 13px; } body { margin: 0; --color-frame-bg: #fff; --color-text: #ce1f4c; --color-bg: #deca8c; --color-link: #000000; --color-link-hover: #fff; --color-menu: #fff; --color-menu-hover: #ce1f4c; --color-menu-deco: #ffffff; color: var(--color-text); background-color: var(--color-bg); --cursor-stroke: none; --cursor-fill: #d5545e; --cursor-stroke-width: 1px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; } /* Page Loader */ .js .loading::before, .js .loading::after { content: ''; position: fixed; z-index: 1000; } .js .loading::before { top: 0; left: 0; width: 100%; height: 100%; background: var(--color-bg); } .js .loading::after { top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; opacity: 0.4; background: var(--color-link); animation: loaderAnim 0.7s linear infinite alternate forwards; } @keyframes loaderAnim { to { opacity: 1; transform: scale3d(0.5,0.5,1); } } a { text-decoration: none; color: var(--color-link); outline: none; cursor: pointer; } a:hover, a:focus { color: var(--color-link-hover); outline: none; } .frame { position: relative; padding: 1rem 1.5rem; width: 100%; display: flex; text-transform: uppercase; z-index: 1000; background: var(--color-frame-bg); } .frame__title { font-size: 1rem; margin: 0; font-weight: 400; } .frame__links, .frame__demos, .frame__demos { margin: 0.5rem 0; } .frame__demos a { border-bottom: 1px solid currentColor; transition: 0.2s border-color; } .frame__demos a:hover, .frame__demos a:focus { border-color: transparent; } .frame__links a:not(:last-child), .frame__demos a:not(:last-child) { margin-right: 1rem; } a.frame__demo--current { border-color: transparent; color: var(--color-text); } .menu { padding: 5rem 0 40vh 0; width: 90vw; position: relative; display: flex; flex-direction: column; text-align: right; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; counter-reset: menucounter; } .menu__item { flex: none; display: flex; justify-content: flex-end; position: relative; padding-left: 5rem; } .menu__item::before { counter-increment: menucounter; content: counters(menucounter, ".", decimal-leading-zero); position: absolute; left: 0; color: var(--color-menu-deco); border-left: 3px solid currentColor; top: 20%; height: 60%; padding-left: 1rem; display: flex; align-items: center; line-height: 1; font-weight: bold; opacity: 0; transform: translateX(-1rem); transition: transform 0.3s, opacity 0.3s; } .menu__item:hover::before { color: var(--color-menu-deco); opacity: 1; transform: translateX(0); } .menu__item-text { position: relative; cursor: pointer; display: block; overflow: hidden; } .menu__item-textinner { display: block; font-family: moret, serif; font-weight: 300; white-space: nowrap; color: var(--color-menu); font-size: clamp(2rem, 7vw, 6rem); } .js .menu__item-textinner { transform: translateY(100%); } .menu__item:hover .menu__item-textinner { color: var(--color-menu-hover); } .menu__item-sub { display: none; text-transform: uppercase; font-weight: bold; white-space: nowrap; align-items: center; position: relative; margin-left: 2rem; padding-left: 3rem; color: var(--color-menu-deco); opacity: 0; transform: translateX(-1rem); transition: transform 0.3s, opacity 0.3s; mix-blend-mode: difference; } .menu__item:hover .menu__item-sub { color: var(--color-menu-deco); opacity: 1; transform: translateX(0); } .menu__item-sub::before { content: ''; position: absolute; left: 0; top: 15%; width: 1px; height: 70%; background: currentColor; transform-origin: 0 100%; transform: rotate(22.5deg) scale3d(1,0,1); transition: transform 0.3s; } .menu__item:hover .menu__item-sub::before { transform: rotate(22.5deg) scale3d(1,1,1); } .hover-reveal { position: absolute; z-index: -1; width: 220px; height: 280px; top: 0; left: 0; pointer-events: none; opacity: 0; will-change: transform, filter; } .hover-reveal__img { width: 100%; height: 100%; } .hover-reveal__img { background-size: cover; background-position: 50% 50%; } .cursor { display: none; } .credits { align-self: flex-start; padding: 5rem 0 0 0; } .credits a { text-decoration: underline; } @media screen and (min-width: 53em) { .frame { background: none; pointer-events: none; } .frame__title-wrap { pointer-events: auto; } .frame__demos { margin: 0.5rem 0 0; justify-self: start; } .frame__demos a { margin-right: 0.5rem; } .menu__item { padding-left: 25vw; } .menu__item-sub { display: flex; } } @media (any-pointer: fine) { .cursor { position: fixed; top: 0; left: 0; display: block; pointer-events: none; } .cursor__inner { fill: var(--cursor-fill); stroke: var(--cursor-stroke); stroke-width: var(--cursor-stroke-width); opacity: 0.7; } .credits { padding-left: 25vw; } } /*! locomotive-scroll v3.5.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */ html.has-scroll-smooth { overflow: hidden; } html.has-scroll-dragging { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .has-scroll-smooth body { overflow: hidden; } .has-scroll-smooth [data-scroll-container] { min-height: 100vh; } .c-scrollbar { position: absolute; right: 0; top: 0; width: 11px; height: 100vh; transform-origin: center right; transition: transform 0.3s, opacity 0.3s; opacity: 0; } .c-scrollbar:hover { transform: scaleX(1.45); } .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar { opacity: 1; } .c-scrollbar_thumb { position: absolute; top: 0; right: 0; background-color: black; opacity: 0.5; width: 7px; border-radius: 10px; margin: 2px; cursor: -webkit-grab; cursor: grab; } .has-scroll-dragging .c-scrollbar_thumb { cursor: -webkit-grabbing; cursor: grabbing; } [V0_FILE]css:file="src/css/demo5/base.css" *, *::after, *::before { box-sizing: border-box; } :root { font-size: 13px; } body { margin: 0; --color-frame-bg: #c9644b; --color-bg: #de6e53; --color-link: #9c0e0e; --color-link-hover: #fff; --color-menu: #3a1911; --color-menu-hover: #ffffff; --color-menu-deco: #9c0e0e; color: var(--color-text); background-color: var(--color-bg); --cursor-stroke: none; --cursor-fill: #6b3f24; --cursor-stroke-width: 1px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; } /* Page Loader */ .js .loading::before, .js .loading::after { content: ''; position: fixed; z-index: 1000; } .js .loading::before { top: 0; left: 0; width: 100%; height: 100%; background: var(--color-bg); } .js .loading::after { top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; opacity: 0.4; background: var(--color-link); animation: loaderAnim 0.7s linear infinite alternate forwards; } @keyframes loaderAnim { to { opacity: 1; transform: scale3d(0.5,0.5,1); } } a { text-decoration: none; color: var(--color-link); outline: none; cursor: pointer; } a:hover, a:focus { color: var(--color-link-hover); outline: none; } .frame { position: relative; padding: 1rem 1.5rem; width: 100%; display: flex; text-transform: uppercase; z-index: 1000; background: var(--color-frame-bg); } .frame__title { font-size: 1rem; margin: 0; font-weight: 400; } .frame__links, .frame__demos, .frame__demos { margin: 0.5rem 0; } .frame__demos a { border-bottom: 1px solid currentColor; transition: 0.2s border-color; } .frame__demos a:hover, .frame__demos a:focus { border-color: transparent; } .frame__links a:not(:last-child), .frame__demos a:not(:last-child) { margin-right: 1rem; } a.frame__demo--current { border-color: transparent; color: var(--color-text); } .menu { padding: 5rem 0 20vh 0; position: relative; display: flex; flex-direction: column; text-align: right; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; counter-reset: menucounter; } .menu__item { flex: none; display: flex; justify-content: flex-end; position: relative; padding: 0 5rem; } .menu__item::before { counter-increment: menucounter; content: counters(menucounter, ".", decimal-leading-zero); position: absolute; left: 0; color: var(--color-menu-deco); border-left: 3px solid currentColor; top: 20%; height: 60%; padding-left: 1rem; display: flex; align-items: center; line-height: 1; font-weight: bold; opacity: 0; transform: translateX(-1rem); transition: transform 0.3s, opacity 0.3s; } .menu__item:hover::before { color: var(--color-menu-deco); opacity: 1; transform: translateX(0); } .menu__item-text { position: relative; cursor: pointer; padding: 0.5rem; display: block; overflow: hidden; font-size: 6vw; } .menu__item-textinner { display: block; font-family: anisette-std, sans-serif; font-weight: 400; white-space: nowrap; color: var(--color-menu); } .js .menu__item-textinner { transform: translateY(100%); } .menu__item:hover .menu__item-textinner { color: var(--color-menu-hover); } .menu__item-sub { display: none; text-transform: uppercase; font-weight: bold; white-space: nowrap; align-items: center; position: relative; margin-left: 2rem; padding-left: 3rem; color: var(--color-menu-deco); opacity: 0; transform: translateX(-1rem); transition: transform 0.3s, opacity 0.3s; mix-blend-mode: difference; } .menu__item:hover .menu__item-sub { color: var(--color-menu-deco); opacity: 1; transform: translateX(0); } .menu__item-sub::before { content: ''; position: absolute; left: 0; top: 15%; width: 1px; height: 70%; background: currentColor; transform-origin: 0 100%; transform: rotate(22.5deg) scale3d(1,0,1); transition: transform 0.3s; } .menu__item:hover .menu__item-sub::before { transform: rotate(22.5deg) scale3d(1,1,1); } .hover-reveal { position: absolute; z-index: -1; width: 280px; height: 360px; top: 0; left: 0; pointer-events: none; opacity: 0; will-change: transform, filter; } .hover-reveal__inner { overflow: hidden; } .hover-reveal__inner, .hover-reveal__img { width: 100%; height: 100%; position: relative; } .hover-reveal__img { background-size: cover; background-position: 50% 50%; } .cursor { display: none; } .credits { align-self: flex-start; padding: 5rem 0 0 0; } .credits a { text-decoration: underline; } @media screen and (min-width: 53em) { .frame { pointer-events: none; background: none; } .frame__title-wrap { pointer-events: auto; } .frame__demos { margin: 0.5rem 0 0; justify-self: start; } .frame__demos a { margin-right: 0.5rem; } .menu__item { padding-left: 25vw; justify-content: initial; } .menu__item-text { padding: 1vh 0; font-size: 4vw; } .menu__item-sub { display: flex; } } @media (any-pointer: fine) { .cursor { position: fixed; top: 0; left: 0; display: block; pointer-events: none; } .cursor__inner { fill: var(--cursor-fill); stroke: var(--cursor-stroke); stroke-width: var(--cursor-stroke-width); opacity: 0.7; } .credits { padding-left: 25vw; } } /*! locomotive-scroll v3.5.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */ html.has-scroll-smooth { overflow: hidden; } html.has-scroll-dragging { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .has-scroll-smooth body { overflow: hidden; } .has-scroll-smooth [data-scroll-container] { min-height: 100vh; } .c-scrollbar { position: absolute; right: 0; top: 0; width: 11px; height: 100vh; transform-origin: center right; transition: transform 0.3s, opacity 0.3s; opacity: 0; } .c-scrollbar:hover { transform: scaleX(1.45); } .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar { opacity: 1; } .c-scrollbar_thumb { position: absolute; top: 0; right: 0; background-color: black; opacity: 0.5; width: 7px; border-radius: 10px; margin: 2px; cursor: -webkit-grab; cursor: grab; } .has-scroll-dragging .c-scrollbar_thumb { cursor: -webkit-grabbing; cursor: grabbing; } [V0_FILE]html:file="src/index.html" Animations for Menu Hover Effects | Demo 1 | Codrops

Menu Hover Effects

Previous demo Article GitHub

01 02 03 04 05

[V0_FILE]html:file="src/index2.html" Animations for Menu Hover Effects | Demo 2 | Codrops

Menu Hover Effects

Previous demo Article GitHub

01 02 03 04 05

[V0_FILE]html:file="src/index3.html" Animations for Menu Hover Effects | Demo 3 | Codrops

Menu Hover Effects

Previous demo Article GitHub

01 02 03 04 05

Maria Costa Berlin Lana Ferrari Hanoi Franklin Roth London Cristie Noe New York Wilma Quest Los Angeles Gary Winston Belgrade Nesta Freeman Paris Jolanda French Toronto Samantha Dunne Sydney Tony Albert Rome Jacky Speed Casablanca Carlton Holle Milan Kylla Maushet Zagreb Fernando Castello Budapest Sofie Henriette Vienna Adelie Bisset Munich Takato Yang Lisbon Hadrian Kaiser Porto Mina Stofis Lisbon Lauren Spark Porto

[V0_FILE]html:file="src/index4.html" Animations for Menu Hover Effects | Demo 4 | Codrops

Menu Hover Effects

Previous demo Article GitHub

01 02 03 04 05

Maria Costa Style Reset 66 Berlin Lana Ferrari Fashion Week Milano Franklin Roth Amber Convention London Cristie Noe Tokyo Summer Trends Wilma Quest 2021 West End New York Gary Winston Sunset Festival Greenwich Nesta Freeman Spirit Garments Jakarta Jolanda French Bluehouse Fashion Toronto Samantha Dunne Glamour Week Christchurch Tony Albert Piu Bella Fashion Rome Jacky Speed Sea Season Kuala Lumpur Carlton Holle Inspire Fashion Casablanca Kylla Maushet One to Ten Moscow Fernando Castello Miksa Style Week Lisbon Sofie Henriette Free Fashion Budapest Adelie Bisset Couture Night Paris Takato Yang Modern Touch Hong Kong Hadrian Kaiser Neverland Fashion Madrid Tai Yangon Modern Touch Hong Kong Peter Greenberg Neverland Fashion Madrid

[V0_FILE]html:file="src/index5.html" Animations for Menu Hover Effects | Demo 5 | Codrops

Menu Hover Effects

Previous demo Article GitHub

01 02 03 04 05

Maria Costa Style Reset 66 Berlin Lana Ferrari Fashion Week Milano Franklin Roth Amber Convention London Cristie Noe Tokyo Summer Trends Wilma Quest 2021 West End New York Gary Winston Sunset Festival Greenwich Nesta Freeman Spirit Garments Jakarta Jolanda French Bluehouse Fashion Toronto Samantha Dunne Glamour Week Christchurch Tony Albert Piu Bella Fashion Rome Jacky Speed Sea Season Kuala Lumpur Carlton Holle Inspire Fashion Casablanca Kylla Maushet One to Ten Moscow Fernando Castello Miksa Style Week Lisbon Sofie Henriette Free Fashion Budapest Adelie Bisset Couture Night Paris Takato Yang Modern Touch Hong Kong Hadrian Kaiser Neverland Fashion Madrid Nemanja Sput Neverland Fashion Madrid Lisa Pizallo Neverland Fashion Madrid

[V0_FILE]javascript:file="src/js/cursor.js" import { gsap } from 'gsap'; import { lerp, getMousePos } from './utils'; // Track the mouse position let mouse = {x: 0, y: 0}; window.addEventListener('mousemove', ev => mouse = getMousePos(ev)); export default class Cursor { constructor(el) { this.DOM = {el: el}; this.DOM.el.style.opacity = 0; this.bounds = this.DOM.el.getBoundingClientRect(); this.renderedStyles = { tx: {previous: 0, current: 0, amt: 0.2}, ty: {previous: 0, current: 0, amt: 0.2} }; this.onMouseMoveEv = () => { this.renderedStyles.tx.previous = this.renderedStyles.tx.current = mouse.x - this.bounds.width/2; this.renderedStyles.ty.previous = this.renderedStyles.ty.previous = mouse.y - this.bounds.height/2; gsap.to(this.DOM.el, {duration: 0.9, ease: 'Power3.easeOut', opacity: 1}); requestAnimationFrame(() => this.render()); window.removeEventListener('mousemove', this.onMouseMoveEv); }; window.addEventListener('mousemove', this.onMouseMoveEv); } render() { this.renderedStyles['tx'].current = mouse.x - this.bounds.width/2; this.renderedStyles['ty'].current = mouse.y - this.bounds.height/2; for (const key in this.renderedStyles ) { this.renderedStyles[key].previous = lerp(this.renderedStyles[key].previous, this.renderedStyles[key].current, this.renderedStyles[key].amt); } this.DOM.el.style.transform = `translateX(${(this.renderedStyles['tx'].previous)}px) translateY(${this.renderedStyles['ty'].previous}px)`; requestAnimationFrame(() => this.render()); } } [V0_FILE]javascript:file="src/js/demo1/index.js" import Cursor from '../cursor'; import {preloader} from '../preloader'; import LocomotiveScroll from 'locomotive-scroll'; import Menu from './menu'; // menu (
element) const menuEl = document.querySelector('.menu'); // preload the images set as data attrs in the menu items preloader('.menu__item').then(() => { // initialize the smooth scroll const scroll = new LocomotiveScroll({el: menuEl, smooth: true}); // initialize custom cursor const cursor = new Cursor(document.querySelector('.cursor')); // initialize menu new Menu(menuEl); }); [V0_FILE]javascript:file="src/js/demo1/menu.js" import {gsap} from 'gsap'; import MenuItem from './menuItem'; export default class Menu { constructor(el) { // el is the menu element (
) this.DOM = {el: el}; // the menu item elements () this.DOM.menuItems = this.DOM.el.querySelectorAll('.menu__item'); // menu item properties that will animate as we move the mouse around the menu // we will be using interpolation to achieve smooth animations. // the “previous” and “current” values are the values to interpolate. // the value applied to the element, this case the image element (this.DOM.reveal) will be a value between these two values at a specific increment. // the amt is the amount to interpolate. this.animatableProperties = { // translationX tx: {previous: 0, current: 0, amt: 0.08}, // translationY ty: {previous: 0, current: 0, amt: 0.08}, // Rotation angle rotation: {previous: 0, current: 0, amt: 0.08}, // CSS filter (brightness) value brightness: {previous: 1, current: 1, amt: 0.08}, }; // array of MenuItem instances this.menuItems = []; // initialize the MenuItems [...this.DOM.menuItems].forEach((item, pos) => this.menuItems.push(new MenuItem(item, pos, this.animatableProperties))); // show the menu items (initial animation where each menu item gets revealed) this.showMenuItems(); } // initial animation for revealing the menu items showMenuItems() { gsap.to(this.menuItems.map(item => item.DOM.textInner), { duration: 1.2, ease: 'Expo.easeOut', startAt: {y: '100%'}, y: 0, delay: pos => pos*0.06 }); } } [V0_FILE]javascript:file="src/js/demo1/menuItem.js" import {gsap} from 'gsap'; import { map, lerp, clamp, getMousePos } from '../utils'; const images = Object.entries(require('../../img/demo1/*.jpg')); // track the mouse position let mousepos = {x: 0, y: 0}; // cache the mouse position let mousePosCache = mousepos; let direction = {x: mousePosCache.x-mousepos.x, y: mousePosCache.y-mousepos.y}; // update mouse position when moving the mouse window.addEventListener('mousemove', ev => mousepos = getMousePos(ev)); export default class MenuItem { constructor(el, inMenuPosition, animatableProperties) { // el is the with class "menu__item" this.DOM = {el: el}; // position in the Menu this.inMenuPosition = inMenuPosition; // menu item properties that will animate as we move the mouse around the menu this.animatableProperties = animatableProperties; // the item text this.DOM.textInner = this.DOM.el.querySelector('.menu__item-textinner'); // create the image structure this.layout(); // initialize some events this.initEvents(); } // create the image structure // we want to add/append to the menu item the following html: //
//
//
//
//
//
layout() { // this is the element that gets its position animated (and perhaps other properties like the rotation etc..) this.DOM.reveal = document.createElement('div'); this.DOM.reveal.className = 'hover-reveal'; this.DOM.reveal.style.transformOrigin = '0% 0%'; // the next two elements could actually be only one, the image element // adding an extra wrapper (revealInner) around the image element with overflow hidden, gives us the possibility to scale the image inside this.DOM.revealInner = document.createElement('div'); this.DOM.revealInner.className = 'hover-reveal__inner'; this.DOM.revealImage = document.createElement('div'); this.DOM.revealImage.className = 'hover-reveal__img'; this.DOM.revealImage.style.backgroundImage = `url(${images[this.inMenuPosition][1]})`; this.DOM.revealInner.appendChild(this.DOM.revealImage); this.DOM.reveal.appendChild(this.DOM.revealInner); this.DOM.el.appendChild(this.DOM.reveal); } getMouseArea() { return this.bounds.el.top + this.bounds.el.height/2 <= window.innerHeight/2 ? 'up' : 'down'; } // calculate the position/size of both the menu item and reveal element calcBounds() { this.bounds = { el: this.DOM.el.getBoundingClientRect(), reveal: this.DOM.reveal.getBoundingClientRect() }; } // bind some events initEvents() { this.mouseenterFn = (ev) => { // show the image element this.showImage(); this.firstRAFCycle = true; this.DOM.reveal.style.transformOrigin = `0% ${this.mouseArea === 'up' ? 0 : 100}%`; // start the render loop animation (rAF) this.loopRender(); }; this.mouseleaveFn = () => { // stop the render loop animation (rAF) this.stopRendering(); // hide the image element this.hideImage(); }; this.DOM.el.addEventListener('mouseenter', this.mouseenterFn); this.DOM.el.addEventListener('mouseleave', this.mouseleaveFn); } // show the image element showImage() { // kill any current tweens gsap.killTweensOf(this.DOM.revealInner); gsap.killTweensOf(this.DOM.revealImage); this.tl = gsap.timeline({ onStart: () => { // show both image and its parent element this.DOM.reveal.style.opacity = this.DOM.revealInner.style.opacity = 1; // set a high z-index value so image appears on top of other elements gsap.set(this.DOM.el, {zIndex: images.length}); } }) // animate the image wrap .to(this.DOM.revealInner, 0.6, { ease: 'Expo.easeOut', startAt: {scale: 0.6}, scale: 1 }) // animate the image element .to(this.DOM.revealImage, 0.6, { ease: 'Expo.easeOut', startAt: {scale: 1.4}, scale: 1 }, 0); } // hide the image element hideImage() { // kill any current tweens gsap.killTweensOf(this.DOM.revealInner); gsap.killTweensOf(this.DOM.revealImage); this.tl = gsap.timeline({ onStart: () => { gsap.set(this.DOM.el, {zIndex: 1}); }, onComplete: () => { gsap.set(this.DOM.reveal, {opacity: 0}); } }) .to(this.DOM.revealInner, 0.6, { ease: 'Expo.easeOut', scale: 0.6, opacity: 0 }) .to(this.DOM.revealImage, 0.6, { ease: 'Expo.easeOut', scale: 1.4 }, 0); } // start the render loop animation (rAF) loopRender() { if ( !this.requestId ) { this.requestId = requestAnimationFrame(() => this.render()); } } // stop the render loop animation (rAF) stopRendering() { if ( this.requestId ) { window.cancelAnimationFrame(this.requestId); this.requestId = undefined; } } // translate the item as the mouse moves render() { this.requestId = undefined; if ( this.firstRAFCycle ) { // calculate position/sizes the first time this.calcBounds(); this.mouseArea = this.getMouseArea(); } // calculate the mouse distance (current vs previous cycle) const mouseDistanceX = clamp(Math.abs(mousePosCache.x - mousepos.x), 0, 100); // direction where the mouse is moving direction = {x: mousePosCache.x-mousepos.x, y: mousePosCache.y-mousepos.y}; // updated cache values mousePosCache = {x: mousepos.x, y: mousepos.y}; // new translation values this.animatableProperties.tx.current = Math.abs(mousepos.x - this.bounds.el.left); this.animatableProperties.ty.current = this.mouseArea === 'up' ? Math.abs(mousepos.y - this.bounds.el.top) : Math.abs(mousepos.y - this.bounds.el.top) - this.bounds.reveal.height; // new rotation value this.animatableProperties.rotation.current = this.firstRAFCycle ? 0 : map(mouseDistanceX,0,175,0,direction.x < 0 ? this.mouseArea === 'up' ? 60 : -60 : this.mouseArea === 'up' ? -60 : 60); // new filter value this.animatableProperties.brightness.current = this.firstRAFCycle ? 1 : map(mouseDistanceX,0,100,1,8); // set up the interpolated values // for the first cycle, both the interpolated values need to be the same so there's no "lerped" animation between the previous and current state this.animatableProperties.tx.previous = this.firstRAFCycle ? this.animatableProperties.tx.current : lerp(this.animatableProperties.tx.previous, this.animatableProperties.tx.current, this.animatableProperties.tx.amt); this.animatableProperties.ty.previous = this.firstRAFCycle ? this.animatableProperties.ty.current : lerp(this.animatableProperties.ty.previous, this.animatableProperties.ty.current, this.animatableProperties.ty.amt); this.animatableProperties.rotation.previous = this.firstRAFCycle ? this.animatableProperties.rotation.current : lerp(this.animatableProperties.rotation.previous, this.animatableProperties.rotation.current, this.animatableProperties.rotation.amt); this.animatableProperties.brightness.previous = this.firstRAFCycle ? this.animatableProperties.brightness.current : lerp(this.animatableProperties.brightness.previous, this.animatableProperties.brightness.current, this.animatableProperties.brightness.amt); // set styles gsap.set(this.DOM.reveal, { x: this.animatableProperties.tx.previous, y: this.animatableProperties.ty.previous, rotation: this.animatableProperties.rotation.previous, filter: `brightness(${this.animatableProperties.brightness.previous})` }); // loop this.firstRAFCycle = false; this.loopRender(); } } [V0_FILE]javascript:file="src/js/demo2/index.js" import Cursor from '../cursor'; import {preloader} from '../preloader'; import LocomotiveScroll from 'locomotive-scroll'; import Menu from './menu'; // menu (
element) const menuEl = document.querySelector('.menu'); // preload the images set as data attrs in the menu items preloader('.menu__item').then(() => { // initialize the smooth scroll const scroll = new LocomotiveScroll({el: menuEl, smooth: true}); // initialize custom cursor const cursor = new Cursor(document.querySelector('.cursor')); // initialize menu new Menu(menuEl); }); [V0_FILE]javascript:file="src/js/demo2/menu.js" import {gsap} from 'gsap'; import MenuItem from './menuItem'; export default class Menu { constructor(el) { // el is the menu element (
) this.DOM = {el: el}; // the menu item elements () this.DOM.menuItems = this.DOM.el.querySelectorAll('.menu__item'); // menu item properties that will animate as we move the mouse around the menu // we will be using interpolation to achieve smooth animations. // the “previous” and “current” values are the values to interpolate. // the value applied to the element, this case the image element (this.DOM.reveal) will be a value between these two values at a specific increment. // the amt is the amount to interpolate. this.animatableProperties = { // translationX tx: {previous: 0, current: 0, amt: 0.08}, // translationY ty: {previous: 0, current: 0, amt: 0.08}, // Rotation angle rotation: {previous: 0, current: 0, amt: 0.04}, // CSS filter (brightness) value brightness: {previous: 1, current: 1, amt: 0.08}, }; // array of MenuItem instances this.menuItems = []; // initialize the MenuItems [...this.DOM.menuItems].forEach((item, pos) => this.menuItems.push(new MenuItem(item, pos, this.animatableProperties))); // show the menu items (initial animation where each menu item gets revealed) this.showMenuItems(); } // initial animation for revealing the menu items showMenuItems() { gsap.to(this.menuItems.map(item => item.DOM.textInner), { duration: 1.2, ease: 'Expo.easeOut', startAt: {y: '100%'}, y: 0, delay: pos => pos*0.06 }); } } [V0_FILE]javascript:file="src/js/demo2/menuItem.js" import {gsap} from 'gsap'; import { map, lerp, clamp, getMousePos } from '../utils'; const images = Object.entries(require('../../img/demo2/*.jpg')); // track the mouse position let mousepos = {x: 0, y: 0}; // cache the mouse position let mousePosCache = mousepos; let direction = {x: mousePosCache.x-mousepos.x, y: mousePosCache.y-mousepos.y}; // update mouse position when moving the mouse window.addEventListener('mousemove', ev => mousepos = getMousePos(ev)); export default class MenuItem { constructor(el, inMenuPosition, animatableProperties) { // el is the with class "menu__item" this.DOM = {el: el}; // position in the Menu this.inMenuPosition = inMenuPosition; // menu item properties that will animate as we move the mouse around the menu this.animatableProperties = animatableProperties; // the item text this.DOM.textInner = this.DOM.el.querySelector('.menu__item-textinner'); // create the image structure this.layout(); // initialize some events this.initEvents(); } // create the image structure // we want to add/append to the menu item the following html: //
//
//
//
//
//
layout() { // this is the element that gets its position animated (and perhaps other properties like the rotation etc..) this.DOM.reveal = document.createElement('div'); this.DOM.reveal.className = 'hover-reveal'; this.DOM.reveal.style.transformOrigin = '0% 0%'; // the next two elements could actually be only one, the image element // adding an extra wrapper (revealInner) around the image element with overflow hidden, gives us the possibility to scale the image inside this.DOM.revealInner = document.createElement('div'); this.DOM.revealInner.className = 'hover-reveal__inner'; this.DOM.revealImage = document.createElement('div'); this.DOM.revealImage.className = 'hover-reveal__img'; this.DOM.revealImage.style.backgroundImage = `url(${images[this.inMenuPosition][1]})`; this.DOM.revealInner.appendChild(this.DOM.revealImage); this.DOM.reveal.appendChild(this.DOM.revealInner); this.DOM.el.appendChild(this.DOM.reveal); } // calculate the position/size of both the menu item and reveal element calcBounds() { this.bounds = { el: this.DOM.el.getBoundingClientRect(), reveal: this.DOM.reveal.getBoundingClientRect() }; } // bind some events initEvents() { this.mouseenterFn = (ev) => { // show the image element this.showImage(); this.firstRAFCycle = true; // start the render loop animation (rAF) this.loopRender(); }; this.mouseleaveFn = () => { // stop the render loop animation (rAF) this.stopRendering(); // hide the image element this.hideImage(); }; this.DOM.el.addEventListener('mouseenter', this.mouseenterFn); this.DOM.el.addEventListener('mouseleave', this.mouseleaveFn); } // show the image element showImage() { // kill any current tweens gsap.killTweensOf(this.DOM.revealInner); gsap.killTweensOf(this.DOM.revealImage); this.tl = gsap.timeline({ onStart: () => { // show both image and its parent element this.DOM.reveal.style.opacity = this.DOM.revealInner.style.opacity = 1; // set a high z-index value so image appears on top of other elements gsap.set(this.DOM.el, {zIndex: images.length}); } }) // animate the image wrap .to(this.DOM.revealInner, 1.2, { ease: 'Expo.easeOut', startAt: {scale: 0.3}, scale: 1 }) // animate the image element .to(this.DOM.revealImage, 1.2, { ease: 'Expo.easeOut', startAt: {scale: 1.7}, scale: 1 }, 0); } // hide the image element hideImage() { // kill any current tweens gsap.killTweensOf(this.DOM.revealInner); gsap.killTweensOf(this.DOM.revealImage); this.tl = gsap.timeline({ onStart: () => { gsap.set(this.DOM.el, {zIndex: 1}); }, onComplete: () => { gsap.set(this.DOM.reveal, {opacity: 0}); } }) .to(this.DOM.revealInner, 1.8, { ease: 'Power3.easeOut', scale: 0.3, opacity: 0 }) .to(this.DOM.revealImage, 1.8, { ease: 'Power3.easeOut', scale: 1.7 }, 0); } // start the render loop animation (rAF) loopRender() { if ( !this.requestId ) { this.requestId = requestAnimationFrame(() => this.render()); } } // stop the render loop animation (rAF) stopRendering() { if ( this.requestId ) { window.cancelAnimationFrame(this.requestId); this.requestId = undefined; } } // translate the item as the mouse moves render() { this.requestId = undefined; if ( this.firstRAFCycle ) { // calculate position/sizes the first time this.calcBounds(); } // calculate the mouse distance (current vs previous cycle) const mouseDistanceX = clamp(Math.abs(mousePosCache.x - mousepos.x), 0, 100); // direction where the mouse is moving direction = {x: mousePosCache.x-mousepos.x, y: mousePosCache.y-mousepos.y}; // updated cache values mousePosCache = {x: mousepos.x, y: mousepos.y}; // new translation values this.animatableProperties.tx.current = Math.abs(mousepos.x - this.bounds.el.left) - this.bounds.reveal.width/2; this.animatableProperties.ty.current = Math.abs(mousepos.y - this.bounds.el.top) - this.bounds.reveal.height/2; // new rotation value this.animatableProperties.rotation.current = this.firstRAFCycle ? 0 : map(mouseDistanceX,0,200,0,direction.x < 0 ? 60 : -60); // new filter value this.animatableProperties.brightness.current = this.firstRAFCycle ? 1 : map(mouseDistanceX,0,100,1,3); // set up the interpolated values // for the first cycle, both the interpolated values need to be the same so there's no "lerped" animation between the previous and current state this.animatableProperties.tx.previous = this.firstRAFCycle ? this.animatableProperties.tx.current : lerp(this.animatableProperties.tx.previous, this.animatableProperties.tx.current, this.animatableProperties.tx.amt); this.animatableProperties.ty.previous = this.firstRAFCycle ? this.animatableProperties.ty.current : lerp(this.animatableProperties.ty.previous, this.animatableProperties.ty.current, this.animatableProperties.ty.amt); this.animatableProperties.rotation.previous = this.firstRAFCycle ? this.animatableProperties.rotation.current : lerp(this.animatableProperties.rotation.previous, this.animatableProperties.rotation.current, this.animatableProperties.rotation.amt); this.animatableProperties.brightness.previous = this.firstRAFCycle ? this.animatableProperties.brightness.current : lerp(this.animatableProperties.brightness.previous, this.animatableProperties.brightness.current, this.animatableProperties.brightness.amt); // set styles gsap.set(this.DOM.reveal, { x: this.animatableProperties.tx.previous, y: this.animatableProperties.ty.previous, rotation: this.animatableProperties.rotation.previous, filter: `brightness(${this.animatableProperties.brightness.previous})` }); // loop this.firstRAFCycle = false; this.loopRender(); } } [V0_FILE]javascript:file="src/js/demo3/index.js" import Cursor from '../cursor'; import {preloader} from '../preloader'; import LocomotiveScroll from 'locomotive-scroll'; import Menu from './menu'; // menu (
element) const menuEl = document.querySelector('.menu'); // preload the images set as data attrs in the menu items preloader('.menu__item').then(() => { // initialize the smooth scroll const scroll = new LocomotiveScroll({el: menuEl, smooth: true}); // initialize custom cursor const cursor = new Cursor(document.querySelector('.cursor')); // initialize menu new Menu(menuEl); }); [V0_FILE]javascript:file="src/js/demo3/menu.js" import {gsap} from 'gsap'; import MenuItem from './menuItem'; export default class Menu { constructor(el) { // el is the menu element (
) this.DOM = {el: el}; // the menu item elements () this.DOM.menuItems = this.DOM.el.querySelectorAll('.menu__item'); // menu item properties that will animate as we move the mouse around the menu // we will be using interpolation to achieve smooth animations. // the “previous” and “current” values are the values to interpolate. // the value applied to the element, this case the image element (this.DOM.reveal) will be a value between these two values at a specific increment. // the amt is the amount to interpolate. this.animatableProperties = { // translationX tx: {previous: 0, current: 0, amt: 0.08}, // translationY ty: {previous: 0, current: 0, amt: 0.08}, // skew value skew: {previous: 0, current: 0, amt: 0.04}, // CSS filter (contrast) value contrast: {previous: 1, current: 1, amt: 0.08}, }; // array of MenuItem instances this.menuItems = []; // initialize the MenuItems [...this.DOM.menuItems].forEach((item, pos) => this.menuItems.push(new MenuItem(item, pos, this.animatableProperties))); // show the menu items (initial animation where each menu item gets revealed) this.showMenuItems(); } // initial animation for revealing the menu items showMenuItems() { gsap.to(this.menuItems.map(item => item.DOM.textInner), { duration: 1.2, ease: 'Expo.easeOut', startAt: {y: '100%'}, y: 0, delay: pos => pos*0.06 }); } } [V0_FILE]javascript:file="src/js/demo3/menuItem.js" import {gsap} from 'gsap'; import { map, lerp, clamp, getMousePos } from '../utils'; const images = Object.entries(require('../../img/demo3/*.jpg')); // track the mouse position let mousepos = {x: 0, y: 0}; // cache the mouse position let mousePosCache = mousepos; let direction = {x: mousePosCache.x-mousepos.x, y: mousePosCache.y-mousepos.y}; // update mouse position when moving the mouse window.addEventListener('mousemove', ev => mousepos = getMousePos(ev)); export default class MenuItem { constructor(el, inMenuPosition, animatableProperties) { // el is the with class "menu__item" this.DOM = {el: el}; // position in the Menu this.inMenuPosition = inMenuPosition; // menu item properties that will animate as we move the mouse around the menu this.animatableProperties = animatableProperties; // the item text this.DOM.textInner = this.DOM.el.querySelector('.menu__item-textinner'); // create the image structure this.layout(); // initialize some events this.initEvents(); } // create the image structure // we want to add/append to the menu item the following html: //
//
//
//
//
//
layout() { // this is the element that gets its position animated (and perhaps other properties like the skew etc..) this.DOM.reveal = document.createElement('div'); this.DOM.reveal.className = 'hover-reveal'; // the next two elements could actually be only one, the image element // adding an extra wrapper (revealInner) around the image element with overflow hidden, gives us the possibility to scale the image inside this.DOM.revealInner = document.createElement('div'); this.DOM.revealInner.className = 'hover-reveal__inner'; this.DOM.revealImage = document.createElement('div'); this.DOM.revealImage.className = 'hover-reveal__img'; this.DOM.revealImage.style.backgroundImage = `url(${images[this.inMenuPosition][1]})`; this.DOM.revealInner.appendChild(this.DOM.revealImage); this.DOM.reveal.appendChild(this.DOM.revealInner); this.DOM.el.appendChild(this.DOM.reveal); } // calculate the position/size of both the menu item and reveal element calcBounds() { this.bounds = { el: this.DOM.el.getBoundingClientRect(), reveal: this.DOM.reveal.getBoundingClientRect() }; } // bind some events initEvents() { this.mouseenterFn = (ev) => { // show the image element this.showImage(); this.firstRAFCycle = true; // start the render loop animation (rAF) this.loopRender(); }; this.mouseleaveFn = () => { // stop the render loop animation (rAF) this.stopRendering(); // hide the image element this.hideImage(); }; this.DOM.el.addEventListener('mouseenter', this.mouseenterFn); this.DOM.el.addEventListener('mouseleave', this.mouseleaveFn); } // show the image element showImage() { // kill any current tweens gsap.killTweensOf(this.DOM.revealInner); gsap.killTweensOf(this.DOM.revealImage); this.tl = gsap.timeline({ onStart: () => { // show both image and its parent element this.DOM.reveal.style.opacity = this.DOM.revealInner.style.opacity = 1; // set a high z-index value so image appears on top of other elements gsap.set(this.DOM.el, {zIndex: images.length}); } }) // animate the image wrap .to(this.DOM.revealInner, 0.8, { ease: 'Expo.easeOut', startAt: {scaleX: 0, filter: 'contrast(10)'}, scaleX: 1, filter: 'contrast(1)' }) // animate the image element .to(this.DOM.revealImage, 1.2, { ease: 'Expo.easeOut', startAt: {scaleX: 2}, scaleX: 1 }, 0); } // hide the image element hideImage() { // kill any current tweens gsap.killTweensOf(this.DOM.revealInner); gsap.killTweensOf(this.DOM.revealImage); this.tl = gsap.timeline({ onStart: () => { gsap.set(this.DOM.el, {zIndex: 1}); }, onComplete: () => { gsap.set(this.DOM.reveal, {opacity: 0}); } }) .to(this.DOM.revealInner, 0.6, { ease: 'Expo.easeOut', scaleX: 0, opacity: 0 }) .to(this.DOM.revealImage, 0.6, { ease: 'Expo.easeOut', scaleX: 2 }, 0); } // start the render loop animation (rAF) loopRender() { if ( !this.requestId ) { this.requestId = requestAnimationFrame(() => this.render()); } } // stop the render loop animation (rAF) stopRendering() { if ( this.requestId ) { window.cancelAnimationFrame(this.requestId); this.requestId = undefined; } } // translate the item as the mouse moves render() { this.requestId = undefined; if ( this.firstRAFCycle ) { // calculate position/sizes the first time this.calcBounds(); } // calculate the mouse distance (current vs previous cycle) const mouseDistanceX = clamp(Math.abs(mousePosCache.x - mousepos.x), 0, 100); // direction where the mouse is moving direction = {x: mousePosCache.x-mousepos.x, y: mousePosCache.y-mousepos.y}; // updated cache values mousePosCache = {x: mousepos.x, y: mousepos.y}; // new translation values this.animatableProperties.tx.current = Math.abs(mousepos.x - this.bounds.el.left) - this.bounds.reveal.width/2; this.animatableProperties.ty.current = Math.abs(mousepos.y - this.bounds.el.top) - this.bounds.reveal.height/2; // new skew value this.animatableProperties.skew.current = this.firstRAFCycle ? 0 : map(mouseDistanceX,0,80,0,direction.x < 0 ? 60 : -60); // new filter value this.animatableProperties.contrast.current = this.firstRAFCycle ? 1 : map(mouseDistanceX,0,100,1,10); // set up the interpolated values // for the first cycle, both the interpolated values need to be the same so there's no "lerped" animation between the previous and current state this.animatableProperties.tx.previous = this.firstRAFCycle ? this.animatableProperties.tx.current : lerp(this.animatableProperties.tx.previous, this.animatableProperties.tx.current, this.animatableProperties.tx.amt); this.animatableProperties.ty.previous = this.firstRAFCycle ? this.animatableProperties.ty.current : lerp(this.animatableProperties.ty.previous, this.animatableProperties.ty.current, this.animatableProperties.ty.amt); this.animatableProperties.skew.previous = this.firstRAFCycle ? this.animatableProperties.skew.current : lerp(this.animatableProperties.skew.previous, this.animatableProperties.skew.current, this.animatableProperties.skew.amt); this.animatableProperties.contrast.previous = this.firstRAFCycle ? this.animatableProperties.contrast.current : lerp(this.animatableProperties.contrast.previous, this.animatableProperties.contrast.current, this.animatableProperties.contrast.amt); // set styles gsap.set(this.DOM.reveal, { x: this.animatableProperties.tx.previous, y: this.animatableProperties.ty.previous, skewX: this.animatableProperties.skew.previous, skewY: this.animatableProperties.skew.previous/10, filter: `contrast(${this.animatableProperties.contrast.previous})` }); // loop this.firstRAFCycle = false; this.loopRender(); } } [V0_FILE]javascript:file="src/js/demo4/index.js" import Cursor from '../cursor'; import {preloader} from '../preloader'; import LocomotiveScroll from 'locomotive-scroll'; import Menu from './menu'; // menu (
element) const menuEl = document.querySelector('.menu'); // preload the images set as data attrs in the menu items preloader('.menu__item').then(() => { // initialize the smooth scroll const scroll = new LocomotiveScroll({el: menuEl, smooth: true}); // initialize custom cursor const cursor = new Cursor(document.querySelector('.cursor')); // initialize menu new Menu(menuEl); }); [V0_FILE]javascript:file="src/js/demo4/menu.js" import {gsap} from 'gsap'; import MenuItem from './menuItem'; export default class Menu { constructor(el) { // el is the menu element (
) this.DOM = {el: el}; // the menu item elements () this.DOM.menuItems = this.DOM.el.querySelectorAll('.menu__item'); // menu item properties that will animate as we move the mouse around the menu // we will be using interpolation to achieve smooth animations. // the “previous” and “current” values are the values to interpolate. // the value applied to the element, this case the image element (this.DOM.reveal) will be a value between these two values at a specific increment. // the amt is the amount to interpolate. this.animatableProperties = { // translationX tx: {previous: 0, current: 0, amt: 0.08}, // translationY ty: {previous: 0, current: 0, amt: 0.08}, // scale value scale: {previous: 1, current: 1, amt: 0.05}, // CSS filter (saturate) value saturate: {previous: 1, current: 1, amt: 0.05}, }; // array of MenuItem instances this.menuItems = []; // initialize the MenuItems [...this.DOM.menuItems].forEach((item, pos) => this.menuItems.push(new MenuItem(item, pos, this.animatableProperties))); // show the menu items (initial animation where each menu item gets revealed) this.showMenuItems(); } // initial animation for revealing the menu items showMenuItems() { gsap.to(this.menuItems.map(item => item.DOM.textInner), { duration: 1.2, ease: 'Expo.easeOut', startAt: {y: '100%'}, y: 0, delay: pos => pos*0.06 }); } } [V0_FILE]javascript:file="src/js/demo4/menuItem.js" import {gsap} from 'gsap'; import { map, lerp, clamp, getMousePos, getRandomFloat } from '../utils'; const images = Object.entries(require('../../img/demo4/*.jpg')); // track the mouse position let mousepos = {x: 0, y: 0}; // cache the mouse position let mousePosCache = mousepos; let direction = {x: mousePosCache.x-mousepos.x, y: mousePosCache.y-mousepos.y}; // update mouse position when moving the mouse window.addEventListener('mousemove', ev => mousepos = getMousePos(ev)); export default class MenuItem { constructor(el, inMenuPosition, animatableProperties) { // el is the with class "menu__item" this.DOM = {el: el}; // position in the Menu this.inMenuPosition = inMenuPosition; // menu item properties that will animate as we move the mouse around the menu this.animatableProperties = animatableProperties; // the item text this.DOM.textInner = this.DOM.el.querySelector('.menu__item-textinner'); // create the image structure this.layout(); // initialize some events this.initEvents(); } // create the image structure // we want to add/append to the menu item the following html: //
//
//
layout() { // this is the element that gets its position animated (and perhaps other properties like the skew etc..) this.DOM.reveal = document.createElement('div'); this.DOM.reveal.className = 'hover-reveal'; this.totalImages = 5; let inner = ''; for (let i = 0; i <= this.totalImages-1; ++i) { inner += i === this.totalImages-1 ? `
` : `
`; } this.DOM.reveal.innerHTML = inner; this.DOM.el.appendChild(this.DOM.reveal); this.DOM.revealImgs = [...this.DOM.reveal.querySelectorAll('.hover-reveal__img')]; } // calculate the position/size of both the menu item and reveal element calcBounds() { this.bounds = { el: this.DOM.el.getBoundingClientRect(), reveal: this.DOM.reveal.getBoundingClientRect() }; } // bind some events initEvents() { this.mouseenterFn = (ev) => { // show the image element this.showImage(); this.firstRAFCycle = true; // start the render loop animation (rAF) this.loopRender(); }; this.mouseleaveFn = () => { // stop the render loop animation (rAF) this.stopRendering(); // hide the image element this.hideImage(); }; this.DOM.el.addEventListener('mouseenter', this.mouseenterFn); this.DOM.el.addEventListener('mouseleave', this.mouseleaveFn); } // show the image element showImage() { // kill any current tweens gsap.killTweensOf(this.DOM.revealImgs); this.tl = gsap.timeline({ onStart: () => { this.DOM.reveal.style.opacity = 1; // set a high z-index value so image appears on top of other elements gsap.set(this.DOM.el, {zIndex: images.length}); } }) .set(this.DOM.revealImgs, { opacity: 0 }, 0); for (let i = 0; i <= this.totalImages-1; ++i) { gsap.set(this.DOM.revealImgs[i], { x: i === this.totalImages-1 ? '0%' : `${getRandomFloat(-40,40)}%`, y: i === this.totalImages-1 ? '0%' : `${getRandomFloat(-40,40)}%`, rotation: `${i === this.totalImages-1 ? 0 : getRandomFloat(-10,10)}` }); this.tl.to(this.DOM.revealImgs[i], 0.2, { ease: 'Quad.easeOut', startAt: {opacity: 1}, opacity: i === this.totalImages-1 ? 1 : 0 }, i*0.05); } } // hide the image element hideImage() { // kill any current tweens gsap.killTweensOf(this.DOM.revealImgs); this.tl = gsap.timeline({ onStart: () => { gsap.set(this.DOM.el, {zIndex: 1}); }, onComplete: () => { gsap.set(this.DOM.reveal, {opacity: 0}); } }) .to(this.DOM.revealImgs, 0.15, { ease: 'Sine.easeOut', opacity: 0 }); } // start the render loop animation (rAF) loopRender() { if ( !this.requestId ) { this.requestId = requestAnimationFrame(() => this.render()); } } // stop the render loop animation (rAF) stopRendering() { if ( this.requestId ) { window.cancelAnimationFrame(this.requestId); this.requestId = undefined; } } // translate the item as the mouse moves render() { this.requestId = undefined; if ( this.firstRAFCycle ) { // calculate position/sizes the first time this.calcBounds(); } // calculate the mouse distance (current vs previous cycle) const mouseDistanceX = clamp(Math.abs(mousePosCache.x - mousepos.x), 0, 100); // direction where the mouse is moving direction = {x: mousePosCache.x-mousepos.x, y: mousePosCache.y-mousepos.y}; // updated cache values mousePosCache = {x: mousepos.x, y: mousepos.y}; // new translation values this.animatableProperties.tx.current = Math.abs(mousepos.x - this.bounds.el.left) - this.bounds.reveal.width/2; this.animatableProperties.ty.current = Math.abs(mousepos.y - this.bounds.el.top) - this.bounds.reveal.height/2; // new scale value this.animatableProperties.scale.current = this.firstRAFCycle ? 1 : map(mouseDistanceX,0,80,1,5); // new filter value this.animatableProperties.saturate.current = this.firstRAFCycle ? 1 : map(mouseDistanceX,0,10,1,0); // set up the interpolated values // for the first cycle, both the interpolated values need to be the same so there's no "lerped" animation between the previous and current state this.animatableProperties.tx.previous = this.firstRAFCycle ? this.animatableProperties.tx.current : lerp(this.animatableProperties.tx.previous, this.animatableProperties.tx.current, this.animatableProperties.tx.amt); this.animatableProperties.ty.previous = this.firstRAFCycle ? this.animatableProperties.ty.current : lerp(this.animatableProperties.ty.previous, this.animatableProperties.ty.current, this.animatableProperties.ty.amt); this.animatableProperties.scale.previous = this.firstRAFCycle ? this.animatableProperties.scale.current : lerp(this.animatableProperties.scale.previous, this.animatableProperties.scale.current, this.animatableProperties.scale.amt); this.animatableProperties.saturate.previous = this.firstRAFCycle ? this.animatableProperties.saturate.current : lerp(this.animatableProperties.saturate.previous, this.animatableProperties.saturate.current, this.animatableProperties.saturate.amt); // set styles gsap.set(this.DOM.reveal, { x: this.animatableProperties.tx.previous, y: this.animatableProperties.ty.previous, //scaleX: this.animatableProperties.scale.previous, //scaleY: map(this.animatableProperties.scale.previous,1,5,1,0.1), filter: `saturate(${this.animatableProperties.saturate.previous})` }); gsap.set(this.DOM.revealImgs, { scaleX: this.animatableProperties.scale.previous, scaleY: map(this.animatableProperties.scale.previous,1,5,1,0.1) }); // loop this.firstRAFCycle = false; this.loopRender(); } } [V0_FILE]javascript:file="src/js/demo5/index.js" import Cursor from '../cursor'; import {preloader} from '../preloader'; import LocomotiveScroll from 'locomotive-scroll'; import Menu from './menu'; // menu (
element) const menuEl = document.querySelector('.menu'); // preload the images set as data attrs in the menu items preloader('.menu__item').then(() => { // initialize the smooth scroll const scroll = new LocomotiveScroll({el: menuEl, smooth: true}); // initialize custom cursor const cursor = new Cursor(document.querySelector('.cursor')); // initialize menu new Menu(menuEl); }); [V0_FILE]javascript:file="src/js/demo5/menu.js" import {gsap} from 'gsap'; import MenuItem from './menuItem'; export default class Menu { constructor(el) { // el is the menu element (
) this.DOM = {el: el}; // the menu item elements () this.DOM.menuItems = this.DOM.el.querySelectorAll('.menu__item'); // menu item properties that will animate as we move the mouse around the menu // we will be using interpolation to achieve smooth animations. // the “previous” and “current” values are the values to interpolate. // the value applied to the element, this case the image element (this.DOM.reveal) will be a value between these two values at a specific increment. // the amt is the amount to interpolate. this.animatableProperties = { // translationX tx: {previous: 0, current: 0, amt: 0.08}, // translationY ty: {previous: 0, current: 0, amt: 0.08}, // Rotation angle rotation: {previous: 0, current: 0, amt: 0.06} }; // array of MenuItem instances this.menuItems = []; // initialize the MenuItems [...this.DOM.menuItems].forEach((item, pos) => this.menuItems.push(new MenuItem(item, pos, this.animatableProperties))); // show the menu items (initial animation where each menu item gets revealed) this.showMenuItems(); } // initial animation for revealing the menu items showMenuItems() { gsap.to(this.menuItems.map(item => item.DOM.textInner), { duration: 1.2, ease: 'Expo.easeOut', startAt: {y: '100%'}, y: 0, delay: pos => pos*0.06 }); } } [V0_FILE]javascript:file="src/js/demo5/menuItem.js" import {gsap} from 'gsap'; import { map, lerp, clamp, getMousePos } from '../utils'; const images = Object.entries(require('../../img/demo5/*.jpg')); // track the mouse position let mousepos = {x: 0, y: 0}; // update mouse position when moving the mouse window.addEventListener('mousemove', ev => mousepos = getMousePos(ev)); export default class MenuItem { constructor(el, inMenuPosition, animatableProperties) { // el is the with class "menu__item" this.DOM = {el: el}; // position in the Menu this.inMenuPosition = inMenuPosition; // menu item properties that will animate as we move the mouse around the menu this.animatableProperties = animatableProperties; // the item text this.DOM.textInner = this.DOM.el.querySelector('.menu__item-textinner'); // create the image structure this.layout(); // initialize some events this.initEvents(); } // create the image structure // we want to add/append to the menu item the following html: //
//
//
//
//
//
layout() { // this is the element that gets its position animated (and perhaps other properties like the rotation etc..) this.DOM.reveal = document.createElement('div'); this.DOM.reveal.className = 'hover-reveal'; this.DOM.reveal.style.perspective = '1000px'; // the next two elements could actually be only one, the image element // adding an extra wrapper (revealInner) around the image element with overflow hidden, gives us the possibility to scale the image inside this.DOM.revealInner = document.createElement('div'); this.DOM.revealInner.className = 'hover-reveal__inner'; this.DOM.revealImage = document.createElement('div'); this.DOM.revealImage.className = 'hover-reveal__img'; this.DOM.revealImage.style.backgroundImage = `url(${images[this.inMenuPosition][1]})`; this.DOM.revealInner.appendChild(this.DOM.revealImage); this.DOM.reveal.appendChild(this.DOM.revealInner); this.DOM.el.appendChild(this.DOM.reveal); } // calculate the position/size of both the menu item and reveal element calcBounds() { this.bounds = { el: this.DOM.el.getBoundingClientRect(), reveal: this.DOM.reveal.getBoundingClientRect() }; } // bind some events initEvents() { this.mouseenterFn = (ev) => { // show the image element this.showImage(); this.firstRAFCycle = true; // start the render loop animation (rAF) this.loopRender(); }; this.mouseleaveFn = () => { // stop the render loop animation (rAF) this.stopRendering(); // hide the image element this.hideImage(); }; this.DOM.el.addEventListener('mouseenter', this.mouseenterFn); this.DOM.el.addEventListener('mouseleave', this.mouseleaveFn); } // show the image element showImage() { // kill any current tweens gsap.killTweensOf(this.DOM.revealInner); gsap.killTweensOf(this.DOM.revealImage); this.tl = gsap.timeline({ onStart: () => { // show both image and its parent element this.DOM.reveal.style.opacity = this.DOM.revealInner.style.opacity = 1; // set a high z-index value so image appears on top of other elements gsap.set(this.DOM.el, {zIndex: images.length}); } }) // animate the image wrap .to(this.DOM.revealInner, 1.2, { ease: 'Expo.easeOut', startAt: {rotationY: -90, scale: 0.7}, rotationY: 0, scale: 1 }) .to(this.DOM.revealImage, 1.2, { ease: 'Expo.easeOut', startAt: {scale: 1.3, filter: 'blur(8px) brightness(2)'}, scale: 1, filter: 'blur(0px) brightness(1)' }, 0); } // hide the image element hideImage() { // kill any current tweens gsap.killTweensOf(this.DOM.revealInner); gsap.killTweensOf(this.DOM.revealImage); this.tl = gsap.timeline({ onStart: () => { gsap.set(this.DOM.el, {zIndex: 1}); }, onComplete: () => { gsap.set(this.DOM.reveal, {opacity: 0}); } }) .to(this.DOM.revealInner, 0.5, { ease: 'Expo.easeOut', rotationY: 90, opacity: 0 }) } // start the render loop animation (rAF) loopRender() { if ( !this.requestId ) { this.requestId = requestAnimationFrame(() => this.render()); } } // stop the render loop animation (rAF) stopRendering() { if ( this.requestId ) { window.cancelAnimationFrame(this.requestId); this.requestId = undefined; } } // translate the item as the mouse moves render() { this.requestId = undefined; if ( this.firstRAFCycle ) { // calculate position/sizes the first time this.calcBounds(); } // new translation values this.animatableProperties.tx.current = Math.abs(mousepos.x - this.bounds.el.left) - this.bounds.reveal.width/2; this.animatableProperties.ty.current = Math.abs(mousepos.y - this.bounds.el.top) - this.bounds.reveal.height/2; // new rotation value this.animatableProperties.rotation.current = map(Math.abs(mousepos.x - this.bounds.el.left),0,this.bounds.el.left+this.bounds.el.width,-20,20); // set up the interpolated values // for the first cycle, both the interpolated values need to be the same so there's no "lerped" animation between the previous and current state this.animatableProperties.tx.previous = this.firstRAFCycle ? this.animatableProperties.tx.current : lerp(this.animatableProperties.tx.previous, this.animatableProperties.tx.current, this.animatableProperties.tx.amt); this.animatableProperties.ty.previous = this.firstRAFCycle ? this.animatableProperties.ty.current : lerp(this.animatableProperties.ty.previous, this.animatableProperties.ty.current, this.animatableProperties.ty.amt); this.animatableProperties.rotation.previous = this.firstRAFCycle ? this.animatableProperties.rotation.current : lerp(this.animatableProperties.rotation.previous, this.animatableProperties.rotation.current, this.animatableProperties.rotation.amt); // set styles gsap.set(this.DOM.reveal, { x: this.animatableProperties.tx.previous, y: this.animatableProperties.ty.previous, rotation: this.animatableProperties.rotation.previous }); // loop this.firstRAFCycle = false; this.loopRender(); } } [V0_FILE]javascript:file="src/js/preloader.js" const imagesLoaded = require('imagesloaded'); const body = document.body; export const preloader = selector => { return new Promise(resolve => { const imgwrap = document.createElement('div'); imgwrap.style.visibility = 'hidden'; body.appendChild(imgwrap); [...document.querySelectorAll(selector)].forEach(el => { const imgEl = document.createElement('img'); imgEl.style.width = 0; imgEl.src = el.dataset.img; imgEl.className = 'preload'; imgwrap.appendChild(imgEl); }); imagesLoaded(document.querySelectorAll('.preload'), () => { imgwrap.parentNode.removeChild(imgwrap); body.classList.remove('loading'); resolve(); }); }); }; [V0_FILE]javascript:file="src/js/utils.js" // Map number x from range [a, b] to [c, d] const map = (x, a, b, c, d) => (x - a) * (d - c) / (b - a) + c; // Linear interpolation const lerp = (a, b, n) => (1 - n) * a + n * b; const clamp = (num, min, max) => num <= min ? min : num >= max ? max : num; // Gets the mouse position const getMousePos = (e) => { let posx = 0; let posy = 0; if (!e) e = window.event; if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX + body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + body.scrollTop + document.documentElement.scrollTop; } return { x : posx, y : posy } }; // Generate a random float. const getRandomFloat = (min, max) => (Math.random() * (max - min) + min).toFixed(2); export { map, lerp, clamp, getMousePos, getRandomFloat }; [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Menu Hover Effects", description: "Beautiful 3D image hover menu effects with GSAP animations", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/Frame.tsx" isQuickEdit="true" "use client" export default function Frame() { return null } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useEffect, useRef } from "react" import Menu from "@/components/Menu" import Cursor from "@/components/Cursor" export default function HomePage() { const menuRef = useRef(null) useEffect(() => { document.body.classList.remove("loading") }, []) return (

) } [V0_FILE]typescriptreact:file="components/Cursor.tsx" "use client" import { useEffect, useRef } from "react" import { gsap } from "gsap" export default function Cursor() { const cursorRef = useRef(null) const mousePos = useRef({ x: 0, y: 0 }) const renderedStyles = useRef({ tx: { previous: 0, current: 0, amt: 0.2 }, ty: { previous: 0, current: 0, amt: 0.2 }, }) useEffect(() => { const cursor = cursorRef.current if (!cursor) return cursor.style.opacity = "0" const bounds = cursor.getBoundingClientRect() const handleMouseMove = (e: MouseEvent) => { mousePos.current = { x: e.clientX, y: e.clientY } } const onFirstMouseMove = (e: MouseEvent) => { mousePos.current = { x: e.clientX, y: e.clientY } renderedStyles.current.tx.previous = renderedStyles.current.tx.current = e.clientX - bounds.width / 2 renderedStyles.current.ty.previous = renderedStyles.current.ty.current = e.clientY - bounds.height / 2 gsap.to(cursor, { duration: 0.9, ease: "power3.out", opacity: 0.7 }) const render = () => { renderedStyles.current.tx.current = mousePos.current.x - bounds.width / 2 renderedStyles.current.ty.current = mousePos.current.y - bounds.height / 2 for (const key in renderedStyles.current) { const style = renderedStyles.current[key as keyof typeof renderedStyles.current] style.previous += (style.current - style.previous) * style.amt } cursor.style.transform = `translateX(${renderedStyles.current.tx.previous}px) translateY(${renderedStyles.current.ty.previous}px)` requestAnimationFrame(render) } requestAnimationFrame(render) window.removeEventListener("mousemove", onFirstMouseMove) window.addEventListener("mousemove", handleMouseMove) } // Check if device supports fine pointer (mouse) if (window.matchMedia("(any-pointer: fine)").matches) { window.addEventListener("mousemove", onFirstMouseMove) } return () => { window.removeEventListener("mousemove", onFirstMouseMove) window.removeEventListener("mousemove", handleMouseMove) } }, []) // Hide cursor on touch devices if (typeof window !== "undefined" && !window.matchMedia("(any-pointer: fine)").matches) { return null } return ( ) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; /* Prevent scrolling */ html, body { height: 100%; overflow: hidden; } /* Loading animation */ .loading::before, .loading::after { content: ""; position: fixed; z-index: 1000; } .loading::before { top: 0; left: 0; width: 100%; height: 100%; background: #ececee; } .loading::after { top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; opacity: 0.4; background: #6b3f24; animation: loaderAnim 0.7s linear infinite alternate forwards; border-radius: 50%; } @keyframes loaderAnim { to { opacity: 1; transform: scale3d(0.5, 0.5, 1); } } /* Typography fallbacks */ body { font-family: system-ui, -apple-system, sans-serif; background-color: #ececee; } /* Custom cursor styles */ .cursor { mix-blend-mode: difference; } /* Ensure images load smoothly */ img { transition: opacity 0.3s ease; } /* Responsive improvements */ @media (max-width: 768px) { .text-responsive-large { font-size: clamp(2rem, 8vw, 4rem); } .text-responsive-medium { font-size: clamp(1.5rem, 6vw, 3rem); } } [V0_FILE]typescriptreact:file="components/Menu.tsx" isQuickEdit="true" "use client" import { forwardRef, useEffect, useRef } from "react" import { gsap } from "gsap" import MenuItem from "./MenuItem" const menuItems = [ { name: "Gjergj", sub: "", img: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/360_F_96840332_9sgEXRkKlebotK6hA2Plr9eQ9aBAvbbu.jpg-WLXoNVwh0GOEevyzJuF8tfY7pHNoN4.jpeg", }, { name: "Ismail", sub: "", img: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cp6cbtczgpi41-BAKDp2Ry09hUNjKvmqZHLME20ekbl5.webp", }, ] const Menu = forwardRef((props, ref) => { const textInnerRefs = useRef<(HTMLSpanElement | null)[]>([]) useEffect(() => { const textInners = textInnerRefs.current.filter(Boolean) gsap.fromTo( textInners, { y: "100%" }, { duration: 1.2, ease: "expo.out", y: 0, stagger: 0.06, }, ) }, []) return (
{menuItems.map((item, index) => ( (textInnerRefs.current[index] = el)} /> ))}
) }) Menu.displayName = "Menu" export default Menu [V0_FILE]typescriptreact:file="components/MenuItem.tsx" isQuickEdit="true" "use client" import { useRef, useEffect, useState } from "react" import { gsap } from "gsap" interface MenuItemProps { item: { name: string sub: string img: string } index: number textInnerRef: (el: HTMLSpanElement | null) => void } export default function MenuItem({ item, index, textInnerRef }: MenuItemProps) { const itemRef = useRef(null) const revealRef = useRef(null) const revealInnerRef = useRef(null) const revealImageRef = useRef(null) const [isHovering, setIsHovering] = useState(false) const animationRef = useRef<{ requestId?: number; firstRAFCycle: boolean }>({ firstRAFCycle: true, }) const mousePos = useRef({ x: 0, y: 0 }) const bounds = useRef({ el: { left: 0, top: 0, width: 0, height: 0 }, reveal: { width: 0, height: 0 } }) const animatableProperties = useRef({ tx: { previous: 0, current: 0, amt: 0.08 }, ty: { previous: 0, current: 0, amt: 0.08 }, rotation: { previous: 0, current: 0, amt: 0.06 }, }) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { mousePos.current = { x: e.clientX, y: e.clientY } } window.addEventListener("mousemove", handleMouseMove) return () => window.removeEventListener("mousemove", handleMouseMove) }, []) const calcBounds = () => { if (itemRef.current && revealRef.current) { const elRect = itemRef.current.getBoundingClientRect() const revealRect = revealRef.current.getBoundingClientRect() bounds.current = { el: { left: elRect.left, top: elRect.top, width: elRect.width, height: elRect.height }, reveal: { width: revealRect.width, height: revealRect.height }, } } } const showImage = () => { if (!revealRef.current || !revealInnerRef.current || !revealImageRef.current) return gsap.killTweensOf([revealInnerRef.current, revealImageRef.current]) gsap.set(revealRef.current, { opacity: 1 }) gsap.set(itemRef.current, { zIndex: 100 }) const tl = gsap.timeline() tl.fromTo( revealInnerRef.current, { rotationY: -90, scale: 0.7, opacity: 1 }, { duration: 1.2, ease: "expo.out", rotationY: 0, scale: 1, opacity: 1 }, ).fromTo( revealImageRef.current, { scale: 1.3, filter: "blur(8px) brightness(2)" }, { duration: 1.2, ease: "expo.out", scale: 1, filter: "blur(0px) brightness(1)" }, 0, ) } const hideImage = () => { if (!revealRef.current || !revealInnerRef.current) return gsap.killTweensOf([revealInnerRef.current]) gsap.set(itemRef.current, { zIndex: 1 }) const tl = gsap.timeline({ onComplete: () => { gsap.set(revealRef.current, { opacity: 0 }) }, }) tl.to(revealInnerRef.current, { duration: 0.5, ease: "expo.out", rotationY: 90, opacity: 0, }) } const render = () => { animationRef.current.requestId = undefined if (animationRef.current.firstRAFCycle) { calcBounds() } // Position the image to the right of the text animatableProperties.current.tx.current = bounds.current.el.width + 20 // 20px gap from text animatableProperties.current.ty.current = bounds.current.el.height / 2 - bounds.current.reveal.height / 2 // Map rotation based on mouse position within element const relativeX = Math.abs(mousePos.current.x - bounds.current.el.left) const maxX = bounds.current.el.left + bounds.current.el.width animatableProperties.current.rotation.current = (relativeX / maxX - 0.5) * 40 // Lerp values for (const key in animatableProperties.current) { const prop = animatableProperties.current[key as keyof typeof animatableProperties.current] prop.previous = animationRef.current.firstRAFCycle ? prop.current : prop.previous + (prop.current - prop.previous) * prop.amt } if (revealRef.current) { gsap.set(revealRef.current, { x: animatableProperties.current.tx.previous, y: animatableProperties.current.ty.previous, rotation: animatableProperties.current.rotation.previous, }) } animationRef.current.firstRAFCycle = false if (isHovering) { animationRef.current.requestId = requestAnimationFrame(render) } } const startRendering = () => { if (!animationRef.current.requestId) { animationRef.current.requestId = requestAnimationFrame(render) } } const stopRendering = () => { if (animationRef.current.requestId) { cancelAnimationFrame(animationRef.current.requestId) animationRef.current.requestId = undefined } } const handleMouseEnter = () => { setIsHovering(true) animationRef.current.firstRAFCycle = true showImage() startRendering() } const handleMouseLeave = () => { setIsHovering(false) stopRendering() hideImage() } return (
{item.name}

) }

About

Tags

Share

About

Tags

Share

More from pohthedragonwarrior

More Templates Like This

About

Tags

Share

About

Tags

Share

More from pohthedragonwarrior

More Templates Like This