Giter VIP home page Giter VIP logo

lottie-web's Introduction

Lottie for Web, Android, iOS, React Native, and Windows

Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!

For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand. They say a picture is worth 1,000 words so here are 13,000:

View documentation, FAQ, help, examples, and more at airbnb.io/lottie

Example1

Example2

Example3

Community

Example4

Plugin installation

Option 1 (Recommended):

Download it from from aescripts + aeplugins: https://aescripts.com/bodymovin/

Option 2:

Or get it from the adobe store https://exchange.adobe.com/creativecloud.details.12557.html CC 2014 and up.

Other installation options:

Option 3:

  • download the ZIP from the repo.
  • Extract content and get the .zxp file from '/build/extension'
  • Use the ZXP installer from aescripts.com.

Option 4:

  • Close After Effects

  • Extract the zipped file on build/extension/bodymovin.zxp to the adobe CEP folder:
    WINDOWS:
    C:\Program Files (x86)\Common Files\Adobe\CEP\extensions or
    C:\<username>\AppData\Roaming\Adobe\CEP\extensions
    MAC:
    /Library/Application\ Support/Adobe/CEP/extensions/bodymovin
    (you can open the terminal and type:
    $ cp -R YOURUNZIPEDFOLDERPATH/extension /Library/Application\ Support/Adobe/CEP/extensions/bodymovin
    then type:
    $ ls /Library/Application\ Support/Adobe/CEP/extensions/bodymovin
    to make sure it was copied correctly type)

  • Edit the registry key:
    WINDOWS:
    open the registry key HKEY_CURRENT_USER/Software/Adobe/CSXS.6 and add a key named PlayerDebugMode, of type String, and value 1.
    MAC:
    open the file ~/Library/Preferences/com.adobe.CSXS.6.plist and add a row with key PlayerDebugMode, of type String, and value 1.

Option 5:

Install the zxp manually following the instructions here: https://helpx.adobe.com/x-productkb/global/installingextensionsandaddons.html Skip directly to "Install third-party extensions"

Option 6:

Install with Homebrew-adobe:

brew tap danielbayley/adobe
brew cask install lottie

After installing

  • Windows: Go to Edit > Preferences > Scripting & Expressions... > and check on "Allow Scripts to Write Files and Access Network"
  • Mac: Go to Adobe After Effects > Preferences > Scripting & Expressions... > and check on "Allow Scripts to Write Files and Access Network"

Old Versions

  • Windows: Go to Edit > Preferences > General > and check on "Allow Scripts to Write Files and Access Network"
  • Mac: Go to Adobe After Effects > Preferences > General > and check on "Allow Scripts to Write Files and Access Network"

HTML player installation

# with npm
npm install lottie-web

# with bower
bower install bodymovin

Or you can use the script file from here: https://cdnjs.com/libraries/bodymovin Or get it directly from the AE plugin clicking on Get Player

Demo

See a basic implementation here.

Examples

See examples on codepen.

How it works

Here's a video tutorial explaining how to export a basic animation and load it in an html page

After Effects

  • Open your AE project and select the bodymovin extension on Window > Extensions > bodymovin
  • A Panel will open with a Compositions tab listing all of your Project Compositions.
  • Select the composition you want to export.
  • Select a Destination Folder.
  • Click Render
  • look for the exported json file (if you had images or AI layers on your animation, there will be an images folder with the exported files)

HTML

  • get the lottie.js file from the build/player/ folder for the latest build
  • include the .js file on your html (remember to gzip it for production)
<script src="js/lottie.js" type="text/javascript"></script>

