Lottie Animation

Design help Custom code
1

Hello
I’m trying to implement Lottie/Bodymovin svg animations into my site but i can’t get them to appear, even on the published site
Can anyone see where i’m going wrong?
https://preview.webflow.com/preview/animated-svg-tets?utm_source=animated-svg-tets&preview=5c5f182b511074f9e8e5cc9347d061a9

note the code point to the bodymovin java is in the pages custom code section and the animation should be in the html box in the middle of the page

2

Hey, try to see this topic and reference project from author: Need help with implementing "Bodymovin"

3

@samliew I tried your steps from a previous post but to still no avail,
Isnt hosting the file on github making the same problem: the file being hosted on url thats not the same as the website?

4

I’m not sure but maybe problem in this: Complete Guide to Cross-Origin Resource Sharing (CORS) - KeyCDN Support

5

Thanks for the reply but that article is a bit too technical for my understanding

6

In other words, you need hosting with an activated CORS function.

7

hmm i see. I see @webdes or @DigitalPanda was able to get lottie working, maybe they can shine some light on their solution

8

You linked to a web page, not one of the scripts listed on that page

https://cdnjs.com/libraries/bodymovin is incorrect, did you mean to use https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.2/lottie.js instead?

Screenshot_2018-12-10_131249

9

Hey Connor,

My suggestion would be to use the following scripts.
You can direct link to the path of your SVG with this approach, by changing that ‘path’ URL.

<script src='https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.10.2/bodymovin.js'></script>

<script>
var loader = document.getElementsByClassName("bodymovin");

function loadBMAnimation(loader) {
  var animation = bodymovin.loadAnimation({
    container: loader,
    renderer: "svg",
    loop: true,
    autoplay: false,
    path: "https://gist.githubusercontent.com/Bekkers92/f988e2b006ff4b154adedd3be94895e1/raw/ae88d99f0d0885fe909c99dd4614d8d595c44d5f/favorite_black.json"
  });
  loader.addEventListener("mouseenter", function() {
    animation.play();
  });
  loader.addEventListener("mouseenter", function() {
    animation.stop();
  });
}

for (var i = 0; i < loader.length; i++) {
  loadBMAnimation(loader[i]);
}
</script>

And add the following if you wish to change the styling.

<style>
#bodymovin{
    width:120px;
    height:120px;
    display:block;
    overflow: hidden;
    transform: translate3d(0,0,0);
    text-align: center;
    opacity: 1;
    color: white;
}
</style>

Add a div with the following ID & data attributes:

image

So this is rough, currently at work :wink:

But you can play with the JS mouse function / auto play / loop features

Let me know if that works for you

3 Likes
10

Hi @Thomas_92 you’re the man! This worked splendidly

The only thing i noticed with above code is you has two mouse enters that snoth tart and stop the animation, i assume one is meant to be mouseleave

loader.addEventListener(“mouseenter”, function() {
animation.play();
});
loader.addEventListener(“mouseleave”, function() {
animation.stop();
});
}

11

Hey Thomas!

I’m working on a tutorial to add animated icons to your site. I have two questions:

  1. How would I attach the event listener to the icon’s parent element as opposed to the icon itself? I don’t think everyone would hover over the icon itself. So, I want the target area to be the parent element so it’s more likely they would get the animation to play.
  2. With animation.stop, if you hover off the element mid-animation, the animation snaps back to the first frame in an unsightly way. Is there a way to let the animation finish and then revert back to the first frame? I did try using animation.finsh for “mouseleave”, but the animation won’t play again after that…
  3. I would also be interested in having the animation Reverse on mouseleave. I tried to do animation.reverse and that didn’t work. Any thoughts on that?

If it helps, here’s my links:

Live Site: https://lottie-animation.webflow.io/
Read-Only Link: https://preview.webflow.com/preview/lottie-animation?utm_source=lottie-animation&preview=ba0176f2dda24e68a3f2b7a8303fa6fd

@samliew if you have any ideas, that would be great too…

1 Like