Forum Discussion

Jonathan_Hill's avatar
Jonathan_Hill
Super Hero
10 months ago

FREE: Coconut Shy tab interaction using new emphasis animations

Hey everyone!

For this year's E-Learning Heroes Tab Interaction Challenge, I have built this 'coconut shy' themed demo.


TRY IT HERE

I've used the new emphasis animations to add some kineticism and energy when each 'tab' is selected.

The ball appears to fall into the coconut shy as it is, in fact, two different balls. The falling ball only becomes visible when the thrown ball completes its journey and reverts to a hidden state. This creates the illusion of depth.


Although the content is about coconuts, this demo could easily be repurposed for other topics. And while not suitable for every project, I like the idea of making tab interactions a bit more fun where appropriate, to encourage learners to 'click next'. 

If you have questions, drop me a line!

Jon 

  • Not only is this a fantastic project, but it's also a masterclass on motion paths, variables, and conditional interactivity. Thanks, Jon.

  • Ok, this is amazing Jon! 🤩 I love how thoughtful you were about the animated effects. They made the content come to life. And you nailed the audio...it was so satisfying to click each coconut to learn the facts. Nicely done! 👏