Stop (Oh!) Jiggle with it (Yeah!)


We had a requirement to get the shopping cart icon in an Ionic app to jiggle when items were added to the cart.

To achieve this we required 2 things:
1. An event trigger & listener
2. An CSS3 class that made a <div> jiggle

1. Since we are using Ionic, Angular’s scope.$emit() and scope.$on() would do just fine for event trigger an evening listener.

We created a directive called jiggle. In the method that handled items getting added to the cart we called the following line:

$scope.$emit("jiggle");

To handle the broadcast event, we had a directive to handle it. In our view the <div> that needed to jiggle was tagged with the attribute also called “jiggle”. When the “jiggle” broadcast was received, the “jiggle” class would be added to the <div> for 1.5 seconds and then cleared.

app.directive("jiggle", function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            scope.$on("jiggle", function() {
                $(elem).addClass('jiggle');
                setTimeout(function(){
                        $(elem).removeClass('jiggle');
                }, 1500);
            });
        }
    }
});

2. For #2, we came across CSShake | Some CSS classes to move your DOM!. This seemed very powerful but also a bit bloated for a small use case of ours. We then came across an article aptly titled “Jiggle effect using CSS” we decided to implement:

.jiggle {
  -webkit-animation: jiggle 0.2s infinite;
  -moz-animation-duration: 0.2s;
  -moz-animation-name: jiggle;
  -moz-animation-iteration-count: infinite;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
}
@-moz-keyframes jiggle {
  0% {
  -moz-transform: rotate(-5deg);
  }
  50% {
  -moz-transform: rotate(5deg);
  }
 }
 
@-webkit-keyframes jiggle {
  0% {
  -webkit-transform: rotate(-5deg);
  }
  50% {
  -webkit-transform: rotate(5deg);
  }
}

Everything seemed fine till we found the <div> not jiggling on an IOS6 device. The same version of the ad-hoc deployed app worked on another iOS6 device which got us a bit perplexed till we assumed it was a Safari browser version issue and came across “CSS3 animation not working in safari” Stackoverflow post. We altered our jiggle CSS to the following and

.jiggle {
  animation: jiggle  0.2s infinite;
  -webkit-animation-name: jiggle;
  -webkit-animation-duration: 0.2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform: rotate(-5deg);
  -moz-animation-name: jiggle;
  -moz-animation-duration: 0.2s;
  -moz-animation-iteration-count: infinite;
  -moz-transform: rotate(-5deg);
}
@-moz-keyframes jiggle {
  0% {
  -moz-transform: rotate(-5deg);
  }
  50% {
  -moz-transform: rotate(5deg);
  }
  100% {
  -webkit-transform: rotate(-5deg);
  }
 }
 
@-webkit-keyframes jiggle {
  0% {
  -webkit-transform: rotate(-5deg);
  }
  50% {
  -webkit-transform: rotate(5deg);
  }
  100% {
  -webkit-transform: rotate(-5deg);
  }
}

For anyone interested in learning more about CSS3 animations using tranform, should read this article: CSS Animation Using CSS Transforms.

Share your Insights