Animation doesn't show

[vetvine88]

• Browser and Browser Version: Chrome latest version. firefox latest version

• After Effects Version: cc2019

*What did you do? Please explain the steps you took before you encountered the problem.** Installed bodymovin according to the instructions. Used CDN followed the steps shown in the examples. In the end blank screen on browser when opened the html.

Animation doesn't show. I want it to get displayed.

https://snipboard.io/aV3h7M.jpg

https://snipboard.io/Wkbdmn.jpg

Spur Animation 1 folder.zip

anim.zip

[henriqrossatto]

Hi @vetvine88

I was checking your files and you have a lot of expressions and effects. I'm not so sure if the text animations on range select are supported by the extension too. 3D won't will work too.

Try to keep the animations more simple without expressions or effects. You can check here what is supported on lottieweb http://airbnb.io/lottie/#/supported-features

And if you use a vector illustration, try to convert it in shapes. .Ai/EPS files will be readed as images in exportation.

[vetvine88]

Hi @henriqrossatto

First of all Thank you very much for your reply! Wish you are safe and well at your place.

I tried this:

I exported this as "Demo Export Mode"

Screenshot: https://snipboard.io/OUYhqz.jpg

I got HTML file and an image.

It didn't show anything in browser. After that I made a change in html file in my code editor.

I changed "renderer: 'html'," to "renderer: 'svg',"

Screenshot: https://snipboard.io/GInBRD.jpg

After that it worked in browser perfectly.

But still I am searching for what should I change in the "Standard export mode"? Can you please try?

I'm attaching the latest zip files of the renders and AEP.

Spur Animation 2 folder.zip

Exported As Standard.zip Exported As Demo.zip

Thanks

[vetvine88]

Hi @henriqrossatto

I have tried a very simple animation. Just change in Rectangle length. Still the same problem.

[henriqrossatto]

Hi @vetvine88, happy to know that you got make it work.

About the Demo and Standard. When you export a Standard you will just receive the data.json (animation) and if you use images, they will be exported on a folder like you have.

Demo is just a local html file preview that shows how your animations is working. I don't work in the coding part so I'm not pretty sure if you can just copy and past the code in demo file for implementation.

When I export the animations for my clients I usually export

• data.json (animation)
• lottie.js (player)

Standard will work as same of demo.html for preview if you zip data.json and images folders and place on lottiefiles like here https://lottiefiles.com/share/ACUlUE

[vetvine88]

Hi @henriqrossatto

I have tried a very simple animation. Just change in Rectangle length. Still the same problem.

I am doubtful that my file does work or not?

Can you send me the zipped folder with all the required files arranged. Use the same zip folder that I provided?

Thanks!

[henriqrossatto]

I'm just using your exportated files. I believe these are what you need for implement. Files.zip

Here zip I used for the preview preview_lottiefiles.zip

I just can't help you more than that because now is dev part and I don't know about this part =/

[vetvine88]

@henriqrossatto I extracted the zip folder still not working. Works well when I upload on lottie site for preview.

[vetvine88]

@henriqrossatto I understand your situation! Thanks

[bodymovin]

@vetvine88 hi, your animation is not working locally because you are loading it from your file system. For security reasons browsers don't allow to load json files from the local system. You need to use a web server to test them locally.

[karmelyoei]

Hey I have a problem the animation doesn't show in the browser even though there is no error indicated how can solve it?

[vetvine88]

@karmelyoei it wont get displayed on local. either use some hosting or xampp server. it would work fine if you place it on some website or online platform

[karmelyoei]

@karmelyoei it wont get displayed on local. either use some hosting or xampp server. it would work fine if you place it on some website or online platform

I tested in Lottie test it works but it doesn't show the image do you have any idea?

[vetvine88]

@karmelyoei please share zipped folder

[karmelyoei]

okay here data.zip

[vetvine88]

@karmelyoei create a folder "images". place the image there

[karmelyoei]

How can I implement that with react this is my code

lottie.loadAnimation({
      container: logoContainer.current, // the dom element that will contain the animation
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: happyTeam, // the path to the animation json
    });
  }, []);

 <div
            id="logoContainer"
            style={{ width: '34%', margin: '0 auto' }}
            ref={logoContainer}
          ></div>

btw I still have an issue I used animation free to check if it works from Lottie files it works but when the react render or reload it duplicated the animation do you have any idea how to solve this problem as well

Thank you for helping me

[vetvine88]

@karmelyoei I have no idea for react. sorry for that. i used it in html css template

[karmelyoei]

it's okay no worries thnx for your replay

[yuchuga]

How can I implement that with react this is my code

lottie.loadAnimation({
      container: logoContainer.current, // the dom element that will contain the animation
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: happyTeam, // the path to the animation json
    });
  }, []);

 <div
            id="logoContainer"
            style={{ width: '34%', margin: '0 auto' }}
            ref={logoContainer}
          ></div>

btw I still have an issue I used animation free to check if it works from Lottie files it works but when the react render or reload it duplicated the animation do you have any idea how to solve this problem as well

Thank you for helping me

Hi, you have to unmount the component by pasting the code as follows:

lottie.loadAnimation({ container: logoContainer.current, // the dom element that will contain the animation renderer: 'svg', loop: true, autoplay: true, animationData: happyTeam, // the path to the animation json }); return () => lottie.destroy(); }, []);