I recently came across this wonderful demo from CoDrops, Creating a Menu Image Animation on Hover | Codrops . I downloaded the source and went through it. I thought I could integrate this in WebFlow but I got stuck in Javascript.
In the javascript code, Mary Lou has hardcoded the input image files. For the life of me, I can’t figure out how to bypass that and simply read the image URL from the HTML itself. I can’t write Javascript to save my life.
So it seems I can’t read instructions to save my life. There wasn’t an issue with the code at all just operator problem. I had no idea what NPM was and it has taken me since my original post to now to work out node.js/npm etc.
I have managed to figure out how the example was put together and how I can bring it into my webflow project.
My question is do I need to do anything extra in order to ensure everything works on webflow end since in order to get the code to work on my computer I had to use NPM to build and run?
I finally managed to solve this problem. The solution was to leave it alone overnight and come back to it with a fresh set of eyes.
The original javascript files had a hardcoded value which referenced the image files directly. So I made it traverse the DOM structure and programmatically derive the image files. This also meant reconfiguring the original HTML. More specifically, instead of having “data-img” in the text-link, I added the img element inside the text-link child.
I rebuilt Mary’s project through NPM and now the new single javascript file in the “DIST” folder can be used for any project and host it directly within webflow with a txt extension added to it.
I might make a cloneable project next week in case there is someone else who is interested in using the “rapid image hover menu” idea in their own project.
At first, this seemed hard but taking a brute-force approach, I made it work!!.
