0

I'm stuck and I spend a whole day on this issue. Basically I'm trying to implement in my website an animation, using Lottie. The format of my animation is 1080*1920. The problem is that, given a div, with:

width: auto; height: auto; or width: 100%; height: 100%;

the exported animation is always bigger than the enclosing parent. This problem arise specially with the smartphone sized-screens. I tried to change all the parameters, unsuccessfully. I even touched the java script code, in Lottie, you can specify the rendered options:

You can see the animation here:

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%;
}

.section2{
  background-image: radial-gradient(farthest-side at 0 100%,rgba(69,134,247,.3),rgba(69,134,247,0)),radial-gradient(farthest-side at  100% 100% ,rgba(60,221,221,.4),rgba(60,221,221,0)),radial-gradient(farthest-side at 100% 50%,rgba(98,217,245,.1),rgba(98,217,245,0));
  width: 100%;
  height:100%;
}

.section3{
background-image: radial-gradient(farthest-side at 0 0,rgba(69,134,247,.3),rgba(69,134,247,0)),radial-gradient(farthest-side at 100% 0,rgba(60,221,221,.4),rgba(60,221,221,0)),radial-gradient(farthest-side at 50% 50%,rgba(98,217,245,.1),rgba(98,217,245,0));
  width: 100%;
  height:100%;
}

#homeSection {
  height: auto;
  border-style: solid;
  border-color: yellow;
  position: absolute;
  right: 5px;
  left: 5px;
}
<div>
    <nav class="navbar navbar-expand-lg navbar-custom" >
        <a class="navbar-brand">
            <img class="logo " src="images/AM_logo.png" href="#">
        </a>
        <a class="navbar-brand" style="color: black"> Arduino Developer </a>

    </nav>
</div>


<div class="container-fluid section1" >
        <div id="homeSection">
            <div>
                <p class="text textH"> TEXT 1</p>
            </div>

            <div>
                <p class="text textT"> TEXT2</p>
            </div>
        </div>
</div>

img1 img2

WebStormer
  • 286
  • 3
  • 17

1 Answers1

1

It's been a while but I came across this problem. I tried this workaround in order for the element not to overflow and ruin the whole layout:

#homeSection
{
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 40%; /*You can change this to fit your needs. Maybe 100%*/
  vertical-align: middle;
  overflow: hidden;
}

#homeSection > svg
{
  display: inline-block; 
  position: absolute; 
  top: 0;
  left: 0;
}

The id mentioned above is the id from the document.getElementById('homeSection'); that can be found inside your html or js file that creates the lottie.

Efstef
  • 88
  • 9
  • 1
    This css hack worked for me, but I think it's not so easy to understand. Solved the lottie overflow by using one with transparent background instead :) – Camilo Vega Jan 04 '23 at 13:13
  • @CamiloVega 2 years later and with some more work on CSS and animation, I can say that Lottie and mostly SVG files must be set up correctly in the first place, in order to avoid any element overflows inside divs. After that, I would check how the Lottie element is created and lastly apply any CSS hacks. I had come across cases where the material I received from the Lottie creator, was wrongly configured. In the case of transparent background, I would check if the Lottie did not overflow or blocked other elements in the layout. If all seems ok then transparent bg could work. Cheers :) – Efstef Jan 05 '23 at 09:38
  • That was the case, asked for one with that transparent bg and so far so good, hopefully nothing breaks! – Camilo Vega Jan 05 '23 at 11:45