Is there a way to remove attribution on hover?

Lottie in Web
1

I’m creating Lottie animations to use in my own website but I would like for them to not have the “Created by _____” link pop up when someone hovers their mouse over the animation.
I am using the iframe embed as it’s the easiest option I’ve for inserting Lottie animations into BigCommerce.
I tried adding CSS & JS functions to hide the attribution class but that caused issues with the entire animation.
Thanks.

5 Likes
2

I need help with the same thing!

3

@ejch225 Did you find any solution?

4

Did you find any solution?

5

I have the same problem to include it on an articulate rise project. Do you have a solution ?

6

At the moment, the iframe code/ oEmbed url is designed that way that will include the animator’s name. Alternatively, you can use the web-player Lottie Web Player - Lottiefiles if you want to have embed the animations without the animator’s name.

7

You can do this with JS

  1. Name a layer or composition with “#” at the begining of the name in After Effects. You need to name it like this: #hidethis. After export it will give this layer ID in HTML (id=“hidethis”)
  2. Create the JS function which will run when document (and lottie animation) is loaded.
// DO IT WHEN PAGE IS LOADED
window.addEventListener("DOMContentLoaded", (event) => {

	  // GET THE ELEMENT YOU NEED TO HIDE
      var hidethis = document.getElementById('hidethis');

      // GET THE ELEMENT YOU NEED TO HOVER, IT COULD BE THE WHOLE LOTTIE CONTAINER OR A SPECIFIC ELEMENT FROM YOUR LOTTIE ANIMATION
      var lottie = document.getElementById('lottie');

      // HIDE THE ELEMENT WHEN MOUSE OVER
      lottie.onmouseover = function() {hidethis.style.opacity = "0"};

      // SHOW THE ELEMENT WHEN MOUSE OUT 
      lottie.onmouseout = function() {hidethis.style.opacity = "1"};

});
  1. You can add “transition” in css for more smooth effect