SVG is just blackbox about lottie-web HOT 21 CLOSED

@cmisura Hi. Are you using the destoy method when changing routes?
Is the svg container replaced when changing routes?
do you have a demo so I can take a look?

from lottie-web.

No, I don't have a demo up - the project is under-wraps until we launch in October.
When I change routes I'm using scope.$on('$destroy', bodymovin.destroy);

The relevant code is:

HTML
<div svg-animate path="/animations/search_icon.json" scroll-enter on-enter-then="render()" use-boundary="middle"></div>

JS

app.directive('svgAnimate', function ($timeout, $parse, jsonLoader) {
    function svgAnimatePostLink (scope, element, attrs) {
        var animateOpt;
        var pathToJson = attrs.path;
        var handleLoad = function (e, data) {
            animateOpt = {
                wrapper: element[0],
                animType: 'svg',
                loop: false,
                autoplay: false,
                prerender: true,
                animationData: data
            };

            bodymovin.loadAnimation(animateOpt)
            bodymovin.stop();

            scope.render = bodymovin.play;
        };

        jsonLoader.get(pathToJson);

        scope.$on('json-loaded', handleLoad);
        scope.$on('$destroy', bodymovin.destroy);


    }
    return ({
        restrict: 'A',
        link: svgAnimatePostLink
    });
});

from lottie-web.

@cmisura Is it possible that the json-loaded event passes both times the same object with the data?
I did a test on my side and if that is the case, the second time won't load.
Instead of passing the data as an object to handleLoad, try passing it as a string and parse it when creating the animateOpt object.

from lottie-web.

Thanks, I'll try that and let you know how it turns out.

from lottie-web.

@bodymovin Didn't work, still the same issue - and I double checked that the object being loaded is the correct version for each one (image below: this is what I'm seeing)

from lottie-web.

@cmisura When you say you can still see it animate, you mean you can see the svg loaded inside the div? could you send me the json file or a screenshot of the svg markup in the console?

from lottie-web.

@bodymovin Sure thing.

I can see that black box animate ( in the case above contract horizontally). The same json/svg on the home page looks perfect, but on any other route ('/contact', etc) it appears like the screenshot above.

from lottie-web.

@cmisura is the black box a part of the real animation?
Sorry I didn't make myself clear. I wanted a screenshot of the div where the animation is loaded from the chrome developpers tool.
But can you send me also the exported json file?

from lottie-web.

@bodymovin No worries. Here's a screenshot of the DOM -

and here's the exported json

{"animation":{"layers":[{"ind":0,"ty":"SolidLayer","ks":{"o":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":"0p833_0p833_0p167_0p167","t":0,"s":[0],"e":[100]},{"t":4}],"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":[120,48,0],"e":[176.19,48,0],"to":[2.73851156234741,0,0],"ti":[-11.5320377349854,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":17,"s":[176.19,48,0],"e":[200,48,0],"to":[11.3750219345093,0,0],"ti":[-1.43688118457794,0,0]},{"t":20}],"a":[200,48,0],"s":[100,100,100]},"hasMask":true,"masksProperties":[{"cl":true,"inv":false,"mode":"f","pt":{"i":[[0,0],[1.367,-1.366],[-1.367,-1.367],[0,0],[0,0],[0,-1.933],[-1.933,0],[0,0],[0,0],[-1.367,-1.366],[-0.896,0],[-0.684,0.684],[0,0],[1.367,1.367]],"o":[[-1.367,-1.366],[-1.367,1.367],[0,0],[0,0],[-1.933,0],[0,1.933],[0,0],[0,0],[-1.367,1.366],[0.684,0.684],[0.896,0],[0,0],[1.367,-1.367],[0,0]],"v":[[177.322,26.321],[172.371,26.321],[172.371,31.271],[185.771,44.671],[135.862,44.671],[132.362,48.171],[135.862,51.671],[185.771,51.671],[172.371,65.071],[172.371,70.02],[174.846,71.046],[177.322,70.02],[196.697,50.646],[196.697,45.696]]},"o":100}],"width":400,"height":96,"color":"#000000","inPoint":0,"outPoint":4354,"startTime":0},{"ind":1,"ty":"SolidLayer","ks":{"o":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":"0p833_0p833_0p167_0p167","t":0,"s":[0],"e":[100]},{"t":4}],"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":[270,48,0],"e":[223.81,48,0],"to":[-2.73851156234741,0,0],"ti":[11.5320377349854,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":17,"s":[223.81,48,0],"e":[200,48,0],"to":[-11.3750219345093,0,0],"ti":[1.43688118457794,0,0]},{"t":20}],"a":[200,48,0],"s":[100,100,100]},"hasMask":true,"masksProperties":[{"cl":true,"inv":false,"mode":"f","pt":{"i":[[1.933,0],[0,0],[0,0],[1.367,1.367],[1.367,-1.366],[0,0],[-1.367,-1.367],[0,0],[-0.896,0],[-0.684,0.684],[1.367,1.366],[0,0],[0,0],[0,1.933]],"o":[[0,0],[0,0],[1.367,-1.367],[-1.367,-1.366],[0,0],[-1.367,1.367],[0,0],[0.684,0.684],[0.896,0],[1.367,-1.366],[0,0],[0,0],[1.933,0],[0,-1.933]],"v":[[268.388,44.671],[218.479,44.671],[231.879,31.271],[231.879,26.321],[226.928,26.321],[207.553,45.696],[207.553,50.646],[226.928,70.02],[229.404,71.046],[231.879,70.02],[231.879,65.071],[218.479,51.671],[268.388,51.671],[271.888,48.171]]},"o":100}],"width":400,"height":96,"color":"#000000","inPoint":0,"outPoint":4354,"startTime":0}],"totalFrames":94,"frameRate":30,"ff":0,"compWidth":400,"compHeight":96},"assets":[],"v":"2.1.1"}

from lottie-web.

@cmisura ok. It seems that for some reason the masks aren't getting applied to the rects even if the ids look correct.
I'll have to look further into this
just three more questions:

• Have you tried it in another browser?
• Is this behaviour happening even if you navigate directly to this route without coming from the main route?
• Is there another svg or animation in the pages?

from lottie-web.

@bodymovin

1. Yes - same problem
2. Yes
3. No

from lottie-web.

@cmisura does the div have a width and height? can you try setting it a fixed width and height of 400x96?

from lottie-web.

@bodymovin Yup, it does have an explicit width and height. If I switch templates, for example, use 'contact.html' for the home route, then everything works on the offending template - I'm assuming it has something to do with the route, but unsure what it is.

from lottie-web.

@cmisura Is the DOM different between two different routes?

from lottie-web.

@bodymovin No, I can use the same template - and on '/' bodymovin works, but on '/contact' it doesn't

from lottie-web.

@cmisura wow that's really strange. I would try to do a console.log on the handleLoad function to see if it gets called more than once.
Another possibility to debug would be to set a random timeout with at least a 3s offset on bodymovin.loadAnimation(animateOpt) to see if it animates first well and gets overriden afterwards.

from lottie-web.

@bodymovin ok, I'll try that. Thanks for your help.

from lottie-web.

@cmisura are you using html5 mode?
I think the issue is related to this:
https://github.com/jeffbcross/angular-svg-base

from lottie-web.

@cmisura here's a thread on angular talking about this
angular/angular.js#8934

from lottie-web.

@bodymovin Thanks, that solved the issue - I needed to use $locationProvider.html5Mode({enabled: true, requireBase: false}); instead of $locationProvider.html5Mode(true);

from lottie-web.

@cmisura great. I'll add on my side a param to use full paths instead of relative paths on the animations.

from lottie-web.