You can call lottie.loadAnimation() to start an animation. It takes an object as a unique param with:

  • animationData: an Object with the exported animation data. Note: If your animation contains repeaters and you plan to call loadAnimation multiple times with the same animation, please deep clone the object before passing it (see #1159 and #2151.)
  • path: the relative path to the animation object. (animationData and path are mutually exclusive)
  • loop: true / false / number
  • autoplay: true / false it will start playing as soon as it is ready
  • name: animation name for future reference
  • renderer: 'svg' / 'canvas' / 'html' to set the renderer
  • container: the dom element on which to render the animation

It returns the animation instance you can control with play, pause, setSpeed, etc.

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

Composition Settings:

Check this wiki page for an explanation for each setting. https://github.com/airbnb/lottie-web/wiki/Composition-Settings

Usage

Animation instances have these main methods:

play


stop


pause


setSpeed(speed)

  • speed: 1 is normal speed.

goToAndStop(value, isFrame)

  • value: numeric value.
  • isFrame: defines if first argument is a time based value or a frame based (default false).

goToAndPlay(value, isFrame)

  • value: numeric value.
  • isFrame: defines if first argument is a time based value or a frame based (default false).

setDirection(direction)

  • direction: 1 is forward, -1 is reverse.

playSegments(segments, forceFlag)

  • segments: array. Can contain 2 numeric values that will be used as first and last frame of the animation. Or can contain a sequence of arrays each with 2 numeric values.
  • forceFlag: boolean. If set to false, it will wait until the current segment is complete. If true, it will update values immediately.

setSubframe(useSubFrames)

  • useSubFrames: If false, it will respect the original AE fps. If true, it will update on every requestAnimationFrame with intermediate values. Default is true.

destroy()


getDuration(inFrames)

  • inFrames: If true, returns duration in frames, if false, in seconds.

Additional methods:

  • updateDocumentData -- updates a text layer's data More Info

Lottie has several global methods that will affect all animations:

lottie.play() -- with 1 optional parameter name to target a specific animation
lottie.stop() -- with 1 optional parameter name to target a specific animation
lottie.goToAndStop(value, isFrame, name) -- Moves an animation with the specified name playback to the defined time. If name is omitted, moves all animation instances.
lottie.setSpeed() -- first argument speed (1 is normal speed) -- with 1 optional parameter name to target a specific animation
lottie.setDirection() -- first argument direction (1 is normal direction.) -- with 1 optional parameter name to target a specific animation
lottie.searchAnimations() -- looks for elements with class "lottie" or "bodymovin"
lottie.loadAnimation() -- Explained above. returns an animation instance to control individually.
lottie.destroy(name) -- Destroys an animation with the specified name. If name is omitted, destroys all animation instances. The DOM element will be emptied.
lottie.registerAnimation() -- you can register an element directly with registerAnimation. It must have the "data-animation-path" attribute pointing at the data.json url
lottie.getRegisteredAnimations() -- returns all animations instances
lottie.setQuality() -- default 'high', set 'high','medium','low', or a number > 1 to improve player performance. In some animations as low as 2 won't show any difference.
lottie.setLocationHref() -- Sets the relative location from where svg elements with ids are referenced. It's useful when you experience mask issues in Safari.
lottie.freeze() -- Freezes all playing animations or animations that will be loaded
lottie.unfreeze() -- Unfreezes all animations
lottie.inBrowser() -- true if the library is being run in a browser
lottie.resize() -- Resizes all animation instances

Events

  • onComplete
  • onLoopComplete
  • onEnterFrame
  • onSegmentStart

you can also use addEventListener with the following events:

  • complete
  • loopComplete
  • drawnFrame
  • enterFrame
  • segmentStart
  • config_ready (when initial config is done)
  • data_ready (when all parts of the animation have been loaded)
  • data_failed (when part of the animation can not be loaded)
  • loaded_images (when all image loads have either succeeded or errored)
  • DOMLoaded (when elements have been added to the DOM)
  • destroy

Other loading options

  • if you want to use an existing canvas to draw, you can pass an extra object: 'rendererSettings' with the following configuration:
lottie.loadAnimation({
  container: element, // the dom element
  renderer: 'svg',
  loop: true,
  autoplay: true,
  animationData: animationData, // the animation data
  // ...or if your animation contains repeaters:
  // animationData: cloneDeep(animationData), // e.g. lodash.clonedeep
  rendererSettings: {
    context: canvasContext, // the canvas context, only support "2d" context
    preserveAspectRatio: 'xMinYMin slice', // Supports the same options as the svg element's preserveAspectRatio property
    title: 'Accessible Title', // Adds SVG title element for accessible animation title
    description: 'Accessible description.', // Adds SVG desc element for accessible long description of animation
    clearCanvas: false,
    progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
    hideOnTransparent: true, //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)
    className: 'some-css-class-name',
    id: 'some-id',
  }
});

Doing this you will have to handle the canvas clearing after each frame
Another way to load animations is adding specific attributes to a dom element. You have to include a div and set it's class to "lottie". If you do it before page load, it will automatically search for all tags with the class "lottie". Or you can call lottie.searchAnimations() after page load and it will search all elements with the class "lottie".

  • Add the data.json to a folder relative to the html
  • Create a div that will contain the animation.
  • Required
    • A class called "lottie"
    • A "data-animation-path" attribute with relative path to the data.json
  • Optional
    • A "data-anim-loop" attribute
    • A "data-name" attribute to specify a name to target play controls specifically

Example

 <div style="width:1067px;height:600px"  class="lottie" data-animation-path="animation/" data-anim-loop="true" data-name="ninja"></div>

Preview

You can preview or take an svg snapshot of the animation to use as poster. After you render your animation, you can take a snapshot of any frame in the animation and save it to your disk. I recommend to pass the svg through an svg optimizer like https://jakearchibald.github.io/svgomg/ and play around with their settings.

Recommendations

Files

If you have any images or AI layers that you haven't converted to shapes (I recommend that you convert them, so they get exported as vectors, right click each layer and do: "Create shapes from Vector Layers"), they will be saved to an images folder relative to the destination json folder. Beware not to overwrite an existing folder on that same location.

Performance

This is real time rendering. Although it is pretty optimized, it always helps if you keep your AE project to what is necessary
More optimizations are on their way, but try not to use huge shapes in AE only to mask a small part of it.
Too many nodes will also affect performance.

Help

If you have any animations that don't work or want me to export them, don't hesitate to write.
I'm really interested in seeing what kind of problems the plugin has.
my email is [email protected]

AE Feature Support

  • The script supports precomps, shapes, solids, images, null objects, texts
  • It supports masks and inverted masks. Maybe other modes will come but it has a huge performance hit.
  • It supports time remapping
  • The script supports shapes, rectangles, ellipses and stars.
  • Expressions. Check the wiki page for more info.
  • Not supported: image sequences, videos and audio are not supported
  • No negative layer stretching! No idea why, but stretching a layer messes with all the data.

Development

npm install or bower install first npm start

Notes

  • If you want to modify the parser or the player, there are some gulp commands that can simplify the task
  • look at the great animations exported on codepen See examples on codepen.
  • gzipping the animation jsons and the player have a huge reduction on the filesize. I recommend doing it if you use it for a project.

Issues

  • For missing mask in Safari browser, please call lottie.setLocationHref(locationHref) before animation is generated. It usually caused by usage of base tag in html. (see above for description of setLocationHref)

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

lottie-web's People

Contributors

0legg avatar aaronshim avatar alexjlockwood avatar alit3 avatar bodymovin avatar chrissi2812 avatar d34thwings avatar gamote avatar geomaster avatar grifotv avatar hernan-dev avatar iceli avatar itsmattsoria avatar john-preston avatar knenkne avatar kwilliams-curago avatar lencioni avatar manan-jadhav avatar mbasaglia avatar oguz3 avatar radiovisual avatar renspoesse avatar russbot avatar shaafiee avatar shidhincr avatar sliva0 avatar snorpey avatar spassvogel avatar talsafran avatar tomhoenderdos avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

lottie-web's Issues

Rounded rectangle issue

Hello there again. Like your plugin a lot. I have some issue with newest release. When I use parametric shape in AE, and I want to animate between circle to square using rounded rectangle, I end up with strange shape in between (circle part of animations. It looks like not complete rounding, more like some rectangle with soften edges) I didn't try with bezier path because takes some time to convert (i loose keyframes so I have to do it manually, frame by frame copying path).
One more thing what I wanted to ask is, When I use stroke and dash with offset, it does not recognize it. I don't know the background of that issue, but if not possible and there is workaround, please let me know how!
Also, I would like to contribute somehow, but I'm not a programmer, I'm designer. If you want me to design new UI for the plugin panel, just let me know ;) I would be glad to help :)

