Basics

Leap Click

Just give your element a class of leap-interactive to make it interactive.

    

    
<button type="button" class="btn leap-interactive">I can be clicked</button>

Options

Name type default description
class="leap-interactive" element class activate leap interaction on this element

Click Delay

Set a click delay on your elements. 

    

    
<button type="button" class="btn leap-interactive" leap-click-delay="1000">Click Delay: 1 second </button>
<button type="button" class="btn leap-interactive" leap-click-delay="3000">Click Delay: 3 second </button>
<button type="button" class="btn leap-interactive" leap-click-delay="5000">Click Delay: 5 second </button>

Options

Name type default description
leap-click-delay number 1000 time to wait until activate click on element (in ms)

Multitap

Allow an element to be tapped multiple times 

    

    
<button type="button" class="btn leap-interactive" leap-enable-multitap="true">Allow Multitap</button>

Options

Name type default description
leap-enable-multitap boolean false allow element to be tapped by leap more than once

Event Suppression

Set a click delay on your elements. 

<button type="button" class="btn leap-interactive" leap-disable-tap="true">Can't tap me</button>
<button type="button" class="btn leap-interactive" leap-disable-tap="true" leap-disable-hover="true">Can't tap or hover me</button>

Options

Name type default description
leap-disable-tap boolean false don't allow leap tap
leap-disable-hover boolean false don't allow leap hover

Attractors

Set a click delay on your elements. 

<button type="button" class="btn leap-interactive" leap-attractor="true">Standard Attraction</button>
<button type="button" class="btn leap-interactive" leap-attractor-x-padding="10">10px wide</button>
<button type="button" class="btn leap-interactive" leap-attractor-y-padding="10">10px tall</button>
<button type="button" class="btn leap-interactive" leap-attractor-x-padding="30" leap-attractor-y-padding="30">30px wide+tall</button>

Options

Name type default description
leap-attractor boolean false activate standard attractor
leap-attractor-x-padding number 0 add horizontal attractor padding (in px)
leap-attractor-y-padding number 0 add vertical attractor padding px (in px)

Hand Gestures

Move your hand over this box to see actions

Add leap-interactive to any element and you can use it to detect for gestures.

<button type="button" class="btn leap-interactive">Make a circle on me</button>

Meta Gestures

You can enable Meta gestures, like Page Back and Page Forward, if you enable the default on-page Meta actions.

Browser History - Sliding / Swipe Gesture

Swipe Left

Browser should go page back.

Swipe Right

Browser should go page forward.

enableMetaGestures: true,
enableDefaultMetaGestureActions: true

<script>
LeapManager.init({
	interactiveSelector: "a",
	maxCursors:3,
	enableMetaGestures: true,
	enableDefaultMetaGestureActions: true
});
</script>

Page Scroll - Circle Gesture

Move your finger in a circle to scroll the page

To enable page scrolling, attach leap-interactive to your body element. You probably don't need tap or hover on the body, so disable them.

<body class="leap-interactive" leap-disable-tap="true" leap-disable-hover="true">

enableMetaGestures: true,
enableDefaultMetaGestureActions: true

<script>
LeapManager.init({
	interactiveSelector: "a",
	maxCursors:3,
	enableMetaGestures: true,
	enableDefaultMetaGestureActions: true
});
</script>

Scrolling

Move your finger in a circle over these elements to scroll through them

