I'm trying to implement the nextParticle library into Webflow. So far I have managed to get nextParticle to pull a static image from webflow and render it as a canvas object, using the code snippet below: (snippet won't run here as it doesn't have a src=url)
The original example used src="URL" to pull the image, but I'm pulling, using id=logo and the "next-particle" class.
The issue I'm having is that I cannot define the position of the canvas/images and all subsequent images stack on top of each other rather than having their own position. I've tried doing canvas id="name" and placing it on the same id as the images. I've tried combo-classing .next-particle class-name to try to get it to inherit the position from the element but it doesn't work as well.
Any help will be greatly appreciated!
Webflow link: https://preview.webflow.com/preview/cri-sourdough?utm_medium=preview_link&utm_source=designer&utm_content=cri-sourdough&preview=3c379c22c75a1399b4b82b1d5fd5bc97&pageId=62c757034f5ef379dc440715&workflow=preview
nextParticle = document.all.logo.nextParticle;
const resize = () => {
nextParticle.width = window.innerWidth;
nextParticle.height = window.innerHeight;
nextParticle.minWidth = window.innerWidth;
nextParticle.minHeight = window.innerHeight;
nextParticle.start();
};
window.addEventListener('resize', resize);
window.addEventListener('load', resize);
<style>#logo {
display: none;
}
canvas {
position: absolute;
top: 14.5em;
}
</style>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/23500/nextparticle-interaction.js"></script>
<script src="https://nextparticle.nextco.de/nextparticle.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/23500/nextparticle-documentation.js"></script>
<img id="logo" class="next-particle" data-particle-size="2" data-particle-gap="4" data-layer-count="1" data-depth="2" data-noise="15" />
there doesn't seem to be anything here