.animate() in meteor?

help
1

Hi guys, how to make run JQuery function .animate() in meteor? here is my code, which is not running. I added this package “meteor add mrt:animate-enhanced” to be sure I dont miss anythning but it still doesnt work.

code:

Template.lulu.onRendered(function(e) {
    $(".la").animate({
        left: '250px'
    });
});

<template name="lulu">
    <div class="la">HELLO</div>
</template>
1 Like
2

What other packages are you using? Are you using any sort of UI package? Materialize, bootstrap, etc?

Try:

Template.lulu.onRendered(function(e) {
    $(".la").animate({
        left: '250px'
    }, 1000);
});

<template name="lulu">
    <div class="la" style="position:relative">HELLO</div>
</template>
3

yes I am using materialize.

4

Try setting the position of the div you’re animating to relative as indicated above. I was able to get it to work using that.

5

Yeah it’s working :wink: Thanks a lot!

6

No problem. Sorry it took so long for anyone to get back to you.

7

A couple tips:

  1. Don’t use $.animate, use $.velocity (package required: velocityjs:velocityjs). Better performance. Or, personally, I’d go with a CSS solution (see below).
  2. Instead of animating the left CSS property, use translate (again, better performance).

The CSS solution would be to make a class that you could apply which would move the element, e.g.:

.move-left {
  transform: translateX(-250px);
  transition: transform 500ms ease-in-out;
}

Template.lulu.onRendered(function () {
  this.$('.la').addClass('move-left');
});
8

Any tips on getting animate to work with the atmosphere React library?