Bacon ipsum dolor sit amet doner t-bone shankle brisket ribeye salami. Shankle tail ham chuck swine doner meatloaf kielbasa pig. Ham hock meatball flank pork belly shoulder sausage. Ribeye tenderloin ham pork chop spare ribs ham hock. Biltong pancetta pastrami, andouille ball tip fatback ham rump. Ground round kielbasa capicola pastrami shank brisket jowl meatloaf cow. Shankle beef biltong hamburger pork belly corned beef, tri-tip t-bone pig turkey short ribs filet mignon ball tip jerky brisket. Swine boudin bacon, andouille hamburger short loin tongue drumstick jerky sirloin spare ribs pancetta. Corned beef ball tip tail strip steak. Cow fatback short loin doner ground round sirloin chuck turducken corned beef prosciutto t-bone. Chuck t-bone spare ribs beef ribs filet mignon strip steak. Pastrami pork loin brisket hamburger, turducken short ribs bresaola t-bone ball tip corned beef. Fatback shoulder filet mignon cow, short ribs strip steak turducken pancetta drumstick venison. Shank turkey sausage tenderloin venison spare ribs ham filet mignon. Pancetta tenderloin shankle meatloaf pork, pork belly bacon filet mignon jerky brisket. Strip steak meatball sirloin shoulder. Pancetta salami boudin pork turducken hamburger short ribs, pork chop andouille pastrami prosciutto doner shoulder turkey. Tongue hamburger tri-tip, fatback shank chicken tail short ribs spare ribs short loin ground round capicola brisket pork chop. Hamburger frankfurter beef ribs tongue boudin sausage pancetta meatball, pork chop bacon jerky kielbasa cow. Swine fatback tail t-bone venison pig biltong pork chop pancetta salami rump. Bacon pork pancetta frankfurter pork belly flank sirloin ball tip prosciutto short ribs. Boudin salami ball tip turducken jerky fatback leberkas bacon chuck pig ground round strip steak. Ribeye turducken doner shankle tenderloin beef beef ribs corned beef. Corned beef leberkas sirloin, short ribs salami chuck pork chop turducken. Shankle flank spare ribs tri-tip turkey. Short ribs strip steak pork loin, cow pork belly pastrami filet mignon turkey. Beef ribs pork chop pork loin hamburger turkey cow t-bone venison. Bresaola swine beef t-bone shankle short loin frankfurter corned beef sausage meatball. Beef sausage capicola drumstick bresaola tail bacon chuck chicken ham hock pork pork belly ground round venison. Salami turkey meatball, tri-tip ham drumstick short loin chuck brisket beef bacon. Bacon ipsum dolor sit amet doner t-bone shankle brisket ribeye salami. Shankle tail ham chuck swine doner meatloaf kielbasa pig. Ham hock meatball flank pork belly shoulder sausage. Ribeye tenderloin ham pork chop spare ribs ham hock. Biltong pancetta pastrami, andouille ball tip fatback ham rump. Ground round kielbasa capicola pastrami shank brisket jowl meatloaf cow. Shankle beef biltong hamburger pork belly corned beef, tri-tip t-bone pig turkey short ribs filet mignon ball tip jerky brisket. Swine boudin bacon, andouille hamburger short loin tongue drumstick jerky sirloin spare ribs pancetta. Corned beef ball tip tail strip steak. Cow fatback short loin doner ground round sirloin chuck turducken corned beef prosciutto t-bone. Chuck t-bone spare ribs beef ribs filet mignon strip steak. Pastrami pork loin brisket hamburger, turducken short ribs bresaola t-bone ball tip corned beef. Fatback shoulder filet mignon cow, short ribs strip steak turducken pancetta drumstick venison. Shank turkey sausage tenderloin venison spare ribs ham filet mignon. Pancetta tenderloin shankle meatloaf pork, pork belly bacon filet mignon jerky brisket. Strip steak meatball sirloin shoulder. Pancetta salami boudin pork turducken hamburger short ribs, pork chop andouille pastrami prosciutto doner shoulder turkey. Tongue hamburger tri-tip, fatback shank chicken tail short ribs spare ribs short loin ground round capicola brisket pork chop. Hamburger frankfurter beef ribs tongue boudin sausage pancetta meatball, pork chop bacon jerky kielbasa cow. Swine fatback tail t-bone venison pig biltong pork chop pancetta salami rump. Bacon pork pancetta frankfurter pork belly flank sirloin ball tip prosciutto short ribs. Boudin salami ball tip turducken jerky fatback leberkas bacon chuck pig ground round strip steak. Ribeye turducken doner shankle tenderloin beef beef ribs corned beef. Corned beef leberkas sirloin, short ribs salami chuck pork chop turducken. Shankle flank spare ribs tri-tip turkey. Short ribs strip steak pork loin, cow pork belly pastrami filet mignon turkey. Beef ribs pork chop pork loin hamburger turkey cow t-bone venison. Bresaola swine beef t-bone shankle short loin frankfurter corned beef sausage meatball. Beef sausage capicola drumstick bresaola tail bacon chuck chicken ham hock pork pork belly ground round venison. Salami turkey meatball, tri-tip ham drumstick short loin chuck brisket beef bacon. 
<button type="button" class="catcher btn leap-interactive">Make a circle on me</button>

