Propagate touch events through overlapping components

Help
#1

I have two components, both of which have touch down and touch up states, that loop back into the initial state with an auto transition.
One is an icon that scales down a little bit on touch down, up to 1.4 on touch up, and back to 1 on auto - creating a nice pop.
The other is a google material style ripple that scales up and fades in on touch down, fades out on touch down, and returns back to it’s initial state on auto.

I can’t combine these because the timings and delays are meant to be pretty specific, so I can’t have timing of one be dependent on the other. I basically want both to act independently, in response to the same touch down and up event, on the same spot.

Is there a way to propagate touch event through the icon and onto the ripple layer? Any other way to solve this?

#2

Instead of having 2 separate components, couldn’t you simply have both animations in the same component between 2 artboards?

Also, could you share your file?

1 Like
#3

That wouldn’t work because then the duration of the transition from artboard 1-> 2 would determine when 2-> 3 begins – and I want artboard 1 -> 2 for one element to take up a shorter duration of time than the transition of artboard 1 -> 2 for the other element.

Here’s the file:
https://drive.google.com/open?id=1EdCPlniyRlqueJ7sZGSFlznnr9kcs60V