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
14
votes
3 answers

jQuery - Bodymovin JSON not loading

The slider and shuffle lottie animations are supposed to run from 0 to 100 and then back to 0 when toggled; like the box animation. However you can see that the slider animation disappears in the final frame and the shuffle animation seems to only…
Kyle Underhill
  • 89
  • 15
  • 43
10
votes
2 answers

Bodymovin hover playing animation only once

Got my animation to trigger play on hover. I got everything to work but when I try to hover to play again, nothing seems to work. Any ideas what I wrote wrong? var squares = document.getElementById("test"); var animation =…
phantomboogie
  • 113
  • 1
  • 7
8
votes
2 answers

How to use events with bodymovin.js

Apologies in advance for my ignorance as I suspect this is a very easy question to answer, but I'm stuck. I'm using bodymovin to play an svg animation on a website. I want to use the onComplete event to trigger a function when the animation…
Luke Seall
  • 525
  • 1
  • 4
  • 21
5
votes
3 answers

How do I use ColorFilter with React-Native-Lottie?

I cannot seem to get the colorFilter prop working with my .json file. There are no errors but the colours are clearly not changing.
Harry Feld
  • 73
  • 1
  • 6
5
votes
2 answers

What is the difference between Lottie Events and Lottie EventListeners and How to use?

The documentation has both Events and EventListeners. I can get the EventListeners to fire but the Events do not have adequate documentation for me to get going. What is the difference and how do you use? Thank…
Ray Villaraza
  • 61
  • 1
  • 1
  • 7
5
votes
3 answers

Why is bodymovin exporting PNG's and not SVG's?

I'm trying to use lottie to animate an SVG animation created in After Effects. I use the bodymovin extension to export the JSON data file. But, I also noticed the export includes some PNG images. I'm also getting console errors that said PNG's can…
DeveloperJames
  • 185
  • 3
  • 10
4
votes
1 answer

Accessing methods when using react-bodymovin to loop animation segments

I am using the react-bodymovin package (https://www.npmjs.com/package/react-bodymovin) to embed a Bodymovin animation, but I wanted to loop a section of the animation after it has played through once. I can see is simple using the HTML version of…
Oli C
  • 1,120
  • 13
  • 36
3
votes
2 answers

Dynamic import files with React

I am creating an animations using Adobe After Effects and React Lottie and I have many json files generated by Bodymovin extension. I am importing files in that way: import * as initial from './white_bird.json'; import * as hoverOn from…
Freestyle09
  • 4,894
  • 8
  • 52
  • 83
3
votes
0 answers

Lottie - INTERACTIVE web based animation with raster IMAGES

I'm new to Lottie, have had some tutorial and tests completed, and got fascinated with the idea of mixing together After Effects animation with HTML5 animation. THANK YOU AB&B GENIES! We're about to develop an online interactive project in which…
Fe Giraldi
  • 31
  • 2
3
votes
1 answer

Can I convert from swf (or fla or svg or snap or sprite.js) to bodymovin

I have a bunch of animated vector graphic files that I would like to convert to bodymovin (I assume I would need to convert them into after effects first and use the bodymovin extension). I animated files in swf, fla, svg (using the animate…
atreeon
  • 21,799
  • 13
  • 85
  • 104
3
votes
1 answer

Changing viewbox values on SVG with bodymovin JSON

New to dealing with bodymovin. Is there a way to change the viewbox of the exported SVG after parsing it into the browser, either by using Javascript, or by editing the data.json? Basically I want the final output of the viewbox to be "50 0 400…
bluebrooklynbrim
  • 277
  • 4
  • 19
3
votes
2 answers

Bodymovin loop a segment on demand

I have several icons that have an intro animation [0,20] where they get drawn in and a loop animation [21, 100] for when you hover over the icons. Setting loop to true will make all my segments loop which is not what I want, I only need one of the…
user3376065
  • 1,137
  • 1
  • 13
  • 31
2
votes
0 answers

How we can get FFMPEG command from aftereffect json file(exported from bodymovin)?

How we can get FFMPEG command from aftereffect json file(exported from bodymovin)? I have export aftereffect json file with help of bodymovin plugin. But I have to load animation with help of ffmpeg. How I can get ffmpeg command from json or any…
2
votes
2 answers

Flutter Lottie: Works on Lottie player but not in Flutter

Lottie animation works absolutely fine in lottie player but does not work in Flutter Web or Flutter Android. (Haven't tested on…
Raj Dhakad
  • 852
  • 2
  • 17
  • 39
2
votes
0 answers

How to access text data in a precomposition using Lottie web

I'm trying to control the text values of a .json file, exported using bodymovin. At this moment, i succeeded in creating a flat 'template' exported from bodymovin, and changing the values in the bodymovin .json file using the function…
Hylkewolf
  • 21
  • 1
1
2 3 4 5 6 7