I am trying to Add svg animation to my angular website
I have tried to do example what is writen in the example:
video tutorial: How to export an animation with Bodymovin - YouTube
no matter what i do it doesnt show up
There is a Lottie Library for Angular to show svg animation
but that kept on failing as well so i tried to keep it simple and just use Javascript
on my main index html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#1976d2">
</head>
<body>
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
<script src='app/loading/bodymovin.js'></script>
<script src="app/loading/index.js"></script>
</body>
</html>
I have created a Loading map in that map there is the Loading.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-loading',
template: `
<h1>Hello there</h1>
<div id="bm"> </div>
<!-- Scripts -->
<script src="scripts/bodymovin.js"></script>
<script src="scripts/index.js"></script>
`
})
export class LoadingComponent {
}
the bodymoving.js and the index.js is exaclty the same as the example in the first link
its just copy and paste.
i can see the "Hello there " from the component but i dont see any animation whatso ever.
I have also tried to put all the html code in the main index.html:
<body>
<app-root></app-root>
<h1>hello this is a test</h1>
<div id="bm"> </div>
<noscript>Please enable JavaScript to continue using this application.</noscript>
<script src='app/loading/bodymovin.js'></script>
<script src="app/loading/index.js"></script>
</body>
and i have tried to open with Google chrome and firefox
both did not work . please help me out with this