player controls

First of all: You're a hero. I think this is a great tool for animatiors/webdesigners that is very promising.

I am struggling with getting the player to work for me. I like using the data-attributes for specifying the animationdata etc. But I would still like to control the playing of the animation in javascript/jquery

For instance. I would like to play the animation once when the element is hovered. How would you go about doing that. I cannot seem to get the bodymovin.play('[data name value]') to work. on for example:

<div id="logo_reveal" class="bodymovin" data-animation-path="/library/animations/botoboto_reveal/" data-anim-type="svg" data-anim-loop="false" data-name="logoreveal"></div>

$('body').on('hover', '#logo_reveal', function(){
 bodymovin.play('logoreveal');
});

Am I forgetting something?

README :

Just to let you know for the installation process that you've got a problem on MAC there is a corrected version of your readme :

Option 1:

1 - Extract the bodymin.zip folder
2 - Open your terminal and copy past this line :

cp -R YOURUNZIPEDFOLDERPATH/extension /Library/Application\ Support/Adobe/CEP/extensions/bodymovin

BE CAREFULL THIS FOLDER WITH THE ~ IS A DIFFERENT FOLDER : ~/Library/Application Support/ DON'T USE THE ~

and type copy past this line to double check if your folder has been created.

ls /Library/Application\ Support/Adobe/CEP/extensions/bodymovin