Initialising Leap

Use the built-in LeapManager to get started with Leap on your page. Each page needs to use LeapManager to initialise Leap. You just include some Javascript, typically defining the maximum amount of fingers you want the page to use.

LeapManager.init()

Use interactiveSelector wisely

We show interactiveSelector: "a" in our examples, but you shouldn't use it. It typically makes Leap slower, especially if you've got lots of links on the page (dropdown menus, navigation, options etc). Leapstrap will apply Leap interaction to any element with a class of leap-interactive - you should use that instead if you can.

<script>
LeapManager.init({
	interactiveSelector: "a",
	maxCursors:3,
});
</script>

LeapManager.init({
	interactiveSelector: "a",
	enableMetaGestures: true,
	enableDefaultMetaGestureActions: false,
	maxCursors:3,
	enableHoverTap: true,
	enablePressDown: true,
	enableTouchScrolling: false,
	enableScrollbarScrolling: true,
	simulateWithMouse:false,
	mouseCursorConfig: {
	easing:.2
	},
	greedySelector: "body"
});

Options

Name type default description
interactiveSelector string - Not recommended for production use due to slow performance.
Automatically set element types to be leap-interactive. Comma separated list of element types, classes or ids. interactiveSelector: "a, .btn, input, #myLeapBtn",
enableMetaGestures boolean
enableDefaultMetaGestureActions boolean
maxCursors number -
enableHoverTap boolean
enablePressDown boolean
enableTouchScrolling boolean
enableScrollbarScrolling boolean
simulateWithMouse boolean false
mouseCursorConfig options Configuration for Mouse Cursor
mouseCursorConfig: { multitapEnabled: false, clickDelay: 1000 }
enableInBackground boolean false Register Leap updates in the background
root Change the root HTMLElement for all Leap Elements
gestureCallback Callback function for globally catching Gestures
gestureScope Scope for global gesture callback
enableSenchaTouch boolean false Enable interactivity for a Sencha Touch Application
loopConfig Configs to pass into the Loop function for the leap (see leap library docs for more info)
loopConfig: { enableGestures: true }
boundary Virtual Boundary inwhich to move your fingers around. Translates into screen space
boundary: { top: 350, left: -100, right: 100, bottom: 150 }
cursorConfig Configuration for cursors
cursorConfig: { multitapEnabled: false, clickDelay: 1000, easing: .3 }
greedySelector

Leap Options

<a
class="btn leap-interactive"
leap-click-delay="5000"
leap-enable-multitap="true"
leap-disable-tap="true"
leap-disable-hover="true"
leap-attractor="true"
leap-attractor-x-padding="10"
leap-attractor-y-padding="10"
href="">
Your text
</a>

Options

Name type default description
class="leap-interactive" element class activate leap interaction on this element
leap-click-delay number 1000 time to wait until activate click on element (in ms)
leap-enable-multitap boolean false allow element to be tapped by leap more than once
leap-disable-tap boolean false don't allow leap tap
leap-disable-hover boolean false don't allow leap hover
leap-attractor boolean false activate standard attractor
leap-attractor-x-padding number 0 add horizontal attractor padding (in px)
leap-attractor-y-padding number 0 add vertical attractor padding px (in px)