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