javascripthtmlcssanimejs

Animating div Y position smoothly with animejs

I want to make a div go up to 0px from 100px smoothly with animejs.

I have this div:

<div class="div"></div>

And style:

.div{ 
  border: 1px solid white;
  padding: 10px;
  translateY: 100px;
}

And this is the js code:

anime({
   targets: [".div"],
   duration: 1000,
   easing: "easeOutElastic",
   translateY: "0px",
 })

I have tried doing the opposite like going down from 0px to 100px and its working well like that.But when I am trying like this the div is going to 0px straight.

Solution

  • Give translateY value as an array, first item being the start point and second being the end:

    translateY: [100, 0]


    anime({
  targets: [".div"],
  duration: 1000,
  easing: "easeOutElastic",
  translateY: [100, 0],
});
    .div {
  border: 1px solid white;
  padding: 10px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

<div class="div">test</div>