Close After Effects

Edit the registry key: On Mac, open the file ~/Library/Preferences/com.adobe.CSXS.6.plist and use xcode to add a row with the key PlayerDebugMode, of type String, and value 1.

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Hello! First of all, thank you for the great plug-in. It's a great tool for the designers knowing little of coding (like myself) to finally be able to integrate their animation on the web.
I'm having an issue whenever i try to play back my animation in the browser. Browser console is returning me "Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource." error.
I am unfortunately getting the same error whenever trying to playback instance animations from the plug-in's demo folder so I can't really tell what is the error here.
Could it be windows 10 compatibility issues or due to the wrong installation?
Please, give me a suggestion as I am getting lost finding another solution.

"Failed to install" message using ExManCmd

Adobe CC 2015
OS X Yosemite 10.10.5

I'm getting an error message whenever I follow the instructions to use the ExManCmd utility:

Failed to install, status = -160!

It's not on their error message page.

I made sure to run the correct command from their instructions:

./Contents/MacOS/ExManCmd --install .zxp

Adobe instructions page: https://helpx.adobe.com/x-productkb/global/installingextensionsandaddons.html
Error page: https://helpx.adobe.com/extension-manager/using/extension-manager-error-code-reference.html

Any ideas?

Android implementation

Just curious, if this generates SVG for web.
How hard would be to convert SVG generator into java/android and render it there by some SVG lib ?

Exporting has missing attributes, breaks player

Hi,

we're trying to get the plugin working (with CC2015) but the exported json seems to be missing the attributes layerNameand an

Can you tell us if we're trying to export a wrong scene/composition or if this is a bug in the exporter.

Original export JSON here:

"animation": {
        "layers": [{
            "ind": 0,
            "ty": "ShapeLayer",
            "ks": {
                "o": 100,
                "r": 0,
                "p": [{
                    "i": {"x": 0.833, "y": 0.833},
                    "o": {"x": 0.167, "y": 0.167},
                    "n": "0p833_0p833_0p167_0p167",
                    "t": 0,
                    "s": [250, 392, 0],
                    "e": [250, 101, 0],
                    "to": [0, -48.5, 0],
                    "ti": [0, 48.5, 0]
                }, {"t": 60.0000024438501}],
                "a": [0, 0, 0],
                "s": [100, 100, 100]
            },
            "shapes": [{
                "ty": "gr",
                "it": [{"d": 1, "ty": "el", "s": [54, 54], "p": [0, 0]}, {
                    "ty": "st",
                    "fillEnabled": true,
                    "c": [255, 0, 0, 255],
                    "o": 100,
                    "w": 5,
                    "lc": 1,
                    "lj": 1,
                    "ml": 4
                }, {"ty": "fl", "fillEnabled": true, "c": [18, 255, 0, 255], "o": 100}, {
                    "ty": "tr",
                    "p": [0, 0],
                    "a": [0, 0],
                    "s": [100, 100],
                    "r": 0,
                    "o": 100
                }]
            }],
            "inPoint": 0,
            "outPoint": 156.00000635401,
            "startTime": 0
        }], "totalFrames": 60.0000024438501, "frameRate": 29.9700012207031, "ff": 0, "compWidth": 500, "compHeight": 500
    }, "assets": [], "v": "2.1.1"

No animation using AE CC 2015 + OSX

I've created a simple movement animation using After Effects CC 2015 on Mac Yosemite (10.10.3), and I am unable to get any animation to play. I can see the first screen of the animation, but it never animates.

I've also tried plugging in the exported data.js file directly into working examples without any luck.

totalFrames not being an integer

I noticed that sometimes totalFrames into the data.json isn't always an integer, and so it breaks the JS. Editing the value (to an integer) into the json file seems to fix the problem.

Exported data.json file has no animation attributes

I'm trying to get started with bodymovin, but when I try to export a simple comp (1 shape layer with position keyframes) the resulting data.json file has nothing in the "animation:" brackets and I can't seem to get any animations to play in the test environment. Wondering if I'm missing something simple?

Play one json file in segments?

Is there any way I can output my timeline into 1 .json, then break it up into segments?

For example:

  • Have a 6 second animation @ 180 frames (180f)
  • Export entire animation to 1 .json file.
  • Import and load player and generated .json
  • Loop 0f-50f in #element1
  • Loop 50f-100f in #element2
  • Loop 100f-180f in #element3

Just trying to keep everything as lightweight as possible! Thanks in advance for any help you can provide. This extension is amazing. You're doing phenomenal work.

looping

I don't think is possible to do it right now, but would be great to being able to loop just a part of the animation, not the whole thing. I currently have a flag animation that rises and them it waves. I think would be better to being able to loop just the "waving" part of the animation instead of having 2 different animations and loop just the second one.

Does it makes sense ?

Masks no longer supported? 3.1.7

Since updating to V3.1.7 on CC2015 13.6, I'm having trouble with the outputs.

I seem to need to convert every shape path to bezier.

Also masks don't seem to be working - this is evident in the bodymovin example where the second O (the one that's vomiting) doesn't preview properly.

Rending out a project that worked previously, now seems to ignore all the mask data.

Browser Support

Do you know which browsers support the technology bodymovin uses to animate svgs? It would be nice to list that in the readme.

bodymovin player not working with new exports.

All new exports we create do not work with the current player.

First we are seeing a discrepancy between the exports we are creating and shown in the examples.

  • demo/bodymovin/data.json has a different base structure than when we run the generated code.
    demo/bodymovin/data.json {animation:{layers:[], ,"ip":0,"op":103,"fr":30,"w":1820,"h":275}}
    our export {animation:{layers:[], ,"totalFrames": 261,"frameRate": 25,"ff": 0,"compWidth": 1920,"compHeight": 1080}}

The player in the demo just breaks with our exports. Using the player from http://lab.nearpod.com/bodymovin/demo/bocas/bodymovin.js works fine.

Are we missing something?

Playhead control

Curious if there is anything like the following is in place:

animation.goToAndPlay( 24 );          // Frame
animation.goToAndPlayPerc( 0.5 );     // Percentage
animation.goToAndPlayMarker( "4" );   // After Effects Composition marker

animation.goToAndStop( 24 );             // Frame
animation.goToAndStopPerc( 0.5 );        // Percentage
animation.goToAndStopMarker( "start" );  // After Effects Composition marker

I'd like to help out / create pull request, but as I look at the source code, there are a few things I'm not sure I follow. Maybe a few comments or documentation would help with collaboration. Thanks again, love the project!

Trying to open extension panel fails

