I came across a problem using Lottie for the first time in my webpack project.
As I usually do, i put the script tag with the Lottie src path at the end of the body tag, but this resulted in an error in the console: bodymovin is not defined at...
I think it's because I'm using webpack, that the Lottie script is loaded in after my index.js?
I'm not really sure where i should put my script tag then.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<canvas id="canvas" width="200" height="200"></canvas>
</div>
<h1>Test</h1>
<button class="button">Press me to light led</button>
<p class="potentiometer"></p>
<div class="bm"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js"></script>
</body>
</html>
const init = () => {
const bm = document.querySelector('.bm');
const anim = bodymovin.loadAnimation({
container: bm,
path: `../assets/eye.json`,
renderer: 'canvas',
loop: true,
autoplay: true
})
Related
I Don't khow why my console is telling me that the result is undefined.I am learning DOM and found the problem on my first code which i don't understand
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
let head = document.getElementsByClassName(".main");
console.log(head.textContent);
let tail = document.getElementsByTagName("p");
console.log(tail.textContent);
</script>
</head>
<body>
<div class="main">
<p>hello</p>
</div>
</body>
</html>
The elements doesn´t exist when the script runs in head. Move the script to after the elements
Change from .main to main in getElementsByClassName
getElementsByClassName returns a list so add [0] to getElementsByClassName("main") to get the first element
<div class="main">
<p>hello</p>
</div>
<script>
let head = document.getElementsByClassName("main")[0];
console.log(head.textContent);
let tail = document.getElementsByTagName("p")[0];
console.log(tail.textContent);
</script>
Move your script to the body
document.getElementsByClassName returns a collection of HTML elements, not a single element
with document.getElementsByClassName you should pass main, not .main
the textContent of the div with class main is probably not what you expect
to get an single element by its class name or its tag name, you can also use querySelector which is more simple (but slower)
Here is a working version :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="main">
<p>hello</p>
</div>
<script>
let head = document.querySelector(".main");
console.log(head.textContent);
let tail = document.querySelector("p");
console.log(tail.textContent);
</script>
</body>
</html>
I've been learning HTML, CSS & javascript these last few weeks. All the previous coding experience I've had is with C++ from my CS courses so I'm new to front end development.
I wrote some javascript in the HTML index page and the functions work properly. However, when I add it into an external .js file, the program stops working.
Here's the index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css"/>
<title> Progress Bar </title>
</head>
<body>
<audio id="music" src="trax/coldWorld.wav" controls></audio>
<div class="progress_bar" id="progress_bar">
<div class="progressed" id="progressed"></div>
</div>
</body>
<script src="/audio.js"></script>
</html>
The .js file:
var music = document.getElementById('music');
var progressed = document.getElementById('progressed');
var progress_bar = document.getElementById('progress_bar');
music.ontimeupdate = function(e) {
progressed.style.width = Math.floor(music.currentTime *100 / music.duration) + "%";
}
progress_bar.onclick = function(e) {
music.currentTime = ((e.offsetX / progress_bar.offsetWidth) * music.duration);
}
You can try moving the script tag inside the body tag and correcting the relative path
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
...
<script src="./audio.js"></script>
</body>
</html>
i'm using Shape.so animated illustrator on html page they are providing json code for that can anyone help how to use that json in html.
I have json file, you can export json from https://shape.so/app/icons/
thanks in advance
You can import Lottie and use loadAnimation method as described here:
https://airbnb.io/lottie/#/web?id=usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#anim {
max-width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="anim"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js" type="text/javascript"></script>
<script>
var element = document.getElementById('anim');
lottie.loadAnimation({
container: element, // the dom element that will contain the animation
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json' // the path to the animation json
});
</script>
</body>
</html>
Im quite a beginner, experimenting with SVG animations.
I have made a animation and loaded it in my simple html page with Lottie.
But I been trying to make it destroy itself and show the rest of the page content, which is the header and p.
I seen this code, googling this, but not sure where to put it, went for what I thought was logical, and paste it right under. But did not get what I wanted.
ani.addEventListener('complete', function(){
ani.destroy()
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="master.css">
<script src="master.js"></script>
<script src="lottie.js"></script>
<title>Document</title>
</head>
<body onload="start()">
<div id="velkommen"></div>
<header>
<h1>Min header</h1>
</header>
<p>tekstteksttekstketkekte</p>
</body>
</html>
window.onload(start())
function start(){
var container = document.getElementById("velkommen");
var animation = bodymovin.loadAnimation({
container: container,
renderer: 'svg',
loop: false,
autoplay: true,
path: 'data.json'
});
}
I found out! Incase someone else was wondering :
function start(){
var anim;
var animdata ={
container: document.getElementById("velkommen"),
renderer: "svg",
loop: false,
autoplay: true,
path: "data.json"
};
anim = bodymovin.loadAnimation(animdata);
anim.addEventListener('complete',stopa);
}
function stopa(){
document.getElementById("velkommen").style.display = "none";
}
I am trying to implement import/export using handlebars with nodejs/express. For some reason it gives me the following error Uncaught SyntaxError: Unexpected token {
File - api.js
import { getSymbolDb, executeEnterKey } from './fetchData'
const symbolTags = document.querySelector('#symbolTags')
const requestSymbol = document.querySelector('#requestSymbol')
requestSymbol.addEventListener('click', getSymbolDb)
symbolTags.addEventListener("keyup", executeEnterKey)
document.addEventListener('DOMContentLoaded', getSymbolDb)
File - fetchData.js
export function getSymbolDb() {}
export function executeEnterKey(event) {}
HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
{{{body}}}
<script src="/JS/api.js"></script>
<script src="/JS/fetchData.js"></script>
</body>
</html>
Solution
Here you will find more information on the subject. The following code is the basic example you can start with.
File - api.mjs
import { getSymbolDb, executeEnterKey } from './fetchData.mjs'
const symbolTags = document.querySelector('#symbolTags')
const requestSymbol = document.querySelector('#requestSymbol')
requestSymbol.addEventListener('click', getSymbolDb)
symbolTags.addEventListener("keyup", executeEnterKey)
document.addEventListener('DOMContentLoaded', getSymbolDb)
File - fetchData.mjs
export function getSymbolDb() {}
export function executeEnterKey(event) {}
HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
{{{body}}}
<script type="module" src="/JS/api.mjs"></script>
<script nomodule src="fallback.js"></script>
</body>
</html>