Fly to Cart Animation

Element moved to another element (JS Animation libs)

First download the JS Animation Libs from my GitHub repo -https://github.com/litsazib/Fly-to-cart-animation-libs.git

Include the CSS style: fly.min.css and include the JS file: fly.min.js

Example:

<link rel="stylesheet" href="lib/fly.min.css">
<script src="lib/fly.min.js"></script>

Extra

You can add a special class targetPulse to the target element in your custom script file action.

Simple Example on click:

$('.yourBtnClass').on('click', function() {
 rocketcss(this,'.yourTargetClass', 'rocketPulse');
 $('.yourTargetClass').addClass('targetPulse');
});

Usage Example (Markup):

<div class="row">
 <div class="col-md-4">
  <div class="target btn btn-default">
    <img src="img/recycle.png" alt="recycle icon">
  </div>
 </div>
 <div class="col-md-3 rocket_base">
  <div class="rocket btn_rocketPulse btn btn-default">
    <img src="img/orange.png" alt="orange" width="200px">
  </div>
  <div class="rocket btn_rocketPulseHole btn btn-default">
   <img src="img/stobary.png" alt="stobary" width="200px">
  </div>
  <div class="rocket btn_rocketRotate btn btn-default">
   <img src="img/applepng.png" alt="applepng" width="200px">
  </div>
  <div class="rocket btn_rocketRotateHole btn btn-default">
   <img src="img/pineapple.png" alt="pineapple" width="200px">
  </div>
 </div>
</div>

Available animations css class are:

 .rocketPulse
 .rocketPulseHole
 .rocketRotate
 .rocketRotateHole
 .rocketRotateGo
 .rocketGost
 .rocketFlip
 .rocketCircle

Usage Example (JS Function):

$(document).ready(function() {
//Default 
function normalstate(norm) {
  $(norm).css({ opacity: "1" });
 }
 //rocketPulse Effect Animation 
 $('.btn_rocketPulse').on('click', function() {
  rocketcss(this,'.target', 'rocketPulse');
  $('.target').addClass('targetPulse');
  setTimeout(function () {
   normalstate('.rocket');
   $('.target').removeClass('targetPulse');
  }, 2300);
 });
});

Thank you.

You may have reached the end of this blog but there’s still plenty more.