Stack Overflow
Stack Overflow

Questions tagged [bodymovin]

Bodymovin is an AfterEffects extension that exports animations to SVG or Canvas. Questions related to it should deal with implementation on the JavaScript/SVG/Canvas side, not about AfterEffects itself

Bodymovin is an AfterEffects extension that exports animations to SVG or Canvas. Questions related to it should deal with implementation on the JavaScript/SVG/Canvas side, not about AfterEffects itself. To report bugs inside of Bodymovin, create an issue on GitHub.

93 questions
2
votes
1 answer

How can I trigger an event once Lottie animation reaches a certain frame?

Using Lottie/BodyMoving, how can I trigger an event once the Lottie animation reaches a certain frame. For example: Once anim1 reaches a certain frame, I want anim2 to play. Thanks
Toby Mardles
  • 85
  • 2
  • 10
2
votes
1 answer

Can you use Lottie-Files / bodymovin on a github pages account

BodyMovin / LottieFiles - requires that you have your After Effects animation in a JSON format and stored on your server. Because GitHub Pages is a static site with no backend, does this mean that you cannot use LottieFiles with GitHub Pages? If…
Wally
  • 705
  • 1
  • 9
  • 24
2
votes
0 answers

Android Bodymovin animation to mp4 video

In Android, I want to export bodymovin animation as mp4. I have animation files like this Lottie Files. now I am looking for code in which I can export this animation as mp4 The code I have tried: public void generateFrame(Drawable…
user2401847
  • 35
  • 3
2
votes
1 answer

How to use react-bodymovin with nextjs

react-bodymovin works perfectly for my reactjs app but when being migrated to nextjs, it does not work. I received the following errors: ReferenceError: window is not defined at Object.…
user602874
  • 1,429
  • 2
  • 12
  • 10
2
votes
0 answers

Webpack image path not resolving in JSON file

I am using webpack with vue and lottie to play some SVG animations. when using "@/assets/animations/images/img_3.png" straight in a component, I can see the image is loaded as an encoded img src - meaning the @ resolves to my 'src' directory. But,…
user3195250
  • 127
  • 2
  • 13
2
votes
3 answers

Using addEventListener on multiple elements, avoid TypeError when particular element not found

I'm using two simple addEventListener mouseenter and mouseleave functions respectively to play and stop animations (Bodymovin/SVG animations, though I suspect that fact is irrelevant). So, the following works…
CK MacLeod
  • 932
  • 6
  • 10
2
votes
1 answer

JSON format of SVG inside React Component

I used bodymovin extension of AfterEffects to create an animation and export it as a JSON that is compatible for the web. I tried following this walk-through to figure out how to include it inside a component:…
RebeccaK375
  • 871
  • 3
  • 17
  • 28
2
votes
1 answer

Can I start few frames and loop the rest of the frame without programmatically call setProgress()?

I want to make an animation e.g. showing something from very small in size to normal size and then repeat (loop) a set of frames. Is that possible just by using AE + Bodymovin? I know I can set the frame 0 to 100 and then loop between 101 to 300…
Brian Chu
  • 113
  • 9
2
votes
0 answers

After Effects bodymovin into PIXI.js

In this after effect example, It show the option renderer: 'pixi' I would like to know whether this will use the pixi js renderer technique or else it will create a pixi js canvas for making animation. Also would like to know is it possible to load…
Karthick Kumar
  • 1,217
  • 1
  • 25
  • 38
1
vote
0 answers

How to target an svg element?

Wordpress site. I'm trying to change the color of an svg icon that is being animated through bodymovin. I want the animation to change color on hover, and I thought I could do this by targeting the svg path. The problem is I cannot target the svg.…
RRhodes
  • 501
  • 6
  • 19
1
vote
0 answers

How to play audio on a website with a json file?

I'm currently trying to play a JSON animation exported from After Effects with the plugin Bodymovin that now supports audio files. The problem is that it is just playing that animation and not playing the audio. First, I thought it was Bodymovin not…
Sara Tavares
  • 11
  • 2
1
vote
2 answers

Unable to load animation.json file to my flutter project

I exported animation.json file from Aftereffect using bodymovin and I can't load it to my flutter project. I followed this medium article and I was unable to render the animation, also after putting the file path in assets at the pubspec.yaml…
Ahmed Khaled Abdalla
  • 21
  • 4
1
vote
1 answer

Lottie animation has missing parts in iOS but works perfectly in html and Android

I've made an animation of a ship with a moving flag and waves in After Effects and exported it to JSON using Bodymovin. I used the wave warp effect for the flag and the waves but since Lottie doesn't support that effect I fixed it using auto-trace…
Angelica Dewi
  • 43
  • 5
1
vote
1 answer

Reduce expressions to values in After Effects

I'm using an explainer template (Pixity Land) to create some short animations with After Effects, and use a tool like Bodymovin/lottie to render HTML5 Canvas/SVG animations. Unfortunately Bodymovin has an issue with the expressions used in Pixity…
HardlyNoticeable
  • 497
  • 9
  • 26
1
vote
1 answer

Lottie local animation not displaying on web page

I have a simple html do display an animation i made in After Effects, but i can't display the animation when loading it locally (data.json). But if i upload the animation through LottieFiles and use the link generated in my html file, it works. Can…
31GipsyKing
  • 23
  • 1
  • 5
1
2
3 4 5 6 7