Question: I got a prototype here:http://share.framerjs.com/umdt5fqzqe0c/
It performs fine on Safari but really buggy on Chrome. Specifically around layer index or z-index. Has anyone ever came across this issue?
Hey Jacky, there's 2 things going on here:
Firstly, you can't animate the shadowColor property as it holds a string value. You can only animate numeric properties shown here: http://framerjs.com/docs/#animation.animation. This is what's creating the 'jump' between different states. However there is a workaround using CSS transitions.
Secondly, you need to set the index before the animation starts and not during it. Even though you can animate the index property, it will cause the blocks to jump in and out and overlay each other.
When you click on a block, the index is set to 1 and all the other blocks are set to 0: http://share.framerjs.com/yshw4oyn9z6h/
Thanks for the thorough comments Balraj Chana!