Successfully implemented code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script type="text/javascript">
var textWrapper = document.querySelector('.ml6 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({loop: false})
.add({
targets: '.ml6 .letter',
translateY: ["1.1em", 0],
translateZ: 0,
duration: 750,
delay: (el, i) => 50 * i
});
</script>
However, when I include the identical JavaScript from the CDN in libraries.js as demonstrated below, it results in a
ReferenceError: Can't find variable: anime<script src="{{ mix('/js/libraries.js') }}"></script>
<script type="text/javascript">
var textWrapper = document.querySelector('.ml6 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({loop: false})
.add({
targets: '.ml6 .letter',
translateY: ["1.1em", 0],
translateZ: 0,
duration: 750,
delay: (el, i) => 50 * i
});
</script>
Upon verification, mix is compiling correctly, and the JS is included in libraries.js.
The script remains unchanged, positioned in the same location; however, I am puzzled by why this issue persists. Might it be due to libraries.js loading after the script executes? If so, how can this be resolved?
This problem recurs frequently. My preference is to utilize mix() over asset(). While the aforementioned addresses one library, my goal is to consolidate most of the libraries into a single file like libraries.js. Presently, many are loaded through CDNs due to the previously explained dilemma.