Expected behavior Element animates whether initiated using JS or JQuery

Actual behavior Works when using the vanilla JS example. But can't get to work if using the jQuery sample.

Resources (screenshots, code snippets etc.)

// This works 
var mainLogo = document.querySelector('#logo-footer');
  var logoAnimate = new mdb.Animate(mainLogo, {
    animation: 'pulse',
    animationStart: 'onHover',
    animationReset: true
  });
  logoAnimate.init();


  //does not work
  $('#logo-footer').animate({
    animation: 'pulse',
    animationStart: 'onHover',
    animationReset: true
  });