After struggling with this issue for an entire day, I'm seeking help to implement an animation using Lottie on my website. The animation format is 1080*1920, but the problem arises when trying to fit it within a div.
The dimensions of the div are set as:
width: auto; height: auto; or width: 100%; height: 100%;
Despite numerous attempts to adjust parameters, the exported animation always exceeds the size of the parent element, especially on smartphones. Even modifications in the JavaScript code provided by Lottie have proven unsuccessful.
You can view the animation by following this link:
animation.json
import './styles/main.scss'
const lottie = require('lottie-web')
const bodymovin = require('bodymovin')
var svgContainer = document.getElementById('homeSection');
var animData = {
container: svgContainer,
renderer: 'svg',
loop: false,
autoplay:true,
path: 'PhoneRotate.json'
};
var anim = lottie.loadAnimation(animData);@import "~bootstrap/scss/bootstrap";
html, body {
background-color: #000;
overflow: scroll;
}
.section1{
background-color: black;
width: 100%;
height:100%;
}
...
</div>https://i.sstatic.net/RAExi.png https://i.sstatic.net/2gNqH.png