This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Danny White
Posted Feb 01 - Read on Facebook

I'd like to be able to 'scrub' through these layers (coloured circles) without lifting my finger off the screen. Any ideas on how to do this?

The idea is when you touch and hold on a coloured circle, the relevant sound will play (a video with opacity: 0) and information will show above. The user should be able to move their finger across to any other coloured circle (and not have lift up their finger in the process) for a new sound to play and information to show.

Thanks in advance!

6 Comments

Danny White

So far I've substituted a TouchStart and TouchEnd event on each

Benjamin Den Boer

Hey Danny White, instead of listening to the touch/mouse events for each layer separately, you could create a new Array containg all of your circle-layers, then loop over the array and set touch events and state-switches for each layer within the array.

Danny White

Cheers!

Danny White

Hey guys, sorry to harp on, but I'm still struggling with this interaction. Benjamin, I've tried creating an array, but still facing the same problems. Any ideas/solutions? Here's a link to the updated code:
http://share.framerjs.com/lni67y4xcr8s/

Jordan Robert Dobson

When I did this... I ended up having to do TouchMove events on the root and then grab the x & y coordinates and then see if those were within a certain threshold from the center of each item. If it was, that was my trigger.

The issue is it is a bit easier with squares, when its circles and they are tight together it's not as easy to detect a hit. You'll probably want to find an equation for hit detection on a circle to see if it's within range.

The problem is a touch event that has started on one element won't fire on another until the touch event life cycle ends.

If anyone knows of a work around I'm all ears too! This might be worth looking into as well.

https://developer.mozilla.org/en-US/docs/Web/API/document.elementFromPoint

Danny White

Thanks, really appreciate it!

Read the entire post on Facebook