Centre Lottie SVG to a Header element

Question

I have an animation from Lottiefiles (in JSON format), which is then converted into an animated SVG document by the Lottie framwork. However, I can't seem to position the SVG document with the header tag. I'd like it to be beside the text.

I tried to search existing threads for similar things, but none of these worked, except for one (sort of). This included adding the SVG into a div, inside the header itself. However, when I tried this, the SVG document is fixed in place, so while it worked for shorter text (less than 6 characters), if the text was longer, the SVG would appear underneath, instead of moving to the end of the text.

I also have to manually assign the style to the SVG file through Javascript in a timeout, because the SVG document doesn't exist initially.

This is the actual header code (in PugJS).

 h1(class="channel-header" style="margin-bottom: 36px; width: 96px; margin: auto;") #{channel}
            if premium
                div(id="bodyanim" class="badge baseline")

Here is the SASS for the header and inner div tag:

.badge
  display: inline-flex
  align-self: center
  height: 70%

.badge svg, .badge img
  height: 1em
  width: 1em
  fill: currentColor
  z-index: -1
  position: absolute
  left: 0
  top: 0


.badge.baseline svg, .badge img
  top: .125em
  position: relative

.channel-header
  margin: 0 0 16px 0
  padding: 0
  line-height: 1
  font-weight: normal
  position: relative
  height: 45px

And here's the JS setting the SVG object, and setting its CSS after a timeout.

var animData = {
    wrapper: document.getElementById('bodyanim'),
    animType: 'svg',
    loop: true,
    prerender: true,
    autoplay: true,
    path: '/anims/4768-trophy.json'
};

var anim = bodymovin.loadAnimation(animData);

setTimeout(function () {
    var svg = animData.wrapper.getElementsByTagName("svg")[0];
    svg.style.position = "absolute";
    svg.style.left = "0";
    svg.style.top = "0";
    svg.style.zIndex = -1;
    svg.style.marginLeft = "65%";

}, 100);

When I run the site with this code, the header works for any text shorter than 7 characters, but if there's more, the header tries to "push" itself above the SVG document, and the SVG remains in position behind it instead of moving along with the text. You can see an example of this on this site (you can either edit the endpoint, i.e. /channel/anythinghere or edit the tag client-side):

http://themadgamers.co.uk:3000/channel/ItsMike

Include a working example using generated source to clearly outline the problem. — Andy Hoffman, Mar 27 '19 at 17:31
@AndyHoffman Sorry about that, I edited the question to include links to screenshots of both working and not working. — ItsMike, Mar 27 '19 at 20:05
The issue is that there's no easy way for us to test this. It's just a bunch of code on a screen. A link to a working example would be great so I can test out possible solutions. Try [CodeSandbox](http://codesandbox.io/). — Andy Hoffman, Mar 27 '19 at 20:53
Better yet, edit your question to include the compiled html/css as a [MCVE](https://stackoverflow.com/help/mcve). (Also, I don't think `div` elements are permitted within `h1` elements—you might want to use a `header` instead of an `h1`) — Sean, Mar 27 '19 at 21:18
@AndyHoffman Ah sorry that makes more sense. I couldn't get CodeSandbox to work with the required JS files, but I've thrown it onto a server of mine where you can see it live. — ItsMike, Mar 28 '19 at 00:42
@sean Thanks that's good to know, I've edited it to use header instead, and added a live version — ItsMike, Mar 28 '19 at 00:48

score 0 · Answer 1 · answered Mar 28 '19 at 06:29

Why do you set a fixed width for your h1?

 h1(class="channel-header" style="margin-bottom: 36px; width: 96px; margin: auto;")

If you remove the 96px width restriction, longer strings no longer push the trophy below the user names.

As for the manual need to style the SVG via JavaScript...

setTimeout(function () {
  var svg = animData.wrapper.getElementsByTagName("svg")[0];
  svg.style.position = "absolute";
  svg.style.left = "0";
  svg.style.top = "0";
  svg.style.zIndex = -1;
  svg.style.marginLeft = "65%";
}, 100);

Consider adding a new class to your CSS.

.mySvg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  margin-left: 65%;
}

Then you should be able to simplify the JavaScript to:

setTimeout(function () {
  var svg = animData.wrapper.getElementsByTagName("svg")[0];
  svg.className = "mySvg";
}, 100);

Thanks for your help! I removed the width on the header, but the trophy disappears, presumably off-screen somewhere. If I remove or change `margin-left` it reappears but will still be behind the text. Was there something with the `position` tag that you changed? — ItsMike, Mar 28 '19 at 13:46
Edit: I figured out that the `width` was automatically being set to 100% by the Lottie framework, which was pushing the header to the side. The only problem now is that the JavaScript setting the className doesn't seem to work, which i'm assuming is again due to Lottie overriding it, since no errors are thrown. It seems as long as I override the `width` it'll be fine — ItsMike, Mar 28 '19 at 14:03

Centre Lottie SVG to a Header element

1 Answers1