Example
Morphing Circle Menu
Description
Here's my example for this week's morph challenge. I've seen a lot of morph carousels but wanted to try something a little bit different. Each menu item has another circle directly behind it, so when you click on each menu option, upon the morph transition, the menu item and the circle behind move to their respective positions on each slide.
22 Replies
Beautiful and elegant, Elizabeth. A perfect example for this challenge.
Thank you! 🙂
Very clean and engaging! Would you be willing to share your .story file? I'm having a hard time putting together my first morph animation. Thanks!
Sure! It's attached here.
Thanks so much for sharing! I really like what you've done here!
Very nice!
Fantastic effect, Elizabeth. What really makes this work is not just the morph-in animation for each product but also the return animation, which adds even more sizzle. Thanks for sharing your source file.
Absolutely love the flow Elizabeth! Thank you for sharing the file to help visualize.
Fabulous Elizabeth! I wish I had tried "morph" earlier.
I had been working on a similar type of interaction using javascript, but had hit a snag in the test phase - after clicking on each button 3,4,5 times some items failed to relocate to their original positions. I can now breathe a sigh of relief and save a ton of time by using "morph" instead. Thank you!This is lovely! The way the elements move in and out, as well change their transparency is a really nice effect!
Love this!
REALLY like this one ! Thank you so much for sharing this. Love the Yukon Learning YT channel as well
Thanks Doug!
This is awesome, thank you for sharing it!
Getting Started with the E-Learning Challenges
Find practical answers to common questions about the E-Learning Challenges, a weekly event that helps you build skills, create your portfolio, and grow as an e-learning professional.