How to setup initial position of target element in anime.js? - vue.js

Question

Target
On click "Open menu" button:
Dim overlay appearing with fade-in animation
Once dim overlay animation done, from the top, dim overlay is appearing with the sliding animation from the top to bottom:
Solution attempt and problem
<template>
<transition #enter="animateOpening" #leave="animateClosing">
<div
class="SearchProductsPane-DimUnderlay"
v-if="isOpen"
:ref="elementsReferencesIDs.overlay"
>
<div
class="SearchProductsPane-Body"
:ref="elementsReferencesIDs.body"
>
<!-- ... -->
</div>
</div>
</transition>
</template>
import { Vue, Component } from "vue-property-decorator";
import Animation from "animejs";
#Component
export default class SearchProductsPane extends Vue {
private elementsReferencesIDs: Record<"overlay" | "body", string> = {
overlay: "Overlay", body: "Body"
};
private animateOpening(_element: Element, done: () => {}): void {
Animation
.timeline({
easing: "linear",
duration: 500,
complete: done
})
.add({
targets: this.$refs[this.elementsReferencesIDs.overlay],
opacity: [0, 1]
})
.add({
targets: this.$refs[this.elementsReferencesIDs.body],
translateY: "100%"
})
}
private animateClosing(): void {
}
}
With current solution, the .SearchProductsPane-Body will move from the normal position to the downward outside of the screen. Instead of it, I need it move from the upward outside of the screen to it normal position.
I tried reach it by adding of below class:
.SearchProductsPane-Body__InitialPosition {
transform: translateY(-100%);
}
However, the animejs animation starts from the 0%, not -100%. How to change it?

Answer 1

You can use From Value in animeJs, which allows you to define you'r animation origin:
anime.stagger(100, {from: 'center'})
you'r options are:
first: animation starts from the first element(Default from value)
last: animation starts from the last element
center: animation starts from the center
index: you choose which element the animation starts from
here is the docs.
Or you can use From to which forces the animation to start at a specified value.
In you'r code:
anime({
targets: '.SearchProductsPane-DimUnderlay'
});
docs here