Touch Tolerance

Hi all,

I found your project is amazing and i was wondering if I can create an a object with movement tolerance which snap back to origin position.

see this link

Oh that looks great, and appears to be totally doable. You should look into SwipeGesture, and couple that with an Attract.

Another way might be looking into a single-axis-contrained Draggable, Translation, UX expressions and Attract.

This certainly will take some reading and playing around, but should be a fun exercise. Keep us posted!

Alright, I actually ended up willing to give it a go myself, and here’s a little proof of concept. It’s not exactly what your GIF shows, but at least it’s something in the right direction. Hey, this one even has a two-way bound property for the counter :slight_smile:

    <Panel ux:Class="ElasticCounter" ClipToBounds="true">
        <int ux:Property="Counter" />
            var c = this.Counter.mapTwoWay(function(v) {
                return v;
            }, function(v, sv) {
                return v;
            function inc() {
            function dec() {
            module.exports = {
                c: c,
                inc: inc,
                dec: dec
        <Panel Margin="2" ux:Name="theBounds">
            <Circle ux:Name="theHandle" Width="56" Height="56" Color="#fff" Alignment="Center">
                <Text Value="{c}" Alignment="Center" />
                <Translation ux:Name="moveHandle" />

                <SwipeGesture ux:Name="swipeRight" Direction="Right" Length="width(theBounds)/2" />
                <SwipeGesture ux:Name="swipeLeft" Direction="Left" Length="width(theBounds)/2" />
                <Translation ux:Name="handle" X="0" />
                <SwipingAnimation Source="swipeRight">
                    <Move Target="theHandle" X="width(theBounds)/2-28" DurationBack="1" />
                <SwipingAnimation Source="swipeLeft">
                    <Move Target="theHandle" X="-1*width(theBounds)/2+28" DurationBack="1" />
                <Swiped Source="swipeRight">
                    <Callback Handler="{inc}" />
                <Swiped Source="swipeLeft">
                    <Callback Handler="{dec}" />

                <Shadow />
        <Rectangle Color="#18f" CornerRadius="height(theBounds)/2" />

    var Observable = require("FuseJS/Observable");
    var counter = Observable(0);
    counter.onValueChanged(module, function(x) {
        console.log("counter is now: " + x);
    module.exports = {
        counter: counter
    <ElasticCounter Height="60" Width="128" Counter="{counter}" />

Hope this helps!

Thanks for your effort and amazing response your code is great but what I was asking for when the touch pass the constraint area start slow down until stopped when to touch release the bounce back to the constraint area I saw it in ScrollView

Well that is the part that I’d rather leave for you to figure out. As I mentioned, using Attract might be the way to go, since it offers a kind of a physics simulation.