Source code of the animation package used with the Learn DOM manipulation with easy modern JavaScript course on udemy.com
- You must have the image sprite in your machine, for this example you can use this one
- Install the last version of the package using
npm i dom-casts-css-kit@latest
- Import the package in the scss file where you want to add the classes dinamically, e.g.
@import "~dom-casts-css-kit/portal"
- Include the imported mixin in your scss file using
@include add-portal-frames("portal")
(we typed 'portal' but you can use any name) - In your js file, you must create a function to iterate through the classes you just generated with the mixin, if you alraedy have the
portalElement
that function should look something like this:
#animate() {
let frame = 1;
const animate = () => {
this.#portalElement.classList.remove(`portal-${frame}`);
if (frame === 12) {
frame = 1;
}
frame = frame + 1;
this.#portalElement.classList.add(`portal-${frame}`);
};
setInterval(animate, 100);
}
MIT