HTML <nav> <ul> <li class="item">Home</li> <li class="item">Content</li> <li class="item">About</li> <li class="item">Contact Us</li> </ul> </nav> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script> <script src="script.js"></script> CSS body{ background-color: #fff; overflow: hidden; } .container{ height: 100vh; display: flex; justify-content: center; align-items: center; } .item{ color: grey; font-size: large; font-weight: bolder; cursor: pointer; } JS let itemList = document.querySelectorAll(".item"); itemList.forEach(function (item, index) { let animation = gsap.to(item, {color: "black",x:3,y: -3, ease: "", duration:0.3, paused:true }) item.addEventListener("mouseenter", function() { animation.play() }) item.addEventListener("mouseleave", function() { animation.reverse() }) })
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter