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
1
vote
0 answers

Exporting PNG sequence as lottie json

I am a beginner in Adobe After Effects and creating Lottie json files. Is there any way to convert PNG sequence to Lottie JSON. I have tried to export json using After Affects and Bodymovin Plugin.
1
vote
0 answers

Preload json files generated by bodymovin/lottie loaded twice by PreloadJS

I am trying to create a preload for my site via the PreloadJS library. On the site I created a dozen items via bodymovin / lottie. Bodymovin create json files with all the information of the graphic elements and animations. With Lottie it is…
Wolftrick
  • 81
  • 1
  • 10
1
vote
1 answer

How can i make a lottie animation fullscreen on all devices?

i have a problem with a mouse controller lottie animation. therefore i created this pen, to fiddle around :) https://codepen.io/duderion/pen/bGbXNqe the goal is, that the lottie animation goes from top to bottom of the viewport (minus the top menu),…
Adrian Gier
  • 35
  • 1
  • 6
1
vote
2 answers

Change color dynamically in lottie json

I did Lottie animation by using Lottie-web and now trying to change the color dynamically so I used Lottie API(https://github.com/bodymovin/lottie-api). In that, I got the keyPath for changing the color but don't know how to change the color of an…
Jenisha Dalin
  • 11
  • 1
  • 3
1
vote
1 answer

How can I get one section of this rollover animation to loop continuously?

I have an animation I'd like to use for a rollover effect with the following basic states: resting: continuously loop between frames 0 and 55 mouse enter: play once frames 56 to 78, then pause on 78 mouse out: play once frames 79-95, then return to…
Matt
  • 251
  • 4
  • 13
1
vote
1 answer

Question of browser performance and using Bodymovin and CSS animations

I am in the process of building a website full of SVG illustrations that have animated components that are being animated with Bodymovin. But the backgrounds are also sometimes animating to show movement (a runner SVG with his arms & legs moving…
Jay
  • 326
  • 2
  • 18
1
vote
1 answer

Self canceling events using bind

What I'm looking for here is a method to refer to a bound method from within that method for the purpose of removing an eventlistener from within the event listener. I'd like to create a single method to handle the same action over a few different…
Graham P Heath
  • 7,009
  • 3
  • 31
  • 45
1
vote
1 answer

Lottie - iOS. App displays JSON animation from the web, but not a JSON I rendered in After Effects

I've an iOS app that will display & play Lottie animations. The animations I've successfully used are from www.lottiefiles.com All the animations from there work. I've created my own animation in After Effects and exported using BodyMovin then tried…
Andy4202
  • 31
  • 5
1
vote
2 answers

Can I add interactivity (JS / CSS) to affect elements within Bodymovin / Lottie animations?

I'm an animator, not much of a coder but learning fast... I've been experimenting with the After Effects Bodymovin extension using bitmap images to make character animations I want to deploy on web and mobile. The results are quite amazing, you can…
hamsta
  • 11
  • 4
1
vote
1 answer

JSON Animation exported as Video mpeg

I have a json animation created in AfterEffects, exported with BodyMovin. https://github.com/bodymovin/bodymovin Is there any way to take this json file and programmatically transform it in to a video? Basically I am trying to create a JibJab style…
Tori Huang
  • 527
  • 1
  • 7
  • 25
1
vote
0 answers

Why does my Bodymovin.js loopComplete event fire before the animation has completed?

I'm trying to make icons animate when they are clicked. I would like the animation to complete before it can be restarted. I build my icons first by selecting elements and then using their id's to load the animation data via the path option: var…
Yabsley
  • 380
  • 1
  • 4
  • 17
1
vote
2 answers

Reverse play animation JS when mouseleave.

I have a code that works great. I thing I don't like is that when mouseleave an animation stops sharp. That is not good. I got a couple ideas: How make that 'stop' smoother and user-friendly? How make 'reverse play' after mouseleave? (play reverse…
Tai Raise
  • 9
  • 2
1
vote
1 answer

Bodymovin: you create multiple Json exports/animations and only reference one player

I have 4 bodymovin animations to put on a website. Currently I am uplaoding the player with each animation/json export. do I need to do this or can I just included the player once and then the Individual Jsons will use this player to keep file sizes…
0
votes
0 answers

How do i make an adobe after effect render work on my github webpage?

I rendered a file in AE with help of "bodymovin". Then I uploaded it in my repository on GitHub with other stuff. I connected everything like it was said in this video. I actually changed links, because I met this problem earlier, when link wouldn't…
0
votes
0 answers

How to automat bodymovin in after effects?

I need to automate exporing of ae templates via bodymovin. Can I invoke bodymovin with args from my CEP extension or can I run bodymovin via cli ? or another other tool or library to export comps from aep files to lottie json. I tried bodymovin and…