Take a look at the mobile version of the Apple website. You’ll notice a two-line hamburger menu icon. When one taps/clicks on the burger icon, the menu items appear and the icon morphs into an X symbol. Tap/click the X symbol, and the menu closes while the X symbol morphs back into the two-line hamburger icon.
How can this be achieved in Sparkle?
Use the hamburger menu icon to trigger a popup. Inside the popup set the X icon to close the popup. The key to the illusion is to place the popup so the X icon is in the same position as the hamburger.
Does this produce the animated transition from burger to X and back, or is it more of an image swap effect?
The only way to tell for sure is to open the web page in Safari’s Develop menu. But, really it’s the simple beauty of pixel perfect precision alignment. Also, the black color of the menu bar, popup, and background is identical, thus hiding the popup. Apple’s design genius at work.
@mOehlschlager, Having had a look, and from what I can tell, you are looking at a CSS3.0 transition. So the two-line hamburger which is not an image and with CSS transition, morphs into the X symbol which is not an image. So with fancy CSS3 skills it is doable in Sparkle, but because Sparkle is a visual designer it would be easier using images and lining them pixel perfect over one another like how @thetravelhikelife describes.
You can always play with the Sparkle transitions to get close to the effect you see, or even better come up with you own take on it?..
I wonder whether one or two Lottie files could be used here.
@mOehlschlager, I’ve never tried that but if you do and it works please let us know about it! :)…
Hi Mart, I tried to download your menu file but nothing happens. Is there any chance to see how you solved the animation since the animated burger menu topic interests me a lot? Thanks very much in advance.
That’s because files are only kept for 30 days when uploaded by a free user. I uploaded the file again.
Thanks a lot! it will be very useful!