Using anime.js library with tailwindcss, animation not working?

331 Views Asked by Litfamwoke At 08 May 2023 at 08:08

root > docs > index.html

var el = document.getElementsByClassName('bg-red-700');

anime({
  targets: el,
  translateY: [{
      value: 200,
      duration: 1200
    },
    {
      value: 0,
      duration: 800
    }
  ],
  rotate: {
    value: '1turn',
    easing: 'easeInOutSine'
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com"></script>

<body class="min-h-screen grid border-solid">
  <div class="border-8 border-solid border-black w-{800px} h={800px} overflow-hidden"></div>
  <div class="absolute border-8 border-solid border-black place-content-center bg-emerald-500 w-{700px} h={700px} rounded-full shadow-2xl"><img src="https://github.com/LITFAMWOKE93/LITFAMWOKE93.github.io/blob/main/resources/img/Profile_pic_resize.jpg?raw=true" alt="proflie-picture" id="profile-picture" class="border-8 border-dotted border-black rounded-full shadow-2xl " /></div>
  <div id="box" class="bg-red-700 h-32 w-32"></div>
</body>

> src tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./docs/**/*.js",'./**/*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Hello, I am trying to use the anime.js library with Tailwind CSS but I cannot figure out if I am failing to target the the elements correctly or if the source structure is not able to find the anime.js library or if Tailwind CSS is doing something on it's own.

I have tried CSS selector targeting and DOM object targeting for anime.js

I am targeting by class name in the code example and it is a class belonging to Tailwind CSS, I have also tried targeting by tag name and it was unsuccessful in playing the animation.

I am using NodeJS for Tailwind CSS but I am directly linking anime.js with CDN, could that be a problem?

Original Q&A

There are 1 best solutions below

Litfamwoke On 08 May 2023 at 08:47

Fixed it!

I needed to run a seperate script to wait for my DOM to load at the top of my HTML page and then use querySelector("#elementID") to target correctly.

<script>
  function ready() {
    alert('DOM is ready');

    
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>
var el = document.querySelector("#profile-picture")
if (el == null) {


alert("Selection null");
}
anime({
    targets: el,
    translateY: [
        {value: 200, duration: 1200},
        {value: 0, duration: 800}
    ],
    rotate: {
        value: '1turn',
        easing: 'easeInOutSine'
    }

});

Using anime.js library with tailwindcss, animation not working?

There are 1 best solutions below

Related Questions in NODE.JS

Related Questions in ANIMATION

Related Questions in DOM

Related Questions in TAILWIND-CSS

Related Questions in ANIME.JS

Trending Questions

Popular # Hahtags

Popular Questions