I am new to Webflow, and I’m trying to make a nav bar where the 3 bars to open the menu animate to an X when opened, and back to bars when closed. I’ve constructed a GIF that encapsulates the exact animation style I’m going for, but I don’t know how to integrate it. I’ve considered making a still image and adding an interaction where on click, set opacity to 0 to reveal the GIF, but the GIF cycles constantly. If the GIF would begin when clicked, I could easily split the GIF in half for each opening and closing animation.
To make matters more complicated, the GIF has an alpha channel, and the background is transparent, meaning the still frame alone will not cover the GIF lurking behind it.
Is this not possible?!
Look into building it as a Lotties instead.
Lotties are designed for animation and playback control, and Webflow’s interactions can control some aspects of the playback.