Javascript Collision Detection using GSAP

What is OneMotion™?

OneMotion™ is a small, inexpensive Javascript motion and collision detection library that makes use of the GreenSock Animation Platform (GSAP). You can see it in use all over this website, at the top of most pages.

This library was developed for use on our website, but we are making it available to other developers as well, for a small one-time fee.

OneMotion™ can throw any kind of HTML element, and have it detect collisions with other thrown elements, or the outer boundary. It uses the ThrowProps plugin of GSAP to animate the motion of each element.

It does not include an actual physics engine, but does simulate group collisions in an eye-pleasing manner.

Requirements

OneMotion™ makes use of jQuery 2.2.2 or later, and the GreenSock Animation Platform (GSAP) library. You will need to purchase the GreenSock “Shockingly” or “Business” plan for GSAP. OneMotion™ does not work with the free version of GSAP.

TweenJS version coming soon!

OneMotion™
Javascript collision detection using GSAP
$35

How it works

OneMotion uses bounding-box coordinates to figure out which object have collided. After payment is received, we will provide you with the JS source files so you can tweak the code to your heart’s content.

Step 1: Include the OneMotion source code and required files

<script src="js/jquery/jquery-2.2.2.js"></script>
<script src="js/GreenSock-BusinessGreen-js/src/minified/TweenMax.min.js"></script>
<script src="js/GreenSock-BusinessGreen-js/src/minified/plugins/CSSPlugin.min.js"></script>
<script src="js/GreenSock-BusinessGreen-js/src/minified/plugins/ThrowPropsPlugin.min.js"></script>
<script src="js/OneMotion/OneMotion.min.js"></script>

Step 2: Define the elements in the DOM

<div id="boundary">
   <img class="ball" src="img/ball.png" />
   <img class="ball" src="img/ball.png" />
   <img class="ball" src="img/ball.png" />
</div>

Step 3: Tell OneMotion which elements you want to throw


$(function() {
   var oneMotion = new OneMotion(),
      boundary = $('#boundary'),
      balls = $('.ball');

   oneMotion.setBoundary(boundary);
   oneMotion.spawn(balls);

});

Questions?

Use our contact form today.

info@onehat.com
Suite 022 3100 N Knoxville Ave • Peoria, IL 61603
1 (844) 7-ONEHAT (766-3428)
(309) 550-9021

Website design & coding ©2016 One Hat Technologies, LLC.