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

Question

Target

On click "Open menu" button:

1. Dim overlay appearing with fade-in animation

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

1. first: animation starts from the first element(Default from value)
2. last: animation starts from the last element
3. center: animation starts from the center
4. 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