How to make Emoji reactions interaction work on mobile?

Help
#1

Have you searched the Docs and Knowledge base?
Principle Version: 5.9
macOS Version: 10.14.6
Sketch Version: 57.1
Description of what you need help with:

Hi everyone,
I’m trying to replicate the interaction of Facebook’s emoji reactions.
My specific problem is being able to “long tap” and scroll through the emoji without releasing the tap to zoom in the different emoji (as in the image).
Hover doesn’t work for me as I need to test it on a mobile device.
I tried Touch begin/ends, but I need to be able to tap on the icon to select a reaction and the 2 don’t work together.

Any ideas? Has anyone done something similar?

41

#2

Hi,

I’ve managed to solve this by using a layer with horizontal drag activated.

So on TouchStart, go to the screen with the drivers.

On TouchEnds, activate the exit animation.

I left the drag layer with a semi-transparent green colour so it’s easier to see what’s going on.

facebook-likes
facebook-likes.gif375×667 1.24 MB

.prd file for reference here:

Hope it helps!

#3

Amazing,
although not being 100% the interaction I’m looking for, it definitely helps :slight_smile:

Thanks!

#4

What were you after? Sorry if I didn’t get what you were trying to!

#5

Don’t worry.
The only big difference is that, unlike facebook, in my prototype you tap a button to toggle the pop-up and then scroll through the emojis, instead of being one continuous interaction.
The only “problem” standing is how to be able to select any emoji with ‘Touch Ends’.
But to be honest it’s no big deal, thanks to your help I can make the interaction good enough to be tested!

#6

It’s tricky, as there’s no way for Principle to know what emoji is being hovered, so you’ll need to fake it if you can control where the user (or yourself) is going to stop the Touch event, then send to another screen with that icon selected!