Hey guys I have got a JS code where I'm trying to animate, sort of like typing effect. I know I can use typed.js for this purpose but that requires passing in an HTML container. Which in this case, I don't have access, I mean that I have the index.html but this text I'm trying to animate isn't in HTML but in JS. Although for some reason when I inspect this text element on the webpage, it does show the text in HTML. I know it's kinda hard to understand so I've attached the code snippet for both index.html and JS code.
JS CODE: HERE I WANNA ANIMATE THE subTitle part
[![const greeting = {
username: "Mr.",
title: "Hi all,",
subTitle: emoji(
"A fanatic Full Stack Software Developer having an experience of building Web and Mobile applications with JavaScript / Reactjs / Nodejs / React Native and some other cool libraries and frameworks."
),
displayGreeting: true // Set false to hide this section, defaults to true
};][1]][1]
index.html, you will notice that it doesn't contain the element I want to animate but it appears as part of it when I inspect the element on the webpage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png?v8=qAJ44G5Bm7">
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png?v8=qAJ44G5Bm7">
<link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg?v8=qAJ44G5Bm7" color="#885bd5">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico?v8=qAJ44G5Bm7">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<meta name="msapplication-TileColor" content="#603cba">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#6c63ff" />
<meta name="My Portfolio" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png?v8=qAJ44G5Bm7">
<meta property="og:title" content="My Portfolio" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://developerfolio.js.org/" />
<meta property="og:image" content="https://developerfolio.js.org/static/media/developerActivity.59389695.svg" />
<link rel=preload href="/static/media/Montserrat-Regular.ee653992.ttf" as="font" type="font/woff" crossorigin>
<link rel=preload href="/static/media/Agustina.21f233e1.woff" as="font" type="font/woff" crossorigin>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-135618960-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-135618960-2');
</script>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/FortAwesome/[email protected]/css/all.min.css">
<title>Trial/title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Please help me solve this problem, I'd really appreciate it!