How to get chained animations like in native animejs?

Question

How to get chained animations like in native animejs?

Closed this issue 3 years ago · 4 comments

How do I get run these sample?

Right now I don't know how to integrate this clean HTML / JS / CSS:

into my NuxtJS project.

With the following sample page I don't get it work. The DOM updates the single spans correctly but it isn't visible in any case within the Browser Window...

Maybe you can help or update the documentation regarding such issue:

Registriere dich jetzt und lasse nichts anbrennen!

export default {
components: {
MenuMinusPopup,
},
mounted() {
this.setAnimation()
},
methods: {
setAnimation() {
var textWrapper = document.querySelector('.ml9 .letters')
textWrapper.innerHTML = textWrapper.textContent.replace(
/\S/g,
"$&",
)

  this.$anime
    .timeline({ loop: true })
    .add({
      targets: '.ml9 .letter',
      scale: [0, 1],
      duration: 1500,
      elasticity: 600,
      delay: (el, i) => 45 * (i + 1),
    })
    .add({
      targets: '.ml9',
      opacity: 0,
      duration: 1000,
      easing: 'easeOutExpo',
      delay: 1000,
    })
},

},
}
</script>

Thank you!

Answer 1 · 2021-10-05T13:32:03.000Z

Hi, I don't understand what exactly you want to achieve (and please write in English for better communication).

Unfortunately, it's difficult to say where the problem is without minimal reproduction. Please share an example (link to the codesandbox or github repo) that shows the issue.

Answer 2 · 2021-10-05T13:45:09.000Z

Also, here you can find some examples that may be helpful. If you haven't already, see the documentation that explains how to use the module.

Answer 3 · 2021-10-05T14:23:47.000Z

Hi, thanks for your quick response.
I can create sample project but maybe the give gif animation helps already a bit to understand:

in the upper browser you see the correct animation (clean HTML, JS, CSS):

the bottom window is splitted on the left the nuxt page view, on the right the console / elements view.

video:
https://easyupload.io/2a77j0

clean html +
nuxtjs anime plugin page (new folder.zip):
https://easyupload.io/miq1e9

Maybe you have an idea what is wrong or maybe buggy : )
Thanks!

Answer 4 · 2021-10-06T11:25:40.000Z

I just tested it and module works fine. Check your setup to make sure everything is configured correctly.

Here is an example:

<template>
  <div>
    <h1 class="ml9">
      <span class="text-wrapper">
        <span class="letters">Coffee mornings</span>
      </span>
    </h1>
  </div>
</template>

<script>
export default {
  mounted() {
    const textWrapper = document.querySelector('.ml9 .letters')
    textWrapper.innerHTML = textWrapper.textContent.replace(
      /\S/g,
      "<span class='letter'>$&</span>"
    )

    this.$anime
      .timeline({ loop: true })
      .add({
        targets: '.ml9 .letter',
        scale: [0, 1],
        duration: 1500,
        elasticity: 600,
        delay: (el, i) => 45 * (i + 1)
      })
      .add({
        targets: '.ml9',
        opacity: 0,
        duration: 1000,
        easing: 'easeOutExpo',
        delay: 1000
      })
  }
}
</script>

<style>
.ml9 {
  position: relative;
  font-weight: 200;
  font-size: 4em;
}

.ml9 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.2em;
  padding-right: 0.05em;
  padding-bottom: 0.1em;
  overflow: hidden;
}

.ml9 .letter {
  transform-origin: 50% 100%;
  display: inline-block;
  line-height: 1em;
}
</style>

Closing this since there is no issue with the module.