riot ANIMATION

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.4.1/riot+compiler.min.js"></script>
<script src="https://raw.githack.com/any-code/riot-animation-context/master/animation-context.min.js"></script>
<my-riot-tag></my-riot-tag>
<script type="riot/tag">
<my-riot-tag>
    <!-- animate anything inside the animation context -->
    <animation-context name="animator"
        animate-on-mount="true" 
        animate-infinitely="false" 
        animate-in="rubberBand" 
        animate-out="lightSpeedOut"
        >
        <button onclick={ parent.becomeAwesome }>CLICK ME TO <em>BECOME AWESOME</em></button>
    </animation-context>

		becomeAwesome(){
      this.tags.animator.unmount(true);
    }
</my-riot-tag>
</script>

<script>
    riot.mount('*');
</script>

CSS

html,body{height:100%; width:100%; overflow:hidden}
.not-ready {
            display: none;
        }

        button {
            padding: 1rem;
        }
        
                    .demo-content {
                display: block;
                position: absolute;
                background: #42DBBE;
                border-radius: 2rem;
                height: 9rem;
                width: 9rem;
                padding: 1rem;
                color: #FFF;
                font-weight: bold;
            }