Hi, when I try to open the panel with Windows > Extensions > bodymovin, nothing really happens.
Because I see the extension in the menu (http://files.wild.as/sLVu/2U7815Uc) I've probably put it in the right place (Library/Application Support/Adobe/CEP/extensions) though.

Could it be the case that not having AE booted in english causes the panel to not show up? Are there some logs I can post?

I'm really keen on using this thing as it could enhance our workflow drastically! :-)

Help with exporting svg

Hello there. First of all, greatly appreciate your plugin, really helps. Thanks, keep up. I tried using it, really works, although I had to draw manually, without shape blend modes. Here I have one project file
https://www.dropbox.com/s/e62wsfha1catxwq/shape_reveal.aep?dl=0
I cannot see what's the problem, but when I try to export, I get blank screen. Json file is generated. I'm bit confused, because at first, I didn't have constant vertices count through the animation so I manually added them thinking it may cause the problem. I ended up with nothing. Maybe someone can help. Any kind of help/explanation is greatly appreciated. Thanks in advance!

.destroy() method issue

There is an issue on the later versions of the javascript file. Im not really sure whats causing it but my animation works fine on the 3.0.8 version.

example:
http://peteringram0.github.io/ninjabot/
https://github.com/peteringram0/ninjabot

If you change bodymovin.js script to the latest version when running .destroy and then .loadAnimation you can see in the DOM that the animation is running however it appears tiny or no images are loading. I have been looking though the commit log from the 29th and cant work out what has caused this.

Any ideas?

Thanks ๐Ÿ‘

Unexpected End of Input

With a somewhat complex animation (moving lots of bezier points), the animations render fine, but when trying to play them in browser, I get the following errors:

Uncaught SyntaxError: Unexpected end of input
i.onreadystatechange @ all.js:4

Uncaught TypeError: Cannot read property 's' of undefined
r @ all.js:1
(anonymous function) @ all.js:1
n @ all.js:1
BaseElement.init @ all.js:2
SVGBaseElement @ all.js:1
IShapeElement @ all.js:1
SVGRenderer.createShape @ all.js:1
SVGRenderer.createItem @ all.js:1
SVGRenderer.buildItems @ all.js:1
AnimationItem.configAnimation @ all.js:4
i.onreadystatechange @ all.js:4

The json file can be found here.

can't refresh

report "Unable to execute script at line 314. p is undefined"

I reinstalled twice, but still not working , don't where was wrong

animation.destroy() clean up

I've noticed running animation.destroy() leaves a lot behind in memory. For instance, consider the following:

Memory Used
Before Animation is Loaded 66mb
After Animation is Loaded 123mb
After animation is Destroyed* 96.5mb

* I force garbage collection to make sure all items are cleaned up

I took a heap snapshot (note that heap snapshots are a bit dense especially if you don't know what you're looking for). I think the largest thing I'm seeing in the heap snapshot is an IImageElement(), but I'm also seeing things like a very long shapes array.

Anywho, we're building a massive project with hundreds of animations, and the memory overhead is really adding up. I am totally available to help troubleshoot and work to fix it, but I'd need some help knowing where to start in the code.

Thanks, this project rocks!

Preloading JSON

Hi,
Excellent work on bodymovin! I am currently rendering out a JSON file for each of my After Effects compositions. Each composition starts & ends with the same frame so when I replace it in the wrapper, it will appear seamless. I am having an issue though - each time I destroy the previous animation, there is a flash of nothing while the next animation loads. Is there a way to preload the JSON so the animations are in memory? I tried loading the JSON into a variable with JQuery, but the path object didn't seem to like that. Thanks!

Convert bodymovin' JSON into SVG film-strip animations

Hey! This isn't really an issue, but I wanted to share a tool I made.

For us animating with javascript on the live site is a no-go, because the CPU is usually busy doing other things while we're trying to animate. To fix this, we use SVG filmstrips that we can animate using CSS and avoid the need for CPU work.

I've made a little tool to export bodymovin animations to filmstrips, https://superhuman-animation.herokuapp.com/player/. Happy to clean up the code a little if you want a pull request (it's at https://github.com/ConradIrwin/bodymovin), otherwise just close this issue :).

Using frames to trigger other items on the page

Hi there,
First off, this extension/library is amazing.

I'm rendering my animation as svgs and I want to be able to use the point in time in the animation to trigger other events (ex: fading in divs) on the page. I've been trying to use the currentFrame property of the animation to measure against, but it seems like I'm having inconsistent playback across computers (same browser, chrome on mac). Just wondering if currentFrame is the best way to measure in order to have other events trigger consistently at the same time across computers with different settings (ie: does playback speed/lag mess this up).

Thanks so much in advance!

Invalid value for <path> - mask issue

Hi there,

I'm using an inverted Add Mask in my comp, but when I load in the JSON, inspector's throwing this error:

Error: Invalid value for <path> attribute d="M0,0 hundefinedvundefinedhNaNvNaN M659.75,505.75 C634.483,505.75 614,526.233 614,551.5 C614,576.767 634.483,597.25 659.75,597.25 C685.017,597.25 705.5,576.767 705.5,551.5 C705.5,526.233 685.017,505.75 659.75,505.75"

Without the mask it works like a charm (this is a fantastic piece of work, by the way), but I'd love to get this hammered out, since that mask's a key part of animation.

Thanks!

WebGL & Canvas2D

It might be nice to build some docs around the JSON output format so that developers could start to build other renderers. In many cases Canvas2D/WebGL will out-perform SVG.

Not Opening

I have installed bodymovin and i can see bodymovin under windows and extentions however clicking on it does not open up any windows.

Im running After effects CC 2015 and have set the network pref's and the registry key.

Any ideas?

Animation Events

Curious if you had any plans on adding animations events. Maybe something like :

# (Coffeescript)
onAnimationComplete = (e)->
  console.log("animation complete")

onEnterFrame = (e)->
  position = e.currentFrame / e.totalFrames
  if position > 0.5
    console.log("animation is halfway complete")

animation.onComplete = onAnimationComplete
animation.onEnterFrame = onEnterFrame

Demos don't work

I downloaded the latest, and I can't seem to get the demos to play. I open the html files in my browser, but nothing happens. It's just a blank gray div.

I ask because I am having a hard time understanding how to set bodymovin up. It would be helpful to have some demos!

Can't install the plugin

Hi everyone,
I'm trying to install this plugin (I really wanna do this) but I can't find the CEP folder you are talking about, searching on internet I understood that is some sort of adobe sdk but I still can't understand how the folder should be created.

thanks for the help

Puppet Tool Support

Are there any plans for bodymovin to support Puppet Tool animation? Looks like anything we render with that doesn't animate. Will post a demo shortly as soon as I can.

What license?

Just curious what the intended license is for this magical bit of code you've written? :)

SVG is just blackbox

Hi,
Bodymovin is fantastic.

I have a bit of a strange issue. I'm using bodymovin with angular - everything works fine when navigating to the main route 'http://mysite.com'.
However, when I load any other route, the SVG just appears as a black box (I can still see it animate), even if I load the exact same template.

any ideas?

Thanks for your help.

Please add some documentation on the code or add comments

I've been trying to make a few adjustments to the bodymovin player for use in one of my projects.

While experimenting with the player, I noticed that it sometimes takes me quite a while to find the right piece of functionality in the code.

I think it would be immensely helpful for developers if there was a little more documentation about what the individual classes are doing, and how they're tied together.

I know this project is evolving very quickly, and the docs tend to get outdated fast, but a little more information on the inner workings of the code would be greatly appreciated.

Thank you :-)

Scaling SVG

Is there a way to control the size after initialization. I want the SVG to scale full screen, but maintain the aspect ratio?

Made After Effects Unusable after installation

After the installation of this plugin, After Effects started crashing and stopped recognizing the source files of the composition. I've been on this computer for the last two weeks, it's brand new and AE had never ever crashed before on this machine. I'm an experienced user of After Effects (6+ years), and I can tell this won't do any good to your machine or your OS.

Do not install this.

I also uninstalled and erased all the folders and files of the plugin, restarted the machine, and AE is so slow as it had never been before... I'm working on the same project of the previous week and it was running ok. I guess I'll have to either restore the system or uninstall/install After Effects again. Pfffffff.

Control Framerate

Hi,

Awesome plugin. But I have question. I would like to control the frame rate of the playback.

Bit confused where to change this.

Editing anim directly doesn't seem to work as it's just the data itself.

I can see that I can change the 'speed ' by using bodymovin.setSpeed(1); but I would like granular control over the frame rate playback?

How is this possible? Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.