Q: 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.

A: 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>


