ARTICLE AD BOX
I want to make a part of the header on my website where there is a box made from an SVG, and there is a JavaScript framework that spins and animates this box. However, I want to use this animated box to be a mask for my actual logo, which I can change out when the box goes down to 0.
import { spring, animate } from 'https://esm.sh/animejs'; animate('.head-logo-mask', { onBegin: self => console.log('started'), rotate: 1440, // Rotates the box 4 times scale: [0, 1, 1, 1, 1, 1, 1, 1, 0], // Sets initial scale, moves it up, keeps it, then resets to 0 duration: 20000, //Duration of the animation in milliseconds (20 seconds) loop: true, //Keeps the animation looping ease: 'inOutSine', //Uses the inOutSine for a smooth easing. Looks the most like the original lottie file animation. }); /* Import fonts */ @font-face { font-family: MaxwellBold; src: url("https://rawcdn.githack.com/MindaManOfficial/mindamanofficial.github.io/03db4b61551a2936a785500ad4eb7c7f7d39d86d/MAXWELL%20BOLD.ttf") format("truetype"); } @font-face { font-family: MaxwellRegular; src: url("https://rawcdn.githack.com/MindaManOfficial/mindamanofficial.github.io/03db4b61551a2936a785500ad4eb7c7f7d39d86d/MAXWELL%20REGULAR.ttf") format("truetype"); } @font-face { font-family: MaxwellLight; src: url("https://rawcdn.githack.com/MindaManOfficial/mindamanofficial.github.io/03db4b61551a2936a785500ad4eb7c7f7d39d86d/MAXWELL%20LIGHT.ttf") format("truetype"); } @font-face { font-family: Minecraft; src: url("https://rawcdn.githack.com/MindaManOfficial/mindamanofficial.github.io/07345fe43bd27eeec13f46f411d02efb2a5dd2db/assets/MinecraftRegular-Bmg3.otf") format("opentype"); } header { display: flex; width: 100%; background: black; padding: 1.1%; } /* An adaptive and animated logo that randomly shuffles through a list of logos */ /* Has a spinning box that is a mask for an area where a logo can be. The logo will be of different poses and emotions. */ /* The logo shuffles after 20 seconds of spinning */ .head-logo-wrap{ position: relative; display: flex; flex-direction: row; text-decoration: none; } .head-logo-mask{ position: absolute; } .logo-image{ width: 3.5vw; mask-image: (#logo-box); mask-position: bottom; mask-size: cover; } /* Sets text styles for the "MindaMan" in the header. */ .head-name{ font-family: MaxwellBold; font-size: 3.5vw; color: transparent; background: #682a9b; /* The extra backgrounds / filters add IE6+ compatability. */ background: -webkit-linear-gradient(90deg, rgba(104, 42, 155, 1) 0%, rgba(22, 22, 217, 1) 51%, rgba(83, 165, 237, 1) 100%); background: -moz-linear-gradient(90deg, rgba(104, 42, 155, 1) 0%, rgba(22, 22, 217, 1) 51%, rgba(83, 165, 237, 1) 100%); background: linear-gradient(90deg, rgba(104, 42, 155, 1) 0%, rgba(22, 22, 217, 1) 51%, rgba(83, 165, 237, 1) 100%); /* Allows the font to have the gradient rather than just giving a background. */ background-position: bottom; background-size: cover; background-clip: text; } body{ margin: 0; /* Fixes the header */ background: white; /* Resets the background for the body */ overflow-x: hidden; /* Prevents scrolling on the x-axis */ flex-wrap: nowrap; /* Prevents wrapping of the elements on the screen */ } /*footer*/ <script src="https://cdn.jsdelivr.net/npm/animejs/dist/bundles/anime.umd.min.js"></script> <title>MindaMan</title> <!-- The website stylesheet --> <link rel="stylesheet" href="/style.css" /> <!-- JAVASCRIPT FILES --> <!-- The website JavaScript file --> <script src="/main.js" type="module"></script> </head> <header> <!-- A wrapper for the whole MindaMan Logo--> <a class="head-logo-wrap" href="/"> <!-- Just the image part of the logo --> <div class="head-logo"> <div class="head-logo-mask"><img src="https://dev.mindaman.com/temporary/logo-box.svg" id="logo-box" style="width: 3.5vw;"></div> <img src="https://dev.mindaman.com/temporary/little-critter.png" alt="little-critter" class="logo-image"> </div> <!-- Just the name (text) part of the logo --> <div class="head-name"> MindaMan </div> </a> <!-- Header Directory (Contains multiple dropnavs for "About", "Directory", and "Shop") --> <div class="head-dir"> </div> <!-- Header Social (Dropdown from one icon, contains a link at the bottom for more social links. When each icon is hovered, it extends out to the left with the social media name, and handle. when clicked it redirects) --> <div class="head-social"> </div> </header> <body> </div> <div class="news"> <div class="welcome"></div> <!-- Shows the Twitch Live Stream Embed when Live! otherwise, it shows the most recent VOD. --> <div class="twitch"></div> <!-- Shows the most recent YouTube Video --> <div class="youtube"></div> <!-- Has a banner of funnies. --> <div class="funnies"></div> <!-- Shows the current followings of MindaMan on multiple platforms --> <div class="following"></div> <!-- Basically an embed or small recreation of social.mindaman.com --> <div class="socials"></div> <!-- Shows a featured fanart carousel --> <div class="fanart"></div> <!-- Shows a featured project wheel --> <div class="featured-project"></div> <!-- Promo to join the critter cave --> <div class="discord"></div> </body>(The code requires animejs, which likely doesn't work in here. I installed it into Visual Studio Code using npm, and this code works just fine there.)
The code provided (when run with the correct extension) is supposed to use head-logo-mask as the mask for logo-image, which I cannot figure out how to do. The closest I've got is where it uses the SVG as the mask but it won't actually spin or animate with the JS. I want head-logo-mask to spin and be controlled by JS while also being a mask to logo-image.
Any ideas?
